diff --git a/src/core_plugins/console/public/src/directives/help.html b/src/core_plugins/console/public/src/directives/help.html
index 32b84078a107a..9030f8559b668 100644
--- a/src/core_plugins/console/public/src/directives/help.html
+++ b/src/core_plugins/console/public/src/directives/help.html
@@ -1,4 +1,4 @@
-<div class="localDropdownTitle">Help</div>
+<div class="kuiLocalDropdownTitle">Help</div>
 
 <tabset>
   <tab heading="Request format">
diff --git a/src/core_plugins/console/public/src/directives/history.html b/src/core_plugins/console/public/src/directives/history.html
index 06df7134a2dad..2d9d562c477f8 100644
--- a/src/core_plugins/console/public/src/directives/history.html
+++ b/src/core_plugins/console/public/src/directives/history.html
@@ -1,4 +1,4 @@
-<div class="localDropdownTitle">History</div>
+<div class="kuiLocalDropdownTitle">History</div>
 
 <div class="history-body">
   <ul class="list-group history-reqs">
diff --git a/src/core_plugins/console/public/src/directives/settings.html b/src/core_plugins/console/public/src/directives/settings.html
index 8efe0419ddfba..0c6ad429f5282 100644
--- a/src/core_plugins/console/public/src/directives/settings.html
+++ b/src/core_plugins/console/public/src/directives/settings.html
@@ -1,9 +1,9 @@
-<div class="localDropdownTitle">Settings</div>
+<div class="kuiLocalDropdownTitle">Settings</div>
 
 <form class="form" name="settingsForm" ng-submit="settingsForm.$valid && settings.apply()">
   <div class="form-group">
-    <div class="localDropdownHeader">
-      <div class="localDropdownHeader__label">Font Size</div>
+    <div class="kuiLocalDropdownHeader">
+      <div class="kuiLocalDropdownHeader__label">Font Size</div>
     </div>
 
     <div>
@@ -27,8 +27,8 @@
   </div>
 
   <div class="form-group">
-    <div class="localDropdownHeader">
-      <div class="localDropdownHeader__label">Autocomplete</div>
+    <div class="kuiLocalDropdownHeader">
+      <div class="kuiLocalDropdownHeader__label">Autocomplete</div>
     </div>
 
     <div class="checkbox">
diff --git a/src/core_plugins/console/public/src/directives/welcome.html b/src/core_plugins/console/public/src/directives/welcome.html
index c21083d31a938..ff724ea112625 100644
--- a/src/core_plugins/console/public/src/directives/welcome.html
+++ b/src/core_plugins/console/public/src/directives/welcome.html
@@ -1,4 +1,4 @@
-<div class="localDropdownTitle">Welcome to Console</div>
+<div class="kuiLocalDropdownTitle">Welcome to Console</div>
 
 <p><strong>Quick intro to the UI</strong></p>
 
diff --git a/src/core_plugins/kibana/public/dashboard/index.html b/src/core_plugins/kibana/public/dashboard/index.html
index 767fcfcb7a6bf..4acb39da039db 100644
--- a/src/core_plugins/kibana/public/dashboard/index.html
+++ b/src/core_plugins/kibana/public/dashboard/index.html
@@ -6,7 +6,7 @@
       <!-- Title. -->
       <div
         data-transclude-slot="topLeftCorner"
-        class="localTitle"
+        class="kuiLocalTitle"
       >
         <span
           ng-show="dash.id"
@@ -24,7 +24,7 @@
         ng-submit="filterResults()"
       >
         <div class="typeahead" kbn-typeahead="dashboard">
-          <div class="localSearch">
+          <div class="kuiLocalSearch">
             <input
               parse-query
               input-focus
@@ -33,13 +33,13 @@
               placeholder="Filter..."
               aria-label="Filter input"
               type="text"
-              class="localSearchInput"
-              ng-class="{'localSearchInput-isInvalid': queryInput.$invalid}"
+              class="kuiLocalSearchInput"
+              ng-class="{'kuiLocalSearchInput-isInvalid': queryInput.$invalid}"
             >
             <button
               type="submit"
               aria-label="Filter Dashboards"
-              class="localSearchButton"
+              class="kuiLocalSearchButton"
               ng-disabled="queryInput.$invalid"
             >
               <span class="fa fa-search" aria-hidden="true"></span>
diff --git a/src/core_plugins/kibana/public/dashboard/partials/load_dashboard.html b/src/core_plugins/kibana/public/dashboard/partials/load_dashboard.html
index c3336b111b65b..b12cd73e834d1 100644
--- a/src/core_plugins/kibana/public/dashboard/partials/load_dashboard.html
+++ b/src/core_plugins/kibana/public/dashboard/partials/load_dashboard.html
@@ -1,2 +1,2 @@
-<div class="localDropdownTitle">Open Dashboard</div>
+<div class="kuiLocalDropdownTitle">Open Dashboard</div>
 <saved-object-finder type="dashboards"></saved-object-finder>
diff --git a/src/core_plugins/kibana/public/dashboard/partials/options.html b/src/core_plugins/kibana/public/dashboard/partials/options.html
index 7e69b6ac56468..eaf5214b1b846 100644
--- a/src/core_plugins/kibana/public/dashboard/partials/options.html
+++ b/src/core_plugins/kibana/public/dashboard/partials/options.html
@@ -1,5 +1,5 @@
 <form role="form">
-  <div class="localDropdownTitle">Options</div>
+  <div class="kuiLocalDropdownTitle">Options</div>
   <div class="input-group">
     <label>
       <input type="checkbox" ng-model="opts.ui.darkTheme" ng-checked="opts.ui.darkTheme">
diff --git a/src/core_plugins/kibana/public/dashboard/partials/pick_visualization.html b/src/core_plugins/kibana/public/dashboard/partials/pick_visualization.html
index ee236c577b78b..fd5eb0b7881ec 100644
--- a/src/core_plugins/kibana/public/dashboard/partials/pick_visualization.html
+++ b/src/core_plugins/kibana/public/dashboard/partials/pick_visualization.html
@@ -2,7 +2,7 @@
   ng-switch="mode"
   ng-init="mode = 'visualization'"
 >
-  <div class="localDropdownTitle">Add Panels</div>
+  <div class="kuiLocalDropdownTitle">Add Panels</div>
 
   <ul class="nav nav-tabs">
     <li ng-class="{active: mode == 'visualization'}">
diff --git a/src/core_plugins/kibana/public/dashboard/partials/save_dashboard.html b/src/core_plugins/kibana/public/dashboard/partials/save_dashboard.html
index 1cd22b45337e7..1de3cb27de071 100644
--- a/src/core_plugins/kibana/public/dashboard/partials/save_dashboard.html
+++ b/src/core_plugins/kibana/public/dashboard/partials/save_dashboard.html
@@ -2,9 +2,9 @@
   role="form"
   ng-submit="opts.save()"
 >
-  <div class="localDropdownTitle">Save {{opts.dashboard.getDisplayName()}}</div>
+  <div class="kuiLocalDropdownTitle">Save {{opts.dashboard.getDisplayName()}}</div>
   <input
-    class="localDropdownInput"
+    class="kuiLocalDropdownInput"
     id="dashboardTitle"
     type="text"
     ng-model="opts.dashboard.title"
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 2e3da87a47828..80630e5d22355 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,11 +9,11 @@
       ></bread-crumbs>
 
       <!-- Tabs. -->
-      <div data-transclude-slot="bottomRow" class="localTabs">
+      <div data-transclude-slot="bottomRow" class="kuiLocalTabs">
         <a
           ng-repeat="item in kbnDevToolsApp.devTools"
-          class="localTab"
-          ng-class="{'localTab-isSelected': kbnDevToolsApp.currentPath === item.url}"
+          class="kuiLocalTab"
+          ng-class="{'kuiLocalTab-isSelected': kbnDevToolsApp.currentPath === item.url}"
           kbn-href="{{::item.url}}"
         >
           {{::item.display}}
diff --git a/src/core_plugins/kibana/public/discover/index.html b/src/core_plugins/kibana/public/discover/index.html
index 375621208fb43..3584ef747bcaf 100644
--- a/src/core_plugins/kibana/public/discover/index.html
+++ b/src/core_plugins/kibana/public/discover/index.html
@@ -4,13 +4,13 @@
     <!-- Transcluded elements. -->
     <div data-transclude-slots>
       <!-- Breadcrumbs. -->
-      <div data-transclude-slot="topLeftCorner" class="localBreadcrumbs">
-        <div class="localBreadcrumb">
-          <span ng-show="opts.savedSearch.id" class="localBreadcrumb__emphasis">
+      <div data-transclude-slot="topLeftCorner" class="kuiLocalBreadcrumbs">
+        <div class="kuiLocalBreadcrumb">
+          <span ng-show="opts.savedSearch.id" class="kuiLocalBreadcrumb__emphasis">
             <span data-test-subj="discoverCurrentQuery" ng-bind="opts.savedSearch.lastSavedTitle"></span>
             <i aria-label="Reload Saved Search" tooltip="Reload Saved Search" ng-click="resetQuery();" class="fa fa-undo small"></i>&nbsp;
           </span>
-          <span data-test-subj="discoverQueryHits" class="localBreadcrumb__emphasis">{{(hits || 0) | number:0}}</span>
+          <span data-test-subj="discoverQueryHits" class="kuiLocalBreadcrumb__emphasis">{{(hits || 0) | number:0}}</span>
           <ng-pluralize count="hits" when="{'1':'hit', 'other':'hits'}"></ng-pluralize>
         </div>
       </div>
@@ -24,7 +24,7 @@
         ng-submit="fetch()"
       >
         <div class="typeahead" kbn-typeahead="discover">
-          <div class="localSearch">
+          <div class="kuiLocalSearch">
             <input
               parse-query
               input-focus
@@ -33,13 +33,13 @@
               placeholder="Search..."
               aria-label="Search input"
               type="text"
-              class="localSearchInput"
-              ng-class="{'localSearchInput-isInvalid': discoverSearch.$invalid}"
+              class="kuiLocalSearchInput"
+              ng-class="{'kuiLocalSearchInput-isInvalid': discoverSearch.$invalid}"
             >
             <button
               type="submit"
               aria-label="Search"
-              class="localSearchButton"
+              class="kuiLocalSearchButton"
               ng-disabled="discoverSearch.$invalid"
             >
               <span class="fa fa-search" aria-hidden="true"></span>
diff --git a/src/core_plugins/kibana/public/discover/partials/load_search.html b/src/core_plugins/kibana/public/discover/partials/load_search.html
index 5b5c471aad993..df6839ebd609a 100644
--- a/src/core_plugins/kibana/public/discover/partials/load_search.html
+++ b/src/core_plugins/kibana/public/discover/partials/load_search.html
@@ -1,4 +1,4 @@
 <form role="form" ng-submit="fetch()">
-  <div class="localDropdownTitle">Open Search</div>
+  <div class="kuiLocalDropdownTitle">Open Search</div>
   <saved-object-finder type="searches"></saved-object-finder>
 </form>
diff --git a/src/core_plugins/kibana/public/discover/partials/save_search.html b/src/core_plugins/kibana/public/discover/partials/save_search.html
index b81723ae70bf3..a06524f8b13bb 100644
--- a/src/core_plugins/kibana/public/discover/partials/save_search.html
+++ b/src/core_plugins/kibana/public/discover/partials/save_search.html
@@ -2,9 +2,9 @@
   role="form"
   ng-submit="opts.saveDataSource()"
 >
-  <div class="localDropdownTitle">Save Search</div>
+  <div class="kuiLocalDropdownTitle">Save Search</div>
   <input
-    class="localDropdownInput"
+    class="kuiLocalDropdownInput"
     id="SaveSearch"
     ng-model="opts.savedSearch.title"
     input-focus="select"
diff --git a/src/core_plugins/kibana/public/management/app.html b/src/core_plugins/kibana/public/management/app.html
index 8eab4596e7291..0c3d442232f42 100644
--- a/src/core_plugins/kibana/public/management/app.html
+++ b/src/core_plugins/kibana/public/management/app.html
@@ -10,15 +10,15 @@
       ></bread-crumbs>
 
       <!-- Tabs. -->
-      <div data-transclude-slot="bottomRow" class="localTabs">
-        <span ng-if="!sectionName" class="localTab">
+      <div data-transclude-slot="bottomRow" class="kuiLocalTabs">
+        <span ng-if="!sectionName" class="kuiLocalTab">
           {{::section.display}}
         </span>
         <a
           ng-if="sectionName"
           ng-repeat="item in section.items.inOrder"
-          class="localTab"
-          ng-class="{ 'localTab-isSelected': item.active, 'localTab-disabled': !item.url }"
+          class="kuiLocalTab"
+          ng-class="{ 'kuiLocalTab-isSelected': item.active, 'kuiLocalTab-disabled': !item.url }"
           kbn-href="{{::item.url}}"
           data-test-subj="{{::item.name}}"
           tooltip="{{::item.tooltip}}"
diff --git a/src/core_plugins/kibana/public/visualize/editor/editor.html b/src/core_plugins/kibana/public/visualize/editor/editor.html
index c9ec9f27c0e84..e5535094f24cc 100644
--- a/src/core_plugins/kibana/public/visualize/editor/editor.html
+++ b/src/core_plugins/kibana/public/visualize/editor/editor.html
@@ -6,7 +6,7 @@
       <!-- Title. -->
       <div
         data-transclude-slot="topLeftCorner"
-        class="localTitle"
+        class="kuiLocalTitle"
       >
         <span
           ng-show="savedVis.id"
@@ -41,7 +41,7 @@
           class="fullWidth"
         >
           <div class="typeahead" kbn-typeahead="visualize">
-            <div class="localSearch">
+            <div class="kuiLocalSearch">
               <input
                 ng-model="state.query"
                 parse-query
@@ -49,13 +49,13 @@
                 kbn-typeahead-input
                 placeholder="Search..."
                 type="text"
-                class="localSearchInput"
-                ng-class="{'localSearchInput-isInvalid': queryInput.$invalid}"
+                class="kuiLocalSearchInput"
+                ng-class="{'kuiLocalSearchInput-isInvalid': queryInput.$invalid}"
               >
               <button
                 type="submit"
                 aria-label="Search"
-                class="localSearchButton"
+                class="kuiLocalSearchButton"
                 ng-disabled="queryInput.$invalid"
               >
                 <span aria-hidden="true" class="fa fa-search"></span>
diff --git a/src/core_plugins/kibana/public/visualize/editor/panels/load.html b/src/core_plugins/kibana/public/visualize/editor/panels/load.html
index edb5860fb9145..82039367f6193 100644
--- a/src/core_plugins/kibana/public/visualize/editor/panels/load.html
+++ b/src/core_plugins/kibana/public/visualize/editor/panels/load.html
@@ -1,2 +1,2 @@
-<div class="localDropdownTitle">Open Visualization</div>
+<div class="kuiLocalDropdownTitle">Open Visualization</div>
 <saved-object-finder type="visualizations"></saved-object-finder>
diff --git a/src/core_plugins/kibana/public/visualize/editor/panels/save.html b/src/core_plugins/kibana/public/visualize/editor/panels/save.html
index 9bf4eb534afdf..982b77d3c56c6 100644
--- a/src/core_plugins/kibana/public/visualize/editor/panels/save.html
+++ b/src/core_plugins/kibana/public/visualize/editor/panels/save.html
@@ -2,9 +2,9 @@
   role="form"
   ng-submit="opts.doSave()"
 >
-  <div class="localDropdownTitle">Save Visualization</div>
+  <div class="kuiLocalDropdownTitle">Save Visualization</div>
   <input
-    class="localDropdownInput"
+    class="kuiLocalDropdownInput"
     input-focus="select"
     type="text"
     name="visTitle"
diff --git a/src/core_plugins/timelion/public/index.html b/src/core_plugins/timelion/public/index.html
index ec891b94fa3ad..2eed7996b7ad7 100644
--- a/src/core_plugins/timelion/public/index.html
+++ b/src/core_plugins/timelion/public/index.html
@@ -4,7 +4,7 @@
     <!-- Transcluded elements. -->
     <div data-transclude-slots>
       <div data-transclude-slot="topLeftCorner">
-        <span class="localTitle" ng-show="opts.savedSheet.id">
+        <span class="kuiLocalTitle" ng-show="opts.savedSheet.id">
           {{opts.savedSheet.lastSavedTitle}}
           &nbsp;
           <span class="fa fa-bolt" ng-click="showStats = !showStats"></span>
@@ -23,7 +23,7 @@
         role="form"
         ng-submit="search()"
       >
-        <div class="localSearch timelionLocalSearch">
+        <div class="kuiLocalSearch timelionLocalSearch">
           <input
             input-focus
             ng-model="state.sheet[state.selected]"
@@ -31,7 +31,7 @@
             placeholder="Expression..."
             aria-label="Expression input"
             type="text"
-            class="localSearchInput timelion-expression"
+            class="kuiLocalSearchInput timelion-expression"
           >
 
           <timelion-interval model="state.interval"></timelion-interval>
@@ -39,7 +39,7 @@
           <button
             type="submit"
             aria-label="Search"
-            class="localSearchButton"
+            class="kuiLocalSearchButton"
           >
             <span class="fa fa-play"></span>
           </button>
