diff --git a/src/core_plugins/console/public/src/directives/help.html b/src/core_plugins/console/public/src/directives/help.html
index 5fbb645b095e8f5..e3d07e9990456c1 100644
--- a/src/core_plugins/console/public/src/directives/help.html
+++ b/src/core_plugins/console/public/src/directives/help.html
@@ -1,40 +1,38 @@
-<h2 class="kuiLocalDropdownTitle">Help</h2>
+<h2 class="euiTitle">Help</h2>
 
-<tabset>
-  <tab heading="Request format">
-    <div class="list-group-item list-group-item--noBorder">
+<div class="euiSpacer euiSpacer--m"></div>
+
+<div class="euiPanel euiPanel--paddingLarge">
+  <div class="euiFlexGroup euiFlexGroup--gutterExtraLarge">
+    <div class="euiFlexItem">
+      <h2 class="euiTitle">Request format</h2>
+      <div class="euiSpacer euiSpacer--l"></div>
       You can type one or more requests in the white editor. Console understands requests in a compact format:
       <sense-help-example></sense-help-example>
     </div>
-  </tab>
-  <tab heading="Keyboard tips">
-    <div class="list-group-item list-group-item--noBorder">
-      <dl class="dl-horizontal">
-        <dt></dt>
-        <dd><strong>General editing</strong></dd>
-        <dt>Ctrl/Cmd + I</dt>
-        <dd>Auto indent current request</dd>
-        <dt>Ctrl + Space</dt>
-        <dd>Open Auto complete (even if not typing)</dd>
-        <dt>Ctrl/Cmd + Enter</dt>
-        <dd>Submit request</dd>
-        <dt>Ctrl/Cmd + Up/Down</dt>
-        <dd>Jump to the previous/next request start or end.</dd>
-        <dt>Ctrl/Cmd + Alt + L</dt>
-        <dd>Collapse/expand current scope.</dd>
-        <dt>Ctrl/Cmd + Option + 0</dt>
-        <dd>Collapse all scopes but the current one. Expand by adding a shift.</dd>
-      </dl>
-      <dl class="dl-horizontal">
-        <dt></dt>
-        <dd><strong>When auto-complete is visible</strong></dd>
-        <dt>Down arrow</dt>
-        <dd>Switch focus to auto-complete menu. Use arrows to further select a term</dd>
-        <dt>Enter/Tab</dt>
-        <dd>Select the currently selected or the top most term in auto-complete menu</dd>
-        <dt>Esc</dt>
-        <dd>Close auto-complete menu</dd>
+    <div class="euiFlexItem">
+      <h2 class="euiTitle">Keyboard commands</h2>
+      <div class="euiSpacer euiSpacer--l"></div>
+      <dl class="euiDescriptionList euiDescriptionList--row euiDescriptionList--compressed">
+        <dt class="euiDescriptionList__title">Ctrl/Cmd + I</dt>
+        <dd class="euiDescriptionList__description">Auto indent current request</dd>
+        <dt class="euiDescriptionList__title">Ctrl + Space</dt>
+        <dd class="euiDescriptionList__description">Open Auto complete (even if not typing)</dd>
+        <dt class="euiDescriptionList__title">Ctrl/Cmd + Enter</dt>
+        <dd class="euiDescriptionList__description">Submit request</dd>
+        <dt class="euiDescriptionList__title">Ctrl/Cmd + Up/Down</dt>
+        <dd class="euiDescriptionList__description">Jump to the previous/next request start or end.</dd>
+        <dt class="euiDescriptionList__title">Ctrl/Cmd + Alt + L</dt>
+        <dd class="euiDescriptionList__description">Collapse/expand current scope.</dd>
+        <dt class="euiDescriptionList__title">Ctrl/Cmd + Option + 0</dt>
+        <dd class="euiDescriptionList__description">Collapse all scopes but the current one. Expand by adding a shift.</dd>
+        <dt class="euiDescriptionList__title">Down arrow</dt>
+        <dd class="euiDescriptionList__description">Switch focus to auto-complete menu. Use arrows to further select a term</dd>
+        <dt class="euiDescriptionList__title">Enter/Tab</dt>
+        <dd class="euiDescriptionList__description">Select the currently selected or the top most term in auto-complete menu</dd>
+        <dt class="euiDescriptionList__title">Esc</dt>
+        <dd class="euiDescriptionList__description">Close auto-complete menu</dd>
       </dl>
     </div>
