diff --git a/ui_framework/dist/ui_framework_theme_dark.css b/ui_framework/dist/ui_framework_theme_dark.css
index 7e76a5876e99b..a8e3d93d7e77b 100644
--- a/ui_framework/dist/ui_framework_theme_dark.css
+++ b/ui_framework/dist/ui_framework_theme_dark.css
@@ -2039,6 +2039,8 @@ table {
 
 /**
  * 1. Allow list to expand as items are added, but cap it at the screen height.
+ * 2. Only show the scroll on hover. Generally, scrolling is bad for toasts.
+ * 3. Allow some padding if a scroll shows up.
  */
 .kuiGlobalToastList {
   display: -webkit-box;
@@ -2058,9 +2060,9 @@ table {
   z-index: 5000;
   bottom: 0;
   right: 0;
-  width: 320px;
-  overflow-x: hidden;
-  overflow-y: scroll;
+  width: 336px;
+  /* 3 */
+  padding-right: 16px;
   max-height: 100vh;
   /* 1 */ }
   .kuiGlobalToastList::-webkit-scrollbar {
@@ -2072,11 +2074,15 @@ table {
     background-clip: content-box; }
   .kuiGlobalToastList::-webkit-scrollbar-track {
     background-color: transparent; }
+  .kuiGlobalToastList:hover {
+    overflow-y: auto;
+    /* 2 */ }
 
 .kuiGlobalToastListItem {
-  margin-bottom: 12px;
-  -webkit-animation: 0.5s kuiShowToast;
-          animation: 0.5s kuiShowToast;
+  margin-bottom: 16px;
+  margin-right: 16px;
+  -webkit-animation: 250ms kuiShowToast cubic-bezier(0.694, 0.0482, 0.335, 1);
+          animation: 250ms kuiShowToast cubic-bezier(0.694, 0.0482, 0.335, 1);
   opacity: 1;
   /**
    * 1. justify-content: flex-end interferes with overflowing content, so we'll use this to push
@@ -2091,49 +2097,66 @@ table {
 
 @-webkit-keyframes kuiShowToast {
   from {
-    -webkit-transform: translateX(30px);
-            transform: translateX(30px);
+    -webkit-transform: translateY(24px) scale(0.9);
+            transform: translateY(24px) scale(0.9);
     opacity: 0; }
   to {
-    -webkit-transform: translateX(0);
-            transform: translateX(0);
+    -webkit-transform: translateY(0) scale(1);
+            transform: translateY(0) scale(1);
     opacity: 1; } }
 
 @keyframes kuiShowToast {
   from {
-    -webkit-transform: translateX(30px);
-            transform: translateX(30px);
+    -webkit-transform: translateY(24px) scale(0.9);
+            transform: translateY(24px) scale(0.9);
     opacity: 0; }
   to {
-    -webkit-transform: translateX(0);
-            transform: translateX(0);
+    -webkit-transform: translateY(0) scale(1);
+            transform: translateY(0) scale(1);
     opacity: 1; } }
 
+@media only screen and (max-width: 768px) {
+  /**
+   * 1. Mobile we make these 100%. Matching change happens on the item as well.
+   */
+  .kuiGlobalToastList {
+    left: 0;
+    padding-left: 16px;
+    width: 100%;
+    /* 1 */ } }
+
 .kuiToast {
   box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
   position: relative;
-  padding: 12px;
+  padding: 16px;
   background-color: #222;
-  border: 1px solid #444; }
+  border: 1px solid #444;
+  width: 100%; }
+  .kuiToast:hover .kuiToast__closeButton,
+  .kuiToast:focus .kuiToast__closeButton {
+    opacity: 1; }
 
 /**
    * 1. Fit button to icon.
    */
 .kuiToast__closeButton {
   position: absolute;
-  top: 4px;
-  right: 4px;
+  top: 16px;
+  right: 16px;
   line-height: 0;
   /* 1 */
   -webkit-appearance: none;
      -moz-appearance: none;
-          appearance: none; }
+          appearance: none;
+  opacity: 0;
+  transition: opacity 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); }
   .kuiToast__closeButton svg {
     fill: #4d4d4d; }
   .kuiToast__closeButton:hover svg {
     fill: #FFF; }
   .kuiToast__closeButton:focus {
-    background-color: #275160; }
+    background-color: #275160;
+    opacity: 1; }
     .kuiToast__closeButton:focus svg {
       fill: #4da1c0; }
 
@@ -2152,11 +2175,14 @@ table {
 /**
  * 1. Align icon with first line of title text if it wraps.
  * 2. Apply margin to all but last item in the flex.
+ * 3. Account for close button.
  */
 .kuiToastHeader {
   font-size: 16px;
   font-size: 1rem;
   line-height: 24px;
+  padding-right: 24px;
+  /* 3 */
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2188,7 +2214,7 @@ table {
   font-weight: 300; }
 
 .kuiToastHeader--withBody {
-  margin-bottom: 9px; }
+  margin-bottom: 12px; }
 
 .kuiTitle {
   font-size: 24px;
diff --git a/ui_framework/dist/ui_framework_theme_light.css b/ui_framework/dist/ui_framework_theme_light.css
index 16ab59bd5a5ea..1237453bc1f39 100644
--- a/ui_framework/dist/ui_framework_theme_light.css
+++ b/ui_framework/dist/ui_framework_theme_light.css
@@ -2039,6 +2039,8 @@ table {
 
 /**
  * 1. Allow list to expand as items are added, but cap it at the screen height.
+ * 2. Only show the scroll on hover. Generally, scrolling is bad for toasts.
+ * 3. Allow some padding if a scroll shows up.
  */
 .kuiGlobalToastList {
   display: -webkit-box;
@@ -2058,9 +2060,9 @@ table {
   z-index: 5000;
   bottom: 0;
   right: 0;
-  width: 320px;
-  overflow-x: hidden;
-  overflow-y: scroll;
+  width: 336px;
+  /* 3 */
+  padding-right: 16px;
   max-height: 100vh;
   /* 1 */ }
   .kuiGlobalToastList::-webkit-scrollbar {
@@ -2072,11 +2074,15 @@ table {
     background-clip: content-box; }
   .kuiGlobalToastList::-webkit-scrollbar-track {
     background-color: transparent; }
+  .kuiGlobalToastList:hover {
+    overflow-y: auto;
+    /* 2 */ }
 
 .kuiGlobalToastListItem {
-  margin-bottom: 12px;
-  -webkit-animation: 0.5s kuiShowToast;
-          animation: 0.5s kuiShowToast;
+  margin-bottom: 16px;
+  margin-right: 16px;
+  -webkit-animation: 250ms kuiShowToast cubic-bezier(0.694, 0.0482, 0.335, 1);
+          animation: 250ms kuiShowToast cubic-bezier(0.694, 0.0482, 0.335, 1);
   opacity: 1;
   /**
    * 1. justify-content: flex-end interferes with overflowing content, so we'll use this to push
@@ -2091,49 +2097,66 @@ table {
 
 @-webkit-keyframes kuiShowToast {
   from {
-    -webkit-transform: translateX(30px);
-            transform: translateX(30px);
+    -webkit-transform: translateY(24px) scale(0.9);
+            transform: translateY(24px) scale(0.9);
     opacity: 0; }
   to {
-    -webkit-transform: translateX(0);
-            transform: translateX(0);
+    -webkit-transform: translateY(0) scale(1);
+            transform: translateY(0) scale(1);
     opacity: 1; } }
 
 @keyframes kuiShowToast {
   from {
-    -webkit-transform: translateX(30px);
-            transform: translateX(30px);
+    -webkit-transform: translateY(24px) scale(0.9);
+            transform: translateY(24px) scale(0.9);
     opacity: 0; }
   to {
-    -webkit-transform: translateX(0);
-            transform: translateX(0);
+    -webkit-transform: translateY(0) scale(1);
+            transform: translateY(0) scale(1);
     opacity: 1; } }
 
+@media only screen and (max-width: 768px) {
+  /**
+   * 1. Mobile we make these 100%. Matching change happens on the item as well.
+   */
+  .kuiGlobalToastList {
+    left: 0;
+    padding-left: 16px;
+    width: 100%;
+    /* 1 */ } }
+
 .kuiToast {
   box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
   position: relative;
-  padding: 12px;
+  padding: 16px;
   background-color: #FFF;
-  border: 1px solid #D9D9D9; }
+  border: 1px solid #D9D9D9;
+  width: 100%; }
+  .kuiToast:hover .kuiToast__closeButton,
+  .kuiToast:focus .kuiToast__closeButton {
+    opacity: 1; }
 
 /**
    * 1. Fit button to icon.
    */
 .kuiToast__closeButton {
   position: absolute;
-  top: 4px;
-  right: 4px;
+  top: 16px;
+  right: 16px;
   line-height: 0;
   /* 1 */
   -webkit-appearance: none;
      -moz-appearance: none;
-          appearance: none; }
+          appearance: none;
+  opacity: 0;
+  transition: opacity 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); }
   .kuiToast__closeButton svg {
     fill: gray; }
   .kuiToast__closeButton:hover svg {
     fill: #000; }
   .kuiToast__closeButton:focus {
-    background-color: #e6f2f6; }
+    background-color: #e6f2f6;
+    opacity: 1; }
     .kuiToast__closeButton:focus svg {
       fill: #0079a5; }
 
@@ -2152,11 +2175,14 @@ table {
 /**
  * 1. Align icon with first line of title text if it wraps.
  * 2. Apply margin to all but last item in the flex.
+ * 3. Account for close button.
  */
 .kuiToastHeader {
   font-size: 16px;
   font-size: 1rem;
   line-height: 24px;
+  padding-right: 24px;
+  /* 3 */
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2188,7 +2214,7 @@ table {
   font-weight: 300; }
 
 .kuiToastHeader--withBody {
-  margin-bottom: 9px; }
+  margin-bottom: 12px; }
 
 .kuiTitle {
   font-size: 24px;
diff --git a/ui_framework/doc_site/src/components/guide/_guide.scss b/ui_framework/doc_site/src/components/guide/_guide.scss
index b366f6da7317d..19ea433f4c2d1 100644
--- a/ui_framework/doc_site/src/components/guide/_guide.scss
+++ b/ui_framework/doc_site/src/components/guide/_guide.scss
@@ -2,12 +2,7 @@
   height: 100%;
 }
 
-/**
- * 1. Expand container to fit the page if the content is shorter than the page, or expand with the
- *    content if it's taller than the page.
- */
 .guide {
-  display: flex;
   min-height: 100%; /* 1 */
 }
 
diff --git a/ui_framework/doc_site/src/views/toast/danger.js b/ui_framework/doc_site/src/views/toast/danger.js
index 7f45694851be5..f52b2690c679a 100644
--- a/ui_framework/doc_site/src/views/toast/danger.js
+++ b/ui_framework/doc_site/src/views/toast/danger.js
@@ -8,14 +8,12 @@ import {
 
 export default () => (
   <KuiToast
-    title="Check it out, here's a really long title that will wrap within a narrower browser"
+    title="Save failed"
     type="danger"
-    iconType="user"
   >
     <KuiText size="small" verticalRhythm>
       <p>
-        Here&rsquo;s some stuff that you need to know. We can make this text really long so that,
-        when viewed within a browser that&rsquo;s fairly narrow, it will wrap, too.
+        Check your form for validation errors.
       </p>
     </KuiText>
 
diff --git a/ui_framework/doc_site/src/views/toast/default.js b/ui_framework/doc_site/src/views/toast/default.js
index a5a8d4ca00464..f8cd29f0475a5 100644
--- a/ui_framework/doc_site/src/views/toast/default.js
+++ b/ui_framework/doc_site/src/views/toast/default.js
@@ -1,7 +1,6 @@
 import React from 'react';
 
 import {
-  KuiLink,
   KuiText,
   KuiToast,
 } from '../../../../components';
@@ -9,30 +8,15 @@ import {
 export default () => (
   <div>
     <KuiToast
-      title="Check it out, here's a really long title that will wrap within a narrower browser"
-      iconType="user"
+      title="Example of a good toast"
       onClose={() => window.alert('Dismiss toast')}
     >
-      <KuiText size="small" verticalRhythm>
-        <p>
-          Here&rsquo;s some stuff that you need to know. We can make this text really long so that,
-          when viewed within a browser that&rsquo;s fairly narrow, it will wrap, too.
-        </p>
-      </KuiText>
-
       <KuiText size="small">
         <p>
-          And some other stuff on another line, just for kicks. And <KuiLink href="#">here&rsquo;s a link</KuiLink>.
+          A good toast message is short and to the point. It should very rarely include multiple
+          paragraphs.
         </p>
       </KuiText>
     </KuiToast>
-
-    <br />
-
-    <KuiToast
-      title="Check it out, here's a really long title that will wrap within a narrower browser"
-      iconType="user"
-      onClose={() => window.alert('Dismiss toast')}
-    />
   </div>
 );
diff --git a/ui_framework/doc_site/src/views/toast/info.js b/ui_framework/doc_site/src/views/toast/info.js
index 74f23b49c7c59..074601214d47c 100644
--- a/ui_framework/doc_site/src/views/toast/info.js
+++ b/ui_framework/doc_site/src/views/toast/info.js
@@ -1,29 +1,23 @@
 import React from 'react';
 
 import {
-  KuiLink,
   KuiText,
   KuiToast,
 } from '../../../../components';
 
 export default () => (
   <KuiToast
-    title="Check it out, here's a really long title that will wrap within a narrower browser"
+    title="Icons should be rare"
     type="info"
-    iconType="discoverApp"
+    iconType="user"
     onClose={() => window.alert('Dismiss toast')}
   >
-    <KuiText size="small" verticalRhythm>
-      <p>
-        Here&rsquo;s some stuff that you need to know. We can make this text really long so that,
-        when viewed within a browser that&rsquo;s fairly narrow, it will wrap, too.
-      </p>
-    </KuiText>
-
     <KuiText size="small">
       <p>
-        And some other stuff on another line, just for kicks. And <KuiLink href="#">here&rsquo;s a link</KuiLink>.
+        Icons should be used rarely. They're good for warnings, but when paired with
+        long titles they look out of place.
       </p>
     </KuiText>
+
   </KuiToast>
 );
diff --git a/ui_framework/doc_site/src/views/toast/success.js b/ui_framework/doc_site/src/views/toast/success.js
index 6ed77c84173fa..a7b4560d503bc 100644
--- a/ui_framework/doc_site/src/views/toast/success.js
+++ b/ui_framework/doc_site/src/views/toast/success.js
@@ -1,27 +1,27 @@
 import React from 'react';
 
 import {
-  KuiLink,
   KuiText,
   KuiToast,
 } from '../../../../components';
 
 export default () => (
   <KuiToast
-    title="Check it out, here's a really long title that will wrap within a narrower browser"
+    title="This is an example of a poor toast title. It's way too long."
     type="success"
     iconType="user"
   >
     <KuiText size="small" verticalRhythm>
       <p>
-        Here&rsquo;s some stuff that you need to know. We can make this text really long so that,
-        when viewed within a browser that&rsquo;s fairly narrow, it will wrap, too.
+        While the layout will adjust properly for wrapping titles, they don't look particularly good.
+        Similarily, don't use a whole lot of text in your body either. At a certain point people won't
+        have enough time to read these things. Like, you probably aren't even reading this now.
       </p>
     </KuiText>
 
     <KuiText size="small">
       <p>
-        And some other stuff on another line, just for kicks. And <KuiLink href="#">here&rsquo;s a link</KuiLink>.
+        You shouldn't even need a second paragraph. Again, we're getting long winded here.
       </p>
     </KuiText>
   </KuiToast>
diff --git a/ui_framework/doc_site/src/views/toast/toast_example.js b/ui_framework/doc_site/src/views/toast/toast_example.js
index 4d6a21ff36d3c..889014e2d7f47 100644
--- a/ui_framework/doc_site/src/views/toast/toast_example.js
+++ b/ui_framework/doc_site/src/views/toast/toast_example.js
@@ -6,6 +6,7 @@ import {
   GuideDemo,
   GuidePage,
   GuideSection,
+  GuideText,
   GuideSectionTypes,
 } from '../../components';
 
@@ -42,7 +43,19 @@ export default props => (
       }]}
     >
       <GuideDemo>
-        <Default />
+        <GuideText>
+          <p>
+            Toasts are small notes that appear in the bottom right of the screen. They should be used for
+            emphemeral, live actions (think "save complete" or "something just finished right now"). They
+            should not be used for historical actions ("your report built 30 minutes ago"). This means that
+            a user should never be greated with toasts when starting a session. Toasts should be brief and
+            avoid long paragraphs of text or titling.
+          </p>
+          <br/>
+        </GuideText>
+        <div style={{ width: 320 }}>
+          <Default />
+        </div>
       </GuideDemo>
     </GuideSection>
 
@@ -57,7 +70,9 @@ export default props => (
       }]}
     >
       <GuideDemo>
-        <Info />
+        <div style={{ width: 320 }}>
+          <Info />
+        </div>
       </GuideDemo>
     </GuideSection>
 
@@ -72,7 +87,9 @@ export default props => (
       }]}
     >
       <GuideDemo>
-        <Success />
+        <div style={{ width: 320 }}>
+          <Success />
+        </div>
       </GuideDemo>
     </GuideSection>
 
@@ -87,7 +104,9 @@ export default props => (
       }]}
     >
       <GuideDemo>
-        <Warning />
+        <div style={{ width: 320 }}>
+          <Warning />
+        </div>
       </GuideDemo>
     </GuideSection>
 
@@ -102,7 +121,9 @@ export default props => (
       }]}
     >
       <GuideDemo>
-        <Danger />
+        <div style={{ width: 320 }}>
+          <Danger />
+        </div>
       </GuideDemo>
     </GuideSection>
   </GuidePage>
diff --git a/ui_framework/doc_site/src/views/toast/warning.js b/ui_framework/doc_site/src/views/toast/warning.js
index f0636dd519135..5fff502e4180f 100644
--- a/ui_framework/doc_site/src/views/toast/warning.js
+++ b/ui_framework/doc_site/src/views/toast/warning.js
@@ -1,28 +1,12 @@
 import React from 'react';
 
 import {
-  KuiLink,
-  KuiText,
   KuiToast,
 } from '../../../../components';
 
 export default () => (
   <KuiToast
-    title="Check it out, here's a really long title that will wrap within a narrower browser"
+    title="Sometimes a title is enough!"
     type="warning"
-    iconType="user"
-  >
-    <KuiText size="small" verticalRhythm>
-      <p>
-        Here&rsquo;s some stuff that you need to know. We can make this text really long so that,
-        when viewed within a browser that&rsquo;s fairly narrow, it will wrap, too.
-      </p>
-    </KuiText>
-
-    <KuiText size="small">
-      <p>
-        And some other stuff on another line, just for kicks. And <KuiLink href="#">here&rsquo;s a link</KuiLink>.
-      </p>
-    </KuiText>
-  </KuiToast>
+  />
 );
diff --git a/ui_framework/src/components/toast/_global_toast_list.scss b/ui_framework/src/components/toast/_global_toast_list.scss
index 214dd9d777e9a..e84db26945804 100644
--- a/ui_framework/src/components/toast/_global_toast_list.scss
+++ b/ui_framework/src/components/toast/_global_toast_list.scss
@@ -1,5 +1,7 @@
 /**
  * 1. Allow list to expand as items are added, but cap it at the screen height.
+ * 2. Only show the scroll on hover. Generally, scrolling is bad for toasts.
+ * 3. Allow some padding if a scroll shows up.
  */
 .kuiGlobalToastList {
   @include kuiScrollBar;
@@ -11,15 +13,19 @@
   z-index: $kuiZToastList;
   bottom: 0;
   right: 0;
-  width: 320px;
-  overflow-x: hidden;
-  overflow-y: scroll;
+  width: $kuiToastWidth + $kuiSize; /* 3 */
+  padding-right: $kuiSize;
   max-height: 100vh; /* 1 */
+
+  &:hover {
+    overflow-y: auto; /* 2 */
+  }
 }
 
 .kuiGlobalToastListItem {
-  margin-bottom: $kuiSizeM;
-  animation: 0.5s kuiShowToast;
+  margin-bottom: $kuiSize;
+  margin-right: $kuiSize;
+  animation: $kuiAnimSpeedNormal kuiShowToast $kuiAnimSlightResistance;
   opacity: 1;
 
   /**
@@ -38,12 +44,24 @@
 
 @keyframes kuiShowToast {
   from {
-    transform: translateX(30px);
+    transform: translateY($kuiSizeL) scale(.9);
     opacity: 0;
   }
 
   to {
-    transform: translateX(0);
+    transform: translateY(0) scale(1);
     opacity: 1;
   }
 }
+
+@include screenXSmall {
+  /**
+   * 1. Mobile we make these 100%. Matching change happens on the item as well.
+   */
+  .kuiGlobalToastList {
+    left: 0;
+    padding-left: $kuiSize;
+    width: 100%; /* 1 */
+  }
+}
+
diff --git a/ui_framework/src/components/toast/_index.scss b/ui_framework/src/components/toast/_index.scss
index 7d2197e77410d..c4b7876770dfb 100644
--- a/ui_framework/src/components/toast/_index.scss
+++ b/ui_framework/src/components/toast/_index.scss
@@ -1,2 +1,4 @@
+$kuiToastWidth: $kuiSize * 20;
+
 @import 'global_toast_list';
 @import 'toast';
diff --git a/ui_framework/src/components/toast/_toast.scss b/ui_framework/src/components/toast/_toast.scss
index f46211d2516df..d561031607e7d 100644
--- a/ui_framework/src/components/toast/_toast.scss
+++ b/ui_framework/src/components/toast/_toast.scss
@@ -2,9 +2,15 @@
   @include kuiBottomShadow;
 
   position: relative;
-  padding: $kuiSizeM;
+  padding: $kuiSize;
   background-color: $kuiColorEmptyShade;
   border: $kuiBorderThin;
+  width: 100%;
+
+  &:hover .kuiToast__closeButton,
+  &:focus .kuiToast__closeButton, {
+    opacity: 1;
+  }
 }
 
   /**
@@ -12,10 +18,12 @@
    */
   .kuiToast__closeButton {
     position: absolute;
-    top: $kuiSizeXS;
-    right: $kuiSizeXS;
+    top: $kuiSize;
+    right: $kuiSize;
     line-height: 0; /* 1 */
     appearance: none;
+    opacity: 0;
+    transition: opacity $kuiAnimSpeedFast $kuiAnimSlightResistance;
 
     svg {
       fill: tintOrShade($kuiTitleColor, 50%, 70%);
@@ -29,6 +37,7 @@
 
     &:focus {
       background-color: $kuiFocusBackgroundColor;
+      opacity: 1;
 
       svg {
         fill: $kuiColorPrimary;
@@ -54,9 +63,11 @@ $toastTypes: (
 /**
  * 1. Align icon with first line of title text if it wraps.
  * 2. Apply margin to all but last item in the flex.
+ * 3. Account for close button.
  */
 .kuiToastHeader {
   @include kuiFontSizeM;
+  padding-right: $kuiSizeL; /* 3 */
 
   display: flex;
   align-items: baseline; /* 1 */
@@ -81,5 +92,5 @@ $toastTypes: (
   }
 
 .kuiToastHeader--withBody {
-  margin-bottom: $kuiVerticalRhythmS;
+  margin-bottom: $kuiSizeM;
 }