diff --git a/src/core_plugins/timelion/public/partials/docs/tutorial.html b/src/core_plugins/timelion/public/partials/docs/tutorial.html
index 23b4f22e7c74f..4a936f01f1906 100644
--- a/src/core_plugins/timelion/public/partials/docs/tutorial.html
+++ b/src/core_plugins/timelion/public/partials/docs/tutorial.html
@@ -146,10 +146,10 @@ <h2>Data: Transform <small>insert beat boxing</small></h2>
 </div>
 
 <div ng-show="section === 'functions'">
-  <div class="localDropdownTitle">
+  <div class="kuiLocalDropdownTitle">
     Function reference
   </div>
-  <div class="localDropdownHelpText">
+  <div class="kuiLocalDropdownHelpText">
     Click a function for details and arguments or <a ng-click="section = 'tutorial'">return to the tutorial.</a>
   </div>
   <div class="timelionFunctionsDropdownContent">
diff --git a/src/core_plugins/timelion/public/partials/load_sheet.html b/src/core_plugins/timelion/public/partials/load_sheet.html
index e7b6f68594045..6594d5cd759b5 100644
--- a/src/core_plugins/timelion/public/partials/load_sheet.html
+++ b/src/core_plugins/timelion/public/partials/load_sheet.html
@@ -1,4 +1,4 @@
 <form role="form" ng-submit="fetch()">
-  <div class="localDropdownTitle">Open Sheet</div>
+  <div class="kuiLocalDropdownTitle">Open Sheet</div>
   <saved-object-finder type="timelion-sheet" use-local-management="true"></saved-object-finder>
 </form>
diff --git a/src/core_plugins/timelion/public/partials/sheet_options.html b/src/core_plugins/timelion/public/partials/sheet_options.html
index 00bb995806d77..ed30161dcf15f 100644
--- a/src/core_plugins/timelion/public/partials/sheet_options.html
+++ b/src/core_plugins/timelion/public/partials/sheet_options.html
@@ -1,5 +1,5 @@
 <form role="form">
-  <div class="localDropdownTitle">Sheet options</div>
+  <div class="kuiLocalDropdownTitle">Sheet options</div>
   <div>
     <div class="form-group col-md-6">
       <label>Columns <small>Column count must divide evenly into 12</small></label>