-  </tab>
-</tabset>
+  </div>
+</div>
diff --git a/src/core_plugins/console/public/src/directives/welcome.html b/src/core_plugins/console/public/src/directives/welcome.html
index ed612655eddc257..bad5efa578ca0bd 100644
--- a/src/core_plugins/console/public/src/directives/welcome.html
+++ b/src/core_plugins/console/public/src/directives/welcome.html
@@ -1,33 +1,37 @@
-<h2 class="kuiLocalDropdownTitle">Welcome to Console</h2>
-
-<p><strong>Quick intro to the UI</strong></p>
-
-<p>The Console UI is split into two panes: an editor pane (left) and a response pane (right).
-  Use the editor to type requests and submit them to Elasticsearch. The results will be displayed in
-  the response pane on the right side.
-</p>
-
-<p>Console understands requests in a compact format, similar to cURL:
-<sense-help-example></sense-help-example>
-
-<p>While typing a request, Console will make suggestions which you can then accept by hitting Enter/Tab.
-  These suggestions are made based on the request structure <i>as well as</i> your indices and types.
-</p>
-
-<p><strong>A few quick tips, while I have your attention</strong></p>
-<ul>
-  <li>Submit requests to ES using the green triangle button.</li>
-  <li>Use the wrench menu for other useful things.</li>
-  <li>You can paste requests in cURL format and they will be translated to the Console syntax.</li>
-  <li>You can resize the editor and output panes by dragging the separator between them.</li>
-  <li>Study the keyboard shortcuts under the Help button. Good stuff in there!</li>
-</ul>
-
-<button
-  type="button"
-  class="kuiButton kuiButton--primary"
-  data-test-subj="help-close-button"
-  ng-click="kbnTopNav.close()"
->
-  Get to work
-</button>
+<div class="euiText">
+
+  <h2>Welcome to Console</h2>
+
+  <p><strong>Quick intro to the UI</strong></p>
+
+  <p>The Console UI is split into two panes: an editor pane (left) and a response pane (right).
+    Use the editor to type requests and submit them to Elasticsearch. The results will be displayed in
+    the response pane on the right side.
+  </p>
+
+  <p>Console understands requests in a compact format, similar to cURL:
+  <sense-help-example></sense-help-example>
+
+  <p>While typing a request, Console will make suggestions which you can then accept by hitting Enter/Tab.
+    These suggestions are made based on the request structure <i>as well as</i> your indices and types.
+  </p>
+
+  <p><strong>A few quick tips, while I have your attention</strong></p>
+  <ul>
+    <li>Submit requests to ES using the green triangle button.</li>
+    <li>Use the wrench menu for other useful things.</li>
+    <li>You can paste requests in cURL format and they will be translated to the Console syntax.</li>
+    <li>You can resize the editor and output panes by dragging the separator between them.</li>
+    <li>Study the keyboard shortcuts under the Help button. Good stuff in there!</li>
+  </ul>
+
+  <button
+    type="button"
+    class="kuiButton kuiButton--primary"
+    data-test-subj="help-close-button"
+    ng-click="kbnTopNav.close()"
+  >
+    Get to work
+  </button>
+
+</div>
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html
index 2106e3d65fc1639..a55100911d9fd3a 100644
--- a/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html
+++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html
@@ -175,6 +175,7 @@
           class="kuiButton kuiButton--primary kuiButton--fullWidth">
           Add Range
         </div>
+        <div class="euiSpacer euiSpacer--s"></div>
         <div class="text text-center text-info">Note: colors can be changed in the legend</div>
       </div>
     </div>
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html
index be6e928f0f2bcaf..772f8a2b77eacf4 100644
--- a/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html
+++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html
@@ -170,6 +170,7 @@
         >
           Add Range
         </button>
+        <div class="euiSpacer euiSpacer--s"></div>
         <div class="text text-center text-info">Note: colors can be changed in the legend</div>
       </div>
     </div>
diff --git a/src/core_plugins/kibana/public/dashboard/styles/index.less b/src/core_plugins/kibana/public/dashboard/styles/index.less
index 651d28f89eb277c..6f848d07d60a901 100644
--- a/src/core_plugins/kibana/public/dashboard/styles/index.less
+++ b/src/core_plugins/kibana/public/dashboard/styles/index.less
@@ -117,7 +117,7 @@
 .start-screen {
   margin: 20px auto;
   max-width: 800px;
-  background: tint(@globalColorBlue, 90%);
+  background: #FFF;
   padding: 40px;
   border-radius: 4px;
 }
diff --git a/src/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html b/src/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html
index 9306852c1441c7d..bca9a7cc1fd1d13 100644
--- a/src/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html
+++ b/src/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html
@@ -9,13 +9,13 @@
       ></bread-crumbs>
 
       <!-- Tabs. -->
-      <div data-transclude-slot="bottomRow" class="kuiLocalTabs" role="tablist">
+      <div data-transclude-slot="bottomRow" class="euiTabs" role="tablist">
         <a
           role="tab"
           aria-selected="{{kbnDevToolsApp.currentPath === item.url}}"
           ng-repeat="item in kbnDevToolsApp.devTools"
-          class="kuiLocalTab"
-          ng-class="{'kuiLocalTab-isSelected': kbnDevToolsApp.currentPath === item.url}"
+          class="euiTab"
+          ng-class="{'euiTab-isSelected': kbnDevToolsApp.currentPath === item.url}"
           kbn-href="{{::item.url}}"
         >
           {{::item.display}}
diff --git a/src/core_plugins/kibana/public/discover/components/field_chooser/lib/detail_views/string.html b/src/core_plugins/kibana/public/discover/components/field_chooser/lib/detail_views/string.html
index f8597bcf4a6a20f..1b8d80ad573fd7b 100644
--- a/src/core_plugins/kibana/public/discover/components/field_chooser/lib/detail_views/string.html
+++ b/src/core_plugins/kibana/public/discover/components/field_chooser/lib/detail_views/string.html
@@ -1,6 +1,6 @@
 <div class="discover-field-details">
   <div class="kuiVerticalRhythmSmall">
-    <p class="kuiSubduedText" ng-show="!field.details.error">
+    <p class="euiText euiText--extraSmall euiTextColor--subdued" ng-show="!field.details.error">
       Top 5 values in
       <span ng-if="!field.details.error">
         <a
@@ -20,7 +20,7 @@
 
     <div class="clearfix"></div>
 
-    <div ng-if="field.details.error" class="discover-field-details-error">{{field.details.error}}</div>
+    <div ng-if="field.details.error" class="euiText euiText--extraSmall euiTextColor--subdued">{{field.details.error}}</div>
 
     <div ng-if="!field.details.error">
       <div ng-repeat="bucket in ::field.details.buckets" class="discover-field-details-item">
