diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index 1ba0b18f66b47..8ae6d851a3d9b 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -352,22 +352,19 @@ table {
   text-align: center;
   font-family: "Roboto", Helvetica, Arial, sans-serif;
   transition: all 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
-  whitespace: nowrap; }
+  whitespace: nowrap;
+  /**
+   * 1. Apply margin to all but last item in the flex.
+   */ }
   .kuiButton.kuiButton--small {
     height: 32px; }
   .kuiButton .kuiButton__icon {
-    vertical-align: -2px;
     fill: #0079a5; }
   .kuiButton .kuiButton__content {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-    -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-            flex-direction: row;
     -webkit-box-pack: center;
     -webkit-justify-content: center;
         -ms-flex-pack: center;
@@ -377,7 +374,8 @@ table {
         -ms-flex-align: center;
             align-items: center; }
     .kuiButton .kuiButton__content > * + * {
-      margin-left: 8px; }
+      margin-left: 8px;
+      /* 1 */ }
   .kuiButton:hover, .kuiButton:focus {
     text-decoration: underline;
     background-color: rgba(0, 121, 165, 0.1); }
@@ -420,23 +418,6 @@ table {
     .kuiButton--secondary.kuiButton--fill .kuiButton__icon {
       fill: #FFF; }
 
-.kuiButton--danger {
-  color: #A30000;
-  border-color: #A30000; }
-  .kuiButton--danger .kuiButton__icon {
-    fill: #A30000; }
-  .kuiButton--danger:hover, .kuiButton--danger:focus {
-    background-color: rgba(163, 0, 0, 0.1); }
-  .kuiButton--danger.kuiButton--fill {
-    background-color: #A30000;
-    color: #FFF;
-    border-color: #A30000; }
-    .kuiButton--danger.kuiButton--fill:hover, .kuiButton--danger.kuiButton--fill:focus {
-      background-color: #8a0000;
-      border-color: #8a0000; }
-    .kuiButton--danger.kuiButton--fill .kuiButton__icon {
-      fill: #FFF; }
-
 .kuiButton--warning {
   color: #E5830E;
   border-color: #E5830E; }
@@ -454,6 +435,23 @@ table {
     .kuiButton--warning.kuiButton--fill .kuiButton__icon {
       fill: #FFF; }
 
+.kuiButton--danger {
+  color: #A30000;
+  border-color: #A30000; }
+  .kuiButton--danger .kuiButton__icon {
+    fill: #A30000; }
+  .kuiButton--danger:hover, .kuiButton--danger:focus {
+    background-color: rgba(163, 0, 0, 0.1); }
+  .kuiButton--danger.kuiButton--fill {
+    background-color: #A30000;
+    color: #FFF;
+    border-color: #A30000; }
+    .kuiButton--danger.kuiButton--fill:hover, .kuiButton--danger.kuiButton--fill:focus {
+      background-color: #8a0000;
+      border-color: #8a0000; }
+    .kuiButton--danger.kuiButton--fill .kuiButton__icon {
+      fill: #FFF; }
+
 .kuiButton--disabled {
   color: #c5c5c5;
   border-color: #c5c5c5; }
@@ -482,6 +480,71 @@ table {
     -webkit-transform: translateY(2px);
             transform: translateY(2px); } }
 
+.kuiCallOut {
+  padding: 16px 24px;
+  border-left: 4px solid #0079a5;
+  background-color: rgba(0, 121, 165, 0.1);
+  /* 1 */ }
+
+.kuiCallOut--success {
+  border-color: #00A69B;
+  background-color: rgba(0, 166, 155, 0.1); }
+  .kuiCallOut--success .kuiCallOutHeader__icon {
+    fill: #00A69B; }
+  .kuiCallOut--success .kuiCallOutHeader__title {
+    color: #00A69B; }
+
+.kuiCallOut--warning {
+  border-color: #E5830E;
+  background-color: rgba(229, 131, 14, 0.1); }
+  .kuiCallOut--warning .kuiCallOutHeader__icon {
+    fill: #E5830E; }
+  .kuiCallOut--warning .kuiCallOutHeader__title {
+    color: #E5830E; }
+
+.kuiCallOut--danger {
+  border-color: #A30000;
+  background-color: rgba(163, 0, 0, 0.1); }
+  .kuiCallOut--danger .kuiCallOutHeader__icon {
+    fill: #A30000; }
+  .kuiCallOut--danger .kuiCallOutHeader__title {
+    color: #A30000; }
+
+/**
+ * 1. Align icon with first line of title text if it wraps.
+ * 2. Apply margin to all but last item in the flex.
+ */
+.kuiCallOutHeader {
+  margin-bottom: 9px;
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 24px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: baseline;
+  -webkit-align-items: baseline;
+      -ms-flex-align: baseline;
+          align-items: baseline;
+  /* 1 */ }
+  .kuiCallOutHeader > * + * {
+    margin-left: 8px;
+    /* 2 */ }
+
+/**
+   * 1. Vertically center icon with first line of title.
+   */
+.kuiCallOutHeader__icon {
+  fill: #0079a5;
+  -webkit-transform: translateY(2px);
+          transform: translateY(2px);
+  /* 1 */ }
+
+.kuiCallOutHeader__title {
+  font-weight: 500;
+  color: #0079a5; }
+
 .kuiHeader {
   display: -webkit-box;
   display: -webkit-flex;
@@ -675,12 +738,14 @@ table {
 
 .kuiIcon {
   display: inline-block;
-  fill: #3F3F3F;
   vertical-align: middle; }
   .kuiIcon:focus {
     opacity: 1;
     background: #e6f2f6; }
 
+.kuiIcon--basic {
+  fill: #3F3F3F; }
+
 .kuiIcon--medium {
   width: 16px;
   height: 16px; }
@@ -1490,3 +1555,28 @@ table {
   line-height: 24px;
   color: #3F3F3F;
   font-weight: 400; }
+
+.kuiText--small {
+  font-size: 14px;
+  font-size: 0.875rem;
+  line-height: 18px;
+  color: #3F3F3F;
+  font-weight: 400; }
+
+.kuiVerticalRhythm {
+  margin-bottom: 12px; }
+
+.kuiVerticalRhythm--xSmall {
+  margin-bottom: 9px; }
+
+.kuiVerticalRhythm--small {
+  margin-bottom: 9px; }
+
+.kuiVerticalRhythm--large {
+  margin-bottom: 18px; }
+
+.kuiVerticalRhythm--xLarge {
+  margin-bottom: 24px; }
+
+.kuiVerticalRhythm--xxLarge {
+  margin-bottom: 36px; }
diff --git a/ui_framework/doc_site/src/components/guide_code/_guide_code.scss b/ui_framework/doc_site/src/components/guide_code/_guide_code.scss
index 8ae357af031de..16900a97e2f20 100644
--- a/ui_framework/doc_site/src/components/guide_code/_guide_code.scss
+++ b/ui_framework/doc_site/src/components/guide_code/_guide_code.scss
@@ -1,6 +1,6 @@
 .guideCode {
-  padding: 2px 4px;
+  padding: 0 0.25em;
   font-family: 'Roboto Mono', monospace;
-  background-color: #e8e8e8;
-  color: #565656;
+  color: #000000;
+  font-size: 0.9em
 }
diff --git a/ui_framework/doc_site/src/services/routes/routes.js b/ui_framework/doc_site/src/services/routes/routes.js
index 337bacc441bb6..39b6b154f4217 100644
--- a/ui_framework/doc_site/src/services/routes/routes.js
+++ b/ui_framework/doc_site/src/services/routes/routes.js
@@ -6,6 +6,9 @@ import AccessibilityExample
 import ButtonExample
   from '../../views/button/button_example';
 
+import CallOutExample
+  from '../../views/call_out/call_out_example';
+
 import IconExample
   from '../../views/icon/icon_example';
 
@@ -42,6 +45,9 @@ import TabsExample
 import TypographyExample
   from '../../views/typography/typography_example';
 
+import VerticalRhythmExample
+  from '../../views/vertical_rhythm/vertical_rhythm_example';
+
 // Component route names should match the component name exactly.
 const components = [{
   name: 'Accessibility',
@@ -52,13 +58,17 @@ const components = [{
   component: ButtonExample,
   hasReact: true,
 }, {
-  name: 'Icon',
-  component: IconExample,
+  name: 'CallOut',
+  component: CallOutExample,
   hasReact: true,
 }, {
   name: 'Header',
   component: HeaderExample,
   hasReact: true,
+}, {
+  name: 'Icon',
+  component: IconExample,
+  hasReact: true,
 }, {
   name: 'KeyPadMenu',
   component: KeyPadMenuExample,
@@ -67,6 +77,10 @@ const components = [{
   name: 'Link',
   component: LinkExample,
   hasReact: true,
+}, {
+  name: 'Loading',
+  component: LoadingExample,
+  hasReact: true,
 }, {
   name: 'Modal',
   component: ModalExample,
@@ -75,10 +89,6 @@ const components = [{
   name: 'Page',
   component: PageExample,
   hasReact: true,
-}, {
-  name: 'Loading',
-  component: LoadingExample,
-  hasReact: true,
 }, {
   name: 'Popover',
   component: PopoverExample,
@@ -95,6 +105,10 @@ const components = [{
   name: 'Typography',
   component: TypographyExample,
   hasReact: true,
+}, {
+  name: 'VerticalRhythm',
+  component: VerticalRhythmExample,
+  hasReact: true,
 }];
 
 const sandboxes = [{
diff --git a/ui_framework/doc_site/src/views/button/button_with_icon.js b/ui_framework/doc_site/src/views/button/button_with_icon.js
index da9168564b3cd..1d78946e52e4a 100644
--- a/ui_framework/doc_site/src/views/button/button_with_icon.js
+++ b/ui_framework/doc_site/src/views/button/button_with_icon.js
@@ -8,7 +8,7 @@ export default () => (
   <div>
     <KuiButton
       onClick={() => window.alert('Button clicked')}
-      icon="arrowUp"
+      iconType="arrowUp"
     >
       Default
     </KuiButton>
@@ -17,7 +17,7 @@ export default () => (
 
     <KuiButton
       fill
-      icon="arrowDown"
+      iconType="arrowDown"
       onClick={() => window.alert('Button clicked')}
     >
       Filled
@@ -26,7 +26,7 @@ export default () => (
     &nbsp;&nbsp;
 
     <KuiButton
-      icon="arrowLeft"
+      iconType="arrowLeft"
       size="small"
       onClick={() => window.alert('Button clicked')}
     >
@@ -36,7 +36,7 @@ export default () => (
     &nbsp;&nbsp;
 
     <KuiButton
-      icon="arrowRight"
+      iconType="arrowRight"
       size="small"
       fill
       onClick={() => window.alert('Button clicked')}
@@ -49,7 +49,7 @@ export default () => (
     <KuiButton
       iconReverse
       onClick={() => window.alert('Button clicked')}
-      icon="arrowUp"
+      iconType="arrowUp"
     >
       Default
     </KuiButton>
@@ -59,7 +59,7 @@ export default () => (
     <KuiButton
       iconReverse
       fill
-      icon="arrowDown"
+      iconType="arrowDown"
       onClick={() => window.alert('Button clicked')}
     >
       Filled
@@ -69,7 +69,7 @@ export default () => (
 
     <KuiButton
       iconReverse
-      icon="arrowLeft"
+      iconType="arrowLeft"
       size="small"
       onClick={() => window.alert('Button clicked')}
     >
@@ -80,7 +80,7 @@ export default () => (
 
     <KuiButton
       iconReverse
-      icon="arrowRight"
+      iconType="arrowRight"
       size="small"
       fill
       onClick={() => window.alert('Button clicked')}
diff --git a/ui_framework/doc_site/src/views/call_out/call_out.js b/ui_framework/doc_site/src/views/call_out/call_out.js
new file mode 100644
index 0000000000000..7960ad477d39b
--- /dev/null
+++ b/ui_framework/doc_site/src/views/call_out/call_out.js
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import {
+  KuiCallOut,
+  KuiLink,
+  KuiText,
+} from '../../../../components';
+
+export default () => (
+  <KuiCallOut
+    title="Check it out, here's a really long title that will wrap within a narrower browser"
+    iconType="search"
+  >
+    <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>
+  </KuiCallOut>
+);
diff --git a/ui_framework/doc_site/src/views/call_out/call_out_example.js b/ui_framework/doc_site/src/views/call_out/call_out_example.js
new file mode 100644
index 0000000000000..dc0dd3368e1eb
--- /dev/null
+++ b/ui_framework/doc_site/src/views/call_out/call_out_example.js
@@ -0,0 +1,107 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideDemo,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
+
+import CallOut from './call_out';
+const callOutSource = require('!!raw!./call_out');
+const callOutHtml = renderToHtml(CallOut);
+
+import Success from './success';
+const successSource = require('!!raw!./success');
+const successHtml = renderToHtml(Success);
+
+import Warning from './warning';
+const warningSource = require('!!raw!./warning');
+const warningHtml = renderToHtml(Warning);
+
+import Danger from './danger';
+const dangerSource = require('!!raw!./danger');
+const dangerHtml = renderToHtml(Danger);
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="CallOut"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: callOutSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: callOutHtml,
+      }]}
+    >
+      <GuideText>
+        Use this CallOut to communicate general information to the user.
+      </GuideText>
+
+      <GuideDemo>
+        <CallOut />
+      </GuideDemo>
+    </GuideSection>
+
+    <GuideSection
+      title="Success"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: successSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: successHtml,
+      }]}
+    >
+      <GuideText>
+        Use this CallOut to notify the user of a succesfully completed action.
+      </GuideText>
+
+      <GuideDemo>
+        <Success />
+      </GuideDemo>
+    </GuideSection>
+
+    <GuideSection
+      title="Warning"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: warningSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: warningHtml,
+      }]}
+    >
+      <GuideText>
+        Use this CallOut to warn the user against decisions they might regret.
+      </GuideText>
+
+      <GuideDemo>
+        <Warning />
+      </GuideDemo>
+    </GuideSection>
+
+    <GuideSection
+      title="Danger"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: dangerSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: dangerHtml,
+      }]}
+    >
+      <GuideText>
+        Use this CallOut to let the user know something went wrong.
+      </GuideText>
+
+      <GuideDemo>
+        <Danger />
+      </GuideDemo>
+    </GuideSection>
+  </GuidePage>
+);
diff --git a/ui_framework/doc_site/src/views/call_out/danger.js b/ui_framework/doc_site/src/views/call_out/danger.js
new file mode 100644
index 0000000000000..42d4583fbff85
--- /dev/null
+++ b/ui_framework/doc_site/src/views/call_out/danger.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import {
+  KuiCallOut,
+  KuiLink,
+  KuiText,
+} from '../../../../components';
+
+export default () => (
+  <KuiCallOut
+    title="Sorry, there was an error"
+    type="danger"
+    iconType="cross"
+  >
+    <KuiText size="small">
+      <p>
+         Now you have to fix it, but maybe <KuiLink href="#">this link can help</KuiLink>.
+      </p>
+    </KuiText>
+  </KuiCallOut>
+);
diff --git a/ui_framework/doc_site/src/views/call_out/success.js b/ui_framework/doc_site/src/views/call_out/success.js
new file mode 100644
index 0000000000000..39ba9d836f239
--- /dev/null
+++ b/ui_framework/doc_site/src/views/call_out/success.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import {
+  KuiCallOut,
+  KuiLink,
+  KuiText,
+} from '../../../../components';
+
+export default () => (
+  <KuiCallOut
+    title="Good news, everyone!"
+    type="success"
+    iconType="user"
+  >
+    <KuiText size="small">
+      <p>
+        I have no news. Which is good! And <KuiLink href="#">here&rsquo;s a link</KuiLink>.
+      </p>
+    </KuiText>
+  </KuiCallOut>
+);
diff --git a/ui_framework/doc_site/src/views/call_out/warning.js b/ui_framework/doc_site/src/views/call_out/warning.js
new file mode 100644
index 0000000000000..d7b9b4ba9955c
--- /dev/null
+++ b/ui_framework/doc_site/src/views/call_out/warning.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import {
+  KuiCallOut,
+  KuiLink,
+  KuiText,
+} from '../../../../components';
+
+export default () => (
+  <KuiCallOut
+    title="Proceed with caution!"
+    type="warning"
+    iconType="help"
+  >
+    <KuiText size="small">
+      <p>
+        Here be dragons. Don&rsquo;t wanna mess with no dragons. And <KuiLink href="#">here&rsquo;s a link</KuiLink>.
+      </p>
+    </KuiText>
+  </KuiCallOut>
+);
diff --git a/ui_framework/doc_site/src/views/header/header.js b/ui_framework/doc_site/src/views/header/header.js
index 943634f7feac4..afb03df8bc394 100644
--- a/ui_framework/doc_site/src/views/header/header.js
+++ b/ui_framework/doc_site/src/views/header/header.js
@@ -84,7 +84,10 @@ export default class extends Component {
   renderSearch() {
     return (
       <KuiHeaderSectionItemButton>
-        <KuiIcon type="search" size="medium" />
+        <KuiIcon
+          type="search"
+          size="medium"
+        />
       </KuiHeaderSectionItemButton>
     );
   }
@@ -92,8 +95,13 @@ export default class extends Component {
   renderUserMenu() {
     const button = (
       <KuiHeaderSectionItemButton onClick={this.onUserMenuButtonClick.bind(this)}>
-        <KuiIcon type="user" size="medium" />
-        <span className="kuiHeader__notification">3</span>
+        <KuiIcon
+          type="user"
+          size="medium"
+        />
+        <span className="kuiHeader__notification">
+          3
+        </span>
       </KuiHeaderSectionItemButton>
     );
 
diff --git a/ui_framework/doc_site/src/views/icon/apps.js b/ui_framework/doc_site/src/views/icon/apps.js
index 01ba7a66f6cd4..f2f979acb4db9 100644
--- a/ui_framework/doc_site/src/views/icon/apps.js
+++ b/ui_framework/doc_site/src/views/icon/apps.js
@@ -3,54 +3,28 @@ import React from 'react';
 import {
   KuiIcon,
 } from '../../../../components';
+const iconTypes = [
+  'dashboardApp',
+  'devToolsApp',
+  'discoverApp',
+  'graphApp',
+  'machineLearningApp',
+  'timelionApp',
+  'visualizeApp',
+];
 
 export default () => (
   <div>
-    <KuiIcon
-      type="dashboardApp"
-      size="xLarge"
-    />
-
-    &nbsp;
-
-    <KuiIcon
-      type="devToolsApp"
-      size="xLarge"
-    />
-
-    &nbsp;
-
-    <KuiIcon
-      type="discoverApp"
-      size="xLarge"
-    />
-
-    &nbsp;
-
-    <KuiIcon
-      type="graphApp"
-      size="xLarge"
-    />
-
-    &nbsp;
-
-    <KuiIcon
-      type="machineLearningApp"
-      size="xLarge"
-    />
-
-    &nbsp;
-
-    <KuiIcon
-      type="timelionApp"
-      size="xLarge"
-    />
-
-    &nbsp;
-
-    <KuiIcon
-      type="visualizeApp"
-      size="xLarge"
-    />
+    {
+      iconTypes.map(iconType => (
+        <span key={iconType}>
+          <KuiIcon
+            type={iconType}
+            size="xLarge"
+          />
+          &nbsp;
+        </span>
+      ))
+    }
   </div>
 );
diff --git a/ui_framework/doc_site/src/views/icon/icons.js b/ui_framework/doc_site/src/views/icon/icons.js
index 5be1700933e34..b7926857de1bb 100644
--- a/ui_framework/doc_site/src/views/icon/icons.js
+++ b/ui_framework/doc_site/src/views/icon/icons.js
@@ -4,40 +4,30 @@ import {
   KuiIcon,
 } from '../../../../components';
 
+const iconTypes = [
+  'apps',
+  'search',
+  'user',
+  'cross',
+  'help',
+  'arrowUp',
+  'arrowDown',
+  'arrowLeft',
+  'arrowRight',
+];
+
 export default () => (
   <div>
-    <KuiIcon type="apps" size="medium" />
-
-    &nbsp;
-
-    <KuiIcon type="search" size="medium" />
-
-    &nbsp;
-
-    <KuiIcon type="user" size="medium" />
-
-    &nbsp;
-
-    <KuiIcon type="cross" size="medium" />
-
-    &nbsp;
-
-    <KuiIcon type="help" size="medium" />
-
-    &nbsp;
-
-    <KuiIcon type="arrowUp" size="medium" />
-
-    &nbsp;
-
-    <KuiIcon type="arrowDown" size="medium" />
-
-    &nbsp;
-
-    <KuiIcon type="arrowLeft" size="medium" />
-
-    &nbsp;
-
-    <KuiIcon type="arrowRight" size="medium" />
+    {
+      iconTypes.map(iconType => (
+        <span key={iconType}>
+          <KuiIcon
+            type={iconType}
+            size="medium"
+          />
+          &nbsp;
+        </span>
+      ))
+    }
   </div>
 );
diff --git a/ui_framework/doc_site/src/views/typography/small_text.js b/ui_framework/doc_site/src/views/typography/small_text.js
new file mode 100644
index 0000000000000..81b6dedbc10ce
--- /dev/null
+++ b/ui_framework/doc_site/src/views/typography/small_text.js
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import {
+  KuiText,
+} from '../../../../components';
+
+export default () => (
+  <KuiText size="small">
+    <p>
+      The quick brown fox jumped over the lazy dog. But the lazy dog wasn't lazy, it was {
+      // react/jsx-closing-tag-location
+      } <strong>just practicing mindfulness</strong>, so really in the long run it was much more {
+      // react/jsx-closing-tag-location
+      } <em>satisfied with its life</em> than that fox was.
+    </p>
+  </KuiText>
+);
diff --git a/ui_framework/doc_site/src/views/typography/typography.js b/ui_framework/doc_site/src/views/typography/typography.js
index 7b38493da33d4..bad1a763042a9 100644
--- a/ui_framework/doc_site/src/views/typography/typography.js
+++ b/ui_framework/doc_site/src/views/typography/typography.js
@@ -7,29 +7,43 @@ import {
 
 export default () => (
   <div>
-    <KuiTitle size="large">
+    <KuiTitle size="large" verticalRhythm>
       <h1>This is the title of the page -- descriptive enough for ya?</h1>
     </KuiTitle>
 
-    <KuiTitle>
+    <KuiTitle verticalRhythm>
       <h2>And this is a section within the page</h2>
     </KuiTitle>
 
-    <KuiTitle size="small">
-      <h3>Note</h3>
+    <KuiTitle size="small" verticalRhythm>
+      <h3>A brief note on lazy dogs and quick foxes</h3>
     </KuiTitle>
 
-    <KuiText>
+    <KuiText verticalRhythm>
       <p>
-        The quick brown fox jumped over the lazy dog.
+        Once upon a time in a land far, far away, a quick brown fox jumped over a lazy dog.
       </p>
     </KuiText>
 
-    <KuiText>
+    <KuiText verticalRhythm>
       <p>
-        But the dog wasn't lazy, it was just
+        But the dog wasn&rsquo;t lazy, it was just
         practicing mindfulness, so it had a greater sense of
-        life-satisfaction than that fox with all its jumping.
+        life-satisfaction than that fox with all its silly jumping.
+      </p>
+    </KuiText>
+
+    <KuiText size="small" verticalRhythm>
+      <p>
+        And from the fox&rsquo;s perspective, life was full of hoops to jump <em>through</em>, low-hanging
+        fruit to jump <em>for</em>, and dead car batteries to jump-<em>start</em>.
+      </p>
+    </KuiText>
+
+    <KuiText size="small" verticalRhythm>
+      <p>
+        So it thought the dog was making a poor life choice by focusing so much on mindfulness.
+        What if its car broke down?
       </p>
     </KuiText>
   </div>
diff --git a/ui_framework/doc_site/src/views/typography/typography_example.js b/ui_framework/doc_site/src/views/typography/typography_example.js
index a0c73ad360954..eea71905a7ae5 100644
--- a/ui_framework/doc_site/src/views/typography/typography_example.js
+++ b/ui_framework/doc_site/src/views/typography/typography_example.js
@@ -3,6 +3,7 @@ import React from 'react';
 import { renderToHtml } from '../../services';
 
 import {
+  GuideCode,
   GuideDemo,
   GuidePage,
   GuideSection,
@@ -30,6 +31,10 @@ import Text from './text';
 const textSource = require('!!raw!./text');
 const textHtml = renderToHtml(Text);
 
+import SmallText from './small_text';
+const smallTextSource = require('!!raw!./small_text');
+const smallTextHtml = renderToHtml(SmallText);
+
 export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
@@ -42,6 +47,11 @@ export default props => (
         code: typographyHtml,
       }]}
     >
+      <GuideText>
+        You can set the <GuideCode>verticalRhythm</GuideCode> prop to automatically create vertical
+        spacing between typographic components.
+      </GuideText>
+
       <GuideDemo>
         <Typography />
       </GuideDemo>
@@ -128,5 +138,24 @@ export default props => (
         <Text />
       </GuideDemo>
     </GuideSection>
+
+    <GuideSection
+      title="Small Text"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: smallTextSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: smallTextHtml,
+      }]}
+    >
+      <GuideText>
+        For less-important paragraphs.
+      </GuideText>
+
+      <GuideDemo>
+        <SmallText />
+      </GuideDemo>
+    </GuideSection>
   </GuidePage>
 );
diff --git a/ui_framework/doc_site/src/views/vertical_rhythm/vertical_rhythm.js b/ui_framework/doc_site/src/views/vertical_rhythm/vertical_rhythm.js
new file mode 100644
index 0000000000000..a7915a47459a1
--- /dev/null
+++ b/ui_framework/doc_site/src/views/vertical_rhythm/vertical_rhythm.js
@@ -0,0 +1,65 @@
+import React from 'react';
+
+import {
+  KuiTitle,
+  KuiText,
+  KuiVerticalRhythm,
+} from '../../../../components';
+
+export default () => (
+  <div>
+    <KuiVerticalRhythm size="xLarge">
+      <KuiTitle size="large">
+        <h1>This is the title of the page -- descriptive enough for ya?</h1>
+      </KuiTitle>
+    </KuiVerticalRhythm>
+
+    <KuiVerticalRhythm size="large">
+      <KuiTitle>
+        <h2>And this is a section within the page</h2>
+      </KuiTitle>
+    </KuiVerticalRhythm>
+
+    <KuiVerticalRhythm>
+      <KuiTitle size="small">
+        <h3>A brief note on lazy dogs and quick foxes</h3>
+      </KuiTitle>
+    </KuiVerticalRhythm>
+
+    <KuiVerticalRhythm>
+      <KuiText>
+        <p>
+          Once upon a time in a land far, far away, a quick brown fox jumped over a lazy dog.
+        </p>
+      </KuiText>
+    </KuiVerticalRhythm>
+
+    <KuiVerticalRhythm>
+      <KuiText>
+        <p>
+          But the dog wasn&rsquo;t lazy, it was just
+          practicing mindfulness, so it had a greater sense of
+          life-satisfaction than that fox with all its silly jumping.
+        </p>
+      </KuiText>
+    </KuiVerticalRhythm>
+
+    <KuiVerticalRhythm size="small">
+      <KuiText size="small">
+        <p>
+          And from the fox&rsquo;s perspective, life was full of hoops to jump <em>through</em>, low-hanging
+          fruit to jump <em>for</em>, and dead car batteries to jump-<em>start</em>.
+        </p>
+      </KuiText>
+    </KuiVerticalRhythm>
+
+    <KuiVerticalRhythm size="small">
+      <KuiText size="small">
+        <p>
+          So it thought the dog was making a poor life choice by focusing so much on mindfulness.
+          What if its car broke down?
+        </p>
+      </KuiText>
+    </KuiVerticalRhythm>
+  </div>
+);
diff --git a/ui_framework/doc_site/src/views/vertical_rhythm/vertical_rhythm_example.js b/ui_framework/doc_site/src/views/vertical_rhythm/vertical_rhythm_example.js
new file mode 100644
index 0000000000000..78ee3692bd054
--- /dev/null
+++ b/ui_framework/doc_site/src/views/vertical_rhythm/vertical_rhythm_example.js
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideDemo,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
+
+import VerticalRhythm from './vertical_rhythm';
+const verticalRhythmSource = require('!!raw!./vertical_rhythm');
+const verticalRhythmHtml = renderToHtml(VerticalRhythm);
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="VerticalRhythm"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: verticalRhythmSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: verticalRhythmHtml,
+      }]}
+    >
+      <GuideText>
+        Use the VerticalRhythm component to create vertical space between typographic elements.
+      </GuideText>
+
+      <GuideDemo>
+        <VerticalRhythm />
+      </GuideDemo>
+    </GuideSection>
+  </GuidePage>
+);
diff --git a/ui_framework/src/components/button/_button.scss b/ui_framework/src/components/button/_button.scss
index f35d19501e08d..4eff8b618dac0 100644
--- a/ui_framework/src/components/button/_button.scss
+++ b/ui_framework/src/components/button/_button.scss
@@ -20,19 +20,19 @@
   }
 
   .kuiButton__icon {
-    vertical-align: -2px;
     fill: $kuiColorPrimary;
   }
 
+  /**
+   * 1. Apply margin to all but last item in the flex.
+   */
   .kuiButton__content {
     display: flex;
-    flex-direction: row;
     justify-content: center;
     align-items: center;
 
-    // Apply margin to all but last item in the flex.
     > * + * {
-      margin-left: $kuiSizeS;
+      margin-left: $kuiSizeS; /* 1 */
     }
   }
 
@@ -61,7 +61,6 @@
   }
 
   &.kuiButton--reverse {
-
     .kuiButton__content {
       flex-direction: row-reverse;
       // Margin gets flipped because of the row-reverse.
@@ -73,12 +72,11 @@
   }
 }
 
-
 // Modifier naming and colors.
 $buttonTypes: (
   secondary: $kuiColorSecondary,
-  danger: $kuiColorDanger,
   warning: $kuiColorWarning,
+  danger: $kuiColorDanger,
   disabled: tintOrShade($kuiTextColor, 70%, 80%)
 );
 
diff --git a/ui_framework/src/components/button/button.js b/ui_framework/src/components/button/button.js
index b199f9de108b5..6390cae4ddf55 100644
--- a/ui_framework/src/components/button/button.js
+++ b/ui_framework/src/components/button/button.js
@@ -2,8 +2,13 @@ import React, {
   Component,
   PropTypes,
 } from 'react';
+
 import classNames from 'classnames';
-import { KuiIcon } from '../../components';
+
+import {
+  ICON_TYPES,
+  KuiIcon,
+} from '../icon';
 
 const typeToClassNameMap = {
   danger: 'kuiButton--danger',
@@ -12,12 +17,13 @@ const typeToClassNameMap = {
   disabled: 'kuiButton--disabled',
 };
 
+export const TYPES = Object.keys(typeToClassNameMap);
+
 const sizeToClassNameMap = {
   small: 'kuiButton--small',
   large: 'kuiButton--large',
 };
 
-export const TYPES = Object.keys(typeToClassNameMap);
 export const SIZES = Object.keys(sizeToClassNameMap);
 
 export class KuiButton extends Component {
@@ -29,7 +35,7 @@ export class KuiButton extends Component {
     const {
       children,
       className,
-      icon,
+      iconType,
       iconReverse,
       type,
       size,
@@ -49,16 +55,16 @@ export class KuiButton extends Component {
     );
 
     // Add an icon to the button if one exists.
-    let buttonIcon = null;
-    if (icon) {
+    let buttonIcon;
+
+    if (iconType) {
       buttonIcon = (
-        <span aria-hidden="true">
-          <KuiIcon
-            className="kuiButton__icon"
-            type={icon}
-            size="medium"
-          />
-        </span>
+        <KuiIcon
+          className="kuiButton__icon"
+          type={iconType}
+          size="medium"
+          aria-hidden="true"
+        />
       );
     }
 
@@ -77,6 +83,7 @@ export class KuiButton extends Component {
 }
 
 KuiButton.propTypes = {
+  iconType: PropTypes.oneOf(ICON_TYPES),
   iconReverse: React.PropTypes.bool,
   fill: React.PropTypes.bool,
   type: PropTypes.oneOf(TYPES),
diff --git a/ui_framework/src/components/call_out/__snapshots__/call_out.test.js.snap b/ui_framework/src/components/call_out/__snapshots__/call_out.test.js.snap
new file mode 100644
index 0000000000000..78d9d9b5af04b
--- /dev/null
+++ b/ui_framework/src/components/call_out/__snapshots__/call_out.test.js.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KuiCallOut is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="kuiCallOut testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="kuiCallOutHeader"
+  >
+    <span
+      class="kuiCallOutHeader__title"
+    />
+  </div>
+</div>
+`;
diff --git a/ui_framework/src/components/call_out/_call_out.scss b/ui_framework/src/components/call_out/_call_out.scss
new file mode 100644
index 0000000000000..64c1948b65bc6
--- /dev/null
+++ b/ui_framework/src/components/call_out/_call_out.scss
@@ -0,0 +1,57 @@
+.kuiCallOut {
+  padding: $kuiSizeM $kuiSizeL;
+  border-left: 4px solid $kuiColorPrimary;
+  background-color: rgba($kuiColorPrimary, 0.1); /* 1 */
+}
+
+// Modifier naming and colors.
+$callOutTypes: (
+  success: $kuiColorSecondary,
+  warning: $kuiColorWarning,
+  danger: $kuiColorDanger,
+);
+
+// Create button modifiders based upon the map.
+@each $name, $color in $callOutTypes {
+  .kuiCallOut--#{$name} {
+    border-color: $color;
+    background-color: rgba($color, 0.1);
+
+    .kuiCallOutHeader__icon {
+      fill: $color;
+    }
+
+    .kuiCallOutHeader__title {
+      color: $color;
+    }
+  }
+}
+
+/**
+ * 1. Align icon with first line of title text if it wraps.
+ * 2. Apply margin to all but last item in the flex.
+ */
+.kuiCallOutHeader {
+  @include kuiVerticalRhythmS;
+  @include kuiFontSizeM;
+
+  display: flex;
+  align-items: baseline; /* 1 */
+
+  > * + * {
+    margin-left: $kuiSizeS; /* 2 */
+  }
+}
+
+  /**
+   * 1. Vertically center icon with first line of title.
+   */
+  .kuiCallOutHeader__icon {
+    fill: $kuiColorPrimary;
+    transform: translateY(2px); /* 1 */
+  }
+
+  .kuiCallOutHeader__title {
+    font-weight: $kuiFontWeightMedium;
+    color: $kuiColorPrimary;
+  }
diff --git a/ui_framework/src/components/call_out/_index.scss b/ui_framework/src/components/call_out/_index.scss
new file mode 100644
index 0000000000000..b5164642953ec
--- /dev/null
+++ b/ui_framework/src/components/call_out/_index.scss
@@ -0,0 +1 @@
+@import 'call_out';
diff --git a/ui_framework/src/components/call_out/call_out.js b/ui_framework/src/components/call_out/call_out.js
new file mode 100644
index 0000000000000..c130a2502c5eb
--- /dev/null
+++ b/ui_framework/src/components/call_out/call_out.js
@@ -0,0 +1,58 @@
+import React, {
+  PropTypes,
+} from 'react';
+
+import classNames from 'classnames';
+
+import {
+  ICON_TYPES,
+  KuiIcon,
+} from '../icon';
+
+const typeToClassNameMap = {
+  success: 'kuiCallOut--success',
+  warning: 'kuiCallOut--warning',
+  danger: 'kuiCallOut--danger',
+};
+
+export const TYPES = Object.keys(typeToClassNameMap);
+
+export const KuiCallOut = ({ title, type, iconType, children, className, ...rest }) => {
+  const classes = classNames('kuiCallOut', typeToClassNameMap[type], className);
+
+  let headerIcon;
+
+  if (iconType) {
+    headerIcon = (
+      <KuiIcon
+        className="kuiCallOutHeader__icon"
+        type={iconType}
+        size="medium"
+        aria-hidden="true"
+      />
+    );
+  }
+
+  return (
+    <div
+      className={classes}
+      {...rest}
+    >
+      <div className="kuiCallOutHeader">
+        {headerIcon}
+
+        <span className="kuiCallOutHeader__title">
+          {title}
+        </span>
+      </div>
+
+      {children}
+    </div>
+  );
+};
+
+KuiCallOut.propTypes = {
+  title: PropTypes.node,
+  iconType: PropTypes.oneOf(ICON_TYPES),
+  type: PropTypes.oneOf(TYPES),
+};
diff --git a/ui_framework/src/components/call_out/call_out.test.js b/ui_framework/src/components/call_out/call_out.test.js
new file mode 100644
index 0000000000000..55a905007a5b5
--- /dev/null
+++ b/ui_framework/src/components/call_out/call_out.test.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { KuiCallOut } from './call_out';
+
+describe('KuiCallOut', () => {
+  test('is rendered', () => {
+    const component = render(
+      <KuiCallOut { ...requiredProps } />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+});
diff --git a/ui_framework/src/components/call_out/index.js b/ui_framework/src/components/call_out/index.js
new file mode 100644
index 0000000000000..5c4c2673f3a69
--- /dev/null
+++ b/ui_framework/src/components/call_out/index.js
@@ -0,0 +1 @@
+export { KuiCallOut } from './call_out';
diff --git a/ui_framework/src/components/icon/__snapshots__/icon.test.js.snap b/ui_framework/src/components/icon/__snapshots__/icon.test.js.snap
index e32af44123775..3bcd88552e428 100644
--- a/ui_framework/src/components/icon/__snapshots__/icon.test.js.snap
+++ b/ui_framework/src/components/icon/__snapshots__/icon.test.js.snap
@@ -17,7 +17,7 @@ exports[`KuiIcon is rendered 1`] = `
 
 exports[`KuiIcon renders size large 1`] = `
 <svg
-  class="kuiIcon kuiIcon--large"
+  class="kuiIcon kuiIcon--basic kuiIcon--large"
 >
   <title>
     search icon
@@ -30,7 +30,7 @@ exports[`KuiIcon renders size large 1`] = `
 
 exports[`KuiIcon renders size medium 1`] = `
 <svg
-  class="kuiIcon kuiIcon--medium"
+  class="kuiIcon kuiIcon--basic kuiIcon--medium"
 >
   <title>
     search icon
@@ -43,7 +43,7 @@ exports[`KuiIcon renders size medium 1`] = `
 
 exports[`KuiIcon renders size xLarge 1`] = `
 <svg
-  class="kuiIcon kuiIcon--xLarge"
+  class="kuiIcon kuiIcon--basic kuiIcon--xLarge"
 >
   <title>
     search icon
@@ -56,7 +56,7 @@ exports[`KuiIcon renders size xLarge 1`] = `
 
 exports[`KuiIcon renders size xxLarge 1`] = `
 <svg
-  class="kuiIcon kuiIcon--xxLarge"
+  class="kuiIcon kuiIcon--basic kuiIcon--xxLarge"
 >
   <title>
     search icon
@@ -69,7 +69,7 @@ exports[`KuiIcon renders size xxLarge 1`] = `
 
 exports[`KuiIcon renders type apps 1`] = `
 <svg
-  class="kuiIcon"
+  class="kuiIcon kuiIcon--basic"
 >
   <title>
     apps icon
@@ -82,7 +82,7 @@ exports[`KuiIcon renders type apps 1`] = `
 
 exports[`KuiIcon renders type arrowDown 1`] = `
 <svg
-  class="kuiIcon"
+  class="kuiIcon kuiIcon--basic"
 >
   <title>
     arrow down icon
@@ -95,7 +95,7 @@ exports[`KuiIcon renders type arrowDown 1`] = `
 
 exports[`KuiIcon renders type arrowLeft 1`] = `
 <svg
-  class="kuiIcon"
+  class="kuiIcon kuiIcon--basic"
 >
   <title>
     arrow left icon
@@ -108,7 +108,7 @@ exports[`KuiIcon renders type arrowLeft 1`] = `
 
 exports[`KuiIcon renders type arrowRight 1`] = `
 <svg
-  class="kuiIcon"
+  class="kuiIcon kuiIcon--basic"
 >
   <title>
     arrow right icon
@@ -121,7 +121,7 @@ exports[`KuiIcon renders type arrowRight 1`] = `
 
 exports[`KuiIcon renders type arrowUp 1`] = `
 <svg
-  class="kuiIcon"
+  class="kuiIcon kuiIcon--basic"
 >
   <title>
     arrow up icon
@@ -134,7 +134,7 @@ exports[`KuiIcon renders type arrowUp 1`] = `
 
 exports[`KuiIcon renders type cross 1`] = `
 <svg
-  class="kuiIcon"
+  class="kuiIcon kuiIcon--basic"
 >
   <title>
     cross icon
@@ -147,7 +147,7 @@ exports[`KuiIcon renders type cross 1`] = `
 
 exports[`KuiIcon renders type dashboardApp 1`] = `
 <svg
-  class="kuiIcon"
+  class="kuiIcon kuiIcon--basic"
 >
   <title>
     dashboard app icon
@@ -160,7 +160,7 @@ exports[`KuiIcon renders type dashboardApp 1`] = `
 
 exports[`KuiIcon renders type devToolsApp 1`] = `
 <svg
-  class="kuiIcon"
+  class="kuiIcon kuiIcon--basic"
 >
   <title>
     dev tools app icon
@@ -173,7 +173,7 @@ exports[`KuiIcon renders type devToolsApp 1`] = `
 
 exports[`KuiIcon renders type discoverApp 1`] = `
 <svg
-  class="kuiIcon"
+  class="kuiIcon kuiIcon--basic"
 >
   <title>
     discover app icon
@@ -186,7 +186,7 @@ exports[`KuiIcon renders type discoverApp 1`] = `
 
 exports[`KuiIcon renders type graphApp 1`] = `
 <svg
-  class="kuiIcon"
+  class="kuiIcon kuiIcon--basic"
 >
   <title>
     graph app icon
@@ -199,7 +199,7 @@ exports[`KuiIcon renders type graphApp 1`] = `
 
 exports[`KuiIcon renders type help 1`] = `
 <svg
-  class="kuiIcon"
+  class="kuiIcon kuiIcon--basic"
 >
   <title>
     help icon
@@ -212,7 +212,7 @@ exports[`KuiIcon renders type help 1`] = `
 
 exports[`KuiIcon renders type kibanaLogo 1`] = `
 <svg
-  class="kuiIcon"
+  class="kuiIcon kuiIcon--basic"
 >
   <title>
     kibana logo icon
@@ -225,7 +225,7 @@ exports[`KuiIcon renders type kibanaLogo 1`] = `
 
 exports[`KuiIcon renders type machineLearningApp 1`] = `
 <svg
-  class="kuiIcon"
+  class="kuiIcon kuiIcon--basic"
 >
   <title>
     machine learning app icon
@@ -238,7 +238,7 @@ exports[`KuiIcon renders type machineLearningApp 1`] = `
 
 exports[`KuiIcon renders type search 1`] = `
 <svg
-  class="kuiIcon"
+  class="kuiIcon kuiIcon--basic"
 >
   <title>
     search icon
@@ -251,7 +251,7 @@ exports[`KuiIcon renders type search 1`] = `
 
 exports[`KuiIcon renders type timelionApp 1`] = `
 <svg
-  class="kuiIcon"
+  class="kuiIcon kuiIcon--basic"
 >
   <title>
     timelion app icon
@@ -264,7 +264,7 @@ exports[`KuiIcon renders type timelionApp 1`] = `
 
 exports[`KuiIcon renders type user 1`] = `
 <svg
-  class="kuiIcon"
+  class="kuiIcon kuiIcon--basic"
 >
   <title>
     user icon
@@ -277,7 +277,7 @@ exports[`KuiIcon renders type user 1`] = `
 
 exports[`KuiIcon renders type visualizeApp 1`] = `
 <svg
-  class="kuiIcon"
+  class="kuiIcon kuiIcon--basic"
 >
   <title>
     visualize app icon
@@ -290,7 +290,7 @@ exports[`KuiIcon renders type visualizeApp 1`] = `
 
 exports[`KuiIcon title defaults to a humanized version of the type 1`] = `
 <svg
-  class="kuiIcon"
+  class="kuiIcon kuiIcon--basic"
 >
   <title>
     dashboard app icon
@@ -303,7 +303,7 @@ exports[`KuiIcon title defaults to a humanized version of the type 1`] = `
 
 exports[`KuiIcon title is rendered 1`] = `
 <svg
-  class="kuiIcon"
+  class="kuiIcon kuiIcon--basic"
 >
   <title>
     a custom title
diff --git a/ui_framework/src/components/icon/_icon.scss b/ui_framework/src/components/icon/_icon.scss
index cc68d4b37bad8..a3c3cd1a85988 100644
--- a/ui_framework/src/components/icon/_icon.scss
+++ b/ui_framework/src/components/icon/_icon.scss
@@ -1,6 +1,5 @@
 .kuiIcon {
   display: inline-block;
-  fill: $kuiTextColor;
   vertical-align: middle;
 
   &:focus {
@@ -9,6 +8,10 @@
   }
 }
 
+.kuiIcon--basic {
+  fill: $kuiTextColor;
+}
+
 .kuiIcon--medium {
   @include size($kuiSizeM);
 }
diff --git a/ui_framework/src/components/icon/assets/help.svg b/ui_framework/src/components/icon/assets/help.svg
index caf8395d4fdf1..b297dc01c5105 100644
--- a/ui_framework/src/components/icon/assets/help.svg
+++ b/ui_framework/src/components/icon/assets/help.svg
@@ -2,7 +2,7 @@
   <defs>
     <path id="help-a" d="M13.6008,12.1863 L12.2428,10.8283 C12.2178,10.8033 12.1848,10.7943 12.1588,10.7723 C12.6888,9.9783 12.9998,9.0263 12.9998,7.9993 C12.9998,6.9743 12.6888,6.0213 12.1588,5.2273 C12.1848,5.2063 12.2178,5.1963 12.2428,5.1713 L13.6008,3.8133 C14.4758,4.9823 14.9998,6.4283 14.9998,7.9993 C14.9998,9.5723 14.4758,11.0183 13.6008,12.1863 L13.6008,12.1863 Z M7.9998,14.9993 C6.4278,14.9993 4.9818,14.4753 3.8138,13.6003 L5.1718,12.2423 C5.1968,12.2173 5.2058,12.1853 5.2268,12.1583 C6.0208,12.6883 6.9738,12.9993 7.9998,12.9993 C9.0258,12.9993 9.9788,12.6883 10.7728,12.1583 C10.7938,12.1853 10.8038,12.2173 10.8288,12.2423 L12.1858,13.6003 C11.0178,14.4753 9.5718,14.9993 7.9998,14.9993 L7.9998,14.9993 Z M2.3988,12.1863 C1.5248,11.0183 0.9998,9.5723 0.9998,7.9993 C0.9998,6.4283 1.5248,4.9823 2.3988,3.8133 L3.7578,5.1713 C3.7818,5.1963 3.8148,5.2063 3.8418,5.2273 C3.3108,6.0213 2.9998,6.9743 2.9998,7.9993 C2.9998,9.0263 3.3108,9.9783 3.8418,10.7723 C3.8148,10.7943 3.7818,10.8033 3.7578,10.8283 L2.3988,12.1863 Z M7.9998,11.9993 C5.7908,11.9993 3.9998,10.2093 3.9998,7.9993 C3.9998,5.7903 5.7908,3.9993 7.9998,3.9993 C10.2088,3.9993 11.9998,5.7903 11.9998,7.9993 C11.9998,10.2093 10.2088,11.9993 7.9998,11.9993 L7.9998,11.9993 Z M7.9998,0.9993 C9.5718,0.9993 11.0178,1.5243 12.1858,2.3993 L10.8288,3.7573 C10.8038,3.7823 10.7938,3.8143 10.7728,3.8413 C9.9788,3.3113 9.0258,2.9993 7.9998,2.9993 C6.9738,2.9993 6.0208,3.3113 5.2268,3.8413 C5.2058,3.8143 5.1968,3.7823 5.1718,3.7573 L3.8138,2.3993 C4.9818,1.5243 6.4278,0.9993 7.9998,0.9993 L7.9998,0.9993 Z M7.9998,-0.0007 C3.5818,-0.0007 -0.0002,3.5823 -0.0002,7.9993 C-0.0002,12.4183 3.5818,15.9993 7.9998,15.9993 C12.4178,15.9993 15.9998,12.4183 15.9998,7.9993 C15.9998,3.5823 12.4178,-0.0007 7.9998,-0.0007 L7.9998,-0.0007 Z"/>
   </defs>
-  <g fill="none" fill-rule="evenodd">
-    <use fill="#404040" xlink:href="#help-a"/>
+  <g fill-rule="evenodd">
+    <use xlink:href="#help-a"/>
   </g>
 </svg>
diff --git a/ui_framework/src/components/icon/icon.js b/ui_framework/src/components/icon/icon.js
index dca1f7adf08e5..2039fd39ca610 100644
--- a/ui_framework/src/components/icon/icon.js
+++ b/ui_framework/src/components/icon/icon.js
@@ -60,11 +60,12 @@ export const SIZES = Object.keys(sizeToClassNameMap);
 export const KuiIcon = ({
   type,
   size,
-  className,
   title,
+  className,
   ...rest,
 }) => {
   const classes = classNames('kuiIcon', className, sizeToClassNameMap[size]);
+
   const titleElement =
     title
     ? <title>{title}</title>
@@ -87,3 +88,7 @@ KuiIcon.propTypes = {
   size: PropTypes.oneOf(SIZES),
   title: PropTypes.string,
 };
+
+KuiIcon.defaultProps = {
+  className: 'kuiIcon--basic',
+};
diff --git a/ui_framework/src/components/icon/index.js b/ui_framework/src/components/icon/index.js
index 78c92351e8825..b3eda53fcf308 100644
--- a/ui_framework/src/components/icon/index.js
+++ b/ui_framework/src/components/icon/index.js
@@ -1,3 +1,4 @@
 export {
   KuiIcon,
+  TYPES as ICON_TYPES,
 } from './icon';
diff --git a/ui_framework/src/components/index.js b/ui_framework/src/components/index.js
index 2bcb6d4de95ea..9bbc84eca51fb 100644
--- a/ui_framework/src/components/index.js
+++ b/ui_framework/src/components/index.js
@@ -6,6 +6,10 @@ export {
   KuiButton,
 } from './button';
 
+export {
+  KuiCallOut,
+} from './call_out';
+
 export {
   KuiHeader,
   KuiHeaderBreadcrumb,
@@ -18,6 +22,7 @@ export {
 } from './header';
 
 export {
+  ICON_TYPES,
   KuiIcon,
 } from './icon';
 
@@ -84,3 +89,7 @@ export {
   KuiTitle,
   KuiText,
 } from './typography';
+
+export {
+  KuiVerticalRhythm,
+} from './vertical_rhythm';
diff --git a/ui_framework/src/components/index.scss b/ui_framework/src/components/index.scss
index 081cd08c7287b..3eb0241d58063 100644
--- a/ui_framework/src/components/index.scss
+++ b/ui_framework/src/components/index.scss
@@ -1,5 +1,6 @@
 @import 'avatar/index';
 @import 'button/index';
+@import 'call_out/index';
 @import 'header/index';
 @import 'icon/index';
 @import 'key_pad_menu/index';
@@ -11,3 +12,4 @@
 @import 'table/index';
 @import 'tabs/index';
 @import 'typography/index';
+@import 'vertical_rhythm/index';
diff --git a/ui_framework/src/components/loading/__snapshots__/loading_kibana.test.js.snap b/ui_framework/src/components/loading/__snapshots__/loading_kibana.test.js.snap
index 33c102b52a3d5..23a3136baf453 100644
--- a/ui_framework/src/components/loading/__snapshots__/loading_kibana.test.js.snap
+++ b/ui_framework/src/components/loading/__snapshots__/loading_kibana.test.js.snap
@@ -10,7 +10,7 @@ exports[`KuiLoadingKibana is rendered 1`] = `
     class="kuiLoadingKibana__icon"
   >
     <svg
-      class="kuiIcon"
+      class="kuiIcon kuiIcon--basic"
     >
       <title>
         kibana logo icon
diff --git a/ui_framework/src/components/page/page_content/page_content.js b/ui_framework/src/components/page/page_content/page_content.js
index 032a3714e9e56..70c7e6a36209c 100644
--- a/ui_framework/src/components/page/page_content/page_content.js
+++ b/ui_framework/src/components/page/page_content/page_content.js
@@ -32,7 +32,7 @@ export const KuiPageContent = ({ verticalPosition, horizontalPosition, children,
   );
 };
 
-KuiPageContent.PropTypes = {
+KuiPageContent.propTypes = {
   verticalPosition: PropTypes.oneOf(VERTICAL_POSITIONS),
   horizontalPosition: PropTypes.oneOf(HORIZONTAL_POSITIONS),
 };
diff --git a/ui_framework/src/components/typography/__snapshots__/typography.test.js.snap b/ui_framework/src/components/typography/__snapshots__/typography.test.js.snap
index 7ba379ea5a622..a5b7c0076be63 100644
--- a/ui_framework/src/components/typography/__snapshots__/typography.test.js.snap
+++ b/ui_framework/src/components/typography/__snapshots__/typography.test.js.snap
@@ -1,13 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KuiText is rendered 1`] = `
-<h1
+<p
   aria-label="aria-label"
   class="kuiText testClass1 testClass2"
   data-test-subj="test subject string"
 >
   Hello
-</h1>
+</p>
+`;
+
+exports[`KuiText renders size small 1`] = `
+<p
+  class="kuiText kuiText--small"
+>
+  Hello
+</p>
 `;
 
 exports[`KuiTitle is rendered 1`] = `
diff --git a/ui_framework/src/components/typography/_typography.scss b/ui_framework/src/components/typography/_typography.scss
index 17fd282e1a794..916077dbe0863 100644
--- a/ui_framework/src/components/typography/_typography.scss
+++ b/ui_framework/src/components/typography/_typography.scss
@@ -17,3 +17,9 @@
   color: $kuiTextColor;
   font-weight: $kuiFontWeightRegular;
 }
+
+.kuiText--small {
+  @include kuiFontSizeS;
+  color: $kuiTextColor;
+  font-weight: $kuiFontWeightRegular;
+}
diff --git a/ui_framework/src/components/typography/typography.js b/ui_framework/src/components/typography/typography.js
index 1e13bbed7588b..393e4b2182f67 100644
--- a/ui_framework/src/components/typography/typography.js
+++ b/ui_framework/src/components/typography/typography.js
@@ -4,15 +4,30 @@ import {
 } from 'react';
 import classNames from 'classnames';
 
-const sizeToClassNameMap = {
+const titleSizeToClassNameMap = {
   small: 'kuiTitle--small',
   large: 'kuiTitle--large',
 };
 
-export const SIZES = Object.keys(sizeToClassNameMap);
+const titleSizeToVerticalRhythmClassNameMap = {
+  small: 'kuiVerticalRhythm',
+  large: 'kuiVerticalRhythm--xLarge',
+};
+
+export const TITLE_SIZES = Object.keys(titleSizeToClassNameMap);
+
+export const KuiTitle = ({ size, verticalRhythm, children, className, ...rest }) => {
+  const verticalRhythmClass =
+    verticalRhythm
+    ? titleSizeToVerticalRhythmClassNameMap[size] || 'kuiVerticalRhythm--large'
+    : undefined;
 
-export const KuiTitle = ({ size, children, className, ...rest }) => {
-  const classes = classNames('kuiTitle', sizeToClassNameMap[size], className);
+  const classes = classNames(
+    'kuiTitle',
+    titleSizeToClassNameMap[size],
+    verticalRhythmClass,
+    className
+  );
 
   const props = {
     className: classes,
@@ -22,13 +37,34 @@ export const KuiTitle = ({ size, children, className, ...rest }) => {
   return cloneElement(children, props);
 };
 
-KuiTitle.PropTypes = {
-  children: PropTypes.node.isRequired,
-  size: PropTypes.oneOf(SIZES),
+KuiTitle.propTypes = {
+  children: PropTypes.element.isRequired,
+  size: PropTypes.oneOf(TITLE_SIZES),
+  verticalRhythm: PropTypes.bool,
+};
+
+const textSizeToClassNameMap = {
+  small: 'kuiText--small',
 };
 
-export const KuiText = ({ children, className, ...rest }) => {
-  const classes = classNames('kuiText', className);
+const textSizeToVerticalRhythmClassNameMap = {
+  small: 'kuiVerticalRhythm--small',
+};
+
+export const TEXT_SIZES = Object.keys(textSizeToClassNameMap);
+
+export const KuiText = ({ size, verticalRhythm, children, className, ...rest }) => {
+  const verticalRhythmClass =
+    verticalRhythm
+    ? textSizeToVerticalRhythmClassNameMap[size] || 'kuiVerticalRhythm'
+    : undefined;
+
+  const classes = classNames(
+    'kuiText',
+    textSizeToClassNameMap[size],
+    verticalRhythmClass,
+    className
+  );
 
   const props = {
     className: classes,
@@ -38,6 +74,8 @@ export const KuiText = ({ children, className, ...rest }) => {
   return cloneElement(children, props);
 };
 
-KuiText.PropTypes = {
-  children: PropTypes.node.isRequired,
+KuiText.propTypes = {
+  children: PropTypes.element.isRequired,
+  size: PropTypes.oneOf(TEXT_SIZES),
+  verticalRhythm: PropTypes.bool,
 };
diff --git a/ui_framework/src/components/typography/typography.test.js b/ui_framework/src/components/typography/typography.test.js
index 4e2d0959e54f0..e218bc5a229df 100644
--- a/ui_framework/src/components/typography/typography.test.js
+++ b/ui_framework/src/components/typography/typography.test.js
@@ -5,7 +5,8 @@ import { requiredProps } from '../../test/required_props';
 import {
   KuiTitle,
   KuiText,
-  SIZES,
+  TITLE_SIZES,
+  TEXT_SIZES,
 } from './typography';
 
 describe('KuiTitle', () => {
@@ -21,7 +22,7 @@ describe('KuiTitle', () => {
   });
 
   describe('renders size', () => {
-    SIZES.forEach(size => {
+    TITLE_SIZES.forEach(size => {
       test(size, () => {
         const component = render(
           <KuiTitle size={size}>
@@ -40,11 +41,26 @@ describe('KuiText', () => {
   test('is rendered', () => {
     const component = render(
       <KuiText { ...requiredProps }>
-        <h1>Hello</h1>
+        <p>Hello</p>
       </KuiText>
     );
 
     expect(component)
       .toMatchSnapshot();
   });
+
+  describe('renders size', () => {
+    TEXT_SIZES.forEach(size => {
+      test(size, () => {
+        const component = render(
+          <KuiText size={size}>
+            <p>Hello</p>
+          </KuiText>
+        );
+
+        expect(component)
+          .toMatchSnapshot();
+      });
+    });
+  });
 });
diff --git a/ui_framework/src/components/vertical_rhythm/__snapshots__/vertical_rhythm.test.js.snap b/ui_framework/src/components/vertical_rhythm/__snapshots__/vertical_rhythm.test.js.snap
new file mode 100644
index 0000000000000..dcd1938b5749a
--- /dev/null
+++ b/ui_framework/src/components/vertical_rhythm/__snapshots__/vertical_rhythm.test.js.snap
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KuiVerticalRhythm is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="kuiVerticalRhythm testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  Hi
+</div>
+`;
+
+exports[`KuiVerticalRhythm renders size large 1`] = `
+<h1
+  class="kuiVerticalRhythm kuiVerticalRhythm--large"
+>
+  hi
+</h1>
+`;
+
+exports[`KuiVerticalRhythm renders size small 1`] = `
+<h1
+  class="kuiVerticalRhythm kuiVerticalRhythm--small"
+>
+  hi
+</h1>
+`;
+
+exports[`KuiVerticalRhythm renders size xLarge 1`] = `
+<h1
+  class="kuiVerticalRhythm kuiVerticalRhythm--xLarge"
+>
+  hi
+</h1>
+`;
+
+exports[`KuiVerticalRhythm renders size xSmall 1`] = `
+<h1
+  class="kuiVerticalRhythm kuiVerticalRhythm--xSmall"
+>
+  hi
+</h1>
+`;
+
+exports[`KuiVerticalRhythm renders size xxLarge 1`] = `
+<h1
+  class="kuiVerticalRhythm kuiVerticalRhythm--xxLarge"
+>
+  hi
+</h1>
+`;
diff --git a/ui_framework/src/components/vertical_rhythm/_index.scss b/ui_framework/src/components/vertical_rhythm/_index.scss
new file mode 100644
index 0000000000000..e2052b88572de
--- /dev/null
+++ b/ui_framework/src/components/vertical_rhythm/_index.scss
@@ -0,0 +1 @@
+@import 'vertical_rhythm';
diff --git a/ui_framework/src/components/vertical_rhythm/_vertical_rhythm.scss b/ui_framework/src/components/vertical_rhythm/_vertical_rhythm.scss
new file mode 100644
index 0000000000000..a9aa9fdee0a52
--- /dev/null
+++ b/ui_framework/src/components/vertical_rhythm/_vertical_rhythm.scss
@@ -0,0 +1,23 @@
+.kuiVerticalRhythm {
+  @include kuiVerticalRhythm;
+}
+
+.kuiVerticalRhythm--xSmall {
+  @include kuiVerticalRhythmXS;
+}
+
+.kuiVerticalRhythm--small {
+  @include kuiVerticalRhythmS;
+}
+
+.kuiVerticalRhythm--large {
+  @include kuiVerticalRhythmL;
+}
+
+.kuiVerticalRhythm--xLarge {
+  @include kuiVerticalRhythmXL;
+}
+
+.kuiVerticalRhythm--xxLarge {
+  @include kuiVerticalRhythmXXL;
+}
diff --git a/ui_framework/src/components/vertical_rhythm/index.js b/ui_framework/src/components/vertical_rhythm/index.js
new file mode 100644
index 0000000000000..840cf509edb2f
--- /dev/null
+++ b/ui_framework/src/components/vertical_rhythm/index.js
@@ -0,0 +1 @@
+export { KuiVerticalRhythm } from './vertical_rhythm';
diff --git a/ui_framework/src/components/vertical_rhythm/vertical_rhythm.js b/ui_framework/src/components/vertical_rhythm/vertical_rhythm.js
new file mode 100644
index 0000000000000..add471e518753
--- /dev/null
+++ b/ui_framework/src/components/vertical_rhythm/vertical_rhythm.js
@@ -0,0 +1,31 @@
+import {
+  cloneElement,
+  PropTypes,
+} from 'react';
+import classNames from 'classnames';
+
+const sizeToClassNameMap = {
+  xSmall: 'kuiVerticalRhythm--xSmall',
+  small: 'kuiVerticalRhythm--small',
+  large: 'kuiVerticalRhythm--large',
+  xLarge: 'kuiVerticalRhythm--xLarge',
+  xxLarge: 'kuiVerticalRhythm--xxLarge',
+};
+
+export const SIZES = Object.keys(sizeToClassNameMap);
+
+export const KuiVerticalRhythm = ({ size, children, className, ...rest }) => {
+  const classes = classNames('kuiVerticalRhythm', sizeToClassNameMap[size], className);
+
+  const props = {
+    className: classes,
+    ...rest,
+  };
+
+  return cloneElement(children, props);
+};
+
+KuiVerticalRhythm.propTypes = {
+  children: PropTypes.node.isRequired,
+  size: PropTypes.oneOf(SIZES),
+};
diff --git a/ui_framework/src/components/vertical_rhythm/vertical_rhythm.test.js b/ui_framework/src/components/vertical_rhythm/vertical_rhythm.test.js
new file mode 100644
index 0000000000000..858dc22d179c8
--- /dev/null
+++ b/ui_framework/src/components/vertical_rhythm/vertical_rhythm.test.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import {
+  KuiVerticalRhythm,
+  SIZES,
+} from './vertical_rhythm';
+
+describe('KuiVerticalRhythm', () => {
+  test('is rendered', () => {
+    const component = render(
+      <KuiVerticalRhythm { ...requiredProps }>
+        <div>Hi</div>
+      </KuiVerticalRhythm>
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+
+  describe('renders size', () => {
+    SIZES.forEach(size => {
+      test(size, () => {
+        const component = render(
+          <KuiVerticalRhythm size={size}>
+            <h1>hi</h1>
+          </KuiVerticalRhythm>
+        );
+
+        expect(component)
+          .toMatchSnapshot();
+      });
+    });
+  });
+});
diff --git a/ui_framework/src/global_styling/variables/_typography.scss b/ui_framework/src/global_styling/variables/_typography.scss
index 7618fe39a885e..74a25fbba3afc 100644
--- a/ui_framework/src/global_styling/variables/_typography.scss
+++ b/ui_framework/src/global_styling/variables/_typography.scss
@@ -17,10 +17,12 @@
 }
 
 // Families
+
 $kuiFontFamily: "Roboto", Helvetica, Arial, sans-serif;
 $kuiCodeFontFamily: "Roboto Mono", monospace;
 
 // Font sizes
+
 $kuiFontSize:       $kuiSize;
 
 $kuiFontSizeXS:     12px;
@@ -32,7 +34,23 @@ $kuiFontSizeXXL:    48px;
 
 // Line height
 
-$kuiLineHeight: 1.5 * $kuiFontSize;
+$kuiLineHeight:     1.5 * $kuiFontSize;
+
+$kuiLineHeightXS:   $kuiLineHeight * 0.75;
+$kuiLineHeightS:    $kuiLineHeight * 0.75;
+$kuiLineHeightM:    $kuiLineHeight;
+$kuiLineHeightL:    $kuiLineHeight * 1.5;
+$kuiLineHeightXL:   $kuiLineHeight * 2;
+$kuiLineHeightXXL:  $kuiLineHeight * 3;
+
+// Vertical rhythm
+
+$kuiVerticalRhythmXS: $kuiLineHeightXS * 0.5;
+$kuiVerticalRhythmS: $kuiLineHeightS * 0.5;
+$kuiVerticalRhythmM: $kuiLineHeightM * 0.5;
+$kuiVerticalRhythmL: $kuiLineHeightL * 0.5;
+$kuiVerticalRhythmXL: $kuiLineHeightXL * 0.5;
+$kuiVerticalRhythmXXL: $kuiLineHeightXXL * 0.5;
 
 // Font weights
 
@@ -60,30 +78,56 @@ $kuiFontWeightMedium:   500;
 
 @mixin kuiFontSizeXS {
   @include fontSize($kuiFontSizeXS);
-  line-height: $kuiLineHeight * 0.75;
+  line-height: $kuiLineHeightXS;
 }
 
 @mixin kuiFontSizeS {
   @include fontSize($kuiFontSizeS);
-  line-height: $kuiLineHeight * 0.75;
+  line-height: $kuiLineHeightS;
 }
 
 @mixin kuiFontSizeM {
   @include fontSize($kuiFontSizeM);
-  line-height: $kuiLineHeight;
+  line-height: $kuiLineHeightM;
 }
 
 @mixin kuiFontSizeL {
   @include fontSize($kuiFontSizeL);
-  line-height: $kuiLineHeight * 1.5;
+  line-height: $kuiLineHeightL;
 }
 
 @mixin kuiFontSizeXL {
   @include fontSize($kuiFontSizeXL);
-  line-height: $kuiLineHeight * 2;
+  line-height: $kuiLineHeightXL;
 }
 
 @mixin kuiFontSizeXXL {
   @include fontSize($kuiFontSizeXXL);
-  line-height: $kuiLineHeight * 3;
+  line-height: $kuiLineHeightXXL;
+}
+
+// Vertical rhythm
+
+@mixin kuiVerticalRhythmXS {
+  margin-bottom: $kuiVerticalRhythmXS;
+}
+
+@mixin kuiVerticalRhythmS {
+  margin-bottom: $kuiVerticalRhythmS;
+}
+
+@mixin kuiVerticalRhythm {
+  margin-bottom: $kuiVerticalRhythmM;
+}
+
+@mixin kuiVerticalRhythmL {
+  margin-bottom: $kuiVerticalRhythmL;
+}
+
+@mixin kuiVerticalRhythmXL {
+  margin-bottom: $kuiVerticalRhythmXL;
+}
+
+@mixin kuiVerticalRhythmXXL {
+  margin-bottom: $kuiVerticalRhythmXXL;
 }