diff --git a/src/ui/public/chrome/directives/global_nav/global_nav.less b/src/ui/public/chrome/directives/global_nav/global_nav.less
index 7530018570ab1..9ad4de6a26c75 100644
--- a/src/ui/public/chrome/directives/global_nav/global_nav.less
+++ b/src/ui/public/chrome/directives/global_nav/global_nav.less
@@ -5,7 +5,7 @@
 @global-nav-logo-height: 70px;
 
 .global-nav {
-  width: @as-closed-width;
+  width: @global-nav-closed-width;
   position: fixed;
   left: 0;
   top: 0;
@@ -15,21 +15,21 @@
   overflow: hidden;
 
   &.is-global-nav-open {
-    width: @as-open-width;
+    width: @global-nav-open-width;
 
     .app-title {
       display: inline-block;
     }
 
     + .app-wrapper {
-      left: @as-open-width;
+      left: @global-nav-open-width;
     }
   }
 
   .logo-small,
   .logo {
     height: @global-nav-logo-height;
-    width: @as-open-width;
+    width: @global-nav-open-width;
     list-style-type: none;
     &.kibana {
       background-image: url("~ui/images/kibana.svg");
diff --git a/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.less b/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.less
index b4285732c57fd..6860705e58664 100644
--- a/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.less
+++ b/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.less
@@ -2,7 +2,7 @@
 
 .global-nav-link {
   position: relative;
-  width: @as-closed-width;
+  width: @global-nav-closed-width;
   height: @app-icon-height;
   line-height: @app-line-height;
 
@@ -27,7 +27,7 @@
 
 .is-global-nav-open {
   .global-nav-link {
-    width: @as-open-width;
+    width: @global-nav-open-width;
   }
 }
 
@@ -43,7 +43,7 @@
 
   .global-nav-link__icon {
     display: inline-block;
-    width: @as-closed-width;
+    width: @global-nav-closed-width;
     height: @app-icon-height;
     float: left;
     text-align: center;
@@ -70,7 +70,7 @@
 
   .global-nav-link__title {
     display: none;
-    width: calc(@as-open-width - @as-closed-width);
+    width: calc(@global-nav-open-width - @global-nav-closed-width);
     float: right;
     font-size: 0.9em;
     text-align: left;
diff --git a/src/ui/public/chrome/directives/kbn_chrome.less b/src/ui/public/chrome/directives/kbn_chrome.less
index 1e3d82bac109d..16887deb73417 100644
--- a/src/ui/public/chrome/directives/kbn_chrome.less
+++ b/src/ui/public/chrome/directives/kbn_chrome.less
@@ -7,7 +7,7 @@ body { overflow-x: hidden; }
 .app-wrapper {
   .real-flex-parent();
   position: absolute;
-  left: @as-closed-width;
+  left: @global-nav-closed-width;
   top: 0;
   right: 0;
   bottom: 0;
diff --git a/src/ui/public/courier/saved_object/ui/saved_object_save_as_checkbox.html b/src/ui/public/courier/saved_object/ui/saved_object_save_as_checkbox.html
index 466afdf55f9c4..22aa9bc996dde 100644
--- a/src/ui/public/courier/saved_object/ui/saved_object_save_as_checkbox.html
+++ b/src/ui/public/courier/saved_object/ui/saved_object_save_as_checkbox.html
@@ -1,5 +1,5 @@
 <div ng-hide="!savedObject.id || savedObject.isSaving">
-  <div ng-hide="!savedObject.isTitleChanged() || savedObject.copyOnSave" class="localDropdownWarning">
+  <div ng-hide="!savedObject.isTitleChanged() || savedObject.copyOnSave" class="kuiLocalDropdownWarning">
     In previous versions of Kibana, changing the name of a {{savedObject.getDisplayName()}} would make a copy with the new name. Use the 'Save as a new {{savedObject.getDisplayName()}}' checkbox to do this now.
   </div>
   <label>
diff --git a/src/ui/public/kbn_top_nav/kbn_top_nav.html b/src/ui/public/kbn_top_nav/kbn_top_nav.html
index dc96a4caec09d..e3b8a05350f1a 100644
--- a/src/ui/public/kbn_top_nav/kbn_top_nav.html
+++ b/src/ui/public/kbn_top_nav/kbn_top_nav.html
@@ -1,26 +1,26 @@
 <div
-  class="localNav"
+  class="kuiLocalNav"
   ng-show="kbnTopNav.isVisible()"
   data-test-subj="top-nav"
 >
   <!-- Top row -->
-  <div class="localNavRow">
+  <div class="kuiLocalNavRow">
     <!-- Top left corner slot, e.g. breadcrumbs, title. -->
     <div
-      class="localNavRow__section"
+      class="kuiLocalNavRow__section"
       data-transclude-slot="topLeftCorner"
     ></div>
 
     <!-- Right-side: menu -->
-    <div class="localNavRow__section">
-      <div class="localMenu">
+    <div class="kuiLocalNavRow__section">
+      <div class="kuiLocalMenu">
         <div
-          class="localMenuItem"
+          class="kuiLocalMenuItem"
           ng-repeat="menuItem in kbnTopNav.menuItems"
           aria-label="{{::menuItem.description}}"
           aria-haspopup="{{!menuItem.hasFunction}}"
           aria-expanded="{{kbnTopNav.isCurrent(menuItem.key)}}"
-          ng-class="{'localMenuItem-isSelected': kbnTopNav.isCurrent(menuItem.key), 'localMenuItem-isDisabled': menuItem.disableButton()}"
+          ng-class="{'kuiLocalMenuItem-isSelected': kbnTopNav.isCurrent(menuItem.key), 'kuiLocalMenuItem-isDisabled': menuItem.disableButton()}"
           ng-click="kbnTopNav.handleClick(menuItem)"
           ng-bind="menuItem.label"
           tooltip="{{menuItem.tooltip()}}"
@@ -38,10 +38,10 @@
 
   <!-- Dropdown content, e.g. time-picker. -->
   <div
-    class="localDropdown"
+    class="kuiLocalDropdown"
     ng-show="kbnTopNav.rendered"
   >
-    <button class="localDropdownCloseButton" ng-click="kbnTopNav.close()">
+    <button class="kuiLocalDropdownCloseButton" ng-click="kbnTopNav.close()">
       <span class="fa fa-chevron-circle-up"></span>
     </button>
     <div id="template_wrapper">
@@ -49,7 +49,7 @@
     </div>
   </div>
 
-  <div class="localNavRow localNavRow--secondary">
+  <div class="kuiLocalNavRow kuiLocalNavRow--secondary">
     <!-- Bottom row slot, e.g. tabs. -->
     <div data-transclude-slot="bottomRow"></div>
   </div>
diff --git a/src/ui/public/notify/partials/fatal_splash_screen.html b/src/ui/public/notify/partials/fatal_splash_screen.html
index 94411a12cbda7..a87302457b57e 100644
--- a/src/ui/public/notify/partials/fatal_splash_screen.html
+++ b/src/ui/public/notify/partials/fatal_splash_screen.html
@@ -19,4 +19,4 @@ <h1>Oops!</h1>
   </center>
   <div id="fatal-splash-screen">
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/ui/public/partials/bread_crumbs.html b/src/ui/public/partials/bread_crumbs.html
index 8b585b20b9376..3b31ecf7b667f 100644
--- a/src/ui/public/partials/bread_crumbs.html
+++ b/src/ui/public/partials/bread_crumbs.html
@@ -1,5 +1,5 @@
-<div class="localBreadcrumbs">
-  <div class="localBreadcrumb" ng-repeat="breadcrumb in breadcrumbs">
+<div class="kuiLocalBreadcrumbs">
+  <div class="kuiLocalBreadcrumb" ng-repeat="breadcrumb in breadcrumbs">
     {{breadcrumb}}
   </div>
 </div>
diff --git a/src/ui/public/share/views/share.html b/src/ui/public/share/views/share.html
index f43efa2d511a0..a56d9e2fb047b 100644
--- a/src/ui/public/share/views/share.html
+++ b/src/ui/public/share/views/share.html
@@ -1,34 +1,34 @@
-<div class="localDropdownPanels">
+<div class="kuiLocalDropdownPanels">
   <!-- Left panel -->
-  <div class="localDropdownPanel localDropdownPanel--left">
+  <div class="kuiLocalDropdownPanel kuiLocalDropdownPanel--left">
     <!-- Title -->
     <div
       data-test-subj="shareUiTitle"
-      class="localDropdownTitle"
+      class="kuiLocalDropdownTitle"
     >
       Share saved {{share.objectType}}
     </div>
 
     <!-- Help text -->
-    <div ng-if="share.urls.original" class="localDropdownHelpText">
+    <div ng-if="share.urls.original" class="kuiLocalDropdownHelpText">
       You can share this URL with people to let them load the most recent saved version of this {{share.objectType}}.
     </div>
 
-    <div ng-if="!share.urls.original" class="localDropdownWarning">
+    <div ng-if="!share.urls.original" class="kuiLocalDropdownWarning">
       Please save this {{share.objectType}} to enable this sharing option.
     </div>
 
     <div ng-if="share.urls.original">
       <!-- iframe -->
-      <div class="localDropdownSection" ng-if="share.allowEmbed">
+      <div class="kuiLocalDropdownSection" ng-if="share.allowEmbed">
         <!-- Header -->
-        <div class="localDropdownHeader">
-          <div class="localDropdownHeader__label">
+        <div class="kuiLocalDropdownHeader">
+          <div class="kuiLocalDropdownHeader__label">
             Embedded iframe
           </div>
-          <div class="localDropdownHeader__actions">
+          <div class="kuiLocalDropdownHeader__actions">
             <a
-              class="localDropdownHeader__action"
+              class="kuiLocalDropdownHeader__action"
               ng-click="share.copyToClipboard('#originalIframeUrl')"
             >
               Copy
@@ -39,28 +39,28 @@
         <!-- Input -->
         <input
           id="originalIframeUrl"
-          class="localDropdownInput"
+          class="kuiLocalDropdownInput"
           type="text"
           readonly
           value="{{share.makeIframeTag(share.urls.original)}}"
         />
 
         <!-- Notes -->
-        <div class="localDropdownFormNote">
+        <div class="kuiLocalDropdownFormNote">
           Add to your HTML source. Note that all clients must be able to access Kibana.
         </div>
       </div>
 
       <!-- Link -->
-      <div class="localDropdownSection">
+      <div class="kuiLocalDropdownSection">
         <!-- Header -->
-        <div class="localDropdownHeader">
-          <div class="localDropdownHeader__label">
+        <div class="kuiLocalDropdownHeader">
+          <div class="kuiLocalDropdownHeader__label">
             Link
           </div>
-          <div class="localDropdownHeader__actions">
+          <div class="kuiLocalDropdownHeader__actions">
             <a
-              class="localDropdownHeader__action"
+              class="kuiLocalDropdownHeader__action"
               ng-click="share.copyToClipboard('#originalUrl')"
             >
               Copy
@@ -71,7 +71,7 @@
         <!-- Input -->
         <input
           id="originalUrl"
-          class="localDropdownInput"
+          class="kuiLocalDropdownInput"
           type="text"
           readonly
           value="{{share.urls.original}}"
@@ -81,27 +81,27 @@
   </div>
 
   <!-- Right panel -->
-  <div class="localDropdownPanel localDropdownPanel--right">
+  <div class="kuiLocalDropdownPanel kuiLocalDropdownPanel--right">
     <!-- Title -->
-    <div class="localDropdownTitle">
+    <div class="kuiLocalDropdownTitle">
       Share Snapshot
     </div>
 
     <!-- Help text -->
-    <div class="localDropdownHelpText">
+    <div class="kuiLocalDropdownHelpText">
       Snapshot URLs encode the current state of the {{share.objectType}} in the URL itself. Edits to the saved {{share.objectType}} won't be visible via this URL.
     </div>
 
     <!-- iframe -->
-    <div class="localDropdownSection" ng-if="share.allowEmbed">
+    <div class="kuiLocalDropdownSection" ng-if="share.allowEmbed">
       <!-- Header -->
-      <div class="localDropdownHeader">
-        <div class="localDropdownHeader__label">
+      <div class="kuiLocalDropdownHeader">
+        <div class="kuiLocalDropdownHeader__label">
           Embedded iframe
         </div>
-        <div class="localDropdownHeader__actions">
+        <div class="kuiLocalDropdownHeader__actions">
           <a
-            class="localDropdownHeader__action"
+            class="kuiLocalDropdownHeader__action"
             ng-if="!share.urlFlags.shortSnapshotIframe"
             ng-click="share.toggleShortSnapshotIframeUrl()"
           >
@@ -109,7 +109,7 @@
           </a>
 
           <a
-            class="localDropdownHeader__action"
+            class="kuiLocalDropdownHeader__action"
             ng-if="share.urlFlags.shortSnapshotIframe"
             ng-click="share.toggleShortSnapshotIframeUrl()"
           >
@@ -117,7 +117,7 @@
           </a>
 
           <a
-            class="localDropdownHeader__action"
+            class="kuiLocalDropdownHeader__action"
             ng-click="share.copyToClipboard('#snapshotIframeUrl')"
           >
             Copy
@@ -128,29 +128,29 @@
       <!-- Input -->
       <input
         id="snapshotIframeUrl"
-        class="localDropdownInput"
+        class="kuiLocalDropdownInput"
         type="text"
         readonly
         value="{{share.urlFlags.shortSnapshotIframe ? share.makeIframeTag(share.urls.shortSnapshotIframe) : share.makeIframeTag(share.urls.snapshot)}}"
       />
 
       <!-- Notes -->
-      <div class="localDropdownFormNote">
+      <div class="kuiLocalDropdownFormNote">
         Add to your HTML source. Note that all clients must be able to access Kibana.
       </div>
     </div>
 
     <!-- Link -->
-    <div class="localDropdownSection">
+    <div class="kuiLocalDropdownSection">
       <!-- Header -->
-      <div class="localDropdownHeader">
-        <div class="localDropdownHeader__label">
+      <div class="kuiLocalDropdownHeader">
+        <div class="kuiLocalDropdownHeader__label">
           Link
         </div>
-        <div class="localDropdownHeader__actions">
+        <div class="kuiLocalDropdownHeader__actions">
           <a
             data-test-subj="sharedSnapshotShortUrlButton"
-            class="localDropdownHeader__action"
+            class="kuiLocalDropdownHeader__action"
             ng-if="!share.urlFlags.shortSnapshot"
             ng-click="share.toggleShortSnapshotUrl()"
           >
@@ -158,7 +158,7 @@
           </a>
 
           <a
-            class="localDropdownHeader__action"
+            class="kuiLocalDropdownHeader__action"
             ng-if="share.urlFlags.shortSnapshot"
             ng-click="share.toggleShortSnapshotUrl()"
           >
@@ -167,7 +167,7 @@
 
           <a
             data-test-subj="sharedSnapshotCopyButton"
-            class="localDropdownHeader__action"
+            class="kuiLocalDropdownHeader__action"
             ng-click="share.copyToClipboard('#snapshotUrl')"
           >
             Copy
@@ -179,14 +179,14 @@
       <input
         data-test-subj="sharedSnapshotUrl"
         id="snapshotUrl"
-        class="localDropdownInput"
+        class="kuiLocalDropdownInput"
         type="text"
         readonly
         value="{{share.urlFlags.shortSnapshot ? share.urls.shortSnapshot : share.urls.snapshot}}"
       />
 
       <!-- Notes -->
-      <div class="localDropdownFormNote">
+      <div class="kuiLocalDropdownFormNote">
         We recommend sharing shortened snapshot URLs for maximum compatibility. Internet Explorer has URL length restrictions, and some wiki and markup parsers don't do well with the full-length version of the snapshot URL, but the short URL should work great.
       </div>
     </div>
diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less
index 0ccfa5238a105..d7e11e6a39f5a 100644
--- a/src/ui/public/styles/base.less
+++ b/src/ui/public/styles/base.less
@@ -719,68 +719,6 @@ fieldset {
     flex: 1 1 auto;
   }
 
-/**
- * 1. Disable for Angular.
- */
-.kuiButton {
-  display: inline-block;
-  padding: 4px 24px;
-  color: #00a9e5;
-  border: 1px solid;
-  text-decoration: none;
-  border-radius: 3px;
-  background-color: transparent;
-
-  &[disabled] {
-    pointer-events: none; // 1
-    opacity: 0.4;
-  }
-}
-
-.kuiButton--default,
-.kuiButton--default:focus {
-  color: #2D2D2D;
-  border-color: #D4D4D4;
-
-  &:hover,
-  &:active {
-    color: #111111;
-    background-color: #FAFAFA;
-  }
-}
-
-.kuiButton--primary,
-.kuiButton--primary:focus {
-  color: #00a9e5;
-  border-color: #00a9e5;
-
-  &:hover,
-  &:active {
-    color: #00a9e5;
-    background-color: #ECF9FF;
-  }
-}
-
-.kuiButton--danger,
-.kuiButton--danger:focus {
-  color: #d76051;
-  border-color: #d76051;
-
-  &:hover,
-  &:active {
-    color: #d76051;
-    background-color: #ffe4e1;
-  }
-}
-
-.kuiIcon--success {
-  color: #80c383;
-}
-
-.kuiIcon--danger {
-  color: #d76051;
-}
-
 /**
  * 1. Override h1.
  */
@@ -1070,7 +1008,7 @@ fieldset {
 /**
  * 1. Override Bootstrap styles.
  */
-.localDropdownCloseButton {
+.kuiLocalDropdownCloseButton {
   color: #2d2d2d !important; /* 1 */
 
   .theme-dark & {
diff --git a/src/ui/public/styles/variables/for-theme.less b/src/ui/public/styles/variables/for-theme.less
index fced987036a10..5f1c20b50112b 100644
--- a/src/ui/public/styles/variables/for-theme.less
+++ b/src/ui/public/styles/variables/for-theme.less
@@ -337,9 +337,9 @@
 @saved-object-finder-link-color: @link-color;
 @saved-object-finder-icon-color: darken(@saved-object-finder-link-color, 10%);
 
-// App-switcher ================================================================
-@as-open-width: 160px;
-@as-closed-width: 53px;
+// Global Nav ================================================================
+@global-nav-open-width: 180px;
+@global-nav-closed-width: 53px;
 @app-icon-height: 38px;
 @app-line-height: 24px;
 @app-links-wrapper-background: #3caed2;
diff --git a/src/ui/public/timepicker/kbn_global_timepicker.html b/src/ui/public/timepicker/kbn_global_timepicker.html
index b7d8b684d9000..970632bad56e5 100644
--- a/src/ui/public/timepicker/kbn_global_timepicker.html
+++ b/src/ui/public/timepicker/kbn_global_timepicker.html
@@ -1,6 +1,6 @@
-<div ng-show="timefilter.enabled" class="localMenu" data-test-subj="globalTimepicker">
+<div ng-show="timefilter.enabled" class="kuiLocalMenu" data-test-subj="globalTimepicker">
   <div
-    class="localMenuItem"
+    class="kuiLocalMenuItem"
     ng-click="toggleRefresh()"
     ng-show="timefilter.refreshInterval.value > 0"
   >
@@ -8,8 +8,8 @@
   </div>
 
   <div
-    class="localMenuItem navbar-timepicker-auto-refresh-desc"
-    ng-class="{'localMenuItem-isSelected': kbnTopNav.isCurrent('interval') }"
+    class="kuiLocalMenuItem navbar-timepicker-auto-refresh-desc"
+    ng-class="{'kuiLocalMenuItem-isSelected': kbnTopNav.isCurrent('interval') }"
     ng-show="timefilter.refreshInterval.value > 0 || kbnTopNav.isCurrent('interval') || kbnTopNav.isCurrent('filter')"
     ng-click="kbnTopNav.toggle('interval')"
   >
@@ -21,14 +21,14 @@
     </span>
   </div>
 
-  <div class="localMenuItem" ng-click="back()">
+  <div class="kuiLocalMenuItem" ng-click="back()">
     <span class="fa fa-chevron-left ng-scope" tooltip="Move backwards in time"></span>
   </div>
 
   <div
     data-test-subj="globalTimepickerButton"
-    class="localMenuItem navbar-timepicker-time-desc"
-    ng-class="{'localMenuItem-isSelected': kbnTopNav.isCurrent('filter')}"
+    class="kuiLocalMenuItem navbar-timepicker-time-desc"
+    ng-class="{'kuiLocalMenuItem-isSelected': kbnTopNav.isCurrent('filter')}"
     ng-click="kbnTopNav.toggle('filter')"
     aria-haspopup="true"
     aria-expanded="false"
@@ -40,7 +40,7 @@
     ></pretty-duration>
   </div>
 
-  <div class="localMenuItem" ng-click="forward()">
+  <div class="kuiLocalMenuItem" ng-click="forward()">
     <span class="fa fa-chevron-right ng-scope" tooltip="Move forwards in time"></span>
   </div>
 </div>
diff --git a/src/ui/public/timepicker/timepicker.html b/src/ui/public/timepicker/timepicker.html
index de82c5d2131cc..d08f3b94e0b60 100644
--- a/src/ui/public/timepicker/timepicker.html
+++ b/src/ui/public/timepicker/timepicker.html
@@ -4,7 +4,7 @@
 
     <!-- Filters -->
     <div ng-show="activeTab === 'filter'" role="tabpanel" class="tab-pane active">
-      <div class="localDropdownTitle">Time Range</div>
+      <div class="kuiLocalDropdownTitle">Time Range</div>
       <div class="row">
         <div class="col-md-2">
           <ul class="nav nav-pills nav-stacked kbn-timepicker-modes">
@@ -141,7 +141,7 @@
 
     <!-- Refresh Intervals -->
     <div ng-show="activeTab === 'interval'" role="tabpanel" class="tab-pane active">
-      <div class="localDropdownTitle">Refresh Interval</div>
+      <div class="kuiLocalDropdownTitle">Refresh Interval</div>
       <div ng-repeat="list in refreshLists" class="kbn-refresh-section">
         <ul class="list-unstyled">
           <li ng-repeat="inter in list">
diff --git a/src/ui_framework/components/button/_button.scss b/src/ui_framework/components/button/_button.scss
new file mode 100644
index 0000000000000..72c436d5bfbc9
--- /dev/null
+++ b/src/ui_framework/components/button/_button.scss
@@ -0,0 +1,82 @@
+/**
+ * 1. Disable for Angular.
+ */
+.kuiButton {
+  appearance: none;
+  padding: 4px 12px 5px;
+  font-size: $fontSize;
+  font-weight: 400;
+  line-height: $lineHeight;
+  text-decoration: none;
+  border: none;
+  border-radius: $buttonBorderRadius;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: default;
+    pointer-events: none; // 1
+  }
+
+  &:active:enabled {
+    transform: translateY(1px);
+  }
+
+  &:focus {
+    @include focus;
+  }
+}
+
+.kuiButton--iconText {
+  .kuiButton__icon {
+    margin-right: 4px;
+  }
+}
+
+.kuiButton--basic {
+  color: #5a5a5a;
+  background-color: #F2F2F2;
+
+  &:hover:enabled,
+  &:active:enabled {
+    color: #ffffff;
+    background-color: #9B9B9B;
+  }
+
+  &:disabled {
+    color: #9B9B9B;
+  }
+}
+
+.kuiButton--primary {
+  color: #FFFFFF;
+  background-color: #6EADC1;
+
+  &:hover:enabled,
+  &:active:enabled {
+    color: #FFFFFF;
+    background-color: #006E8A;
+  }
+
+  &:disabled {
+    background-color: #B6D6E0;
+  }
+}
+
+.kuiButton--danger {
+  color: #FFFFFF;
+  background-color: #D76051;
+
+  &:hover:enabled,
+  &:active:enabled {
+    color: #FFFFFF;
+    background-color: #A52E1F;
+  }
+
+  &:disabled {
+    background-color: #efc0ba;
+  }
+
+  &:focus {
+    @include focus(#ff523c);
+  }
+}
diff --git a/src/ui_framework/components/button/_button_group.scss b/src/ui_framework/components/button/_button_group.scss
new file mode 100644
index 0000000000000..99bda0f79b9f5
--- /dev/null
+++ b/src/ui_framework/components/button/_button_group.scss
@@ -0,0 +1,21 @@
+.kuiButtonGroup {
+  display: flex;
+
+  > .kuiButton:not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+
+  > .kuiButton:first-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  > .kuiButton:last-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .kuiButton + .kuiButton {
+    margin-left: 2px;
+  }
+}
diff --git a/src/ui_framework/components/button/_index.scss b/src/ui_framework/components/button/_index.scss
new file mode 100644
index 0000000000000..981ea6923233f
--- /dev/null
+++ b/src/ui_framework/components/button/_index.scss
@@ -0,0 +1,2 @@
+@import "button";
+@import "button_group";
diff --git a/src/ui_framework/components/form/_check_box.scss b/src/ui_framework/components/form/_check_box.scss
new file mode 100644
index 0000000000000..4f4cd9a1ad1b8
--- /dev/null
+++ b/src/ui_framework/components/form/_check_box.scss
@@ -0,0 +1,39 @@
+/**
+ * 1. Deliberately disable only webkit appearance. If we disable it in Firefox, we get a really
+ *    ugly default appearance which we can't customize, so our best option is to give Firefox
+ *    control over the checkbox's appearance.
+ */
+.kuiCheckBox {
+  -webkit-appearance: none; /* 1 */
+  background-color: #FFFFFF;
+  border: 1px solid #BEBEBE;
+  border-radius: $buttonBorderRadius;
+  width: 16px;
+  height: 16px;
+  line-height: $lineHeight;
+  transition: background-color $formTransitionTiming;
+
+  &:before {
+    position: relative;
+    top: -0.05em;
+    left: 0.15em;
+    font-family: FontAwesome;
+    content: "\F00C";
+    font-size: 1em;
+    opacity: 0;
+    color: #ffffff;
+    transition: opacity $formTransitionTiming;
+  }
+
+  &:checked {
+    border-color: #328CAA;
+    background-color: #328CAA;
+    &:before {
+      opacity: 1;
+    }
+  }
+
+  &:focus {
+    @include focus;
+  }
+}
diff --git a/src/ui_framework/components/form/_index.scss b/src/ui_framework/components/form/_index.scss
new file mode 100644
index 0000000000000..6e6c02c9a0dbc
--- /dev/null
+++ b/src/ui_framework/components/form/_index.scss
@@ -0,0 +1,2 @@
+@import "check_box";
+@import "text_input";
diff --git a/src/ui_framework/components/form/_text_input.scss b/src/ui_framework/components/form/_text_input.scss
new file mode 100644
index 0000000000000..d7cb573e60913
--- /dev/null
+++ b/src/ui_framework/components/form/_text_input.scss
@@ -0,0 +1,21 @@
+.kuiTextInput {
+  appearance: none;
+  padding: 3px 12px 4px;
+  font-size: $fontSize;
+  font-weight: 400;
+  line-height: $lineHeight;
+  background-color: #ffffff;
+  border: 1px solid #DEDEDE;
+  color: $fontColor;
+  border-radius: $buttonBorderRadius;
+  transition: border-color $formTransitionTiming;
+
+  &:invalid {
+    border-color: $errorBorderColor;
+  }
+
+  &:focus {
+    @include focus;
+    border-color: $selectedBorderColor;
+  }
+}
diff --git a/src/ui_framework/components/icon/_icon.scss b/src/ui_framework/components/icon/_icon.scss
new file mode 100644
index 0000000000000..c746744d544cf
--- /dev/null
+++ b/src/ui_framework/components/icon/_icon.scss
@@ -0,0 +1,24 @@
+/**
+ * 1. Copied from FontAwesome's .fa class. We use a custom class to make it easier to migrate away
+ *    from FontAwesome someday. When we do migrate away, we can just update this definition.
+ */
+.kuiIcon {
+  display: inline-block; /* 1 */
+  font: normal normal normal 14px/1 FontAwesome; /* 1 */
+  font-size: inherit; /* 1 */
+  text-rendering: auto; /* 1 */
+  -webkit-font-smoothing: antialiased; /* 1 */
+  -moz-osx-font-smoothing: grayscale; /* 1 */
+}
+
+.kuiIcon--success {
+  color: $successColor;
+}
+
+.kuiIcon--warning {
+  color: $warningColor;
+}
+
+.kuiIcon--error {
+  color: $errorColor;
+}
diff --git a/src/ui_framework/components/icon/_index.scss b/src/ui_framework/components/icon/_index.scss
new file mode 100644
index 0000000000000..0942895f8b01e
--- /dev/null
+++ b/src/ui_framework/components/icon/_index.scss
@@ -0,0 +1 @@
+@import "icon";
diff --git a/src/ui_framework/components/index.scss b/src/ui_framework/components/index.scss
index 8eaa3ef6bea93..3e630952faf7a 100644
--- a/src/ui_framework/components/index.scss
+++ b/src/ui_framework/components/index.scss
@@ -18,10 +18,55 @@ $inputTextColor--darkTheme: $textColor--darkTheme;
 $inputBackgroundColor--darkTheme: #444444;
 $inputBorderColor--darkTheme: $inputBackgroundColor--darkTheme;
 
+// Font
+$fontSize: 14px;
+$lineHeight: 1.5;
+
+// Button
+$buttonBorderRadius: 4px;
+
+// Colors
+$successColor: #417505;
+$warningColor: #ffac15;
+$errorColor: #D86051;
+$fontColor: #191E23;
+$panelColor: #E4E4E4;
+$selectedBorderColor: #6EADC1;
+$errorBorderColor: $errorColor;
+
+// Borders
+$tableBorder: 2px solid $panelColor;
+
+// Timing
+$formTransitionTiming: 0.1s linear;
+
 @mixin darkTheme() {
   .theme-dark & {
     @content;
   }
 }
 
+/**
+ * 1. Make sure outline doesn't get hidden beneath adjacent elements.
+ */
+@mixin focus($color: #6EADC1) {
+  z-index: 1; /* 1 */
+  outline: 1px solid $color;
+  outline-offset: 2px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Open Sans", Helvetica, Arial, sans-serif;
+}
+
+@import "button/index";
+@import "form/index";
+@import "icon/index";
+@import "link/index";
 @import "local_nav/index";
+@import "table/index";
+@import "tool_bar/index";
diff --git a/src/ui_framework/components/link/_index.scss b/src/ui_framework/components/link/_index.scss
new file mode 100644
index 0000000000000..bab69d1531543
--- /dev/null
+++ b/src/ui_framework/components/link/_index.scss
@@ -0,0 +1 @@
+@import "link";
diff --git a/src/ui_framework/components/link/_link.scss b/src/ui_framework/components/link/_link.scss
new file mode 100644
index 0000000000000..2a374d19f83f0
--- /dev/null
+++ b/src/ui_framework/components/link/_link.scss
@@ -0,0 +1,14 @@
+.kuiLink {
+  color: #3CAED2;
+  text-decoration: none;
+
+  &:visited,
+  &:active {
+    color: #3CAED2;
+  }
+
+  &:hover {
+    color: #006E8A;
+    text-decoration: underline;
+  }
+}
diff --git a/src/ui_framework/components/local_nav/_local_breadcrumbs.scss b/src/ui_framework/components/local_nav/_local_breadcrumbs.scss
index 16d8bd834f5da..2df5e85370408 100644
--- a/src/ui_framework/components/local_nav/_local_breadcrumbs.scss
+++ b/src/ui_framework/components/local_nav/_local_breadcrumbs.scss
@@ -3,14 +3,14 @@
  * 1. Breadcrumbs are placed in the top-left corner and need to be bumped over
  *    a bit.
  */
-.localBreadcrumbs {
+.kuiLocalBreadcrumbs {
   display: flex;
   align-items: center;
   height: 100%;
   padding-left: $localNavSideSpacing; /* 1 */
 }
 
-  .localBreadcrumb {
+  .kuiLocalBreadcrumb {
     & + & {
       margin-left: 6px;
 
@@ -27,7 +27,7 @@
     }
 
     &:last-child {
-      .localBreadcrumb__link {
+      .kuiLocalBreadcrumb__link {
         color: $localNavTextColor;
         cursor: default;
 
@@ -40,10 +40,9 @@
         }
       }
     }
-
   }
 
-    .localBreadcrumb__link {
+    .kuiLocalBreadcrumb__link {
       font-size: $localNavFontSizeNormal;
       color: #5a5a5a;
       text-decoration: none;
@@ -57,6 +56,6 @@
       }
     }
 
-    .localBreadcrumb__emphasis {
+    .kuiLocalBreadcrumb__emphasis {
       font-weight: 700;
     }
diff --git a/src/ui_framework/components/local_nav/_local_dropdown.scss b/src/ui_framework/components/local_nav/_local_dropdown.scss
index 53728b4e8f502..7e6d9fb925029 100644
--- a/src/ui_framework/components/local_nav/_local_dropdown.scss
+++ b/src/ui_framework/components/local_nav/_local_dropdown.scss
@@ -1,5 +1,4 @@
-
-.localDropdown {
+.kuiLocalDropdown {
   position: relative;
   padding: 10px $localNavSideSpacing 14px;
   background-color: $localDropdownBackgroundColor;
@@ -10,7 +9,7 @@
   }
 }
 
-.localDropdownCloseButton {
+.kuiLocalDropdownCloseButton {
   appearance: none;
   background-color: transparent;
   padding: 4px;
@@ -32,23 +31,23 @@
   }
 }
 
-.localDropdownPanels {
+.kuiLocalDropdownPanels {
   display: flex;
 }
 
-.localDropdownPanel {
+.kuiLocalDropdownPanel {
   flex: 1 1 0%;
 }
 
-.localDropdownPanel--left {
+.kuiLocalDropdownPanel--left {
   margin-right: 30px;
 }
 
-.localDropdownPanel--right {
+.kuiLocalDropdownPanel--right {
   margin-left: 30px;
 }
 
-.localDropdownTitle {
+.kuiLocalDropdownTitle {
   margin-bottom: 12px;
   font-size: 18px;
   color: $localNavTextColor;
@@ -58,7 +57,7 @@
   }
 }
 
-.localDropdownSection {
+.kuiLocalDropdownSection {
   margin-bottom: 16px;
 
   &:last-child {
@@ -66,14 +65,14 @@
   }
 }
 
-.localDropdownHeader {
+.kuiLocalDropdownHeader {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 6px;
 }
 
-  .localDropdownHeader__label {
+  .kuiLocalDropdownHeader__label {
     font-size: 14px;
     font-weight: 700;
     color: $localNavTextColor;
@@ -83,11 +82,11 @@
     }
   }
 
-  .localDropdownHeader__actions {
+  .kuiLocalDropdownHeader__actions {
     display: flex;
   }
 
-  .localDropdownHeader__action {
+  .kuiLocalDropdownHeader__action {
     color: $linkColor;
     font-size: 12px;
     text-decoration: none;
@@ -112,7 +111,7 @@
     }
   }
 
-.localDropdownInput {
+.kuiLocalDropdownInput {
   display: block;
   width: 100%;
   margin-bottom: 12px;
@@ -130,7 +129,7 @@
   }
 }
 
-.localDropdownFormNote {
+.kuiLocalDropdownFormNote {
   font-size: 14px;
   color: $localDropdownFormNoteTextColor;
 
@@ -139,7 +138,7 @@
   }
 }
 
-.localDropdownWarning {
+.kuiLocalDropdownWarning {
   margin-bottom: 16px;
   padding: 6px 10px;
   font-size: 14px;
@@ -152,7 +151,7 @@
   }
 }
 
-.localDropdownHelpText {
+.kuiLocalDropdownHelpText {
   margin-bottom: 16px;
   font-size: 14px;
   color: #2D2D2D;
diff --git a/src/ui_framework/components/local_nav/_local_menu.scss b/src/ui_framework/components/local_nav/_local_menu.scss
index 45c9c0a6e728a..f028dba568e4a 100644
--- a/src/ui_framework/components/local_nav/_local_menu.scss
+++ b/src/ui_framework/components/local_nav/_local_menu.scss
@@ -1,11 +1,11 @@
 
-.localMenu {
+.kuiLocalMenu {
   display: flex;
   align-items: center;
   height: 100%;
 }
 
-  .localMenuItem {
+  .kuiLocalMenuItem {
     display: flex;
     align-items: center;
     height: 100%;
@@ -21,11 +21,11 @@
       color: $localNavButtonTextColor-isHover;
     }
 
-    &.localMenuItem-isSelected {
+    &.kuiLocalMenuItem-isSelected {
       background-color: $localNavButtonBackgroundColor-isSelected;
     }
 
-    &.localMenuItem-isDisabled {
+    &.kuiLocalMenuItem-isDisabled {
       opacity: 0.5;
       cursor: default;
 
@@ -43,11 +43,11 @@
         color: $localNavButtonTextColor-isHover--darkTheme;
       }
 
-      &.localMenuItem-isSelected {
+      &.kuiLocalMenuItem-isSelected {
         background-color: $localNavButtonBackgroundColor-isSelected--darkTheme;
       }
 
-      &.localMenuItem-isDisabled {
+      &.kuiLocalMenuItem-isDisabled {
         &:hover {
           background-color: transparent;
           color: $localNavButtonTextColor--darkTheme;
@@ -56,7 +56,7 @@
     }
   }
 
-    .localMenuItem__icon {
+    .kuiLocalMenuItem__icon {
       margin-right: 5px;
       margin-bottom: -1px;
     }
diff --git a/src/ui_framework/components/local_nav/_local_nav.scss b/src/ui_framework/components/local_nav/_local_nav.scss
index 2e5b6f48a876d..28c7a6924ebc6 100644
--- a/src/ui_framework/components/local_nav/_local_nav.scss
+++ b/src/ui_framework/components/local_nav/_local_nav.scss
@@ -3,7 +3,7 @@
  * 1. Match height of logo in side bar, but allow it to expand to accommodate
  *    dropdown.
  */
-.localNav {
+.kuiLocalNav {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -17,18 +17,18 @@
   }
 }
 
-.localNavRow {
+.kuiLocalNavRow {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 32px;
 }
 
-  .localNavRow__section {
+  .kuiLocalNavRow__section {
     height: 100%;
   }
 
-.localNavRow--secondary {
+.kuiLocalNavRow--secondary {
   height: 38px;
   padding: 0 $localNavSideSpacing;
 }
diff --git a/src/ui_framework/components/local_nav/_local_search.scss b/src/ui_framework/components/local_nav/_local_search.scss
index 103e2c889aacf..1518c079e954b 100644
--- a/src/ui_framework/components/local_nav/_local_search.scss
+++ b/src/ui_framework/components/local_nav/_local_search.scss
@@ -1,13 +1,13 @@
 
 $localSearchHeight: 30px;
 
-.localSearch {
+.kuiLocalSearch {
   display: flex;
   width: 100%;
   height: $localSearchHeight;
 }
 
-.localSearchInput {
+.kuiLocalSearchInput {
   flex: 1 1 100%;
   padding: 5px 15px;
   font-size: $localNavFontSizeNormal;
@@ -19,7 +19,7 @@ $localSearchHeight: 30px;
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 
-  &.localSearchInput-isInvalid {
+  &.kuiLocalSearchInput-isInvalid {
     border-color: $localSearchBorderColor-isInvalid;
   }
 
@@ -28,13 +28,13 @@ $localSearchHeight: 30px;
     background-color: $localSearchBackgroundColor--darkTheme;
     border-color: $localSearchBackgroundColor--darkTheme;
 
-    &.localSearchInput-isInvalid {
+    &.kuiLocalSearchInput-isInvalid {
       border-color: $localSearchBorderColor-isInvalid--darkTheme;
     }
   }
 }
 
-.localSearchButton {
+.kuiLocalSearchButton {
   width: 43px;
   height: $localSearchHeight;
   font-size: $localNavFontSizeNormal;
diff --git a/src/ui_framework/components/local_nav/_local_tabs.scss b/src/ui_framework/components/local_nav/_local_tabs.scss
index ce83b304cc9a2..7a5df8e0eb693 100644
--- a/src/ui_framework/components/local_nav/_local_tabs.scss
+++ b/src/ui_framework/components/local_nav/_local_tabs.scss
@@ -1,7 +1,7 @@
 /**
  * 1. We want the bottom border on selected tabs to be flush with the bottom of the container.
  */
-.localTabs {
+.kuiLocalTabs {
   display: flex;
   align-items: flex-end; // 1
   height: 100%;
@@ -10,7 +10,7 @@
   /**
    * 1. Make sure the bottom border is flush with the bottom of the LocalNav.
    */
-  .localTab {
+  .kuiLocalTab {
     padding: 5px 0 6px 0;
     font-size: 18px;
     line-height: 22px; /* 1 */
@@ -28,7 +28,7 @@
       }
     }
 
-    &.localTab-isSelected {
+    &.kuiLocalTab-isSelected {
       color: $localTabTextColor-isSelected;
       border-bottom-color: $localTabTextColor-isSelected;
       cursor: default;
diff --git a/src/ui_framework/components/local_nav/_local_title.scss b/src/ui_framework/components/local_nav/_local_title.scss
index 34d62b00c5a6a..65eb0333dc987 100644
--- a/src/ui_framework/components/local_nav/_local_title.scss
+++ b/src/ui_framework/components/local_nav/_local_title.scss
@@ -1,4 +1,4 @@
-.localTitle {
+.kuiLocalTitle {
   display: flex;
   align-items: center;
   height: 100%;
diff --git a/src/ui_framework/components/table/_controlled_table.scss b/src/ui_framework/components/table/_controlled_table.scss
new file mode 100644
index 0000000000000..57993e52bdced
--- /dev/null
+++ b/src/ui_framework/components/table/_controlled_table.scss
@@ -0,0 +1,13 @@
+/**
+ * 1. Make seamless transition from ToolBar to Table header.
+ * 1. Make seamless transition from Table to ToolBarFooter header.
+ */
+.kuiControlledTable {
+  .kuiTable {
+    border-top: none; /* 1 */
+  }
+
+  .kuiToolBarFooter {
+    border-top: none; /* 2 */
+  }
+}
diff --git a/src/ui_framework/components/table/_index.scss b/src/ui_framework/components/table/_index.scss
new file mode 100644
index 0000000000000..108f3e2884e7f
--- /dev/null
+++ b/src/ui_framework/components/table/_index.scss
@@ -0,0 +1,2 @@
+@import "controlled_table";
+@import "table";
diff --git a/src/ui_framework/components/table/_table.scss b/src/ui_framework/components/table/_table.scss
new file mode 100644
index 0000000000000..a1e32daa47daf
--- /dev/null
+++ b/src/ui_framework/components/table/_table.scss
@@ -0,0 +1,62 @@
+@mixin tableCell {
+  font-size: $fontSize;
+  font-weight: 400;
+  line-height: $lineHeight;
+  padding: 7px 8px 8px;
+  text-align: left;
+
+  &:last-child {
+    padding-right: 16px;
+  }
+}
+
+.kuiTable {
+  table-layout: fixed;
+  width: 100%;
+  border: $tableBorder;
+  border-collapse: collapse;
+}
+
+.kuiTableHeaderCell {
+  @include tableCell;
+  color: #787878;
+}
+
+/**
+ * 1. Prevent rapid clicking from selecting text.
+ */
+.kuiTableHeaderCell--sortable {
+  user-select: none; /* 1 */
+  cursor: pointer;
+
+  &:hover:not(.kuiTableHeaderCell-isSorted) {
+    .kuiTableSortIcon {
+      opacity: 0.4;
+    }
+  }
+}
+
+.kuiTableSortIcon {
+  pointer-events: none;
+}
+
+.kuiTableRowCell {
+  @include tableCell;
+  color: $fontColor;
+  border-top: $tableBorder;
+}
+
+  .kuiTableRowCell__liner {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+/**
+ * 1. Rendered width of cell with checkbox inside of it.
+ */
+.kuiTableHeaderCell--checkBox,
+.kuiTableRowCell--checkBox {
+  width: 28px; /* 1 */
+  padding-right: 0;
+}
diff --git a/src/ui_framework/components/tool_bar/_index.scss b/src/ui_framework/components/tool_bar/_index.scss
new file mode 100644
index 0000000000000..70749aad66ba9
--- /dev/null
+++ b/src/ui_framework/components/tool_bar/_index.scss
@@ -0,0 +1,7 @@
+$toolBarSectionSpacing: 50px;
+$toolBarItsemSpacing: 10px;
+
+@import "tool_bar";
+@import "tool_bar_footer";
+@import "tool_bar_search";
+@import "tool_bar_text";
diff --git a/src/ui_framework/components/tool_bar/_tool_bar.scss b/src/ui_framework/components/tool_bar/_tool_bar.scss
new file mode 100644
index 0000000000000..683e952dc5db7
--- /dev/null
+++ b/src/ui_framework/components/tool_bar/_tool_bar.scss
@@ -0,0 +1,37 @@
+.kuiToolBar {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+  height: 50px;
+  background-color: $panelColor;
+
+  .kuiButton--basic {
+    background-color: #FFFFFF;
+
+    &:hover:enabled {
+      background-color: #FFFFFF;
+    }
+
+    &:active:enabled {
+      background-color: #FAFAFA;
+    }
+  }
+}
+
+/**
+ * 1. Put 10px of space between each child.
+ */
+.kuiToolBarSection {
+  display: flex;
+  align-items: center;
+  margin-left: $toolBarSectionSpacing * 0.5;
+  margin-right: $toolBarSectionSpacing * 0.5;
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  & > * + * {
+    margin-left: $toolBarItsemSpacing; /* 1 */
+  }
+}
diff --git a/src/ui_framework/components/tool_bar/_tool_bar_footer.scss b/src/ui_framework/components/tool_bar/_tool_bar_footer.scss
new file mode 100644
index 0000000000000..f7ef69f6c45cd
--- /dev/null
+++ b/src/ui_framework/components/tool_bar/_tool_bar_footer.scss
@@ -0,0 +1,30 @@
+.kuiToolBarFooter {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+  height: 40px;
+  background-color: #ffffff;
+  border: $tableBorder;
+}
+
+/**
+ * 1. Put 10px of space between each child.
+ */
+.kuiToolBarFooterSection {
+  display: flex;
+  align-items: center;
+  margin-left: $toolBarSectionSpacing * 0.5;
+  margin-right: $toolBarSectionSpacing * 0.5;
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  &:only-child {
+    margin-left: auto;
+  }
+
+  & > * + * {
+    margin-left: $toolBarItsemSpacing; /* 1 */
+  }
+}
diff --git a/src/ui_framework/components/tool_bar/_tool_bar_search.scss b/src/ui_framework/components/tool_bar/_tool_bar_search.scss
new file mode 100644
index 0000000000000..d66708273f539
--- /dev/null
+++ b/src/ui_framework/components/tool_bar/_tool_bar_search.scss
@@ -0,0 +1,35 @@
+.kuiToolBarSearch {
+  display: flex;
+  flex: 1 1 auto;
+  max-width: 800px;
+  line-height: $lineHeight;
+  margin-right: $toolBarSectionSpacing * 0.5;
+}
+
+.kuiToolBarSearchBox {
+  flex: 1 1 auto;
+  position: relative;
+}
+
+  .kuiToolBarSearchBox__icon {
+    position: absolute;
+    top: 6px;
+    left: 8px;
+    font-size: 14px;
+    color: #ACACAC;
+  }
+
+  .kuiToolBarSearchBox__input {
+    width: 100%;
+    min-width: 200px;
+    padding: 5px 12px 6px 28px;
+    background-color: #FFFFFF;
+    color: $fontColor;
+    border: 1px solid #FFFFFF;
+    border-radius: $buttonBorderRadius;
+    font-size: $fontSize;
+
+    &:focus {
+      @include focus;
+    }
+  }
diff --git a/src/ui_framework/components/tool_bar/_tool_bar_text.scss b/src/ui_framework/components/tool_bar/_tool_bar_text.scss
new file mode 100644
index 0000000000000..e0acae0abaa8d
--- /dev/null
+++ b/src/ui_framework/components/tool_bar/_tool_bar_text.scss
@@ -0,0 +1,9 @@
+/*
+ * 1. We don't want the text to take up two lines and overflow the ToolBar.
+ */
+.kuiToolBarText {
+  font-size: $fontSize;
+  line-height: $lineHeight;
+  color: #5A5A5A;
+  white-space: nowrap; /* 1 */
+}
diff --git a/src/ui_framework/doc_site/build/index.html b/src/ui_framework/doc_site/build/index.html
index 8bf6acd476348..3717c95289f77 100644
--- a/src/ui_framework/doc_site/build/index.html
+++ b/src/ui_framework/doc_site/build/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta http-equiv="content-type" content="text/html; charset=UTF8">
-    <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700|Ubuntu+Mono:400' rel='stylesheet' type='text/css'>
+    <link href='https://fonts.googleapis.com/css?family=Open Sans:300,400,700|Ubuntu+Mono:400' rel='stylesheet' type='text/css'>
     <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
     <script src="https://use.fontawesome.com/a9649923ac.js"></script>
   </head>
diff --git a/src/ui_framework/doc_site/postcss.config.js b/src/ui_framework/doc_site/postcss.config.js
new file mode 100644
index 0000000000000..dc06a629c48b7
--- /dev/null
+++ b/src/ui_framework/doc_site/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')({ browsers: ['last 2 versions'] })
+  ]
+};
diff --git a/src/ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss b/src/ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss
index 80ababb96841d..dc5e60165fd17 100644
--- a/src/ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss
+++ b/src/ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss
@@ -1,3 +1,9 @@
+.guideCode {
+  padding: 2px 4px;
+  font-family: 'Ubuntu Mono', monospace;
+  background-color: #e8e8e8;
+  color: #565656;
+}
 
 .guideCodeViewer {
   position: fixed;
diff --git a/src/ui_framework/doc_site/src/components/guide_example/guide_example.jsx b/src/ui_framework/doc_site/src/components/guide_example/guide_example.jsx
index 72508a5493a54..0d5782368bb03 100644
--- a/src/ui_framework/doc_site/src/components/guide_example/guide_example.jsx
+++ b/src/ui_framework/doc_site/src/components/guide_example/guide_example.jsx
@@ -1,4 +1,3 @@
-
 import React, {
   Component,
   PropTypes,
@@ -43,6 +42,7 @@ export default class GuideExample extends Component {
         slug={section.slug}
         html={section.html}
         js={section.js}
+        hasDarkTheme={section.hasDarkTheme}
       >
         {section.description}
       </GuidePageSection>
@@ -73,5 +73,6 @@ GuideExample.propTypes = {
     description: React.PropTypes.any,
     html: React.PropTypes.string.isRequired,
     js: React.PropTypes.string,
+    hasDarkTheme: React.PropTypes.bool,
   })),
 };
diff --git a/src/ui_framework/doc_site/src/components/guide_nav/_guide_nav.scss b/src/ui_framework/doc_site/src/components/guide_nav/_guide_nav.scss
index adb168888663a..3de72dc661479 100644
--- a/src/ui_framework/doc_site/src/components/guide_nav/_guide_nav.scss
+++ b/src/ui_framework/doc_site/src/components/guide_nav/_guide_nav.scss
@@ -1,11 +1,12 @@
 .guideNav {
+  display: flex;
+  flex-direction: column;
   position: fixed;
   z-index: 1;
   top: 0;
   left: 0;
   right: 0;
   height: $guideNavHeight;
-  padding: 0 20px;
   background-color: #e8488b;
   color: #ffffff;
   box-shadow:
@@ -20,9 +21,11 @@
 }
 
   .guideNav__header {
+    flex: 0 0 auto;
     display: flex;
     align-items: center;
     height: 60px;
+    padding: 0 20px;
   }
 
     .guideNav__menu {
@@ -54,14 +57,29 @@
       font-size: 14px;
     }
 
-  .guideNavItem {
-    color: white;
-    text-decoration: none;
-    font-size: 20px;
-    padding: 10px;
-    border-radius: 3px;
+.guideNavItemsContainer {
+  @include scrollbar;
+  display: flex;
+  overflow: auto;
+}
 
-    &:hover {
-      background-color: rgba(black, 0.15);
-    }
+.guideNavItems {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  align-content: flex-start;
+}
+
+.guideNavItem {
+  color: white;
+  text-decoration: none;
+  font-size: 20px;
+  line-height: 20px;
+  padding: 8px 20px;
+  border-radius: 3px;
+
+  &:hover {
+    background-color: rgba(black, 0.15);
   }
+}
diff --git a/src/ui_framework/doc_site/src/components/guide_nav/guide_nav.jsx b/src/ui_framework/doc_site/src/components/guide_nav/guide_nav.jsx
index f6d7aacf9f1b1..b510ff0dc2438 100644
--- a/src/ui_framework/doc_site/src/components/guide_nav/guide_nav.jsx
+++ b/src/ui_framework/doc_site/src/components/guide_nav/guide_nav.jsx
@@ -47,8 +47,10 @@ const GuideNav = props => {
         </Link>
       </div>
 
-      <div className="guideNavItems">
-        {navItems}
+      <div className="guideNavItemsContainer">
+        <div className="guideNavItems">
+          {navItems}
+        </div>
       </div>
     </div>
   );
diff --git a/src/ui_framework/doc_site/src/components/guide_page_section/guide_page_section.jsx b/src/ui_framework/doc_site/src/components/guide_page_section/guide_page_section.jsx
index aa3ea3e3dc423..a1bdf62361898 100644
--- a/src/ui_framework/doc_site/src/components/guide_page_section/guide_page_section.jsx
+++ b/src/ui_framework/doc_site/src/components/guide_page_section/guide_page_section.jsx
@@ -46,7 +46,10 @@ export default class GuidePageSection extends Component {
     }
 
     trimChildren(this.refs.html);
-    trimChildren(this.refs.htmlDarkTheme);
+
+    if (this.refs.htmlDarkTheme) {
+      trimChildren(this.refs.htmlDarkTheme);
+    }
   }
 
   componentWillUnmount() {
@@ -59,6 +62,10 @@ export default class GuidePageSection extends Component {
   }
 
   render() {
+    const exampleClasses = classNames('guidePageSection__example', {
+      'guidePageSection__example--standalone': !this.props.children,
+    });
+
     let description;
 
     if (this.props.children) {
@@ -69,9 +76,21 @@ export default class GuidePageSection extends Component {
       );
     }
 
-    const exampleClasses = classNames('guidePageSection__example', {
-      'guidePageSection__example--standalone': !this.props.children,
-    });
+    let darkThemeExample;
+
+    if (this.props.hasDarkTheme) {
+      darkThemeExample = (
+        <div
+          ref="htmlDarkTheme"
+          className={`${exampleClasses} theme-dark`}
+          dangerouslySetInnerHTML={{ __html: this.props.html }}
+        />
+      );
+    } else {
+      darkThemeExample = (
+        <div className="guideWarning">This component is missing Dark Theme variations.</div>
+      );
+    }
 
     return (
       <div
@@ -96,11 +115,7 @@ export default class GuidePageSection extends Component {
           dangerouslySetInnerHTML={{ __html: this.props.html }}
         />
 
-        <div
-          ref="htmlDarkTheme"
-          className={`${exampleClasses} theme-dark`}
-          dangerouslySetInnerHTML={{ __html: this.props.html }}
-        />
+        {darkThemeExample}
       </div>
     );
   }
@@ -120,4 +135,5 @@ GuidePageSection.propTypes = {
   html: PropTypes.string,
   js: PropTypes.string,
   children: PropTypes.any,
+  hasDarkTheme: PropTypes.bool,
 };
diff --git a/src/ui_framework/doc_site/src/main.scss b/src/ui_framework/doc_site/src/main.scss
index c20b7457ae37c..eb17124f8df38 100644
--- a/src/ui_framework/doc_site/src/main.scss
+++ b/src/ui_framework/doc_site/src/main.scss
@@ -21,7 +21,6 @@ body {
  *    on styles inherited from body.
  */
 body {
-  font-family: 'Lato', 'Helvetica Neue', sans-serif;
   background: #ffffff;
   line-height: 40px; /* 1 */
   margin: 0;
diff --git a/src/ui_framework/doc_site/src/services/example/createExample.js b/src/ui_framework/doc_site/src/services/example/createExample.js
index 185b0ec908162..9a83c8f370189 100644
--- a/src/ui_framework/doc_site/src/services/example/createExample.js
+++ b/src/ui_framework/doc_site/src/services/example/createExample.js
@@ -1,9 +1,8 @@
-
 import {
   GuideExample,
 } from '../../components';
 
-export default function createExample(examples) {
+export default function creatExample(examples) {
   class Example extends GuideExample {
     constructor(props) {
       super(props, examples);
diff --git a/src/ui_framework/doc_site/src/services/routes/Routes.js b/src/ui_framework/doc_site/src/services/routes/Routes.js
index 2fe47ff9a9319..2e0874bde5f01 100644
--- a/src/ui_framework/doc_site/src/services/routes/Routes.js
+++ b/src/ui_framework/doc_site/src/services/routes/Routes.js
@@ -1,13 +1,49 @@
 
 import Slugify from '../string/slugify';
 
+import ButtonExample
+  from '../../views/button/button_example.jsx';
+
+import FormExample
+  from '../../views/form/form_example.jsx';
+
+import IconExample
+  from '../../views/icon/icon_example.jsx';
+
+import LinkExample
+  from '../../views/link/link_example.jsx';
+
 import LocalNavExample
   from '../../views/local_nav/local_nav_example.jsx';
 
+import TableExample
+  from '../../views/table/table_example.jsx';
+
+import ToolBarExample
+  from '../../views/tool_bar/tool_bar_example.jsx';
+
 // Component route names should match the component name exactly.
 const components = [{
+  name: 'Button',
+  component: ButtonExample,
+}, {
+  name: 'Form',
+  component: FormExample,
+}, {
+  name: 'Icon',
+  component: IconExample,
+}, {
+  name: 'Link',
+  component: LinkExample,
+}, {
   name: 'LocalNav',
   component: LocalNavExample,
+}, {
+  name: 'Table',
+  component: TableExample,
+}, {
+  name: 'ToolBar',
+  component: ToolBarExample,
 }];
 
 export default {
diff --git a/src/ui_framework/doc_site/src/views/_app.scss b/src/ui_framework/doc_site/src/views/_app.scss
index 47e0554a94572..380f76d700447 100644
--- a/src/ui_framework/doc_site/src/views/_app.scss
+++ b/src/ui_framework/doc_site/src/views/_app.scss
@@ -20,3 +20,15 @@
     }
   }
 }
+
+.guideWarning {
+  border-left: 5px solid #e8488b;
+  margin-top: 19px;
+  padding: 0 14px;
+  line-height: 21px;
+  color: #e8488b;
+}
+
+.guideBreak {
+  border: none;
+}
diff --git a/src/ui_framework/doc_site/src/views/button/button_basic.html b/src/ui_framework/doc_site/src/views/button/button_basic.html
new file mode 100644
index 0000000000000..8dd4691218d93
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/button/button_basic.html
@@ -0,0 +1,9 @@
+<button class="kuiButton kuiButton--basic">
+  Basic button
+</button>
+
+<hr class="guideBreak">
+
+<button disabled class="kuiButton kuiButton--basic">
+  Basic button, disabled
+</button>
diff --git a/src/ui_framework/doc_site/src/views/button/button_danger.html b/src/ui_framework/doc_site/src/views/button/button_danger.html
new file mode 100644
index 0000000000000..bd9a40e315036
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/button/button_danger.html
@@ -0,0 +1,9 @@
+<button class="kuiButton kuiButton--danger">
+  Danger button
+</button>
+
+<hr class="guideBreak">
+
+<button disabled class="kuiButton kuiButton--danger">
+  Danger button, disabled
+</button>
diff --git a/src/ui_framework/doc_site/src/views/button/button_elements.html b/src/ui_framework/doc_site/src/views/button/button_elements.html
new file mode 100644
index 0000000000000..da1082177c5c9
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/button/button_elements.html
@@ -0,0 +1,17 @@
+<button class="kuiButton kuiButton--basic">
+  Button element
+</button>
+
+<hr class="guideBreak">
+
+<input
+  type="submit"
+  class="kuiButton kuiButton--basic"
+  value="Submit input element"
+>
+
+<hr class="guideBreak">
+
+<a href="#" class="kuiButton kuiButton--basic">
+  Anchor element
+</a>
diff --git a/src/ui_framework/doc_site/src/views/button/button_example.jsx b/src/ui_framework/doc_site/src/views/button/button_example.jsx
new file mode 100644
index 0000000000000..fe485238f67d6
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/button/button_example.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+import {
+  createExample,
+} from '../../services';
+
+export default createExample([{
+  title: 'Basic Button',
+  description: (
+    <p>Use the basic Button in most situations.</p>
+  ),
+  html: require('./button_basic.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'Primary Button',
+  description: (
+    <p>Use the primary Button to represent the most common action. Generally, there won't be a need to present more than one of these at a time.</p>
+  ),
+  html: require('./button_primary.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'Danger Button',
+  description: (
+    <p>Danger Buttons represent irreversible, potentially regrettable actions.</p>
+  ),
+  html: require('./button_danger.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'Button with icon',
+  description: (
+    <p>You can toss an icon into a Button, with or without text.</p>
+  ),
+  html: require('./button_with_icon.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'ButtonGroup',
+  description: (
+    <p>Use the ButtonGroup to emphasize the relationships between a set of Buttons, and differentiate them from Buttons outside of the set.</p>
+  ),
+  html: require('./button_group.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'In ToolBar',
+  description: (
+    <p>This example verifies that Buttons are legible against the ToolBar's background.</p>
+  ),
+  html: require('./buttons_in_tool_bar.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'Element variations',
+  description: (
+    <p>You can create a Button using a button element, link, or input[type="submit"].</p>
+  ),
+  html: require('./button_elements.html'),
+  hasDarkTheme: false,
+}]);
diff --git a/src/ui_framework/doc_site/src/views/button/button_group.html b/src/ui_framework/doc_site/src/views/button/button_group.html
new file mode 100644
index 0000000000000..52aad0c030e0c
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/button/button_group.html
@@ -0,0 +1,11 @@
+<div class="kuiButtonGroup">
+  <button class="kuiButton kuiButton--basic">
+    Option A
+  </button>
+  <button class="kuiButton kuiButton--basic">
+    Option B
+  </button>
+  <button class="kuiButton kuiButton--basic">
+    Option C
+  </button>
+</div>
diff --git a/src/ui_framework/doc_site/src/views/button/button_primary.html b/src/ui_framework/doc_site/src/views/button/button_primary.html
new file mode 100644
index 0000000000000..7d2de8ec4471f
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/button/button_primary.html
@@ -0,0 +1,9 @@
+<button class="kuiButton kuiButton--primary">
+  Primary button
+</button>
+
+<hr class="guideBreak">
+
+<button disabled class="kuiButton kuiButton--primary">
+  Primary button, disabled
+</button>
diff --git a/src/ui_framework/doc_site/src/views/button/button_with_icon.html b/src/ui_framework/doc_site/src/views/button/button_with_icon.html
new file mode 100644
index 0000000000000..059320aed369b
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/button/button_with_icon.html
@@ -0,0 +1,10 @@
+<button class="kuiButton kuiButton--basic kuiButton--iconText">
+  <span class="kuiButton__icon kuiIcon fa-gear"></span>
+  Settings
+</button>
+
+<hr class="guideBreak">
+
+<button class="kuiButton kuiButton--basic">
+  <span class="kuiButton__icon kuiIcon fa-gear"></span>
+</button>
diff --git a/src/ui_framework/doc_site/src/views/button/buttons_in_tool_bar.html b/src/ui_framework/doc_site/src/views/button/buttons_in_tool_bar.html
new file mode 100644
index 0000000000000..976b704dcf590
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/button/buttons_in_tool_bar.html
@@ -0,0 +1,25 @@
+<div class="kuiToolBar">
+  <button class="kuiButton kuiButton--basic">
+    Basic button
+  </button>
+
+  <button disabled class="kuiButton kuiButton--basic">
+    Basic button, disabled
+  </button>
+
+  <button class="kuiButton kuiButton--primary">
+    Primary button
+  </button>
+
+  <button disabled class="kuiButton kuiButton--primary">
+    Primary button, disabled
+  </button>
+
+  <button class="kuiButton kuiButton--danger">
+    Danger button
+  </button>
+
+  <button disabled class="kuiButton kuiButton--danger">
+    Danger button, disabled
+  </button>
+</div>
diff --git a/src/ui_framework/doc_site/src/views/form/check_box.html b/src/ui_framework/doc_site/src/views/form/check_box.html
new file mode 100644
index 0000000000000..9aa4102aa5b19
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/form/check_box.html
@@ -0,0 +1 @@
+<input type="checkbox" class="kuiCheckBox">
diff --git a/src/ui_framework/doc_site/src/views/form/form_example.jsx b/src/ui_framework/doc_site/src/views/form/form_example.jsx
new file mode 100644
index 0000000000000..2b229038e26e4
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/form/form_example.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import {
+  createExample,
+} from '../../services';
+
+export default createExample([{
+  title: 'TextInput',
+  html: require('./text_input.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'CheckBox',
+  html: require('./check_box.html'),
+  hasDarkTheme: false,
+}]);
diff --git a/src/ui_framework/doc_site/src/views/form/text_input.html b/src/ui_framework/doc_site/src/views/form/text_input.html
new file mode 100644
index 0000000000000..1044f02dae205
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/form/text_input.html
@@ -0,0 +1,9 @@
+<input type="text" class="kuiTextInput" placeholder="Placeholder text">
+
+<hr class="guideBreak">
+
+<input type="text" class="kuiTextInput" value="Entered text" autofocus>
+
+<hr class="guideBreak">
+
+<input type="text" class="kuiTextInput" required>
diff --git a/src/ui_framework/doc_site/src/views/icon/icon.html b/src/ui_framework/doc_site/src/views/icon/icon.html
new file mode 100644
index 0000000000000..a8075e06d03e7
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/icon/icon.html
@@ -0,0 +1 @@
+<div class="kuiIcon fa-gear"></div>
diff --git a/src/ui_framework/doc_site/src/views/icon/icon_error.html b/src/ui_framework/doc_site/src/views/icon/icon_error.html
new file mode 100644
index 0000000000000..faae9ed50fbd8
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/icon/icon_error.html
@@ -0,0 +1 @@
+<div class="kuiIcon kuiIcon--error fa-warning"></div>
diff --git a/src/ui_framework/doc_site/src/views/icon/icon_example.jsx b/src/ui_framework/doc_site/src/views/icon/icon_example.jsx
new file mode 100644
index 0000000000000..2652e6388d8c2
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/icon/icon_example.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {
+  createExample,
+} from '../../services';
+
+export default createExample([{
+  title: 'Icon',
+  description: (
+    <p>Use the <code className="guideCode">icon</code> class instead of the <code className="guideCode">fa</code> class for FontAwesome icons. This will make it easier for us to migrate away from FontAwesome.</p>
+  ),
+  html: require('./icon.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'Success',
+  description: (
+    <p>Use this Icon to convey the successful completion of an action, e.g. filling out a form field correctly or a successful API request.</p>
+  ),
+  html: require('./icon_success.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'Warning',
+  description: (
+    <p>Use this Icon to convey an irregularity or potential problems.</p>
+  ),
+  html: require('./icon_warning.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'Error',
+  description: (
+    <p>Use this Icon to convey a failed attempt at an action, e.g. an invalid form field or an API error.</p>
+  ),
+  html: require('./icon_error.html'),
+  hasDarkTheme: false,
+}]);
diff --git a/src/ui_framework/doc_site/src/views/icon/icon_success.html b/src/ui_framework/doc_site/src/views/icon/icon_success.html
new file mode 100644
index 0000000000000..f8d9d38d66121
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/icon/icon_success.html
@@ -0,0 +1 @@
+<div class="kuiIcon kuiIcon--success fa-check"></div>
diff --git a/src/ui_framework/doc_site/src/views/icon/icon_warning.html b/src/ui_framework/doc_site/src/views/icon/icon_warning.html
new file mode 100644
index 0000000000000..704c60d8ecc57
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/icon/icon_warning.html
@@ -0,0 +1 @@
+<div class="kuiIcon kuiIcon--warning fa-bolt"></div>
diff --git a/src/ui_framework/doc_site/src/views/link/link.html b/src/ui_framework/doc_site/src/views/link/link.html
new file mode 100644
index 0000000000000..2556423026f53
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/link/link.html
@@ -0,0 +1 @@
+<a class="kuiLink" href="#">More info</a>
diff --git a/src/ui_framework/doc_site/src/views/link/link_example.jsx b/src/ui_framework/doc_site/src/views/link/link_example.jsx
new file mode 100644
index 0000000000000..a94fca037b0a7
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/link/link_example.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import {
+  createExample,
+} from '../../services';
+
+export default createExample([{
+  title: 'Link',
+  html: require('./link.html'),
+  hasDarkTheme: false,
+}]);
diff --git a/src/ui_framework/doc_site/src/views/local_nav/local_nav_breadcrumbs.html b/src/ui_framework/doc_site/src/views/local_nav/local_nav_breadcrumbs.html
new file mode 100644
index 0000000000000..1822ec6a89fcb
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/local_nav/local_nav_breadcrumbs.html
@@ -0,0 +1,40 @@
+<div class="kuiLocalNav">
+  <div class="kuiLocalNavRow">
+    <div class="kuiLocalNavRow__section">
+      <div class="kuiLocalBreadcrumbs">
+        <div class="kuiLocalBreadcrumb">
+          <a class="kuiLocalBreadcrumb__link" href="#">
+            Discover
+          </a>
+        </div>
+
+        <div class="kuiLocalBreadcrumb">
+          <a class="kuiLocalBreadcrumb__link" href="#">
+            <span class="kuiLocalBreadcrumb__emphasis">0</span> hits
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div class="kuiLocalNavRow__section">
+      <div class="kuiLocalMenu">
+        <div class="kuiLocalMenuItem">
+          New
+        </div>
+
+        <div class="kuiLocalMenuItem">
+          Save
+        </div>
+
+        <div class="kuiLocalMenuItem">
+          Open
+        </div>
+
+        <button class="kuiLocalMenuItem">
+          <div class="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
+          Last 5 minutes
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/ui_framework/doc_site/src/views/local_nav/local_nav_breadcrumbs/local_nav_breadcrumbs.html b/src/ui_framework/doc_site/src/views/local_nav/local_nav_breadcrumbs/local_nav_breadcrumbs.html
deleted file mode 100644
index 2078dea3b9f08..0000000000000
--- a/src/ui_framework/doc_site/src/views/local_nav/local_nav_breadcrumbs/local_nav_breadcrumbs.html
+++ /dev/null
@@ -1,41 +0,0 @@
-
-<div class="localNav">
-  <div class="localNavRow">
-    <div class="localNavRow__section">
-      <div class="localBreadcrumbs">
-        <div class="localBreadcrumb">
-          <a class="localBreadcrumb__link" href="#">
-            Discover
-          </a>
-        </div>
-
-        <div class="localBreadcrumb">
-          <a class="localBreadcrumb__link" href="#">
-            <span class="localBreadcrumb__emphasis">0</span> hits
-          </a>
-        </div>
-      </div>
-    </div>
-
-    <div class="localNavRow__section">
-      <div class="localMenu">
-        <div class="localMenuItem">
-          New
-        </div>
-
-        <div class="localMenuItem">
-          Save
-        </div>
-
-        <div class="localMenuItem">
-          Open
-        </div>
-
-        <button class="localMenuItem">
-          <div class="localMenuItem__icon fa fa-clock-o"></div>
-          Last 5 minutes
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/src/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown.html b/src/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown.html
new file mode 100644
index 0000000000000..709528499b56c
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown.html
@@ -0,0 +1,126 @@
+<div class="kuiLocalNav">
+  <div class="kuiLocalNavRow">
+    <div class="kuiLocalNavRow__section">
+      <div class="kuiLocalBreadcrumbs">
+        <div class="kuiLocalBreadcrumb">
+          <a class="kuiLocalBreadcrumb__link" href="#">
+            Discover
+          </a>
+        </div>
+
+        <div class="kuiLocalBreadcrumb">
+          <a class="kuiLocalBreadcrumb__link" href="#">
+            <span class="kuiLocalBreadcrumb__emphasis">0</span> hits
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div class="kuiLocalNavRow__section">
+      <div class="kuiLocalMenu">
+        <div class="kuiLocalMenuItem kuiLocalMenuItem-isSelected">
+          New
+        </div>
+
+        <div class="kuiLocalMenuItem">
+          Save
+        </div>
+
+        <div class="kuiLocalMenuItem">
+          Open
+        </div>
+
+        <button class="kuiLocalMenuItem">
+          <div class="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
+          Last 5 minutes
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="kuiLocalDropdown">
+    <!-- Dropdown close button -->
+    <button class="kuiLocalDropdownCloseButton">
+      <span class="fa fa-chevron-circle-up"></span>
+    </button>
+
+    <!-- Title -->
+    <div class="kuiLocalDropdownTitle">Dropdown title</div>
+
+    <!-- Help text -->
+    <div class="kuiLocalDropdownHelpText">
+      Here's some help text to explain the purpose of the dropdown.
+    </div>
+
+    <!-- Warning -->
+    <div class="kuiLocalDropdownWarning">
+      Here's some warning text in case the user has something misconfigured.
+    </div>
+
+    <div class="kuiLocalDropdownSection">
+      <!-- Header -->
+      <div class="kuiLocalDropdownHeader">
+        <div class="kuiLocalDropdownHeader__label">
+          Header for a section of content
+        </div>
+      </div>
+
+       <!-- Input -->
+      <input
+        class="kuiLocalDropdownInput"
+        type="text"
+        placeholder="Input something here"
+      />
+    </div>
+
+    <div class="kuiLocalDropdownSection">
+      <!-- Header -->
+      <div class="kuiLocalDropdownHeader">
+        <div class="kuiLocalDropdownHeader__label">
+          Header for another section of content
+        </div>
+        <div class="kuiLocalDropdownHeader__actions">
+          <a
+            class="kuiLocalDropdownHeader__action"
+            href=""
+          >
+            Action A
+          </a>
+          <a
+            class="kuiLocalDropdownHeader__action"
+            href=""
+          >
+            Action B
+          </a>
+        </div>
+      </div>
+
+      <!-- Input -->
+      <input
+        class="kuiLocalDropdownInput"
+        type="text"
+        readonly
+        value="This is some text inside of a read-only input"
+      />
+
+      <!-- Notes -->
+      <div class="kuiLocalDropdownFormNote">
+        Here are some notes to explain the purpose of this section of the dropdown.
+      </div>
+    </div>
+  </div>
+
+  <div class="kuiLocalNavRow kuiLocalNavRow--secondary">
+    <div class="kuiLocalSearch">
+      <input
+        class="kuiLocalSearchInput"
+        type="text"
+        placeholder="Filter..."
+        autocomplete="off"
+      >
+      <button class="kuiLocalSearchButton">
+        <span class="kuiIcon fa-search"></span>
+      </button>
+    </div>
+  </div>
+</div>
diff --git a/src/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown/local_nav_dropdown.html b/src/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown/local_nav_dropdown.html
deleted file mode 100644
index ec39fbe1fd214..0000000000000
--- a/src/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown/local_nav_dropdown.html
+++ /dev/null
@@ -1,127 +0,0 @@
-
-<div class="localNav">
-  <div class="localNavRow">
-    <div class="localNavRow__section">
-      <div class="localBreadcrumbs">
-        <div class="localBreadcrumb">
-          <a class="localBreadcrumb__link" href="#">
-            Discover
-          </a>
-        </div>
-
-        <div class="localBreadcrumb">
-          <a class="localBreadcrumb__link" href="#">
-            <span class="localBreadcrumb__emphasis">0</span> hits
-          </a>
-        </div>
-      </div>
-    </div>
-
-    <div class="localNavRow__section">
-      <div class="localMenu">
-        <div class="localMenuItem localMenuItem-isSelected">
-          New
-        </div>
-
-        <div class="localMenuItem">
-          Save
-        </div>
-
-        <div class="localMenuItem">
-          Open
-        </div>
-
-        <button class="localMenuItem">
-          <div class="localMenuItem__icon fa fa-clock-o"></div>
-          Last 5 minutes
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <div class="localDropdown">
-    <!-- Dropdown close button -->
-    <button class="localDropdownCloseButton">
-      <span class="fa fa-chevron-circle-up"></span>
-    </button>
-
-    <!-- Title -->
-    <div class="localDropdownTitle">Dropdown title</div>
-
-    <!-- Help text -->
-    <div class="localDropdownHelpText">
-      Here's some help text to explain the purpose of the dropdown.
-    </div>
-
-    <!-- Warning -->
-    <div class="localDropdownWarning">
-      Here's some warning text in case the user has something misconfigured.
-    </div>
-
-    <div class="localDropdownSection">
-      <!-- Header -->
-      <div class="localDropdownHeader">
-        <div class="localDropdownHeader__label">
-          Header for a section of content
-        </div>
-      </div>
-
-       <!-- Input -->
-      <input
-        class="localDropdownInput"
-        type="text"
-        placeholder="Input something here"
-      />
-    </div>
-
-    <div class="localDropdownSection">
-      <!-- Header -->
-      <div class="localDropdownHeader">
-        <div class="localDropdownHeader__label">
-          Header for another section of content
-        </div>
-        <div class="localDropdownHeader__actions">
-          <a
-            class="localDropdownHeader__action"
-            href=""
-          >
-            Action A
-          </a>
-          <a
-            class="localDropdownHeader__action"
-            href=""
-          >
-            Action B
-          </a>
-        </div>
-      </div>
-
-      <!-- Input -->
-      <input
-        class="localDropdownInput"
-        type="text"
-        readonly
-        value="This is some text inside of a read-only input"
-      />
-
-      <!-- Notes -->
-      <div class="localDropdownFormNote">
-        Here are some notes to explain the purpose of this section of the dropdown.
-      </div>
-    </div>
-  </div>
-
-  <div class="localNavRow localNavRow--secondary">
-    <div class="localSearch">
-      <input
-        class="localSearchInput"
-        type="text"
-        placeholder="Filter..."
-        autocomplete="off"
-      >
-      <button class="localSearchButton">
-        <span class="fa fa-search"></span>
-      </button>
-    </div>
-  </div>
-</div>
diff --git a/src/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown_panels.html b/src/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown_panels.html
new file mode 100644
index 0000000000000..6c752afc8c13a
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown_panels.html
@@ -0,0 +1,85 @@
+<div class="kuiLocalNav">
+  <div class="kuiLocalNavRow">
+    <div class="kuiLocalNavRow__section">
+      <div class="kuiLocalBreadcrumbs">
+        <div class="kuiLocalBreadcrumb">
+          <a class="kuiLocalBreadcrumb__link" href="#">
+            Discover
+          </a>
+        </div>
+
+        <div class="kuiLocalBreadcrumb">
+          <a class="kuiLocalBreadcrumb__link" href="#">
+            <span class="kuiLocalBreadcrumb__emphasis">0</span> hits
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div class="kuiLocalNavRow__section">
+      <div class="kuiLocalMenu">
+        <div class="kuiLocalMenuItem kuiLocalMenuItem-isSelected">
+          New
+        </div>
+
+        <div class="kuiLocalMenuItem">
+          Save
+        </div>
+
+        <div class="kuiLocalMenuItem">
+          Open
+        </div>
+
+        <button class="kuiLocalMenuItem">
+          <div class="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
+          Last 5 minutes
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="kuiLocalDropdown">
+    <!-- Dropdown close button -->
+    <button class="kuiLocalDropdownCloseButton">
+      <span class="fa fa-chevron-circle-up"></span>
+    </button>
+
+    <div class="kuiLocalDropdownPanels">
+      <!-- Left panel -->
+      <div class="kuiLocalDropdownPanel kuiLocalDropdownPanel--left">
+        <!-- Title -->
+        <div class="kuiLocalDropdownTitle">Left panel</div>
+
+        <!-- Help text -->
+        <div class="kuiLocalDropdownHelpText">
+          Here's some help text to explain the purpose of the dropdown.
+        </div>
+      </div>
+
+      <!-- Right panel -->
+      <div class="kuiLocalDropdownPanel kuiLocalDropdownPanel--left">
+        <!-- Title -->
+        <div class="kuiLocalDropdownTitle">Right panel</div>
+
+        <!-- Help text -->
+        <div class="kuiLocalDropdownHelpText">
+          Here's some help text to explain the purpose of the dropdown.
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="kuiLocalNavRow kuiLocalNavRow--secondary">
+    <div class="kuiLocalSearch">
+      <input
+        class="kuiLocalSearchInput"
+        type="text"
+        placeholder="Filter..."
+        autocomplete="off"
+      >
+      <button class="kuiLocalSearchButton">
+        <span class="kuiIcon fa-search"></span>
+      </button>
+    </div>
+  </div>
+</div>
diff --git a/src/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown_panels/local_nav_dropdown_panels.html b/src/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown_panels/local_nav_dropdown_panels.html
deleted file mode 100644
index abc628ad178b3..0000000000000
--- a/src/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown_panels/local_nav_dropdown_panels.html
+++ /dev/null
@@ -1,86 +0,0 @@
-
-<div class="localNav">
-  <div class="localNavRow">
-    <div class="localNavRow__section">
-      <div class="localBreadcrumbs">
-        <div class="localBreadcrumb">
-          <a class="localBreadcrumb__link" href="#">
-            Discover
-          </a>
-        </div>
-
-        <div class="localBreadcrumb">
-          <a class="localBreadcrumb__link" href="#">
-            <span class="localBreadcrumb__emphasis">0</span> hits
-          </a>
-        </div>
-      </div>
-    </div>
-
-    <div class="localNavRow__section">
-      <div class="localMenu">
-        <div class="localMenuItem localMenuItem-isSelected">
-          New
-        </div>
-
-        <div class="localMenuItem">
-          Save
-        </div>
-
-        <div class="localMenuItem">
-          Open
-        </div>
-
-        <button class="localMenuItem">
-          <div class="localMenuItem__icon fa fa-clock-o"></div>
-          Last 5 minutes
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <div class="localDropdown">
-    <!-- Dropdown close button -->
-    <button class="localDropdownCloseButton">
-      <span class="fa fa-chevron-circle-up"></span>
-    </button>
-
-    <div class="localDropdownPanels">
-      <!-- Left panel -->
-      <div class="localDropdownPanel localDropdownPanel--left">
-        <!-- Title -->
-        <div class="localDropdownTitle">Left panel</div>
-
-        <!-- Help text -->
-        <div class="localDropdownHelpText">
-          Here's some help text to explain the purpose of the dropdown.
-        </div>
-      </div>
-
-      <!-- Right panel -->
-      <div class="localDropdownPanel localDropdownPanel--left">
-        <!-- Title -->
-        <div class="localDropdownTitle">Right panel</div>
-
-        <!-- Help text -->
-        <div class="localDropdownHelpText">
-          Here's some help text to explain the purpose of the dropdown.
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="localNavRow localNavRow--secondary">
-    <div class="localSearch">
-      <input
-        class="localSearchInput"
-        type="text"
-        placeholder="Filter..."
-        autocomplete="off"
-      >
-      <button class="localSearchButton">
-        <span class="fa fa-search"></span>
-      </button>
-    </div>
-  </div>
-</div>
diff --git a/src/ui_framework/doc_site/src/views/local_nav/local_nav_example.jsx b/src/ui_framework/doc_site/src/views/local_nav/local_nav_example.jsx
index 79d01c68eadf3..14a3daafd54ff 100644
--- a/src/ui_framework/doc_site/src/views/local_nav/local_nav_example.jsx
+++ b/src/ui_framework/doc_site/src/views/local_nav/local_nav_example.jsx
@@ -1,4 +1,3 @@
-
 import React from 'react';
 
 import {
@@ -10,22 +9,26 @@ export default createExample([{
   description: (
     <p>Here's a simple LocalNav with a Title in the top left corner and Menu in the top right.</p>
   ),
-  html: require('./local_nav_simple/local_nav_simple.html'),
+  html: require('./local_nav_simple.html'),
+  hasDarkTheme: true,
 }, {
   title: 'Breadcrumbs',
   description: (
     <p>You can replace the Title with Breadcrumbs.</p>
   ),
-  html: require('./local_nav_breadcrumbs/local_nav_breadcrumbs.html'),
+  html: require('./local_nav_breadcrumbs.html'),
+  hasDarkTheme: true,
 }, {
   title: 'Search',
   description: (
     <p>You can add a Search component for filtering results.</p>
   ),
-  html: require('./local_nav_search/local_nav_search.html'),
+  html: require('./local_nav_search.html'),
+  hasDarkTheme: true,
 }, {
   title: 'Invalid Search',
-  html: require('./local_nav_search_error/local_nav_search_error.html'),
+  html: require('./local_nav_search_error.html'),
+  hasDarkTheme: true,
 }, {
   title: 'Selected and disabled Menu Item states',
   description: (
@@ -34,23 +37,27 @@ export default createExample([{
       <p>Menu Items can also be disabled, in which case they become non-interactive.</p>
     </div>
   ),
-  html: require('./local_nav_menu_item_states/local_nav_menu_item_states.html'),
+  html: require('./local_nav_menu_item_states.html'),
+  hasDarkTheme: true,
 }, {
   title: 'Dropdown',
   description: (
     <p>Selecting a Menu Item will commonly result in an open Dropdown.</p>
   ),
-  html: require('./local_nav_dropdown/local_nav_dropdown.html'),
+  html: require('./local_nav_dropdown.html'),
+  hasDarkTheme: true,
 }, {
   title: 'Dropdown panels',
   description: (
     <p>You can split the Dropdown into side-by-side Panels.</p>
   ),
-  html: require('./local_nav_dropdown_panels/local_nav_dropdown_panels.html'),
+  html: require('./local_nav_dropdown_panels.html'),
+  hasDarkTheme: true,
 }, {
   title: 'Tabs',
   description: (
     <p>You can display Tabs for navigating local content.</p>
   ),
-  html: require('./local_nav_tabs/local_nav_tabs.html'),
+  html: require('./local_nav_tabs.html'),
+  hasDarkTheme: true,
 }]);
diff --git a/src/ui_framework/doc_site/src/views/local_nav/local_nav_menu_item_states.html b/src/ui_framework/doc_site/src/views/local_nav/local_nav_menu_item_states.html
new file mode 100644
index 0000000000000..808ceffae32cc
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/local_nav/local_nav_menu_item_states.html
@@ -0,0 +1,54 @@
+<div class="kuiLocalNav">
+  <div class="kuiLocalNavRow">
+    <div class="kuiLocalNavRow__section">
+      <div class="kuiLocalBreadcrumbs">
+        <div class="kuiLocalBreadcrumb">
+          <a class="kuiLocalBreadcrumb__link" href="#">
+            Discover
+          </a>
+        </div>
+
+        <div class="kuiLocalBreadcrumb">
+          <a class="kuiLocalBreadcrumb__link" href="#">
+            <span class="kuiLocalBreadcrumb__emphasis">0</span> hits
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div class="kuiLocalNavRow__section">
+      <div class="kuiLocalMenu">
+        <div class="kuiLocalMenuItem kuiLocalMenuItem-isSelected">
+          New
+        </div>
+
+        <div class="kuiLocalMenuItem">
+          Save
+        </div>
+
+        <div class="kuiLocalMenuItem kuiLocalMenuItem-isDisabled">
+          Open
+        </div>
+
+        <button class="kuiLocalMenuItem">
+          <div class="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
+          Last 5 minutes
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="kuiLocalNavRow kuiLocalNavRow--secondary">
+    <div class="kuiLocalSearch">
+      <input
+        class="kuiLocalSearchInput"
+        type="text"
+        placeholder="Filter..."
+        autocomplete="off"
+      >
+      <button class="kuiLocalSearchButton">
+        <span class="kuiIcon fa-search"></span>
+      </button>
+    </div>
+  </div>
+</div>
diff --git a/src/ui_framework/doc_site/src/views/local_nav/local_nav_menu_item_states/local_nav_menu_item_states.html b/src/ui_framework/doc_site/src/views/local_nav/local_nav_menu_item_states/local_nav_menu_item_states.html
deleted file mode 100644
index 25211acd98469..0000000000000
--- a/src/ui_framework/doc_site/src/views/local_nav/local_nav_menu_item_states/local_nav_menu_item_states.html
+++ /dev/null
@@ -1,55 +0,0 @@
-
-<div class="localNav">
-  <div class="localNavRow">
-    <div class="localNavRow__section">
-      <div class="localBreadcrumbs">
-        <div class="localBreadcrumb">
-          <a class="localBreadcrumb__link" href="#">
-            Discover
-          </a>
-        </div>
-
-        <div class="localBreadcrumb">
-          <a class="localBreadcrumb__link" href="#">
-            <span class="localBreadcrumb__emphasis">0</span> hits
-          </a>
-        </div>
-      </div>
-    </div>
-
-    <div class="localNavRow__section">
-      <div class="localMenu">
-        <div class="localMenuItem localMenuItem-isSelected">
-          New
-        </div>
-
-        <div class="localMenuItem">
-          Save
-        </div>
-
-        <div class="localMenuItem localMenuItem-isDisabled">
-          Open
-        </div>
-
-        <button class="localMenuItem">
-          <div class="localMenuItem__icon fa fa-clock-o"></div>
-          Last 5 minutes
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <div class="localNavRow localNavRow--secondary">
-    <div class="localSearch">
-      <input
-        class="localSearchInput"
-        type="text"
-        placeholder="Filter..."
-        autocomplete="off"
-      >
-      <button class="localSearchButton">
-        <span class="fa fa-search"></span>
-      </button>
-    </div>
-  </div>
-</div>
diff --git a/src/ui_framework/doc_site/src/views/local_nav/local_nav_search.html b/src/ui_framework/doc_site/src/views/local_nav/local_nav_search.html
new file mode 100644
index 0000000000000..78a36cc4de217
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/local_nav/local_nav_search.html
@@ -0,0 +1,54 @@
+<div class="kuiLocalNav">
+  <div class="kuiLocalNavRow">
+    <div class="kuiLocalNavRow__section">
+      <div class="kuiLocalBreadcrumbs">
+        <div class="kuiLocalBreadcrumb">
+          <a class="kuiLocalBreadcrumb__link" href="#">
+            Discover
+          </a>
+        </div>
+
+        <div class="kuiLocalBreadcrumb">
+          <a class="kuiLocalBreadcrumb__link" href="#">
+            <span class="kuiLocalBreadcrumb__emphasis">0</span> hits
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div class="kuiLocalNavRow__section">
+      <div class="kuiLocalMenu">
+        <button class="kuiLocalMenuItem">
+          New
+        </button>
+
+        <button class="kuiLocalMenuItem">
+          Save
+        </button>
+
+        <button class="kuiLocalMenuItem">
+          Open
+        </button>
+
+        <button class="kuiLocalMenuItem">
+          <div class="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
+          Last 5 minutes
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="kuiLocalNavRow kuiLocalNavRow--secondary">
+    <div class="kuiLocalSearch">
+      <input
+        class="kuiLocalSearchInput"
+        type="text"
+        placeholder="Filter..."
+        autocomplete="off"
+      >
+      <button class="kuiLocalSearchButton">
+        <span class="kuiIcon fa-search"></span>
+      </button>
+    </div>
+  </div>
+</div>
diff --git a/src/ui_framework/doc_site/src/views/local_nav/local_nav_search/local_nav_search.html b/src/ui_framework/doc_site/src/views/local_nav/local_nav_search/local_nav_search.html
deleted file mode 100644
index 01ab1e7017da3..0000000000000
--- a/src/ui_framework/doc_site/src/views/local_nav/local_nav_search/local_nav_search.html
+++ /dev/null
@@ -1,55 +0,0 @@
-
-<div class="localNav">
-  <div class="localNavRow">
-    <div class="localNavRow__section">
-      <div class="localBreadcrumbs">
-        <div class="localBreadcrumb">
-          <a class="localBreadcrumb__link" href="#">
-            Discover
-          </a>
-        </div>
-
-        <div class="localBreadcrumb">
-          <a class="localBreadcrumb__link" href="#">
-            <span class="localBreadcrumb__emphasis">0</span> hits
-          </a>
-        </div>
-      </div>
-    </div>
-
-    <div class="localNavRow__section">
-      <div class="localMenu">
-        <button class="localMenuItem">
-          New
-        </button>
-
-        <button class="localMenuItem">
-          Save
-        </button>
-
-        <button class="localMenuItem">
-          Open
-        </button>
-
-        <button class="localMenuItem">
-          <div class="localMenuItem__icon fa fa-clock-o"></div>
-          Last 5 minutes
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <div class="localNavRow localNavRow--secondary">
-    <div class="localSearch">
-      <input
-        class="localSearchInput"
-        type="text"
-        placeholder="Filter..."
-        autocomplete="off"
-      >
-      <button class="localSearchButton">
-        <span class="fa fa-search"></span>
-      </button>
-    </div>
-  </div>
-</div>
diff --git a/src/ui_framework/doc_site/src/views/local_nav/local_nav_search_error.html b/src/ui_framework/doc_site/src/views/local_nav/local_nav_search_error.html
new file mode 100644
index 0000000000000..6b3ab50b914f8
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/local_nav/local_nav_search_error.html
@@ -0,0 +1,54 @@
+<div class="kuiLocalNav">
+  <div class="kuiLocalNavRow">
+    <div class="kuiLocalNavRow__section">
+      <div class="kuiLocalBreadcrumbs">
+        <div class="kuiLocalBreadcrumb">
+          <a class="kuiLocalBreadcrumb__link" href="#">
+            Discover
+          </a>
+        </div>
+
+        <div class="kuiLocalBreadcrumb">
+          <a class="kuiLocalBreadcrumb__link" href="#">
+            <span class="kuiLocalBreadcrumb__emphasis">0</span> hits
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div class="kuiLocalNavRow__section">
+      <div class="kuiLocalMenu">
+        <button class="kuiLocalMenuItem">
+          New
+        </button>
+
+        <button class="kuiLocalMenuItem">
+          Save
+        </button>
+
+        <button class="kuiLocalMenuItem">
+          Open
+        </button>
+
+        <button class="kuiLocalMenuItem">
+          <div class="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
+          Last 5 minutes
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="kuiLocalNavRow kuiLocalNavRow--secondary">
+    <div class="kuiLocalSearch">
+      <input
+        class="kuiLocalSearchInput kuiLocalSearchInput-isInvalid"
+        type="text"
+        placeholder="Filter..."
+        autocomplete="off"
+      >
+      <button class="kuiLocalSearchButton">
+        <span class="kuiIcon fa-search"></span>
+      </button>
+    </div>
+  </div>
+</div>
diff --git a/src/ui_framework/doc_site/src/views/local_nav/local_nav_search_error/local_nav_search_error.html b/src/ui_framework/doc_site/src/views/local_nav/local_nav_search_error/local_nav_search_error.html
deleted file mode 100644
index 9f73b820990b1..0000000000000
--- a/src/ui_framework/doc_site/src/views/local_nav/local_nav_search_error/local_nav_search_error.html
+++ /dev/null
@@ -1,55 +0,0 @@
-
-<div class="localNav">
-  <div class="localNavRow">
-    <div class="localNavRow__section">
-      <div class="localBreadcrumbs">
-        <div class="localBreadcrumb">
-          <a class="localBreadcrumb__link" href="#">
-            Discover
-          </a>
-        </div>
-
-        <div class="localBreadcrumb">
-          <a class="localBreadcrumb__link" href="#">
-            <span class="localBreadcrumb__emphasis">0</span> hits
-          </a>
-        </div>
-      </div>
-    </div>
-
-    <div class="localNavRow__section">
-      <div class="localMenu">
-        <button class="localMenuItem">
-          New
-        </button>
-
-        <button class="localMenuItem">
-          Save
-        </button>
-
-        <button class="localMenuItem">
-          Open
-        </button>
-
-        <button class="localMenuItem">
-          <div class="localMenuItem__icon fa fa-clock-o"></div>
-          Last 5 minutes
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <div class="localNavRow localNavRow--secondary">
-    <div class="localSearch">
-      <input
-        class="localSearchInput localSearchInput-isInvalid"
-        type="text"
-        placeholder="Filter..."
-        autocomplete="off"
-      >
-      <button class="localSearchButton">
-        <span class="fa fa-search"></span>
-      </button>
-    </div>
-  </div>
-</div>
diff --git a/src/ui_framework/doc_site/src/views/local_nav/local_nav_simple.html b/src/ui_framework/doc_site/src/views/local_nav/local_nav_simple.html
new file mode 100644
index 0000000000000..7be382a79f379
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/local_nav/local_nav_simple.html
@@ -0,0 +1,30 @@
+<div class="kuiLocalNav">
+  <div class="kuiLocalNavRow">
+    <div class="kuiLocalNavRow__section">
+      <div class="kuiLocalTitle">
+        Untitled Document
+      </div>
+    </div>
+
+    <div class="kuiLocalNavRow__section">
+      <div class="kuiLocalMenu">
+        <div class="kuiLocalMenuItem">
+          New
+        </div>
+
+        <div class="kuiLocalMenuItem">
+          Save
+        </div>
+
+        <div class="kuiLocalMenuItem">
+          Open
+        </div>
+
+        <button class="kuiLocalMenuItem">
+          <div class="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
+          Last 5 minutes
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/ui_framework/doc_site/src/views/local_nav/local_nav_simple/local_nav_simple.html b/src/ui_framework/doc_site/src/views/local_nav/local_nav_simple/local_nav_simple.html
deleted file mode 100644
index d35d5da8adbb7..0000000000000
--- a/src/ui_framework/doc_site/src/views/local_nav/local_nav_simple/local_nav_simple.html
+++ /dev/null
@@ -1,31 +0,0 @@
-
-<div class="localNav">
-  <div class="localNavRow">
-    <div class="localNavRow__section">
-      <div class="localTitle">
-        Untitled Document
-      </div>
-    </div>
-
-    <div class="localNavRow__section">
-      <div class="localMenu">
-        <div class="localMenuItem">
-          New
-        </div>
-
-        <div class="localMenuItem">
-          Save
-        </div>
-
-        <div class="localMenuItem">
-          Open
-        </div>
-
-        <button class="localMenuItem">
-          <div class="localMenuItem__icon fa fa-clock-o"></div>
-          Last 5 minutes
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/src/ui_framework/doc_site/src/views/local_nav/local_nav_tabs.html b/src/ui_framework/doc_site/src/views/local_nav/local_nav_tabs.html
new file mode 100644
index 0000000000000..f01076d3f95b5
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/local_nav/local_nav_tabs.html
@@ -0,0 +1,56 @@
+<div class="kuiLocalNav">
+  <div class="kuiLocalNavRow">
+    <div class="kuiLocalNavRow__section">
+      <div class="kuiLocalBreadcrumbs">
+        <div class="kuiLocalBreadcrumb">
+          <a class="kuiLocalBreadcrumb__link" href="#">
+            Discover
+          </a>
+        </div>
+
+        <div class="kuiLocalBreadcrumb">
+          <a class="kuiLocalBreadcrumb__link" href="#">
+            <span class="kuiLocalBreadcrumb__emphasis">0</span> <span>hits</span>
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div class="kuiLocalNavRow__section">
+      <div class="kuiLocalMenu">
+        <button class="kuiLocalMenuItem">
+          New
+        </button>
+
+        <button class="kuiLocalMenuItem">
+          Save
+        </button>
+
+        <button class="kuiLocalMenuItem">
+          Open
+        </button>
+
+        <button class="kuiLocalMenuItem">
+          <div class="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
+          Last 5 minutes
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="kuiLocalNavRow kuiLocalNavRow--secondary">
+    <div class="kuiLocalTabs">
+      <a class="kuiLocalTab kuiLocalTab-isSelected" href="#">
+        Overview
+      </a>
+
+      <a class="kuiLocalTab" href="#">
+        Your Documents
+      </a>
+
+      <a class="kuiLocalTab" href="#">
+        Another Tab
+      </a>
+    </div>
+  </div>
+</div>
diff --git a/src/ui_framework/doc_site/src/views/local_nav/local_nav_tabs/local_nav_tabs.html b/src/ui_framework/doc_site/src/views/local_nav/local_nav_tabs/local_nav_tabs.html
deleted file mode 100644
index 8b0b277b5d2b7..0000000000000
--- a/src/ui_framework/doc_site/src/views/local_nav/local_nav_tabs/local_nav_tabs.html
+++ /dev/null
@@ -1,57 +0,0 @@
-
-<div class="localNav">
-  <div class="localNavRow">
-    <div class="localNavRow__section">
-      <div class="localBreadcrumbs">
-        <div class="localBreadcrumb">
-          <a class="localBreadcrumb__link" href="#">
-            Discover
-          </a>
-        </div>
-
-        <div class="localBreadcrumb">
-          <a class="localBreadcrumb__link" href="#">
-            <span class="localBreadcrumb__emphasis">0</span> <span>hits</span>
-          </a>
-        </div>
-      </div>
-    </div>
-
-    <div class="localNavRow__section">
-      <div class="localMenu">
-        <button class="localMenuItem">
-          New
-        </button>
-
-        <button class="localMenuItem">
-          Save
-        </button>
-
-        <button class="localMenuItem">
-          Open
-        </button>
-
-        <button class="localMenuItem">
-          <div class="localMenuItem__icon fa fa-clock-o"></div>
-          Last 5 minutes
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <div class="localNavRow localNavRow--secondary">
-    <div class="localTabs">
-      <a class="localTab localTab-isSelected" href="#">
-        Overview
-      </a>
-
-      <a class="localTab" href="#">
-        Your Documents
-      </a>
-
-      <a class="localTab" href="#">
-        Another Tab
-      </a>
-    </div>
-  </div>
-</div>
diff --git a/src/ui_framework/doc_site/src/views/table/controlled_table.html b/src/ui_framework/doc_site/src/views/table/controlled_table.html
new file mode 100644
index 0000000000000..3b75b1f725663
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/table/controlled_table.html
@@ -0,0 +1,176 @@
+<div class="kuiControlledTable">
+  <!-- ToolBar -->
+  <div class="kuiToolBar">
+    <div class="kuiToolBarSearch">
+      <div class="kuiToolBarSearchBox">
+        <div class="kuiToolBarSearchBox__icon kuiIcon fa-search"></div>
+        <input
+          class="kuiToolBarSearchBox__input"
+          type="text"
+          placeholder="Search..."
+        >
+      </div>
+    </div>
+
+    <div class="kuiToolBarSection">
+      <button class="kuiButton kuiButton--primary">
+        Add
+      </button>
+
+      <button class="kuiButton kuiButton--basic kuiButton--icon">
+        <span class="kuiButton__icon kuiIcon fa-gear"></span>
+      </button>
+
+      <button class="kuiButton kuiButton--basic kuiButton--icon">
+        <span class="kuiButton__icon kuiIcon fa-bars"></span>
+      </button>
+    </div>
+
+    <div class="kuiToolBarSection">
+      <div class="kuiToolBarText">
+        1 &ndash; 20 of 33
+      </div>
+
+      <div class="kuiButtonGroup">
+        <button class="kuiButton kuiButton--basic kuiButton--icon">
+          <span class="kuiButton__icon kuiIcon fa-chevron-left"></span>
+        </button>
+        <button class="kuiButton kuiButton--basic kuiButton--icon">
+          <span class="kuiButton__icon kuiIcon fa-chevron-right"></span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Table -->
+  <table class="kuiTable">
+    <thead>
+      <tr>
+        <th class="kuiTableHeaderCell kuiTableHeaderCell--checkBox">
+          <input type="checkbox" class="kuiCheckBox">
+        </th>
+        <th class="kuiTableHeaderCell">
+          Title
+        </th>
+        <th class="kuiTableHeaderCell">
+          Status
+        </th>
+        <th class="kuiTableHeaderCell">
+          Date created
+        </th>
+        <th class="kuiTableHeaderCell">
+          Date last modified
+        </th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr>
+        <td class="kuiTableRowCell kuiTableRowCell--checkBox">
+          <input type="checkbox" class="kuiCheckBox">
+        </td>
+        <td class="kuiTableRowCell">
+          <a class="kuiLink" href="#">Alligator</a>
+        </td>
+        <td class="kuiTableRowCell">
+          <div class="kuiIcon kuiIcon--success fa-check"></div>
+        </td>
+        <td class="kuiTableRowCell">
+          <div class="kuiTableRowCell__liner">
+            Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
+          </div>
+        </td>
+        <td class="kuiTableRowCell">
+          <div class="kuiTableRowCell__liner">
+            Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
+          </div>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="kuiTableRowCell kuiTableRowCell--checkBox">
+          <input type="checkbox" class="kuiCheckBox">
+        </td>
+        <td class="kuiTableRowCell">
+          <a class="kuiLink" href="#">Boomerang</a>
+        </td>
+        <td class="kuiTableRowCell">
+          <div class="kuiIcon kuiIcon--success fa-check"></div>
+        </td>
+        <td class="kuiTableRowCell">
+          <div class="kuiTableRowCell__liner">
+            Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
+          </div>
+        </td>
+        <td class="kuiTableRowCell">
+          <div class="kuiTableRowCell__liner">
+            Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
+          </div>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="kuiTableRowCell kuiTableRowCell--checkBox">
+          <input type="checkbox" class="kuiCheckBox">
+        </td>
+        <td class="kuiTableRowCell">
+          <a class="kuiLink" href="#">Celebration</a>
+        </td>
+        <td class="kuiTableRowCell">
+          <div class="kuiIcon kuiIcon--warning fa-bolt"></div>
+        </td>
+        <td class="kuiTableRowCell">
+          <div class="kuiTableRowCell__liner">
+            Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
+          </div>
+        </td>
+        <td class="kuiTableRowCell">
+          <div class="kuiTableRowCell__liner">
+            Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
+          </div>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="kuiTableRowCell kuiTableRowCell--checkBox">
+          <input type="checkbox" class="kuiCheckBox">
+        </td>
+        <td class="kuiTableRowCell">
+          <a class="kuiLink" href="#">Dog</a>
+        </td>
+        <td class="kuiTableRowCell">
+          <div class="kuiIcon kuiIcon--error fa-warning"></div>
+        </td>
+        <td class="kuiTableRowCell">
+          <div class="kuiTableRowCell__liner">
+            Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
+          </div>
+        </td>
+        <td class="kuiTableRowCell">
+          <div class="kuiTableRowCell__liner">
+            Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+  <!-- ToolBarFooter -->
+  <div class="kuiToolBarFooter">
+    <div class="kuiToolBarFooterSection">
+      <div class="kuiToolBarText">
+        1 &ndash; 20 of 33
+      </div>
+
+      <div class="kuiButtonGroup">
+        <button class="kuiButton kuiButton--basic kuiButton--icon">
+          <span class="kuiButton__icon kuiIcon fa-chevron-left"></span>
+        </button>
+        <button class="kuiButton kuiButton--basic kuiButton--icon">
+          <span class="kuiButton__icon kuiIcon fa-chevron-right"></span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+</div>
diff --git a/src/ui_framework/doc_site/src/views/table/table.html b/src/ui_framework/doc_site/src/views/table/table.html
new file mode 100644
index 0000000000000..a4306752f224b
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/table/table.html
@@ -0,0 +1,115 @@
+<table class="kuiTable">
+  <thead>
+    <tr>
+      <th class="kuiTableHeaderCell kuiTableHeaderCell--checkBox">
+        <input type="checkbox" class="kuiCheckBox">
+      </th>
+      <th class="kuiTableHeaderCell kuiTableHeaderCell--sortable" data-demo-sortable-column>
+        Title
+        <span data-sort-icon-ascending class="kuiTableSortIcon kuiIcon fa-long-arrow-up"></span>
+        <span data-sort-icon-descending class="kuiTableSortIcon kuiIcon fa-long-arrow-down"></span>
+      </th>
+      <th class="kuiTableHeaderCell kuiTableHeaderCell--sortable" data-demo-sortable-column>
+        Status
+        <span data-sort-icon-ascending class="kuiTableSortIcon kuiIcon fa-long-arrow-up"></span>
+        <span data-sort-icon-descending class="kuiTableSortIcon kuiIcon fa-long-arrow-down"></span>
+      </th>
+      <th class="kuiTableHeaderCell">
+        Date created
+      </th>
+      <th class="kuiTableHeaderCell">
+        Date last modified
+      </th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr>
+      <td class="kuiTableRowCell kuiTableRowCell--checkBox">
+        <input type="checkbox" class="kuiCheckBox">
+      </td>
+      <td class="kuiTableRowCell">
+        <a class="kuiLink" href="#">Alligator</a>
+      </td>
+      <td class="kuiTableRowCell">
+        <div class="kuiIcon kuiIcon--success fa-check"></div>
+      </td>
+      <td class="kuiTableRowCell">
+        <div class="kuiTableRowCell__liner">
+          Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
+        </div>
+      </td>
+      <td class="kuiTableRowCell">
+        <div class="kuiTableRowCell__liner">
+          Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
+        </div>
+      </td>
+    </tr>
+
+    <tr>
+      <td class="kuiTableRowCell kuiTableRowCell--checkBox">
+        <input type="checkbox" class="kuiCheckBox">
+      </td>
+      <td class="kuiTableRowCell">
+        <a class="kuiLink" href="#">Boomerang</a>
+      </td>
+      <td class="kuiTableRowCell">
+        <div class="kuiIcon kuiIcon--success fa-check"></div>
+      </td>
+      <td class="kuiTableRowCell">
+        <div class="kuiTableRowCell__liner">
+          Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
+        </div>
+      </td>
+      <td class="kuiTableRowCell">
+        <div class="kuiTableRowCell__liner">
+          Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
+        </div>
+      </td>
+    </tr>
+
+    <tr>
+      <td class="kuiTableRowCell kuiTableRowCell--checkBox">
+        <input type="checkbox" class="kuiCheckBox">
+      </td>
+      <td class="kuiTableRowCell">
+        <a class="kuiLink" href="#">Celebration</a>
+      </td>
+      <td class="kuiTableRowCell">
+        <div class="kuiIcon kuiIcon--warning fa-bolt"></div>
+      </td>
+      <td class="kuiTableRowCell">
+        <div class="kuiTableRowCell__liner">
+          Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
+        </div>
+      </td>
+      <td class="kuiTableRowCell">
+        <div class="kuiTableRowCell__liner">
+          Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
+        </div>
+      </td>
+    </tr>
+
+    <tr>
+      <td class="kuiTableRowCell kuiTableRowCell--checkBox">
+        <input type="checkbox" class="kuiCheckBox">
+      </td>
+      <td class="kuiTableRowCell">
+        <a class="kuiLink" href="#">Dog</a>
+      </td>
+      <td class="kuiTableRowCell">
+        <div class="kuiIcon kuiIcon--error fa-warning"></div>
+      </td>
+      <td class="kuiTableRowCell">
+        <div class="kuiTableRowCell__liner">
+          Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
+        </div>
+      </td>
+      <td class="kuiTableRowCell">
+        <div class="kuiTableRowCell__liner">
+          Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
diff --git a/src/ui_framework/doc_site/src/views/table/table.js b/src/ui_framework/doc_site/src/views/table/table.js
new file mode 100644
index 0000000000000..8395cd6a4b6e4
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/table/table.js
@@ -0,0 +1,70 @@
+/* eslint-disable */
+
+// Hide all icons initially.
+$('[data-sort-icon-ascending]').hide();
+$('[data-sort-icon-descending]').hide();
+
+const demoSortableColumns = $('[data-demo-sortable-column]');
+
+let sortedColumn;
+let isSortAscending = true;
+
+function sortColumn(column) {
+  if (sortedColumn) {
+    if (column === sortedColumn) {
+      // If we clicked the currently selected one, then reverse the sort.
+      isSortAscending = !isSortAscending;
+    } else {
+      // Otherwise, "deselect" the old column by hiding its icons.
+      const $sortedColumn = $(sortedColumn);
+      $sortedColumn.removeClass('tableHeaderCell-isSorted');
+      const ascendingIcon = $sortedColumn.find('[data-sort-icon-ascending]');
+      const descendingIcon = $sortedColumn.find('[data-sort-icon-descending]');
+      ascendingIcon.hide();
+      descendingIcon.hide();
+    }
+  }
+
+  // Update the visual state of the sortedColumn.
+  sortedColumn = column;
+  const $sortedColumn = $(sortedColumn);
+  $sortedColumn.addClass('tableHeaderCell-isSorted');
+  const ascendingIcon = $(sortedColumn).find('[data-sort-icon-ascending]');
+  const descendingIcon = $(sortedColumn).find('[data-sort-icon-descending]');
+  if (isSortAscending) {
+    ascendingIcon.show();
+    descendingIcon.hide();
+  } else {
+    ascendingIcon.hide();
+    descendingIcon.show();
+  }
+}
+
+// Sort on the first column by default.
+sortColumn(demoSortableColumns[0]);
+
+$(demoSortableColumns).on('click', event => {
+  sortColumn(event.target);
+});
+
+$(demoSortableColumns).on('mouseover', event => {
+  const column = event.target;
+  if (column !== sortedColumn) {
+    const icon =
+      isSortAscending
+      ? $(column).find('[data-sort-icon-ascending]')
+      : $(column).find('[data-sort-icon-descending]');
+    icon.show();
+  }
+});
+
+$(demoSortableColumns).on('mouseout', event => {
+  const column = event.target;
+  if (column !== sortedColumn) {
+    const icon =
+      isSortAscending
+      ? $(column).find('[data-sort-icon-ascending]')
+      : $(column).find('[data-sort-icon-descending]');
+    icon.hide();
+  }
+});
diff --git a/src/ui_framework/doc_site/src/views/table/table_example.jsx b/src/ui_framework/doc_site/src/views/table/table_example.jsx
new file mode 100644
index 0000000000000..509e69ae23f51
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/table/table_example.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import {
+  createExample,
+} from '../../services';
+
+export default createExample([{
+  title: 'Table',
+  html: require('./table.html'),
+  js: require('raw!./table.js'),
+  hasDarkTheme: false,
+}, {
+  title: 'ControlledTable',
+  html: require('./controlled_table.html'),
+  hasDarkTheme: false,
+}]);
diff --git a/src/ui_framework/doc_site/src/views/tool_bar/tool_bar.html b/src/ui_framework/doc_site/src/views/tool_bar/tool_bar.html
new file mode 100644
index 0000000000000..78beefeea828a
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/tool_bar/tool_bar.html
@@ -0,0 +1,41 @@
+<div class="kuiToolBar">
+  <div class="kuiToolBarSearch">
+    <div class="kuiToolBarSearchBox">
+      <div class="kuiToolBarSearchBox__icon kuiIcon fa-search"></div>
+      <input
+        class="kuiToolBarSearchBox__input"
+        type="text"
+        placeholder="Search..."
+      >
+    </div>
+  </div>
+
+  <div class="kuiToolBarSection">
+    <button class="kuiButton kuiButton--primary">
+      Add
+    </button>
+
+    <button class="kuiButton kuiButton--basic kuiButton--icon">
+      <span class="kuiButton__icon kuiIcon fa-gear"></span>
+    </button>
+
+    <button class="kuiButton kuiButton--basic kuiButton--icon">
+      <span class="kuiButton__icon kuiIcon fa-bars"></span>
+    </button>
+  </div>
+
+  <div class="kuiToolBarSection">
+    <div class="kuiToolBarText">
+      1 &ndash; 20 of 33
+    </div>
+
+    <div class="kuiButtonGroup">
+      <button class="kuiButton kuiButton--basic kuiButton--icon">
+        <span class="kuiButton__icon kuiIcon fa-chevron-left"></span>
+      </button>
+      <button class="kuiButton kuiButton--basic kuiButton--icon">
+        <span class="kuiButton__icon kuiIcon fa-chevron-right"></span>
+      </button>
+    </div>
+  </div>
+</div>
diff --git a/src/ui_framework/doc_site/src/views/tool_bar/tool_bar_example.jsx b/src/ui_framework/doc_site/src/views/tool_bar/tool_bar_example.jsx
new file mode 100644
index 0000000000000..036e5f97678d1
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/tool_bar/tool_bar_example.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import {
+  createExample,
+} from '../../services';
+
+export default createExample([{
+  title: 'ToolBar',
+  description: (
+    <p>Use the ToolBar to surface controls for manipulating and filtering content, e.g. in a list, table, or menu.</p>
+  ),
+  html: require('./tool_bar.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'ToolBarFooter',
+  description: (
+    <p>Use the ToolBarFooter in conjunction with the ToolBar. It can surface secondary controls or a subset of the primary controls.</p>
+  ),
+  html: require('./tool_bar_footer.html'),
+  hasDarkTheme: false,
+}]);
diff --git a/src/ui_framework/doc_site/src/views/tool_bar/tool_bar_footer.html b/src/ui_framework/doc_site/src/views/tool_bar/tool_bar_footer.html
new file mode 100644
index 0000000000000..2b56d20b1bf64
--- /dev/null
+++ b/src/ui_framework/doc_site/src/views/tool_bar/tool_bar_footer.html
@@ -0,0 +1,16 @@
+<div class="kuiToolBarFooter">
+  <div class="kuiToolBarFooterSection">
+    <div class="kuiToolBarText">
+      1 &ndash; 20 of 33
+    </div>
+
+    <div class="kuiButtonGroup">
+      <button class="kuiButton kuiButton--basic kuiButton--icon">
+        <span class="kuiButton__icon kuiIcon fa-chevron-left"></span>
+      </button>
+      <button class="kuiButton kuiButton--basic kuiButton--icon">
+        <span class="kuiButton__icon kuiIcon fa-chevron-right"></span>
+      </button>
+    </div>
+  </div>
+</div>
diff --git a/src/ui_framework/doc_site/webpack.config.js b/src/ui_framework/doc_site/webpack.config.js
index 9c4173cb4798d..172ef1db2626c 100644
--- a/src/ui_framework/doc_site/webpack.config.js
+++ b/src/ui_framework/doc_site/webpack.config.js
@@ -25,7 +25,7 @@ module.exports = {
       exclude: /node_modules/
     }, {
       test: /\.scss$/,
-      loaders: ['style', 'css', 'sass'],
+      loaders: ['style', 'css', 'postcss', 'sass'],
       exclude: /node_modules/
     }, {
       test: /\.html$/,
diff --git a/tasks/release.js b/tasks/release.js
index ab72d50379d2d..cfb900574c5a4 100644
--- a/tasks/release.js
+++ b/tasks/release.js
@@ -37,7 +37,7 @@ module.exports = function (grunt) {
     grunt.config('aws_s3.options', {
       accessKeyId: config.key,
       secretAccessKey: config.secret,
-      bucket: config.bucket || grunt.config.get('aws_s3.config.bucket'),
+      bucket: config.bucket || grunt.config.get('aws_s3.options.bucket'),
       region: config.region
     });
   });