diff --git a/src/core_plugins/kibana/public/discover/index.html b/src/core_plugins/kibana/public/discover/index.html
index 8a979651238bda1..bfa84adcebc8bf6 100644
--- a/src/core_plugins/kibana/public/discover/index.html
+++ b/src/core_plugins/kibana/public/discover/index.html
@@ -65,7 +65,10 @@ <h1 tabindex="0" id="kui_local_breadcrumb" class="kuiLocalBreadcrumb">
           <!-- loading -->
           <div ng-show="resultState === 'loading'">
             <div class="discover-overlay">
-              <h2>Searching</h2>
+              <div class="euiTitle">
+                <h2>Searching</h2>
+              </div>
+              <div class="euiSpacer euiSpacer--m"></div>
               <div ng-show="fetchStatus">{{fetchStatus.complete}}/{{fetchStatus.total}}</div>
             </div>
           </div>
diff --git a/src/core_plugins/kibana/public/discover/partials/no_results.html b/src/core_plugins/kibana/public/discover/partials/no_results.html
index 4ea0ed9d2392012..cf6d64842c589e3 100644
--- a/src/core_plugins/kibana/public/discover/partials/no_results.html
+++ b/src/core_plugins/kibana/public/discover/partials/no_results.html
@@ -1,5 +1,6 @@
-<div>
-  <div class="col-md-10 col-md-offset-1" data-test-subj="discoverNoResults">
+<div class="euiPage">
+
+  <div class="euiText" data-test-subj="discoverNoResults">
 
     <h1>No results found <i aria-hidden="true" class="fa fa-meh-o"></i></h1>
 
@@ -63,21 +64,46 @@ <h3>
         The search bar at the top uses Elasticsearch's support for Lucene <a class="kuiLink" documentation-href="query.luceneQuerySyntax" target="_blank" rel="noopener noreferrer">Query String syntax</a>. Let's say we're searching web server logs that have been parsed into a few fields.
       </p>
 
-      <h4>Examples:</h4>
-      Find requests that contain the number 200, in any field:
-      <pre>200</pre>
-
-      Or we can search in a specific field. Find 200 in the status field:
-      <pre>status:200</pre>
-
-      Find all status codes between 400-499:
-      <pre>status:[400 TO 499]</pre>
-
-      Find status codes 400-499 with the extension php:
-      <pre>status:[400 TO 499] AND extension:PHP</pre>
-
-      Or HTML
-      <pre>status:[400 TO 499] AND (extension:php OR extension:html)</pre>
+      <h4>Examples</h4>
+
+      <p>Find requests that contain the number 200, in any field:</p>
+      <div class="euiCodeBlock euiCodeBlock--light euiCodeBlock--paddingSmall">
+        <code class="euiCodeBlock__code">
+          <pre class="euiCodeBlock__pre">200</pre>
+        </code>
+      </div>
+      <div class="euiSpacer euiSpacer--l"></div>
+
+      <p>Or we can search in a specific field. Find 200 in the status field:</p>
+      <div class="euiCodeBlock euiCodeBlock--light euiCodeBlock--paddingSmall">
+        <code class="euiCodeBlock__code">
+          <pre class="euiCodeBlock__pre">status:200</pre>
+        </code>
+      </div>
+      <div class="euiSpacer euiSpacer--l"></div>
+
+      <p>Find all status codes between 400-499:</p>
+      <div class="euiCodeBlock euiCodeBlock--light euiCodeBlock--paddingSmall">
+        <code class="euiCodeBlock__code">
+          <pre class="euiCodeBlock__pre">status:[400 TO 499]</pre>
+        </code>
+      </div>
+      <div class="euiSpacer euiSpacer--l"></div>
+
+      <p>Find status codes 400-499 with the extension php:</p>
+      <div class="euiCodeBlock euiCodeBlock--light euiCodeBlock--paddingSmall">
+        <code class="euiCodeBlock__code">
+          <pre class="euiCodeBlock__pre">status:[400 TO 499] AND extension:PHP</pre>
+        </code>
+      </div>
+      <div class="euiSpacer euiSpacer--l"></div>
+
+      <p>Or HTML</p>
+      <div class="euiCodeBlock euiCodeBlock--light euiCodeBlock--paddingSmall">
+        <code class="euiCodeBlock__code">
+          <pre class="euiCodeBlock__pre">status:[400 TO 499] AND (extension:php OR extension:html)</pre>
+        </code>
+      </div>
     </div>
 
   </div>
diff --git a/src/core_plugins/kibana/public/discover/styles/main.less b/src/core_plugins/kibana/public/discover/styles/main.less
index 62ff94e365e7b56..5f023c5434d0e16 100644
--- a/src/core_plugins/kibana/public/discover/styles/main.less
+++ b/src/core_plugins/kibana/public/discover/styles/main.less
@@ -78,6 +78,7 @@
     bottom: 0;
     right: 0;
     z-index: 20;
+    padding-top: 10px;
 
     opacity: 0.75;
     text-align: center;
@@ -209,10 +210,6 @@
     white-space: nowrap;
   }
 
-  .discover-field-details-error {
-    margin-top: 5px;
-  }
-
   .discover-field-details-item {
     margin-top: 5px;
   }
@@ -222,6 +219,7 @@
   }
 
   .discover-field-details-item-title {
+    line-height: 1.5;
     display: flex;
     align-items: center;
     justify-content: space-between;
diff --git a/src/core_plugins/kibana/public/home/components/home.js b/src/core_plugins/kibana/public/home/components/home.js
index fe931915c2a2846..a150ea8ec33c87b 100644
--- a/src/core_plugins/kibana/public/home/components/home.js
+++ b/src/core_plugins/kibana/public/home/components/home.js
@@ -3,10 +3,19 @@ import PropTypes from 'prop-types';
 import { Synopsis } from './synopsis';
 import {
   KuiLinkButton,
-  KuiFlexGroup,
-  KuiFlexItem,
-  KuiFlexGrid,
 } from 'ui_framework/components';
+
+import {
+  EuiPage,
+  EuiPanel,
+  EuiTitle,
+  EuiSpacer,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlexGrid,
+  EuiText,
+} from '@elastic/eui';
+
 import { FeatureCatalogueCategory } from 'ui/registry/feature_catalogue';
 
 export function Home({ addBasePath, directories }) {
@@ -18,92 +27,104 @@ export function Home({ addBasePath, directories }) {
       })
       .map((directory) => {
         return (
-          <KuiFlexItem style={{ minHeight: 64 }} key={directory.id}>
+          <EuiFlexItem style={{ minHeight: 64 }} key={directory.id}>
             <Synopsis
               description={directory.description}
               iconUrl={addBasePath(directory.icon)}
               title={directory.title}
               url={addBasePath(directory.path)}
             />
-          </KuiFlexItem>
+          </EuiFlexItem>
         );
       });
   };
 
 
   return (
-    <div className="kuiView home">
-      <div className="kuiViewContent">
-
-        <div className="kuiViewContentItem kuiVerticalRhythmXLarge">
-          <KuiFlexGroup
-            className="kuiVerticalRhythmSmall"
-            justifyContent="spaceBetween"
-            alignItems="flexEnd"
-          >
-            <KuiFlexItem>
-              <h1 className="kuiTitle">
-                Welcome to Kibana
-              </h1>
-            </KuiFlexItem>
-
-            <KuiFlexItem grow={false}>
-              <KuiFlexGroup alignItems="center">
-                <KuiFlexItem grow={false}>
-                  <p className="kuiText kuiSubduedText">
-                    Data already in Elasticsearch?
-                  </p>
-                </KuiFlexItem>
-
-                <KuiFlexItem grow={false}>
-                  <KuiLinkButton
-                    buttonType="secondary"
-                    href={addBasePath('/app/kibana#/management/kibana/index')}
-                  >
-                    Set up index patterns
-                  </KuiLinkButton>
-                </KuiFlexItem>
-              </KuiFlexGroup>
-
-            </KuiFlexItem>
-          </KuiFlexGroup>
-        </div>
-
-        <div className="kuiViewContentItem kuiVerticalRhythmXLarge">
-          <KuiFlexGroup className="kuiVerticalRhythm">
-            <KuiFlexItem className="kuiPanel homePanel">
-              <h3 className="kuiSubTitle kuiVerticalRhythm">
+    <EuiPage className="home">
+
+      <EuiFlexGroup
+        justifyContent="spaceBetween"
+        alignItems="flexEnd"
+      >
+        <EuiFlexItem>
+          <EuiTitle size="l">
+            <h1>Welcome to Kibana</h1>
+          </EuiTitle>
+        </EuiFlexItem>
+
+        <EuiFlexItem grow={false}>
+          <EuiFlexGroup alignItems="center">
+            <EuiFlexItem grow={false}>
+              <p className="kuiText kuiSubduedText">
+                Data already in Elasticsearch?
+              </p>
+            </EuiFlexItem>
+
+            <EuiFlexItem grow={false}>
+              <KuiLinkButton
+                buttonType="secondary"
+                href={addBasePath('/app/kibana#/management/kibana/index')}
+              >
+                Set up index patterns
+              </KuiLinkButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
+      <EuiSpacer size="l" />
+
+      <EuiFlexGroup className="kuiVerticalRhythm">
+        <EuiFlexItem>
+          <EuiPanel paddingSize="l">
+            <EuiTitle>
+              <h3>
                 Visualize and Explore Data
               </h3>
-              <KuiFlexGrid className="kuiVerticalRhythmSmall homeTopFeatures" columns={2}>
-                { renderDirectories(FeatureCatalogueCategory.DATA) }
-              </KuiFlexGrid>
-            </KuiFlexItem>
-            <KuiFlexItem className="kuiPanel homePanel">
-              <h3 className="kuiSubTitle kuiVerticalRhythm">
+            </EuiTitle>
+            <EuiSpacer size="m"/>
+            <EuiFlexGrid columns={2}>
+              { renderDirectories(FeatureCatalogueCategory.DATA) }
+            </EuiFlexGrid>
+          </EuiPanel>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiPanel paddingSize="l">
+            <EuiTitle>
+              <h3>
                 Manage and Administer the Elastic Stack
               </h3>
-              <KuiFlexGrid className="kuiVerticalRhythmSmall homeTopFeatures" columns={2}>
-                { renderDirectories(FeatureCatalogueCategory.ADMIN) }
-              </KuiFlexGrid>
-            </KuiFlexItem>
-          </KuiFlexGroup>
-        </div>
-
-        <div className="kuiViewContentItem kuiVerticalRhythmXLarge text-center">
-          <h4 className="kuiSubduedText kuiVerticalRhythmSmall">
-            Didn’t find what you were looking for?
-          </h4>
+            </EuiTitle>
+            <EuiSpacer size="m"/>
+            <EuiFlexGrid columns={2}>
+              { renderDirectories(FeatureCatalogueCategory.ADMIN) }
+            </EuiFlexGrid>
+          </EuiPanel>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
+      <EuiSpacer size="l" />
+
+      <EuiFlexGroup justifyContent="center">
+        <EuiFlexItem grow={false}>
+          <EuiText>
+            <p>
+              Didn’t find what you were looking for?
+            </p>
+          </EuiText>
+          <EuiSpacer size="s" />
           <KuiLinkButton
             buttonType="secondary"
             href="#/home/feature_directory"
           >
             View full directory of Kibana plugins
           </KuiLinkButton>
-        </div>
+        </EuiFlexItem>
+      </EuiFlexGroup>
 
-      </div>
-    </div>
+    </EuiPage>
   );
 }
 
diff --git a/src/core_plugins/kibana/public/home/home.less b/src/core_plugins/kibana/public/home/home.less
index 590a89ae74e2100..b96f1dbd9509744 100644
--- a/src/core_plugins/kibana/public/home/home.less
+++ b/src/core_plugins/kibana/public/home/home.less
@@ -5,15 +5,6 @@
   min-height: 100vh;
 }
 
-.homePanel {
-  padding: 24px;
-  background-color: @white;
-}
-
-.homeTopFeatures {
-  margin-top: 12px;
-}
-
 .homeFeatureDirectory {
   background: @white;
   margin: 0;
diff --git a/src/core_plugins/kibana/public/management/landing.html b/src/core_plugins/kibana/public/management/landing.html
index ee7e1c326687209..d538d8c836b1616 100644
--- a/src/core_plugins/kibana/public/management/landing.html
+++ b/src/core_plugins/kibana/public/management/landing.html
@@ -23,7 +23,7 @@
           </div>
         </div>
 
-        <div class="kuiPanelBody management-panel__body">
+        <div class="kuiPanelBody">
           <div class="row">
             <ul class="list-unstyled">
               <li
@@ -32,7 +32,7 @@
               >
                 <a
                   data-test-subj="{{::item.name}}"
-                  class="management-panel__link"
+                  class="euiLink euiLink--primary management-panel__link"
                   ng-class="{ 'management-panel__link--disabled': item.disabled || !item.url }"
                   kbn-href="{{::item.disabled ? '' : item.url}}"
                   tooltip="{{::item.tooltip}}"
diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/edit_index_pattern.html b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/edit_index_pattern.html
index 0da2528afb115a2..2df9f88abd760be 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/edit_index_pattern.html
+++ b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/edit_index_pattern.html
@@ -27,7 +27,7 @@
         index and the field's associated core type as recorded by Elasticsearch.
         While this list allows you to view the core type of each field, changing
         field types must be done using Elasticsearch's
-        <a target="_window" href="http://www.elastic.co/guide/en/elasticsearch/reference/current/mapping.html">
+        <a target="_window" class="euiLink euiLink--primary" href="http://www.elastic.co/guide/en/elasticsearch/reference/current/mapping.html">
           Mapping API
           <i aria-hidden="true" class="fa-link fa"></i>
         </a>
diff --git a/src/core_plugins/kibana/public/management/sections/indices/index.html b/src/core_plugins/kibana/public/management/sections/indices/index.html
index 457e51ce6dba5a3..eb5a2449871e86e 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/index.html
+++ b/src/core_plugins/kibana/public/management/sections/indices/index.html
@@ -1,6 +1,6 @@
 <div class="col-md-2 sidebar-container" role="region" aria-label="Index patterns">
   <div class="sidebar-list">
-    <div class="sidebar-list-header">
+    <div class="sidebar-item-title full-title">
       <h5>
         <a
           ng-if="editingId"
@@ -18,10 +18,12 @@ <h5>
         class="sidebar-item"
       >
         <div class="sidebar-item-title full-title">
-          <span class="label label-warning">Warning</span>
-          <p>
-            No default index pattern. You must select or create one to continue.
-          </p>
+          <div class="euiText euiText--extraSmall">
+            <div class="euiBadge euiBadge--warning">Warning</div>
+            <p>
+              No default index pattern. You must select or create one to continue.
+            </p>
+          </div>
         </div>
       </li>
 
@@ -29,7 +31,7 @@ <h5>
         ng-repeat="pattern in indexPatternList | orderBy:['-default','title'] track by pattern.id"
         class="sidebar-item"
       >
-        <a href="{{::pattern.url}}" class="show">
+        <a href="{{::pattern.url}}" class="euiLink euiLink--primary show">
           <div class="{{::pattern.class}}">
             <i aria-hidden="true" ng-if="pattern.default" class="fa fa-star"></i>
             <span ng-bind="::pattern.title"></span>
diff --git a/src/core_plugins/kibana/public/management/sections/objects/_objects.html b/src/core_plugins/kibana/public/management/sections/objects/_objects.html
index c3f7114b6aa7f4b..2270e5c83f151a0 100644
--- a/src/core_plugins/kibana/public/management/sections/objects/_objects.html
+++ b/src/core_plugins/kibana/public/management/sections/objects/_objects.html
@@ -3,7 +3,7 @@
     <!-- Header -->
     <div class="kuiViewContentItem kuiBar kuiVerticalRhythm">
       <div class="kuiBarSection">
-        <h1 class="kuiTitle">
+        <h1 class="euiTitle">
           Edit Saved Objects
         </h1>
       </div>
@@ -38,9 +38,13 @@ <h1 class="kuiTitle">
     </div>
 
     <!-- Intro -->
-    <p class="kuiViewContentItem kuiVerticalRhythm">
-      From here you can delete saved objects, such as saved searches. You can also edit the raw data of saved objects. Typically objects are only modified via their associated application, which is probably what you should use instead of this screen. Each tab is limited to 100 results. You can use the filter to find objects not in the default list.
-    </p>
+    <div class="euiText">
+      <p class="kuiViewContentItem">
+        From here you can delete saved objects, such as saved searches. You can also edit the raw data of saved objects. Typically objects are only modified via their associated application, which is probably what you should use instead of this screen. Each tab is limited to 100 results. You can use the filter to find objects not in the default list.
+      </p>
+    </div>
+
+    <div class="euiSpacer euiSpacer--m"></div>
 
     <!-- Tabs -->
     <div class="kuiViewContentItem kuiVerticalRhythm">
diff --git a/src/core_plugins/kibana/public/management/styles/main.less b/src/core_plugins/kibana/public/management/styles/main.less
index 80a1a8fe8e96a2d..d2b956f39dbab59 100644
--- a/src/core_plugins/kibana/public/management/styles/main.less
+++ b/src/core_plugins/kibana/public/management/styles/main.less
@@ -37,10 +37,6 @@ kbn-management-landing {
 
   }
 
-  .management-panel__body {
-    padding-bottom: 30px;
-  }
-
   .management-panel__link {
     font-size: 17px;
     line-height: 32px;
diff --git a/src/core_plugins/kibana/public/visualize/editor/styles/_editor.less b/src/core_plugins/kibana/public/visualize/editor/styles/_editor.less
index bf4d94b692cbd42..cceca82917e0f01 100644
--- a/src/core_plugins/kibana/public/visualize/editor/styles/_editor.less
+++ b/src/core_plugins/kibana/public/visualize/editor/styles/_editor.less
@@ -3,7 +3,7 @@
 @vis-editor-sidebar-basis: (100/12) * 2%; // two of twelve columns
 @vis-editor-sidebar-min-width: 350px;
 @vis-editor-nesting-width: 8px;
-@vis-editor-agg-editor-spacing: 5px;
+@vis-editor-agg-editor-spacing: 10px;
 
 .vis-editor {
   .flex-parent();
@@ -219,6 +219,7 @@
       text-align: center;
       background: @vis-editor-agg-error-bg;
       color: @vis-editor-agg-error-color;
+      line-height: 1.5;
     }
 
     .vis-editor-agg-editor-ranges {
diff --git a/src/core_plugins/metrics/public/components/annotations_editor.js b/src/core_plugins/metrics/public/components/annotations_editor.js
index b2d9defa5b1919e..ca51e850e89df8c 100644
--- a/src/core_plugins/metrics/public/components/annotations_editor.js
+++ b/src/core_plugins/metrics/public/components/annotations_editor.js
@@ -10,6 +10,10 @@ import IconSelect from './icon_select';
 import YesNo from './yes_no';
 import { htmlIdGenerator } from 'ui_framework/services';
 
+import {
+  EuiText,
+} from '@elastic/eui';
+
 function newAnnotation() {
   return {
     id: uuid.v1(),
@@ -175,12 +179,14 @@ class AnnotationsEditor extends Component {
         .bind(null, this.props, newAnnotation);
       content = (
         <div className="vis_editor__annotations-missing">
-          <p>Click the button below to create an annotation data source.</p>
-          <button
-            className="thor__button-outlined-default large"
-            onClick={handleAdd}
-          >Add Data Source
-          </button>
+          <EuiText>
+            <p>Click the button below to create an annotation data source.</p>
+            <button
+              className="thor__button-outlined-default large"
+              onClick={handleAdd}
+            >Add Data Source
+            </button>
+          </EuiText>
         </div>
       );
     } else {
diff --git a/src/core_plugins/metrics/public/components/markdown_editor.js b/src/core_plugins/metrics/public/components/markdown_editor.js
index b0d4a9816e11ce8..f5a761bc811209c 100644
--- a/src/core_plugins/metrics/public/components/markdown_editor.js
+++ b/src/core_plugins/metrics/public/components/markdown_editor.js
@@ -12,6 +12,11 @@ import _ from 'lodash';
 import 'brace/mode/markdown';
 import 'brace/theme/github';
 
+import {
+  EuiText,
+  EuiCodeBlock,
+} from '@elastic/eui';
+
 class MarkdownEditor extends Component {
   constructor(props) {
     super(props);
@@ -105,13 +110,13 @@ class MarkdownEditor extends Component {
           />
         </div>
         <div className="vis_editor__markdown-variables">
-          <div>
+          <EuiText>
             The following variables can be used in the Markdown by using the Handlebar (mustache) syntax.{' '}
             <a href="http://handlebarsjs.com/expressions.html" target="_BLANK">
               Click here for documentation
             </a>{' '}
             on the available expressions.
-          </div>
+          </EuiText>
           <table className="table">
             <thead>
               <tr>
@@ -126,18 +131,20 @@ class MarkdownEditor extends Component {
           )}
 
           <div className="vis_editor__markdown-code-desc">
-            There is also a special variable named <code>_all</code> which you can use to access the entire tree. This is useful for
-            creating lists with data from a group by...
+            <EuiText>
+              <p>
+                There is also a special variable named <code>_all</code> which you can use to access the entire tree. This is useful for
+                creating lists with data from a group by...
+              </p>
+            </EuiText>
           </div>
-          <pre>
-            <code>
-              {`# All servers:
+          <EuiCodeBlock>
+{`# All servers:
 
 {{#each _all}}
 - {{ label }} {{ last.formatted }}
 {{/each}}`}
-            </code>
-          </pre>
+          </EuiCodeBlock>
         </div>
       </div>
     );
diff --git a/src/ui/public/agg_types/controls/filters.html b/src/ui/public/agg_types/controls/filters.html
index bbd3b3944b04452..78dc13ab51a8eae 100644
--- a/src/ui/public/agg_types/controls/filters.html
+++ b/src/ui/public/agg_types/controls/filters.html
@@ -64,3 +64,5 @@
 >
   Add Filter
 </button>
+
+<div class="euiSpacer euiSpacer--s"></div>
diff --git a/src/ui/public/agg_types/controls/ip_ranges.html b/src/ui/public/agg_types/controls/ip_ranges.html
index 14ea156e410772b..34e46d7e709f7dc 100644
--- a/src/ui/public/agg_types/controls/ip_ranges.html
+++ b/src/ui/public/agg_types/controls/ip_ranges.html
@@ -1,9 +1,12 @@
 <div>
+
   <p>
-    <button type="button" class="kuiButton kuiButton--basic" ng-show="agg.params.ipRangeType == 'mask'" ng-click="agg.params.ipRangeType = 'fromTo'">Use From/To</button>
-    <button type="button" class="kuiButton kuiButton--basic" ng-show="agg.params.ipRangeType != 'mask'" ng-click="agg.params.ipRangeType = 'mask'">Use CIDR Masks</button>
+    <button type="button" class="kuiButton kuiButton--secondary" ng-show="agg.params.ipRangeType == 'mask'" ng-click="agg.params.ipRangeType = 'fromTo'">Use From/To</button>
+    <button type="button" class="kuiButton kuiButton--secondary" ng-show="agg.params.ipRangeType != 'mask'" ng-click="agg.params.ipRangeType = 'mask'">Use CIDR Masks</button>
   </p>
 
+  <div class="euiSpacer euiSpacer--s"></div>
+
   <div ng-show="agg.params.ipRangeType != 'mask'">
     <table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.fromTo.length">
       <tr>
diff --git a/src/ui/public/agg_types/controls/string.html b/src/ui/public/agg_types/controls/string.html
index c4ec120a6584b47..80accf1eb5c55f1 100644
--- a/src/ui/public/agg_types/controls/string.html
+++ b/src/ui/public/agg_types/controls/string.html
@@ -1,4 +1,6 @@
 <div class="form-group">
+  <div class="euiSpacer euiSpacer--m"></div>
+
   <label for="visEditorStringInput{{agg.id}}{{aggParam.name}}">{{ aggParam.name | label }}</label>
   <div>
     <input
diff --git a/src/ui/public/field_editor/field_editor.html b/src/ui/public/field_editor/field_editor.html
index e72a7a338fdd610..c2b9714e67e46bb 100644
--- a/src/ui/public/field_editor/field_editor.html
+++ b/src/ui/public/field_editor/field_editor.html
@@ -7,7 +7,7 @@
     </p>
   </div>
   <div ng-if="editor.creating" class="form-group">
-    <label for="scriptedFieldName">Name</label>
+    <label for="scriptedFieldName" class="kuiFormLabel">Name</label>
     <input
       ng-model="editor.field.name"
       id="scriptedFieldName"
@@ -27,7 +27,7 @@
   </div>
 
   <div ng-if="editor.field.scripted" class="form-group">
-    <label for="scriptedFieldLang">Language</label>
+    <label for="scriptedFieldLang" class="kuiFormLabel">Language</label>
     <div class="kuiInfoPanel kuiInfoPanel--warning kuiVerticalRhythm" ng-if="editor.field.lang && editor.isDeprecatedLang(editor.field.lang)">
       <div class="kuiInfoPanelHeader">
         <span
@@ -61,7 +61,7 @@
   </div>
 
   <div class="form-group">
-    <label for="scriptedFieldType">Type</label>
+    <label for="scriptedFieldType" class="kuiFormLabel">Type</label>
     <select
       ng-if="editor.field.scripted"
       id="scriptedFieldType"
@@ -83,7 +83,7 @@
       <i class="fa fa-warning"></i> Warning
     </span>
 
-    <label for="scriptFieldFormat">Format <small>(Default: <i>{{editor.defFormatType.resolvedTitle}}</i>)</small></label>
+    <label for="scriptFieldFormat" class="kuiFormLabel">Format <small>(Default: <i>{{editor.defFormatType.resolvedTitle}}</i>)</small></label>
 
     <div class="hintbox" ng-if="editor.showFormatHelp">
       <h4 class="hintbox-heading">
@@ -112,7 +112,7 @@ <h4 class="hintbox-heading">
   </div>
 
   <div class="form-group">
-    <label for="editorFieldCount">Popularity</label>
+    <label for="editorFieldCount" class="kuiFormLabel">Popularity</label>
     <div class="kuiFieldGroup">
       <div class="kuiFieldGroupSection">
         <input
@@ -157,7 +157,7 @@ <h4 class="hintbox-heading">
 
   <div ng-if="editor.field.scripted">
     <div class="form-group">
-      <label for="scriptedFieldScript">Script</label>
+      <label for="scriptedFieldScript" class="kuiFormLabel">Script</label>
       <textarea
         required
         class="field-editor_script-input form-control text-monospace"
@@ -167,12 +167,11 @@ <h4 class="hintbox-heading">
       ></textarea>
     </div>
 
-    <div class="form-group">
-      <div class="hintbox">
-        <h4>
-          <i class="fa fa-warning text-warning"></i> Proceed with caution
-        </h4>
-
+    <div class="euiCallOut euiCallOut--warning">
+      <div class="euiCallOutHeader">
+        <span class="euiCallOutHeader__title">Proceed with caution</span>
+      </div>
+      <div class="euiText euiText--small">
         <p>
           Please familiarize yourself with <a target="_window" documentation-href="scriptedFields.scriptFields">script fields <i class="fa-link fa"></i></a> and with <a target="_window" documentation-href="scriptedFields.scriptAggs">scripts in aggregations <i class="fa-link fa"></i></a> before using scripted fields.
         </p>
@@ -183,12 +182,13 @@ <h4>
       </div>
     </div>
 
-    <div class="form-group">
-      <div class="hintbox">
-        <h4>
-          <i class="fa fa-question-circle text-info"></i> Scripting Help
-        </h4>
+    <div class="euiSpacer euiSpacer--m"></div>
 
+    <div class="euiCallOut euiCallOut--primary">
+      <div class="euiCallOutHeader">
+        <span class="euiCallOutHeader__title">Scripting Help</span>
+      </div>
+      <div class="euiText euiText--small">
         <p>
           By default, Kibana scripted fields use <a target="_window" documentation-href="scriptedFields.painless">Painless <i class="fa-link fa"></i></a>, a simple and secure scripting language designed specifically for use with Elasticsearch.  To access values in the document use the following format:
         </p>
@@ -234,6 +234,8 @@ <h4>
 
   </div>
 
+  <div class="euiSpacer euiSpacer--l"></div>
+
   <div  ng-if="editor.conflictDescriptionsLength > 0">
     <p>
       <i class="fa fa-warning text-warning"></i>
diff --git a/src/ui/public/number_list/number_list.html b/src/ui/public/number_list/number_list.html
index a49912eab18a22e..b65f1243edbd035 100644
--- a/src/ui/public/number_list/number_list.html
+++ b/src/ui/public/number_list/number_list.html
@@ -33,6 +33,8 @@
   Please specify at least one {{numberListCntr.getUnitName()}}
 </p>
 
+<div class="euiSpacer euiSpacer--s"></div>
+
 <button
   ng-click="numberListCntr.add()"
   type="button"
diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less
index be0dda0d44aa865..8cc3075a6a4c3c1 100644
--- a/src/ui/public/styles/base.less
+++ b/src/ui/public/styles/base.less
@@ -86,7 +86,7 @@ ul.navbar-inline li {
 .checkbox label {
   display: flex;
   align-items: center;
-  padding-left: 0;
+  padding-left: 0 !important;
 
   input[type="checkbox"] {
     float: none;
@@ -538,6 +538,16 @@ style-compile {
   background-color: @globalColorWhite;
   padding: 10px;
   border-radius: 4px;
+
+  label {
+    margin-bottom: 5px !important;
+    font-weight: 700;
+    display: block;
+  }
+
+  .vis-option-item label {
+    font-weight: normal !important;
+  }
 }
 
 .kuiSideBarSection .kuiSideBarSection .kuiSideBarSection{
@@ -628,7 +638,7 @@ style-compile {
  */
 .kuiSideBarFormSectionTitle {
   font-size: 12px;
-  color: @globalColorMediumGray;
+  color: @globalColorDarkGray;
   margin: 10px 0 !important; // 1
   padding-bottom: 2px;
 }
@@ -692,4 +702,9 @@ style-compile {
   height: 64px;
 }
 
+.pdf-options label {
+  padding-bottom: 5px;
+  display: block;
+}
+
 @import "~dragula/dist/dragula.css";
diff --git a/src/ui/public/styles/hintbox.less b/src/ui/public/styles/hintbox.less
index cedaff991a3d162..b9eb0d20a8777db 100644
--- a/src/ui/public/styles/hintbox.less
+++ b/src/ui/public/styles/hintbox.less
@@ -5,6 +5,7 @@
   border-radius: 5px;
   margin-bottom: @hintbox-spacing-vertical;
   background-color: @hintbox-background-color;
+  line-height: 1.5;
 
   a {
     color: @hintbox-link-color !important;
diff --git a/src/ui/public/styles/sidebar.less b/src/ui/public/styles/sidebar.less
index faaac8cd5509ef9..019b10baed0bfd0 100644
--- a/src/ui/public/styles/sidebar.less
+++ b/src/ui/public/styles/sidebar.less
@@ -39,6 +39,16 @@
       border-top: solid 1px transparent;
       border-bottom: solid 1px transparent;
 
+      label {
+        margin-bottom: 5px;
+        font-weight: 700;
+        display: block;
+      }
+
+      label[for] {
+        cursor: pointer;
+      }
+
       &.active {
         background-color: darken(@globalColorLightestGray, 10%) !important;
         color: @sidebar-active-color;
diff --git a/src/ui/public/vis/editors/default/agg_add.html b/src/ui/public/vis/editors/default/agg_add.html
index 2609a71dda72cc4..29a26b010398913 100644
--- a/src/ui/public/vis/editors/default/agg_add.html
+++ b/src/ui/public/vis/editors/default/agg_add.html
@@ -1,5 +1,6 @@
 <div ng-show="add.form" class="vis-editor-agg-add-schemas">
   <label>Select {{ groupName }} type</label>
+  <div class="euiSpacer euiSpacer--s"></div>
   <ul class="form-group list-group list-group-menu">
     <li
       tabindex="0"
diff --git a/src/ui/public/vis/editors/default/agg_select.html b/src/ui/public/vis/editors/default/agg_select.html
index bbcbbf670a065a5..1ed17c02dd9b358 100644
--- a/src/ui/public/vis/editors/default/agg_select.html
+++ b/src/ui/public/vis/editors/default/agg_select.html
@@ -1,6 +1,7 @@
 <div class="form-group">
   <label ng-if="$index < 1 || groupName !== 'buckets'">Aggregation</label>
   <label ng-if="$index >= 1 && groupName === 'buckets'">Sub Aggregation</label>
+  <div class="euiSpacer euiSpacer--s"></div>
   <ui-select
     required
     name="agg"
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index 1e79d012679f7a4..0eac7338f7a6da1 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -3684,7 +3684,8 @@ main {
   max-width: 20px;
   /* 1 */
   color: #191E23;
-  border-top: 1px solid #D9D9D9; }
+  border-top: 1px solid #D9D9D9;
+  vertical-align: middle; }
 
 /**
    * 1. Vertically align all children.
diff --git a/ui_framework/src/components/table/_table.scss b/ui_framework/src/components/table/_table.scss
index a3ce9c4e5aa2db0..3582ac12acec358 100644
--- a/ui_framework/src/components/table/_table.scss
+++ b/ui_framework/src/components/table/_table.scss
@@ -104,6 +104,7 @@
   @include tableCell;
   color: $kuiFontColor;
   border-top: $kuiBorderThin;
+  vertical-align: middle;
 }
 
   /**