diff --git a/packages/kbn-ui-framework/dist/ui_framework.css b/packages/kbn-ui-framework/dist/ui_framework.css
index 409034cd9b6e..928c41497a54 100644
--- a/packages/kbn-ui-framework/dist/ui_framework.css
+++ b/packages/kbn-ui-framework/dist/ui_framework.css
@@ -59,7 +59,8 @@
   /* 1 */
   outline: none !important;
   /* 2 */
-  box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #0079a5;
+  -webkit-box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #0079a5;
+          box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #0079a5;
   /* 3 */ }
 
 /**
@@ -78,12 +79,15 @@ main {
   overflow: hidden; }
 
 .kuiActionItem {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between; }
@@ -102,12 +106,15 @@ main {
   background-color: rgba(0, 0, 0, 0.1); }
 
 .kuiBar {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
@@ -115,18 +122,22 @@ main {
   /* 1 */ }
 
 .kuiBarSection {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-flex: 1;
   -webkit-flex: 1 1 auto;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto;
   margin-left: 25px;
   margin-right: 25px; }
   .kuiBarSection:not(:first-child):not(:last-child):not(:only-child) {
+    -webkit-box-pack: center;
     -webkit-justify-content: center;
         -ms-flex-pack: center;
             justify-content: center;
@@ -135,10 +146,12 @@ main {
     margin-left: 0; }
   .kuiBarSection:last-child {
     margin-right: 0;
+    -webkit-box-flex: 0;
     -webkit-flex: 0 1 auto;
         -ms-flex: 0 1 auto;
             flex: 0 1 auto;
     /* 4 */
+    -webkit-box-pack: end;
     -webkit-justify-content: flex-end;
         -ms-flex-pack: end;
             justify-content: flex-end;
@@ -189,10 +202,12 @@ main {
    * 1. Solves whitespace problems introduced by inline elements.
    */
 .kuiButton__inner {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   /* 1 */
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
@@ -252,7 +267,8 @@ main {
       /* 1 */
       outline: none !important;
       /* 2 */
-      box-shadow: 0 0 0 1px #777777, 0 0 0 2px #0079a5;
+      -webkit-box-shadow: 0 0 0 1px #777777, 0 0 0 2px #0079a5;
+              box-shadow: 0 0 0 1px #777777, 0 0 0 2px #0079a5;
       /* 3 */
       color: #FFF; }
     a.theme-dark .kuiButton--basic:not(.kuiButton-isDisabled):focus {
@@ -261,7 +277,8 @@ main {
       /* 1 */
       outline: none !important;
       /* 2 */
-      box-shadow: 0 0 0 1px #777777, 0 0 0 2px #0079a5;
+      -webkit-box-shadow: 0 0 0 1px #777777, 0 0 0 2px #0079a5;
+              box-shadow: 0 0 0 1px #777777, 0 0 0 2px #0079a5;
       /* 3 */
       color: #FFF; }
     .theme-dark .kuiButton--basic:enabled:hover {
@@ -351,7 +368,8 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ff523c;
+    -webkit-box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ff523c;
+            box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ff523c;
     /* 3 */
     color: #A30000; }
   a.kuiButton--danger:not(.kuiButton-isDisabled):focus {
@@ -360,7 +378,8 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ff523c;
+    -webkit-box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ff523c;
+            box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ff523c;
     /* 3 */
     color: #A30000; }
   .kuiButton--danger:enabled:hover {
@@ -393,7 +412,8 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ffa500;
+    -webkit-box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ffa500;
+            box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ffa500;
     /* 3 */
     color: #FFF; }
   a.kuiButton--warning:not(.kuiButton-isDisabled):focus {
@@ -402,7 +422,8 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ffa500;
+    -webkit-box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ffa500;
+            box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ffa500;
     /* 3 */
     color: #FFF; }
   .kuiButton--warning:enabled:hover {
@@ -499,9 +520,11 @@ main {
     background-color: rgba(165, 231, 255, 0.5); }
 
 .kuiButtonGroup {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center; }
@@ -529,19 +552,28 @@ main {
   margin-left: 2px; }
 
 .kuiButtonGroup--fullWidth {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex; }
   .kuiButtonGroup--fullWidth > .kuiButton {
+    -webkit-box-flex: 1;
     -webkit-flex: 1 1 auto;
         -ms-flex: 1 1 auto;
             flex: 1 1 auto;
     text-align: center; }
 
+.eui-textCenter > .kuiButtonGroup,
+.text-center > .kuiButtonGroup {
+  display: inline-block; }
+
 .kuiCard {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
   -webkit-flex-direction: column;
       -ms-flex-direction: column;
           flex-direction: column;
@@ -551,15 +583,20 @@ main {
   line-height: 1.5; }
 
 .kuiCard__description {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
   -webkit-flex-direction: column;
       -ms-flex-direction: column;
           flex-direction: column;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: start;
   -webkit-justify-content: flex-start;
       -ms-flex-pack: start;
           justify-content: flex-start;
@@ -587,6 +624,7 @@ main {
  * 2. Offset the spacing between wrapped cards.
  */
 .kuiCardGroup {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
@@ -601,6 +639,7 @@ main {
    * 2. Use an even margin all around the card so that the spacing is still even when wrapped.
    */ }
   .kuiCardGroup .kuiCard {
+    -webkit-box-flex: 1;
     -webkit-flex: 1 1 auto;
         -ms-flex: 1 1 auto;
             flex: 1 1 auto;
@@ -608,6 +647,7 @@ main {
     margin: 15px;
     /* 2 */ }
     .kuiCardGroup .kuiCard .kuiCard__description {
+      -webkit-box-flex: 1;
       -webkit-flex: 1 1 auto;
           -ms-flex: 1 1 auto;
               flex: 1 1 auto; }
@@ -658,15 +698,20 @@ main {
   right: 0;
   left: 0;
   background: rgba(255, 255, 255, 0.7);
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
   -webkit-flex-direction: column;
       -ms-flex-direction: column;
           flex-direction: column;
+  -webkit-box-pack: center;
   -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
@@ -702,9 +747,11 @@ main {
   cursor: pointer; }
 
 .kuiColorPicker__preview {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center; }
@@ -713,7 +760,8 @@ main {
   width: 20px;
   height: 20px;
   border-radius: 4px;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+          box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
   display: inline-block; }
 
 .kuiColorPicker__emptySwatch svg {
@@ -835,6 +883,7 @@ main {
   width: 256px;
   position: relative;
   overflow: hidden;
+  -webkit-transition: height 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
   transition: height 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
   border-radius: 4px; }
   .kuiContextMenu .kuiContextMenu__content {
@@ -854,9 +903,11 @@ main {
   margin-right: 8px; }
 
 .kuiContextMenu__itemLayout {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center; }
@@ -869,7 +920,8 @@ main {
    * 1. Override global focus style.
    */ }
   .kuiContextMenuPanel:focus {
-    box-shadow: none;
+    -webkit-box-shadow: none;
+            box-shadow: none;
     /* 1 */ }
   .kuiContextMenuPanel.kuiContextMenuPanel-txInLeft {
     pointer-events: none;
@@ -928,7 +980,8 @@ main {
   .kuiContextMenuPanelTitle:hover .kuiContextMenu__text, .kuiContextMenuPanelTitle:focus .kuiContextMenu__text {
     text-decoration: underline; }
   .kuiContextMenuPanelTitle:focus {
-    box-shadow: none;
+    -webkit-box-shadow: none;
+            box-shadow: none;
     /* 1 */ }
 
 @-webkit-keyframes kuiContextMenuPanelTxInLeft {
@@ -1025,7 +1078,8 @@ main {
     text-decoration: underline; }
   .kuiContextMenuItem:focus {
     background-color: rgba(63, 168, 199, 0.2);
-    box-shadow: none;
+    -webkit-box-shadow: none;
+            box-shadow: none;
     /* 1 */ }
     .theme-dark .kuiContextMenuItem:focus {
       background-color: transparent; }
@@ -1033,11 +1087,13 @@ main {
     color: #ffffff; }
 
 .kuiContextMenuItem__inner {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex; }
 
 .kuiContextMenuItem__text {
+  -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
           flex-grow: 1; }
@@ -1056,11 +1112,13 @@ main {
     text-decoration: none; }
 
 .kuiEvent {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex; }
 
 .kuiEventSymbol {
+  -webkit-box-flex: 0;
   -webkit-flex: 0 1 auto;
       -ms-flex: 0 1 auto;
           flex: 0 1 auto;
@@ -1069,6 +1127,7 @@ main {
   padding-right: 8px; }
 
 .kuiEventBody {
+  -webkit-box-flex: 1;
   -webkit-flex: 1 1 0%;
       -ms-flex: 1 1 0%;
           flex: 1 1 0%; }
@@ -1107,13 +1166,16 @@ main {
   border-bottom: solid 2px #00A69B; }
 
 .kuiFlexGroup {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
   .kuiFlexGroup .kuiFlexItem {
+    -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
         -ms-flex-positive: 1;
             flex-grow: 1; }
@@ -1139,11 +1201,13 @@ main {
     margin: 20px; }
 
 .kuiFlexGroup--justifyContentSpaceEvenly {
+  -webkit-box-pack: space-evenly;
   -webkit-justify-content: space-evenly;
       -ms-flex-pack: space-evenly;
           justify-content: space-evenly; }
 
 .kuiFlexGroup--justifyContentSpaceBetween {
+  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between; }
@@ -1154,26 +1218,31 @@ main {
           justify-content: space-around; }
 
 .kuiFlexGroup--justifyContentCenter {
+  -webkit-box-pack: center;
   -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center; }
 
 .kuiFlexGroup--justifyContentFlexEnd {
+  -webkit-box-pack: end;
   -webkit-justify-content: flex-end;
       -ms-flex-pack: end;
           justify-content: flex-end; }
 
 .kuiFlexGroup--alignItemsStart {
+  -webkit-box-align: start;
   -webkit-align-items: flex-start;
       -ms-flex-align: start;
           align-items: flex-start; }
 
 .kuiFlexGroup--alignItemsCenter {
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center; }
 
 .kuiFlexGroup--alignItemsEnd {
+  -webkit-box-align: end;
   -webkit-align-items: flex-end;
       -ms-flex-align: end;
           align-items: flex-end; }
@@ -1190,6 +1259,7 @@ main {
             flex-wrap: wrap; } }
 
 .kuiFlexGrid {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
@@ -1198,10 +1268,12 @@ main {
           flex-wrap: wrap;
   margin-bottom: 0; }
   .kuiFlexGrid > .kuiFlexItem {
+    -webkit-box-flex: 0;
     -webkit-flex-grow: 0;
         -ms-flex-positive: 0;
             flex-grow: 0; }
     .kuiFlexGrid > .kuiFlexItem.kuiFlexItem--flexGrowZero {
+      -webkit-box-flex: 0 !important;
       -webkit-flex-grow: 0 !important;
           -ms-flex-positive: 0 !important;
               flex-grow: 0 !important;
@@ -1218,6 +1290,7 @@ main {
 
 .kuiFlexGrid--gutterSmall {
   margin: -4px;
+  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
@@ -1228,6 +1301,7 @@ main {
 
 .kuiFlexGrid--gutterSmall {
   margin: -4px;
+  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
@@ -1238,6 +1312,7 @@ main {
 
 .kuiFlexGrid--gutterSmall {
   margin: -4px;
+  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
@@ -1255,6 +1330,7 @@ main {
 
 .kuiFlexGrid--gutterMedium {
   margin: -8px;
+  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
@@ -1265,6 +1341,7 @@ main {
 
 .kuiFlexGrid--gutterMedium {
   margin: -8px;
+  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
@@ -1275,6 +1352,7 @@ main {
 
 .kuiFlexGrid--gutterMedium {
   margin: -8px;
+  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
@@ -1292,6 +1370,7 @@ main {
 
 .kuiFlexGrid--gutterLarge {
   margin: -12px;
+  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
@@ -1302,6 +1381,7 @@ main {
 
 .kuiFlexGrid--gutterLarge {
   margin: -12px;
+  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
@@ -1312,6 +1392,7 @@ main {
 
 .kuiFlexGrid--gutterLarge {
   margin: -12px;
+  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
@@ -1329,6 +1410,7 @@ main {
 
 .kuiFlexGrid--gutterXLarge {
   margin: -16px;
+  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
@@ -1339,6 +1421,7 @@ main {
 
 .kuiFlexGrid--gutterXLarge {
   margin: -16px;
+  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
@@ -1349,6 +1432,7 @@ main {
 
 .kuiFlexGrid--gutterXLarge {
   margin: -16px;
+  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
@@ -1361,10 +1445,13 @@ main {
  * 1. Allow KuiPanels to expand to fill the item.
  */
 .kuiFlexItem {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   /* 1 */
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
   -webkit-flex-direction: column;
       -ms-flex-direction: column;
           flex-direction: column;
@@ -1375,6 +1462,7 @@ main {
    */ }
   .kuiFlexItem.kuiFlexItem--flexGrowZero {
     /* 1 */
+    -webkit-box-flex: 0;
     -webkit-flex-grow: 0;
         -ms-flex-positive: 0;
             flex-grow: 0;
@@ -1384,42 +1472,52 @@ main {
             flex-basis: auto;
     /* 2 */ }
   .kuiFlexItem.kuiFlexItem--flexGrow1 {
+    -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
         -ms-flex-positive: 1;
             flex-grow: 1; }
   .kuiFlexItem.kuiFlexItem--flexGrow2 {
+    -webkit-box-flex: 2;
     -webkit-flex-grow: 2;
         -ms-flex-positive: 2;
             flex-grow: 2; }
   .kuiFlexItem.kuiFlexItem--flexGrow3 {
+    -webkit-box-flex: 3;
     -webkit-flex-grow: 3;
         -ms-flex-positive: 3;
             flex-grow: 3; }
   .kuiFlexItem.kuiFlexItem--flexGrow4 {
+    -webkit-box-flex: 4;
     -webkit-flex-grow: 4;
         -ms-flex-positive: 4;
             flex-grow: 4; }
   .kuiFlexItem.kuiFlexItem--flexGrow5 {
+    -webkit-box-flex: 5;
     -webkit-flex-grow: 5;
         -ms-flex-positive: 5;
             flex-grow: 5; }
   .kuiFlexItem.kuiFlexItem--flexGrow6 {
+    -webkit-box-flex: 6;
     -webkit-flex-grow: 6;
         -ms-flex-positive: 6;
             flex-grow: 6; }
   .kuiFlexItem.kuiFlexItem--flexGrow7 {
+    -webkit-box-flex: 7;
     -webkit-flex-grow: 7;
         -ms-flex-positive: 7;
             flex-grow: 7; }
   .kuiFlexItem.kuiFlexItem--flexGrow8 {
+    -webkit-box-flex: 8;
     -webkit-flex-grow: 8;
         -ms-flex-positive: 8;
             flex-grow: 8; }
   .kuiFlexItem.kuiFlexItem--flexGrow9 {
+    -webkit-box-flex: 9;
     -webkit-flex-grow: 9;
         -ms-flex-positive: 9;
             flex-grow: 9; }
   .kuiFlexItem.kuiFlexItem--flexGrow10 {
+    -webkit-box-flex: 10;
     -webkit-flex-grow: 10;
         -ms-flex-positive: 10;
             flex-grow: 10; }
@@ -1477,6 +1575,7 @@ main {
   /* 2 */
   font-size: 10px !important;
   /* 2 */
+  -webkit-transition: background-color 0.1s linear;
   transition: background-color 0.1s linear; }
   .kuiCheckBox:before {
     position: relative;
@@ -1486,6 +1585,7 @@ main {
     font-size: 1em;
     opacity: 0;
     color: #FFF;
+    -webkit-transition: opacity 0.1s linear;
     transition: opacity 0.1s linear; }
   .kuiCheckBox:checked {
     border-color: #0079a5;
@@ -1497,7 +1597,8 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #0079a5;
+    -webkit-box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #0079a5;
+            box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #0079a5;
     /* 3 */ }
   .kuiCheckBox:disabled {
     background-color: #D9D9D9 !important;
@@ -1510,9 +1611,11 @@ main {
       background-color: #0079a5; }
 
 .kuiCheckBoxLabel {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
@@ -1566,6 +1669,7 @@ main {
   background-color: #ffffff;
   border: 1px solid #DEDEDE;
   border-radius: 4px;
+  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
   min-height: 30px;
   /* 1 */
@@ -1612,6 +1716,7 @@ main {
   background-color: #ffffff;
   border: 1px solid #DEDEDE;
   border-radius: 4px;
+  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
   min-height: 30px;
   /* 1 */
@@ -1648,7 +1753,8 @@ main {
   .kuiSelect.kuiSelect-isInvalid {
     border-color: #A30000; }
   .kuiSelect:focus {
-    box-shadow: none;
+    -webkit-box-shadow: none;
+            box-shadow: none;
     outline: none;
     border-color: #0079a5; }
 
@@ -1695,6 +1801,7 @@ main {
   background-color: #ffffff;
   border: 1px solid #DEDEDE;
   border-radius: 4px;
+  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
   min-height: 30px;
   /* 1 */ }
@@ -1715,7 +1822,8 @@ main {
       outline: none;
       border-color: #0079a5; }
   .kuiTextArea:focus {
-    box-shadow: none;
+    -webkit-box-shadow: none;
+            box-shadow: none;
     outline: none;
     border-color: #0079a5; }
   .kuiTextArea.kuiTextArea-isInvalid {
@@ -1744,6 +1852,7 @@ main {
   background-color: #ffffff;
   border: 1px solid #DEDEDE;
   border-radius: 4px;
+  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
   min-height: 30px;
   /* 1 */ }
@@ -1776,15 +1885,18 @@ main {
  * 1. We may want to put elements in here which have different heights.
  */
 .kuiFieldGroup {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
   /* 1 */ }
 
 .kuiFieldGroup--alignTop {
+  -webkit-box-align: start;
   -webkit-align-items: flex-start;
       -ms-flex-align: start;
           align-items: flex-start; }
@@ -1795,6 +1907,7 @@ main {
     margin-left: 10px; }
 
 .kuiFieldGroupSection--wide {
+  -webkit-box-flex: 1;
   -webkit-flex: 1 1 auto;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto; }
@@ -1802,6 +1915,7 @@ main {
     width: 100%; }
 
 .kuiGallery {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
@@ -1810,15 +1924,20 @@ main {
           flex-wrap: wrap; }
 
 .kuiGalleryItem {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
   -webkit-flex-direction: column;
       -ms-flex-direction: column;
           flex-direction: column;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: center;
   -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
@@ -1837,12 +1956,15 @@ main {
     border-color: #00A6FF; }
 
 .kuiGalleryItem__image {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: center;
   -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
@@ -1873,12 +1995,15 @@ main {
   color: #666; }
 
 .kuiHeaderBar {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
@@ -1890,18 +2015,22 @@ main {
  * 1. Align a single section to the left by default.
  */
 .kuiHeaderBarSection {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-flex: 1;
   -webkit-flex: 1 1 auto;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto;
   margin-left: 25px;
   margin-right: 25px; }
   .kuiHeaderBarSection:not(:first-child):not(:last-child):not(:only-child) {
+    -webkit-box-pack: center;
     -webkit-justify-content: center;
         -ms-flex-pack: center;
             justify-content: center;
@@ -1910,10 +2039,12 @@ main {
     margin-left: 0; }
   .kuiHeaderBarSection:last-child {
     margin-right: 0;
+    -webkit-box-flex: 0;
     -webkit-flex: 0 1 auto;
         -ms-flex: 0 1 auto;
             flex: 0 1 auto;
     /* 4 */
+    -webkit-box-pack: end;
     -webkit-justify-content: flex-end;
         -ms-flex-pack: end;
             justify-content: flex-end;
@@ -2012,9 +2143,11 @@ main {
  * 1. Align with first line of title text if it wraps.
  */
 .kuiInfoPanelHeader {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: baseline;
   -webkit-align-items: baseline;
       -ms-flex-align: baseline;
           align-items: baseline;
@@ -2071,9 +2204,11 @@ main {
  *    a bit.
  */
 .kuiLocalBreadcrumbs {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
@@ -2143,12 +2278,15 @@ main {
   padding: 0; }
 
 .kuiDatePickerNavigation {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
@@ -2176,7 +2314,8 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    box-shadow: 0 0 0 1px #F5F5F5, 0 0 0 2px #0079a5;
+    -webkit-box-shadow: 0 0 0 1px #F5F5F5, 0 0 0 2px #0079a5;
+            box-shadow: 0 0 0 1px #F5F5F5, 0 0 0 2px #0079a5;
     /* 3 */
     color: #2d2d2d;
     /* 1 */ }
@@ -2190,7 +2329,8 @@ main {
       /* 1 */
       outline: none !important;
       /* 2 */
-      box-shadow: 0 0 0 1px #525252, 0 0 0 2px #0079a5;
+      -webkit-box-shadow: 0 0 0 1px #525252, 0 0 0 2px #0079a5;
+              box-shadow: 0 0 0 1px #525252, 0 0 0 2px #0079a5;
       /* 3 */
       color: #dedede;
       /* 1 */ }
@@ -2238,7 +2378,8 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    box-shadow: 0 0 0 1px #F5F5F5, 0 0 0 2px #0079a5;
+    -webkit-box-shadow: 0 0 0 1px #F5F5F5, 0 0 0 2px #0079a5;
+            box-shadow: 0 0 0 1px #F5F5F5, 0 0 0 2px #0079a5;
     /* 3 */
     color: #2d2d2d;
     /* 1 */ }
@@ -2264,7 +2405,8 @@ main {
       /* 1 */
       outline: none !important;
       /* 2 */
-      box-shadow: 0 0 0 1px #525252, 0 0 0 2px #0079a5;
+      -webkit-box-shadow: 0 0 0 1px #525252, 0 0 0 2px #0079a5;
+              box-shadow: 0 0 0 1px #525252, 0 0 0 2px #0079a5;
       /* 3 */ }
     .theme-dark .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isCurrent {
       color: #b7e2ea; }
@@ -2312,11 +2454,13 @@ main {
     /* 1 */ }
 
 .kuiLocalDropdownPanels {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex; }
 
 .kuiLocalDropdownPanel {
+  -webkit-box-flex: 1;
   -webkit-flex: 1 1 0%;
       -ms-flex: 1 1 0%;
           flex: 1 1 0%; }
@@ -2345,12 +2489,15 @@ main {
     margin-bottom: 0; }
 
 .kuiLocalDropdownHeader {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
@@ -2369,6 +2516,7 @@ main {
     color: #cecece; }
 
 .kuiLocalDropdownHeader__actions {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex; }
@@ -2430,17 +2578,21 @@ main {
     color: #9e9e9e; }
 
 .kuiLocalMenu {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
 
 .kuiLocalMenuItem {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
@@ -2492,12 +2644,16 @@ main {
  *    dropdown.
  */
 .kuiLocalNav {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
   -webkit-flex-direction: column;
       -ms-flex-direction: column;
           flex-direction: column;
+  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
@@ -2516,12 +2672,15 @@ main {
  * 1. Allow row to expand if the content is so long that it wraps.
  */
 .kuiLocalNavRow {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch;
+  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
@@ -2529,9 +2688,11 @@ main {
   /* 1 */ }
 
 .kuiLocalNavRow__section {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
@@ -2546,12 +2707,14 @@ main {
 .kuiLocalNavRow--secondary {
   padding: 0 10px;
   /* 1 */
+  -webkit-box-align: start;
   -webkit-align-items: flex-start;
       -ms-flex-align: start;
           align-items: flex-start;
   /* 1 */ }
 
 .kuiLocalSearch {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
@@ -2571,9 +2734,11 @@ main {
   background-color: #ffffff;
   border: 1px solid #DEDEDE;
   border-radius: 4px;
+  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
   min-height: 30px;
   /* 1 */
+  -webkit-box-flex: 1;
   -webkit-flex: 1 1 100%;
       -ms-flex: 1 1 100%;
           flex: 1 1 100%;
@@ -2597,12 +2762,14 @@ main {
       outline: none;
       border-color: #0079a5; }
   .kuiLocalSearchInput:focus {
-    box-shadow: none; }
+    -webkit-box-shadow: none;
+            box-shadow: none; }
   .kuiLocalSearchInput.kuiLocalSearchInput-isInvalid {
     border-color: #e74C3c; }
 
 .kuiLocalSearchInput--secondary {
   height: 30px;
+  -webkit-box-flex: 0;
   -webkit-flex: 0 0 auto;
       -ms-flex: 0 0 auto;
           flex: 0 0 auto;
@@ -2614,9 +2781,11 @@ main {
     border-right-color: #333333; }
 
 .kuiLocalSearchAssistedInput {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-flex: 1;
   -webkit-flex: 1 1 100%;
       -ms-flex: 1 1 100%;
           flex: 1 1 100%;
@@ -2648,6 +2817,7 @@ main {
   background-color: #ffffff;
   border: 1px solid #DEDEDE;
   border-radius: 4px;
+  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
   min-height: 30px;
   /* 1 */
@@ -2702,7 +2872,8 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5;
+    -webkit-box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5;
+            box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5;
     /* 3 */ }
   .theme-dark .kuiLocalSearchButton {
     color: #ffffff;
@@ -2712,16 +2883,19 @@ main {
       /* 1 */
       outline: none !important;
       /* 2 */
-      box-shadow: 0 0 0 1px #333333, 0 0 0 2px #0079a5;
+      -webkit-box-shadow: 0 0 0 1px #333333, 0 0 0 2px #0079a5;
+              box-shadow: 0 0 0 1px #333333, 0 0 0 2px #0079a5;
       /* 3 */ }
 
 /**
  * 1. We want the bottom border on selected tabs to be flush with the bottom of the container.
  */
 .kuiLocalTabs {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: end;
   -webkit-align-items: flex-end;
       -ms-flex-align: end;
           align-items: flex-end;
@@ -2766,9 +2940,11 @@ main {
     color: #dedede; }
 
 .kuiLocalTitle {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
@@ -2832,7 +3008,8 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #0079a5;
+    -webkit-box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #0079a5;
+            box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #0079a5;
     /* 3 */ }
 
 .kuiMenuButton--iconText .kuiMenuButton__icon:first-child {
@@ -2896,10 +3073,12 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ff523c;
+    -webkit-box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ff523c;
+            box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ff523c;
     /* 3 */ }
 
 .kuiMenuButtonGroup {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex; }
@@ -2907,6 +3086,7 @@ main {
     margin-left: 4px; }
 
 .kuiMenuButtonGroup--alignRight {
+  -webkit-box-pack: end;
   -webkit-justify-content: flex-end;
       -ms-flex-pack: end;
           justify-content: flex-end; }
@@ -2929,6 +3109,7 @@ main {
     color: #191E23; }
 
 .kuiMicroButtonGroup {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex; }
@@ -2942,12 +3123,15 @@ main {
   left: 0;
   right: 0;
   bottom: 0;
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: center;
   -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
@@ -2955,12 +3139,14 @@ main {
   background-color: rgba(0, 0, 0, 0.5); }
 
 .kuiModal {
-  box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
   line-height: 1.5;
   background-color: #FFF;
   border: 1px solid #D9D9D9;
   border-radius: 4px;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
   z-index: 1001;
   -webkit-animation: kuiModal 350ms cubic-bezier(0.34, 1.61, 0.7, 1);
           animation: kuiModal 350ms cubic-bezier(0.34, 1.61, 0.7, 1); }
@@ -2973,12 +3159,15 @@ main {
   min-width: auto; }
 
 .kuiModalHeader {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
@@ -3019,9 +3208,11 @@ main {
     color: #cecece; }
 
 .kuiModalFooter {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: end;
   -webkit-justify-content: flex-end;
       -ms-flex-pack: end;
           justify-content: flex-end;
@@ -3060,9 +3251,11 @@ main {
  * 1. Put 10px of space between each child.
  */
 .kuiPager {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center; }
@@ -3082,16 +3275,21 @@ main {
   border-radius: 4px; }
 
 .kuiPanel--prompt {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
   -webkit-flex-direction: column;
       -ms-flex-direction: column;
           flex-direction: column;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
   text-align: center;
+  -webkit-box-pack: center;
   -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
@@ -3108,23 +3306,29 @@ main {
   border-radius: 0; }
 
 .kuiPanel--centered {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: center;
   -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center; }
 
 .kuiPanelHeader {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
@@ -3138,7 +3342,8 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5;
+    -webkit-box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5;
+            box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5;
     /* 3 */ }
   a.kuiPanelHeader .kuiButton:not(.kuiButton-isDisabled):focus {
     /* 1 */
@@ -3146,14 +3351,16 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5;
+    -webkit-box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5;
+            box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5;
     /* 3 */ }
   .kuiPanelHeader .kuiButton--danger:not(a):enabled:focus {
     z-index: 1;
     /* 1 */
     outline: none !important;
     /* 2 */
-    box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #ff523c;
+    -webkit-box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #ff523c;
+            box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #ff523c;
     /* 3 */ }
   a.kuiPanelHeader .kuiButton--danger:not(.kuiButton-isDisabled):focus {
     /* 1 */
@@ -3161,7 +3368,8 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #ff523c;
+    -webkit-box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #ff523c;
+            box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #ff523c;
     /* 3 */ }
   .kuiPanelHeader .kuiSelect {
     border-color: #ffffff; }
@@ -3186,18 +3394,22 @@ main {
  * 1. Undo what barSection mixin does.
  */
 .kuiPanelHeaderSection {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-flex: 1;
   -webkit-flex: 1 1 auto;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto;
   margin-left: 25px;
   margin-right: 25px; }
   .kuiPanelHeaderSection:not(:first-child):not(:last-child):not(:only-child) {
+    -webkit-box-pack: center;
     -webkit-justify-content: center;
         -ms-flex-pack: center;
             justify-content: center;
@@ -3206,10 +3418,12 @@ main {
     margin-left: 0; }
   .kuiPanelHeaderSection:last-child {
     margin-right: 0;
+    -webkit-box-flex: 0;
     -webkit-flex: 0 1 auto;
         -ms-flex: 0 1 auto;
             flex: 0 1 auto;
     /* 4 */
+    -webkit-box-pack: end;
     -webkit-justify-content: flex-end;
         -ms-flex-pack: end;
             justify-content: flex-end;
@@ -3230,10 +3444,12 @@ main {
   padding: 10px; }
 
 .kuiPanelSimple {
-  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
   background-color: #FFF;
   border: 1px solid #D9D9D9;
   border-radius: 4px;
+  -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
           flex-grow: 1; }
@@ -3244,8 +3460,10 @@ main {
   .kuiPanelSimple.kuiPanelSimple--paddingLarge {
     padding: 24px; }
   .kuiPanelSimple.kuiPanelSimple--shadow {
-    box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); }
+    -webkit-box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); }
   .kuiPanelSimple.kuiPanelSimple--flexGrowZero {
+    -webkit-box-flex: 0;
     -webkit-flex-grow: 0;
         -ms-flex-positive: 0;
             flex-grow: 0; }
@@ -3271,6 +3489,7 @@ main {
           transform: translateX(-50%) translateY(8px) translateZ(0);
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
+  -webkit-transition: opacity cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, visibility cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, margin-top cubic-bezier(0.34, 1.61, 0.7, 1) 350ms;
   transition: opacity cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, visibility cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, margin-top cubic-bezier(0.34, 1.61, 0.7, 1) 350ms;
   -webkit-transform-origin: center top;
           transform-origin: center top;
@@ -3339,12 +3558,16 @@ main {
     color: #ffffff; }
 
 .kuiEmptyTablePrompt {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
   -webkit-flex-direction: column;
       -ms-flex-direction: column;
           flex-direction: column;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
@@ -3359,9 +3582,11 @@ main {
   margin-top: 10px; }
 
 .kuiStatusText {
+  display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  -webkit-box-align: baseline;
   -webkit-align-items: baseline;
       -ms-flex-align: baseline;
           align-items: baseline; }
@@ -3477,9 +3702,11 @@ main {
     display: block;
     opacity: 1; }
   .kuiTableHeaderCellButton .kuiTableHeaderCell__liner {
+    display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
+    -webkit-box-align: center;
     -webkit-align-items: center;
         -ms-flex-align: center;
             align-items: center; }
@@ -3580,6 +3807,7 @@ main {
   line-height: 1.5; }
 
 .kuiTabs {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
@@ -3622,7 +3850,8 @@ main {
   .kuiTab:active {
     outline: none !important;
     /* 1 */
-    box-shadow: none;
+    -webkit-box-shadow: none;
+            box-shadow: none;
     /* 1 */ }
   .kuiTab:focus {
     outline: none;
@@ -3703,12 +3932,15 @@ main {
     /* 1 */ }
 
 .kuiToolBar {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
@@ -3723,7 +3955,8 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5;
+    -webkit-box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5;
+            box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5;
     /* 3 */ }
   a.kuiToolBar .kuiButton:not(.kuiButton-isDisabled):focus {
     /* 1 */
@@ -3731,14 +3964,16 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5;
+    -webkit-box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5;
+            box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5;
     /* 3 */ }
   .kuiToolBar .kuiButton--danger:not(a):enabled:focus {
     z-index: 1;
     /* 1 */
     outline: none !important;
     /* 2 */
-    box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #ff523c;
+    -webkit-box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #ff523c;
+            box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #ff523c;
     /* 3 */ }
   a.kuiToolBar .kuiButton--danger:not(.kuiButton-isDisabled):focus {
     /* 1 */
@@ -3746,7 +3981,8 @@ main {
     /* 1 */
     outline: none !important;
     /* 2 */
-    box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #ff523c;
+    -webkit-box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #ff523c;
+            box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #ff523c;
     /* 3 */ }
   .kuiToolBar .kuiSelect {
     border-color: #ffffff; }
@@ -3759,18 +3995,22 @@ main {
       border-color: #0079a5; }
 
 .kuiToolBarSection {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-flex: 1;
   -webkit-flex: 1 1 auto;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto;
   margin-left: 25px;
   margin-right: 25px; }
   .kuiToolBarSection:not(:first-child):not(:last-child):not(:only-child) {
+    -webkit-box-pack: center;
     -webkit-justify-content: center;
         -ms-flex-pack: center;
             justify-content: center;
@@ -3779,10 +4019,12 @@ main {
     margin-left: 0; }
   .kuiToolBarSection:last-child {
     margin-right: 0;
+    -webkit-box-flex: 0;
     -webkit-flex: 0 1 auto;
         -ms-flex: 0 1 auto;
             flex: 0 1 auto;
     /* 4 */
+    -webkit-box-pack: end;
     -webkit-justify-content: flex-end;
         -ms-flex-pack: end;
             justify-content: flex-end;
@@ -3802,12 +4044,15 @@ main {
   /* 1 */ }
 
 .kuiToolBarFooter {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
@@ -3819,18 +4064,22 @@ main {
   border: 1px solid #D9D9D9; }
 
 .kuiToolBarFooterSection {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-flex: 1;
   -webkit-flex: 1 1 auto;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto;
   margin-left: 25px;
   margin-right: 25px; }
   .kuiToolBarFooterSection:not(:first-child):not(:last-child):not(:only-child) {
+    -webkit-box-pack: center;
     -webkit-justify-content: center;
         -ms-flex-pack: center;
             justify-content: center;
@@ -3839,10 +4088,12 @@ main {
     margin-left: 0; }
   .kuiToolBarFooterSection:last-child {
     margin-right: 0;
+    -webkit-box-flex: 0;
     -webkit-flex: 0 1 auto;
         -ms-flex: 0 1 auto;
             flex: 0 1 auto;
     /* 4 */
+    -webkit-box-pack: end;
     -webkit-justify-content: flex-end;
         -ms-flex-pack: end;
             justify-content: flex-end;
@@ -3860,14 +4111,17 @@ main {
  *    kuiToolBarSection sibling.
  */
 .kuiToolBarSearch {
+  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
   margin-left: 25px;
   margin-right: 25px;
+  -webkit-box-flex: 1;
   -webkit-flex: 1 1 auto;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto;
@@ -3883,6 +4137,7 @@ main {
     /* 1 */ }
 
 .kuiToolBarSearchBox {
+  -webkit-box-flex: 1;
   -webkit-flex: 1 1 auto;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto;
@@ -3913,6 +4168,7 @@ main {
   border: 1px solid #D9D9D9;
   line-height: normal;
   /* 1 */
+  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear; }
   .kuiToolBarSearchBox__input:focus {
     outline: none;
@@ -4005,6 +4261,7 @@ main {
 
 .kuiView {
   background-color: #FFF;
+  -webkit-box-flex: 1;
   -webkit-flex: 1 1 auto;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto; }
diff --git a/packages/kbn-ui-framework/src/components/button/button_group/_button_group.scss b/packages/kbn-ui-framework/src/components/button/button_group/_button_group.scss
index 254bf6025b48..3b7d4fb82fd5 100644
--- a/packages/kbn-ui-framework/src/components/button/button_group/_button_group.scss
+++ b/packages/kbn-ui-framework/src/components/button/button_group/_button_group.scss
@@ -42,3 +42,10 @@
     text-align: center;
   }
 }
+
+// KuiButtonGroup doesn't pass down className, so can't create custom classname
+// So this little gem was being applied in Home/components/tutorial
+.eui-textCenter > .kuiButtonGroup,
+.text-center > .kuiButtonGroup {
+  display: inline-block;
+}
diff --git a/src/core_plugins/kibana/public/dashboard/panel/_dashboard_panel.scss b/src/core_plugins/kibana/public/dashboard/panel/_dashboard_panel.scss
index b7e0a3517bbf..36130cd18374 100644
--- a/src/core_plugins/kibana/public/dashboard/panel/_dashboard_panel.scss
+++ b/src/core_plugins/kibana/public/dashboard/panel/_dashboard_panel.scss
@@ -104,7 +104,7 @@
   color: $euiColorDarkShade;
   transition: color $euiAnimSpeedFast $euiAnimSlightResistance;
   flex: 1 1 auto;
-  @include truncate;
+  @include euiTextTruncate;
 
   // flexbox fix for IE10
   // http://stackoverflow.com/questions/22008135/internet-explorer-10-does-not-apply-flexbox-on-inline-elements
diff --git a/src/core_plugins/kibana/public/home/_home.scss b/src/core_plugins/kibana/public/home/_home.scss
new file mode 100644
index 000000000000..48c41254ff04
--- /dev/null
+++ b/src/core_plugins/kibana/public/home/_home.scss
@@ -0,0 +1,13 @@
+home-app {
+  background-color: $euiColorLightestShade;
+}
+
+.homPage {
+  min-height: 100vh;
+  max-width: 1200px;
+  margin: auto;
+}
+
+.homSampleDataSetCard {
+  flex-grow: 0; // IE FIX
+}
diff --git a/src/core_plugins/kibana/public/home/_index.scss b/src/core_plugins/kibana/public/home/_index.scss
new file mode 100644
index 000000000000..f972db1e8591
--- /dev/null
+++ b/src/core_plugins/kibana/public/home/_index.scss
@@ -0,0 +1,2 @@
+@import './home';
+@import './components/index';
diff --git a/src/core_plugins/kibana/public/home/components/__snapshots__/add_data.test.js.snap b/src/core_plugins/kibana/public/home/components/__snapshots__/add_data.test.js.snap
index ed3bbe797db9..51d080ee62c4 100644
--- a/src/core_plugins/kibana/public/home/components/__snapshots__/add_data.test.js.snap
+++ b/src/core_plugins/kibana/public/home/components/__snapshots__/add_data.test.js.snap
@@ -52,11 +52,11 @@ exports[`apmUiEnabled 1`] = `
       grow={true}
     >
       <EuiCard
-        className="addDataCard"
+        className="homAddData__card"
         description="APM automatically collects in-depth performance metrics and errors from inside your applications."
         footer={
           <EuiButton
-            className="addDataButton"
+            className="homAddData__button"
             color="primary"
             fill={false}
             href="#/home/tutorial/apm"
@@ -68,7 +68,7 @@ exports[`apmUiEnabled 1`] = `
         }
         icon={
           <EuiIcon
-            className="addDataIcon"
+            className="homAddData__icon"
             size="m"
             type="apmApp"
           />
@@ -84,11 +84,11 @@ exports[`apmUiEnabled 1`] = `
       grow={true}
     >
       <EuiCard
-        className="addDataCard"
+        className="homAddData__card"
         description="Ingest logs from popular data sources and easily visualize in preconfigured dashboards."
         footer={
           <EuiButton
-            className="addDataButton"
+            className="homAddData__button"
             color="primary"
             fill={false}
             href="#/home/tutorial_directory/logging"
@@ -100,7 +100,7 @@ exports[`apmUiEnabled 1`] = `
         }
         icon={
           <EuiIcon
-            className="addDataIcon"
+            className="homAddData__icon"
             size="m"
             type="loggingApp"
           />
@@ -116,11 +116,11 @@ exports[`apmUiEnabled 1`] = `
       grow={true}
     >
       <EuiCard
-        className="addDataCard"
+        className="homAddData__card"
         description="Collect metrics from the operating system and services running on your servers."
         footer={
           <EuiButton
-            className="addDataButton"
+            className="homAddData__button"
             color="primary"
             fill={false}
             href="#/home/tutorial_directory/metrics"
@@ -132,7 +132,7 @@ exports[`apmUiEnabled 1`] = `
         }
         icon={
           <EuiIcon
-            className="addDataIcon"
+            className="homAddData__icon"
             size="m"
             type="monitoringApp"
           />
@@ -148,11 +148,11 @@ exports[`apmUiEnabled 1`] = `
       grow={true}
     >
       <EuiCard
-        className="addDataCard"
+        className="homAddData__card"
         description="Centralize security events for interactive investigation in ready-to-go visualizations."
         footer={
           <EuiButton
-            className="addDataButton"
+            className="homAddData__button"
             color="primary"
             fill={false}
             href="#/home/tutorial_directory/security"
@@ -164,7 +164,7 @@ exports[`apmUiEnabled 1`] = `
         }
         icon={
           <EuiIcon
-            className="addDataIcon"
+            className="homAddData__icon"
             size="m"
             type="securityApp"
           />
@@ -190,7 +190,7 @@ exports[`apmUiEnabled 1`] = `
     wrap={false}
   >
     <EuiFlexItem
-      className="addDataFooterItem"
+      className="homAddData__footerItem"
       component="div"
       grow={true}
     >
@@ -221,7 +221,7 @@ exports[`apmUiEnabled 1`] = `
       </EuiText>
     </EuiFlexItem>
     <EuiFlexItem
-      className="addDataFooterItem"
+      className="homAddData__footerItem"
       component="div"
       grow={true}
     >
@@ -307,11 +307,11 @@ exports[`isNewKibanaInstance 1`] = `
       grow={true}
     >
       <EuiCard
-        className="addDataCard"
+        className="homAddData__card"
         description="Ingest logs from popular data sources and easily visualize in preconfigured dashboards."
         footer={
           <EuiButton
-            className="addDataButton"
+            className="homAddData__button"
             color="primary"
             fill={false}
             href="#/home/tutorial_directory/logging"
@@ -323,7 +323,7 @@ exports[`isNewKibanaInstance 1`] = `
         }
         icon={
           <EuiIcon
-            className="addDataIcon"
+            className="homAddData__icon"
             size="m"
             type="loggingApp"
           />
@@ -339,11 +339,11 @@ exports[`isNewKibanaInstance 1`] = `
       grow={true}
     >
       <EuiCard
-        className="addDataCard"
+        className="homAddData__card"
         description="Collect metrics from the operating system and services running on your servers."
         footer={
           <EuiButton
-            className="addDataButton"
+            className="homAddData__button"
             color="primary"
             fill={false}
             href="#/home/tutorial_directory/metrics"
@@ -355,7 +355,7 @@ exports[`isNewKibanaInstance 1`] = `
         }
         icon={
           <EuiIcon
-            className="addDataIcon"
+            className="homAddData__icon"
             size="m"
             type="monitoringApp"
           />
@@ -371,11 +371,11 @@ exports[`isNewKibanaInstance 1`] = `
       grow={true}
     >
       <EuiCard
-        className="addDataCard"
+        className="homAddData__card"
         description="Centralize security events for interactive investigation in ready-to-go visualizations."
         footer={
           <EuiButton
-            className="addDataButton"
+            className="homAddData__button"
             color="primary"
             fill={false}
             href="#/home/tutorial_directory/security"
@@ -387,7 +387,7 @@ exports[`isNewKibanaInstance 1`] = `
         }
         icon={
           <EuiIcon
-            className="addDataIcon"
+            className="homAddData__icon"
             size="m"
             type="securityApp"
           />
@@ -413,7 +413,7 @@ exports[`isNewKibanaInstance 1`] = `
     wrap={false}
   >
     <EuiFlexItem
-      className="addDataFooterItem addDataFooterItem_highlight"
+      className="homAddData__footerItem homAddData__footerItem--highlight"
       component="div"
       grow={true}
     >
@@ -444,7 +444,7 @@ exports[`isNewKibanaInstance 1`] = `
       </EuiText>
     </EuiFlexItem>
     <EuiFlexItem
-      className="addDataFooterItem addDataFooterItem_highlight"
+      className="homAddData__footerItem homAddData__footerItem--highlight"
       component="div"
       grow={true}
     >
@@ -530,11 +530,11 @@ exports[`render 1`] = `
       grow={true}
     >
       <EuiCard
-        className="addDataCard"
+        className="homAddData__card"
         description="Ingest logs from popular data sources and easily visualize in preconfigured dashboards."
         footer={
           <EuiButton
-            className="addDataButton"
+            className="homAddData__button"
             color="primary"
             fill={false}
             href="#/home/tutorial_directory/logging"
@@ -546,7 +546,7 @@ exports[`render 1`] = `
         }
         icon={
           <EuiIcon
-            className="addDataIcon"
+            className="homAddData__icon"
             size="m"
             type="loggingApp"
           />
@@ -562,11 +562,11 @@ exports[`render 1`] = `
       grow={true}
     >
       <EuiCard
-        className="addDataCard"
+        className="homAddData__card"
         description="Collect metrics from the operating system and services running on your servers."
         footer={
           <EuiButton
-            className="addDataButton"
+            className="homAddData__button"
             color="primary"
             fill={false}
             href="#/home/tutorial_directory/metrics"
@@ -578,7 +578,7 @@ exports[`render 1`] = `
         }
         icon={
           <EuiIcon
-            className="addDataIcon"
+            className="homAddData__icon"
             size="m"
             type="monitoringApp"
           />
@@ -594,11 +594,11 @@ exports[`render 1`] = `
       grow={true}
     >
       <EuiCard
-        className="addDataCard"
+        className="homAddData__card"
         description="Centralize security events for interactive investigation in ready-to-go visualizations."
         footer={
           <EuiButton
-            className="addDataButton"
+            className="homAddData__button"
             color="primary"
             fill={false}
             href="#/home/tutorial_directory/security"
@@ -610,7 +610,7 @@ exports[`render 1`] = `
         }
         icon={
           <EuiIcon
-            className="addDataIcon"
+            className="homAddData__icon"
             size="m"
             type="securityApp"
           />
@@ -636,7 +636,7 @@ exports[`render 1`] = `
     wrap={false}
   >
     <EuiFlexItem
-      className="addDataFooterItem"
+      className="homAddData__footerItem"
       component="div"
       grow={true}
     >
@@ -667,7 +667,7 @@ exports[`render 1`] = `
       </EuiText>
     </EuiFlexItem>
     <EuiFlexItem
-      className="addDataFooterItem"
+      className="homAddData__footerItem"
       component="div"
       grow={true}
     >
diff --git a/src/core_plugins/kibana/public/home/components/__snapshots__/home.test.js.snap b/src/core_plugins/kibana/public/home/components/__snapshots__/home.test.js.snap
index fca226146227..4f245a6cc8ef 100644
--- a/src/core_plugins/kibana/public/home/components/__snapshots__/home.test.js.snap
+++ b/src/core_plugins/kibana/public/home/components/__snapshots__/home.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`home directories should not render directory entry when showOnHomePage is false 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody
@@ -120,7 +120,7 @@ exports[`home directories should not render directory entry when showOnHomePage
 
 exports[`home directories should render ADMIN directory entry in "Manage" panel 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody
@@ -257,7 +257,7 @@ exports[`home directories should render ADMIN directory entry in "Manage" panel
 
 exports[`home directories should render DATA directory entry in "Explore Data" panel 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody
@@ -394,7 +394,7 @@ exports[`home directories should render DATA directory entry in "Explore Data" p
 
 exports[`home isNewKibanaInstance should safely handle execeptions 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody
@@ -512,7 +512,7 @@ exports[`home isNewKibanaInstance should safely handle execeptions 1`] = `
 
 exports[`home isNewKibanaInstance should set isNewKibanaInstance to false when there are index patterns 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody
@@ -630,7 +630,7 @@ exports[`home isNewKibanaInstance should set isNewKibanaInstance to false when t
 
 exports[`home isNewKibanaInstance should set isNewKibanaInstance to true when there are no index patterns 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody
@@ -748,7 +748,7 @@ exports[`home isNewKibanaInstance should set isNewKibanaInstance to true when th
 
 exports[`home should not contain RecentlyAccessed panel when there is no recentlyAccessed history 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody
@@ -866,7 +866,7 @@ exports[`home should not contain RecentlyAccessed panel when there is no recentl
 
 exports[`home should render home component 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody
@@ -1000,7 +1000,7 @@ exports[`home should render home component 1`] = `
 
 exports[`home welcome should show the normal home page if loading fails 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody
@@ -1118,7 +1118,7 @@ exports[`home welcome should show the normal home page if loading fails 1`] = `
 
 exports[`home welcome should show the normal home page if welcome screen is disabled locally 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody
@@ -1243,7 +1243,7 @@ exports[`home welcome should show the welcome screen if enabled, and there are n
 
 exports[`home welcome stores skip welcome setting if skipped 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody
diff --git a/src/core_plugins/kibana/public/home/components/__snapshots__/recently_accessed.test.js.snap b/src/core_plugins/kibana/public/home/components/__snapshots__/recently_accessed.test.js.snap
index a6899ec18c6d..98bd8db229a8 100644
--- a/src/core_plugins/kibana/public/home/components/__snapshots__/recently_accessed.test.js.snap
+++ b/src/core_plugins/kibana/public/home/components/__snapshots__/recently_accessed.test.js.snap
@@ -31,7 +31,7 @@ exports[`render 1`] = `
     wrap={true}
   >
     <EuiFlexItem
-      className="recentlyAccessedFlexItem"
+      className="homRecentlyAccessed__flexItem"
       component="div"
       grow={false}
     >
@@ -48,7 +48,7 @@ exports[`render 1`] = `
           key="0"
         >
           <EuiFlexItem
-            className="recentlyAccessedItem"
+            className="homRecentlyAccessed__item"
             component="div"
             grow={false}
             style={
@@ -58,11 +58,12 @@ exports[`render 1`] = `
             }
           >
             <EuiToolTip
+              anchorClassName="homRecentlyAccessed__anchor"
               content="label0"
               position="bottom"
             >
               <EuiLink
-                className="recentlyAccessedLongLink"
+                className="homRecentlyAccessed__longLink"
                 color="primary"
                 href="link0"
                 type="button"
@@ -76,7 +77,7 @@ exports[`render 1`] = `
           key="1"
         >
           <EuiFlexItem
-            className="recentlyAccessedSeparator"
+            className="homRecentlyAccessed__separator"
             component="div"
             grow={false}
           >
@@ -91,7 +92,7 @@ exports[`render 1`] = `
             </EuiText>
           </EuiFlexItem>
           <EuiFlexItem
-            className="recentlyAccessedItem"
+            className="homRecentlyAccessed__item"
             component="div"
             grow={false}
             style={
@@ -101,11 +102,12 @@ exports[`render 1`] = `
             }
           >
             <EuiToolTip
+              anchorClassName="homRecentlyAccessed__anchor"
               content="label1"
               position="bottom"
             >
               <EuiLink
-                className="recentlyAccessedLongLink"
+                className="homRecentlyAccessed__longLink"
                 color="primary"
                 href="link1"
                 type="button"
diff --git a/src/core_plugins/kibana/public/home/components/_add_data.scss b/src/core_plugins/kibana/public/home/components/_add_data.scss
new file mode 100644
index 000000000000..61f1cd759ab1
--- /dev/null
+++ b/src/core_plugins/kibana/public/home/components/_add_data.scss
@@ -0,0 +1,20 @@
+.homAddData__card {
+  width: 250px;
+  min-width: 200px;
+  border: none;
+  box-shadow: none;
+}
+
+.homAddData__icon {
+  width: $euiSizeXL * 2;
+  height: $euiSizeXL * 2;
+}
+
+.homAddData__footerItem--highlight {
+  background-color: tintOrShade($euiColorPrimary, 90%, 70%);
+  padding: $euiSize;
+}
+
+.homAddData__footerItem {
+  text-align: center;
+}
diff --git a/src/core_plugins/kibana/public/home/components/_index.scss b/src/core_plugins/kibana/public/home/components/_index.scss
new file mode 100644
index 000000000000..5828baebf18d
--- /dev/null
+++ b/src/core_plugins/kibana/public/home/components/_index.scss
@@ -0,0 +1,14 @@
+// Prefix all styles with "hom" to avoid conflicts.
+// Examples
+//   homChart
+//   homChart__legend
+//   homChart__legend--small
+//   homChart__legend-isLoading
+
+@import 'add_data';
+@import 'recently_accessed';
+@import 'synopsis';
+@import 'welcome';
+
+@import 'tutorial/tutorial';
+@import 'tutorial/radio_button_group';
diff --git a/src/core_plugins/kibana/public/home/components/_recently_accessed.scss b/src/core_plugins/kibana/public/home/components/_recently_accessed.scss
new file mode 100644
index 000000000000..271de8aa0b9f
--- /dev/null
+++ b/src/core_plugins/kibana/public/home/components/_recently_accessed.scss
@@ -0,0 +1,29 @@
+@include euiBreakpoint('xs', 's') {
+  .homRecentlyAccessed__separator {
+    display: none;
+  }
+}
+
+.homRecentlyAccessed__item {
+  overflow: hidden;
+  max-width: 300px;
+}
+
+.homRecentlyAccessed__anchor {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.homRecentlyAccessed__longLink {
+  @include euiTextTruncate;
+  line-height: normal;
+}
+
+.homRecentlyAccessed__flexItem {
+  max-width: 1000px;
+}
+
+.homRecentlyAccessed__dropdownLink,
+.homRecentlyAccessed__dropdownLabel {
+  white-space: nowrap;
+}
diff --git a/src/core_plugins/kibana/public/home/components/_synopsis.scss b/src/core_plugins/kibana/public/home/components/_synopsis.scss
new file mode 100644
index 000000000000..0179f8d41bad
--- /dev/null
+++ b/src/core_plugins/kibana/public/home/components/_synopsis.scss
@@ -0,0 +1,27 @@
+// SASSTODO: Move out of being specifically in home
+// ML uses these classes as well
+.synopsis {
+  display: flex;
+  flex-grow: 1;
+  cursor: pointer;
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+
+    .synopsisTitle {
+      text-decoration: underline;
+    }
+  }
+}
+
+
+.synopsisTitle {
+  font-size: $euiSize;
+  font-weight: normal;
+  color: $euiColorPrimary;
+}
+
+.synopsisIcon {
+  padding-top: $euiSizeS;
+}
diff --git a/src/core_plugins/kibana/public/home/components/_welcome.scss b/src/core_plugins/kibana/public/home/components/_welcome.scss
new file mode 100644
index 000000000000..d813d9e864fe
--- /dev/null
+++ b/src/core_plugins/kibana/public/home/components/_welcome.scss
@@ -0,0 +1,68 @@
+
+.homWelcome {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: $euiZLevel9 + 1000;
+  background: inherit;
+  background-image: linear-gradient(0deg, $euiColorLightestShade 0%, $euiColorEmptyShade 100%);
+  opacity: 0;
+  overflow: auto;
+  animation: homWelcome_FadeIn $euiAnimSpeedExtraSlow $euiAnimSlightResistance 0s forwards;
+}
+
+.homWelcome::before {
+  // SASSTODO: webpack pipeline isn't setup to handle image urls in SASS yet
+  // content: url(../assets/bg_top_branded.svg);
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+}
+
+.homWelcome::after {
+  // SASSTODO: webpack pipeline isn't setup to handle image urls in SASS yet
+  // content: url(../assets/bg_bottom_branded.svg);
+  position: fixed;
+  bottom: -2px; // Hides an odd space at the bottom of the svg
+  left: 0;
+  z-index: 1;
+}
+
+.homWelcome__header {
+  position: relative;
+  padding: $euiSizeXL;
+  z-index: 10;
+}
+
+.homWelcome__logo {
+  margin-bottom: $euiSizeXL;
+  @include kibanaCircleLogo;
+  @include euiBottomShadowMedium;
+}
+
+.homWelcome__footerAction {
+  margin-right: $euiSizeS;
+}
+
+.homWelcome__content {
+  position: relative;
+  margin: auto;
+  max-width: 512px;
+  padding-left: $euiSizeXL;
+  padding-right: $euiSizeXL;
+  z-index: 10;
+}
+
+@keyframes homWelcome_FadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(200px), scale(0.75);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0), scale(1);
+  }
+}
diff --git a/src/core_plugins/kibana/public/home/components/add_data.js b/src/core_plugins/kibana/public/home/components/add_data.js
index 6dda6ee79c0f..1b2e04164a72 100644
--- a/src/core_plugins/kibana/public/home/components/add_data.js
+++ b/src/core_plugins/kibana/public/home/components/add_data.js
@@ -17,7 +17,6 @@
  * under the License.
  */
 
-import './add_data.less';
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -42,13 +41,13 @@ export function AddData({ apmUiEnabled, isNewKibanaInstance }) {
     const getApmCard = () =>  (
       <EuiFlexItem>
         <EuiCard
-          className="addDataCard"
-          icon={<EuiIcon className="addDataIcon" type="apmApp" />}
+          className="homAddData__card"
+          icon={<EuiIcon className="homAddData__icon" type="apmApp" />}
           title="APM"
           description="APM automatically collects in-depth performance metrics and errors from inside your applications."
           footer={
             <EuiButton
-              className="addDataButton"
+              className="homAddData__button"
               href="#/home/tutorial/apm"
             >
               Add APM
@@ -65,13 +64,13 @@ export function AddData({ apmUiEnabled, isNewKibanaInstance }) {
 
         <EuiFlexItem>
           <EuiCard
-            className="addDataCard"
-            icon={<EuiIcon  className="addDataIcon" type="loggingApp" />}
+            className="homAddData__card"
+            icon={<EuiIcon  className="homAddData__icon" type="loggingApp" />}
             title="Logging"
             description="Ingest logs from popular data sources and easily visualize in preconfigured dashboards."
             footer={
               <EuiButton
-                className="addDataButton"
+                className="homAddData__button"
                 href="#/home/tutorial_directory/logging"
               >
                 Add log data
@@ -82,13 +81,13 @@ export function AddData({ apmUiEnabled, isNewKibanaInstance }) {
 
         <EuiFlexItem>
           <EuiCard
-            className="addDataCard"
-            icon={<EuiIcon className="addDataIcon" type="monitoringApp" />}
+            className="homAddData__card"
+            icon={<EuiIcon className="homAddData__icon" type="monitoringApp" />}
             title="Metrics"
             description="Collect metrics from the operating system and services running on your servers."
             footer={
               <EuiButton
-                className="addDataButton"
+                className="homAddData__button"
                 href="#/home/tutorial_directory/metrics"
               >
                 Add metric data
@@ -99,13 +98,13 @@ export function AddData({ apmUiEnabled, isNewKibanaInstance }) {
 
         <EuiFlexItem>
           <EuiCard
-            className="addDataCard"
-            icon={<EuiIcon className="addDataIcon" type="securityApp" />}
+            className="homAddData__card"
+            icon={<EuiIcon className="homAddData__icon" type="securityApp" />}
             title="Security Analytics"
             description="Centralize security events for interactive investigation in ready-to-go visualizations."
             footer={
               <EuiButton
-                className="addDataButton"
+                className="homAddData__button"
                 href="#/home/tutorial_directory/security"
               >
                 Add security events
@@ -117,7 +116,7 @@ export function AddData({ apmUiEnabled, isNewKibanaInstance }) {
     );
   };
 
-  const footerItemClasses = classNames('addDataFooterItem', { 'addDataFooterItem_highlight': isNewKibanaInstance });
+  const footerItemClasses = classNames('homAddData__footerItem', { 'homAddData__footerItem--highlight': isNewKibanaInstance });
 
   return (
     <EuiPanel paddingSize="l">
diff --git a/src/core_plugins/kibana/public/home/components/add_data.less b/src/core_plugins/kibana/public/home/components/add_data.less
deleted file mode 100644
index 0dcb5f46b99c..000000000000
--- a/src/core_plugins/kibana/public/home/components/add_data.less
+++ /dev/null
@@ -1,25 +0,0 @@
-.addDataCard {
-  width: 250px;
-  min-width: 200px;
-  border: none;
-  box-shadow: none;
-}
-
-.addDataIcon {
-  width: 64px;
-  height: 64px;
-}
-
-.addDataButton {
-  line-height: normal;
-}
-
-.addDataFooterItem_highlight {
-  background-color: #e6f2f6;
-  padding-top: 16px;
-  padding-bottom: 16px;
-}
-
-.addDataFooterItem {
-  text-align: center;
-}
diff --git a/src/core_plugins/kibana/public/home/components/feature_directory.js b/src/core_plugins/kibana/public/home/components/feature_directory.js
index fff2c58659ef..ce7371fbff09 100644
--- a/src/core_plugins/kibana/public/home/components/feature_directory.js
+++ b/src/core_plugins/kibana/public/home/components/feature_directory.js
@@ -76,7 +76,6 @@ export class FeatureDirectory extends React.Component {
   renderTabs = () => {
     return this.tabs.map((tab, index) => (
       <EuiTab
-        className="homeDirectoryTab"
         onClick={() => this.onSelectedTabChanged(tab.id)}
         isSelected={tab.id === this.state.selectedTabId}
         key={index}
@@ -114,7 +113,7 @@ export class FeatureDirectory extends React.Component {
 
   render() {
     return (
-      <EuiPage className="home">
+      <EuiPage className="homPage">
         <EuiPageBody>
           <EuiTitle size="l">
             <h1>
diff --git a/src/core_plugins/kibana/public/home/components/home.js b/src/core_plugins/kibana/public/home/components/home.js
index 1d3c195bdaf1..5cf09eb239d2 100644
--- a/src/core_plugins/kibana/public/home/components/home.js
+++ b/src/core_plugins/kibana/public/home/components/home.js
@@ -141,7 +141,7 @@ export class Home extends Component {
     }
 
     return (
-      <EuiPage className="home">
+      <EuiPage className="homPage">
         <EuiPageBody>
           {recentlyAccessedPanel}
 
diff --git a/src/core_plugins/kibana/public/home/components/recently_accessed.js b/src/core_plugins/kibana/public/home/components/recently_accessed.js
index 14e0f496d10a..b0dbfb888d0b 100644
--- a/src/core_plugins/kibana/public/home/components/recently_accessed.js
+++ b/src/core_plugins/kibana/public/home/components/recently_accessed.js
@@ -17,7 +17,6 @@
  * under the License.
  */
 
-import './recently_accessed.less';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
@@ -74,7 +73,7 @@ export class RecentlyAccessed extends Component {
             data-test-subj={`moreRecentlyAccessedItem${this.props.recentlyAccessed[i].id}`}
           >
             <EuiLink
-              className="recentlyAccessedDropwdownLink"
+              className="homRecentlyAccessed__dropdownLink"
               href={this.props.recentlyAccessed[i].link}
             >
               {this.props.recentlyAccessed[i].label}
@@ -90,7 +89,7 @@ export class RecentlyAccessed extends Component {
         data-test-subj="openMoreRecentlyAccessedPopover"
       >
         <EuiTextColor
-          className="recentlyAccessedDropdownLabel"
+          className="homRecentlyAccessed__dropdownLabel"
           color="subdued"
         >
           {`${dropdownLinks.length} more`}
@@ -127,7 +126,7 @@ export class RecentlyAccessed extends Component {
     let separator;
     if (includeSeparator) {
       separator = (
-        <EuiFlexItem grow={false} className="recentlyAccessedSeparator">
+        <EuiFlexItem grow={false} className="homRecentlyAccessed__separator">
           <EuiText>
             <EuiIcon
               type="dot"
@@ -147,16 +146,17 @@ export class RecentlyAccessed extends Component {
       <React.Fragment key={recentlyAccessedItem.id}>
         {separator}
         <EuiFlexItem
-          className="recentlyAccessedItem"
+          className="homRecentlyAccessed__item"
           style={style}
           grow={false}
         >
           <EuiToolTip
+            anchorClassName="homRecentlyAccessed__anchor"
             position="bottom"
             content={recentlyAccessedItem.label}
           >
             <EuiLink
-              className="recentlyAccessedLongLink"
+              className="homRecentlyAccessed__longLink"
               href={recentlyAccessedItem.link}
             >
               {recentlyAccessedItem.label}
@@ -205,7 +205,7 @@ export class RecentlyAccessed extends Component {
         <EuiSpacer size="s"/>
 
         <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd" wrap>
-          <EuiFlexItem grow={false} className="recentlyAccessedFlexItem">
+          <EuiFlexItem grow={false} className="homRecentlyAccessed__flexItem">
             <EuiFlexGroup>
               {this.renderRecentlyAccessed()}
             </EuiFlexGroup>
diff --git a/src/core_plugins/kibana/public/home/components/recently_accessed.less b/src/core_plugins/kibana/public/home/components/recently_accessed.less
deleted file mode 100644
index df491d95a53e..000000000000
--- a/src/core_plugins/kibana/public/home/components/recently_accessed.less
+++ /dev/null
@@ -1,35 +0,0 @@
-@media only screen and (max-width: 768px) {
-  .recentlyAccessedSeparator {
-    display: none;
-  }
-}
-
-.recentlyAccessedItem {
-  overflow: hidden;
-  max-width: 300px;
-
-  .euiToolTipAnchor {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-
-.recentlyAccessedLongLink {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: normal;
-}
-
-.recentlyAccessedFlexItem {
-  max-width: 1000px;
-}
-
-.recentlyAccessedDropwdownLink {
-  white-space: nowrap;
-  height: 18px;
-}
-
-.recentlyAccessedDropdownLabel {
-  white-space: nowrap;
-}
diff --git a/src/core_plugins/kibana/public/home/components/sample_data_set_card.js b/src/core_plugins/kibana/public/home/components/sample_data_set_card.js
index 101861f0dd48..4e8554e7324f 100644
--- a/src/core_plugins/kibana/public/home/components/sample_data_set_card.js
+++ b/src/core_plugins/kibana/public/home/components/sample_data_set_card.js
@@ -145,7 +145,7 @@ export class SampleDataSetCard extends React.Component {
   render() {
     return (
       <EuiCard
-        className="sampleDataSetCard"
+        className="homSampleDataSetCard"
         image={this.props.previewUrl}
         title={this.props.name}
         description={this.props.description}
diff --git a/src/core_plugins/kibana/public/home/components/synopsis.js b/src/core_plugins/kibana/public/home/components/synopsis.js
index e52d9b98d92c..ddcee7e3cfcf 100644
--- a/src/core_plugins/kibana/public/home/components/synopsis.js
+++ b/src/core_plugins/kibana/public/home/components/synopsis.js
@@ -17,7 +17,6 @@
  * under the License.
  */
 
-import './synopsis.less';
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
diff --git a/src/core_plugins/kibana/public/home/components/synopsis.less b/src/core_plugins/kibana/public/home/components/synopsis.less
deleted file mode 100644
index bcc2e891baaa..000000000000
--- a/src/core_plugins/kibana/public/home/components/synopsis.less
+++ /dev/null
@@ -1,36 +0,0 @@
-@import (reference) "~ui/styles/variables.less";
-
-.synopsis {
-  display: flex;
-  flex-grow: 1;
-  cursor: pointer;
-}
-
-.synopsis:hover {
-  text-decoration: none;
-  .synopsisTitle {
-    text-decoration: underline;
-  }
-}
-
-.synopsis:focus {
-  text-decoration: none;
-
-  .synopsisPanel {
-    border: solid 1px @globalColorBlue;
-  }
-
-  .synopsisBody {
-    text-decoration: none;
-  }
-}
-
-.synopsisTitle {
-  font-size: 16px;
-  font-weight: normal;
-  color: @globalColorBlue;
-}
-
-.synopsisIcon {
-  padding-top: 8px;
-}
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/content.test.js.snap b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/content.test.js.snap
index e5e0481bb3ee..690875dc9690 100644
--- a/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/content.test.js.snap
+++ b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/content.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`should render content with markdown 1`] = `
 <Markdown
-  className="euiText euiTextColor--subdued tutorialContent"
+  className="euiText"
   markdown="I am *some* [content](https://en.wikipedia.org/wiki/Content) with \`markdown\`"
   openLinksInNewTab={true}
   whiteListedRules={
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/introduction.test.js.snap b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/introduction.test.js.snap
index d21b9654cb39..48e1bc15b6ea 100644
--- a/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/introduction.test.js.snap
+++ b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/introduction.test.js.snap
@@ -36,6 +36,7 @@ exports[`props exportedFieldsUrl 1`] = `
         >
           <h2>
             Great tutorial
+              
           </h2>
         </EuiTitle>
       </EuiFlexItem>
@@ -113,6 +114,7 @@ exports[`props iconType 1`] = `
         >
           <h2>
             Great tutorial
+              
           </h2>
         </EuiTitle>
       </EuiFlexItem>
@@ -164,19 +166,14 @@ exports[`props isBeta 1`] = `
         >
           <h2>
             Great tutorial
+              
+            <EuiBetaBadge
+              label="Beta"
+              tooltipPosition="top"
+            />
           </h2>
         </EuiTitle>
       </EuiFlexItem>
-      <EuiFlexItem
-        component="div"
-        grow={false}
-      >
-        <EuiBetaBadge
-          className="tutorialIntroBadge"
-          label="BETA"
-          tooltipPosition="top"
-        />
-      </EuiFlexItem>
     </EuiFlexGroup>
     <Content
       text="this is a great tutorial about..."
@@ -225,6 +222,7 @@ exports[`props previewUrl 1`] = `
         >
           <h2>
             Great tutorial
+              
           </h2>
         </EuiTitle>
       </EuiFlexItem>
@@ -285,6 +283,7 @@ exports[`render 1`] = `
         >
           <h2>
             Great tutorial
+              
           </h2>
         </EuiTitle>
       </EuiFlexItem>
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap
index 2fa3552180e1..61de3cb5da15 100644
--- a/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap
+++ b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`isCloudEnabled is false should not render instruction toggle when ON_PREM_ELASTIC_CLOUD instructions are not provided 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody
@@ -38,7 +38,7 @@ exports[`isCloudEnabled is false should not render instruction toggle when ON_PR
         size="l"
       />
       <div
-        className="text-center"
+        className="eui-textCenter"
       />
       <EuiSpacer
         size="l"
@@ -78,7 +78,7 @@ exports[`isCloudEnabled is false should not render instruction toggle when ON_PR
 
 exports[`isCloudEnabled is false should render ON_PREM instructions with instruction toggle 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody
@@ -115,7 +115,7 @@ exports[`isCloudEnabled is false should render ON_PREM instructions with instruc
         size="l"
       />
       <div
-        className="text-center"
+        className="eui-textCenter"
       >
         <RadioButtonGroup
           buttons={
@@ -173,7 +173,7 @@ exports[`isCloudEnabled is false should render ON_PREM instructions with instruc
 
 exports[`should render ELASTIC_CLOUD instructions when isCloudEnabled is true 1`] = `
 <EuiPage
-  className="home"
+  className="homPage"
   restrictWidth={false}
 >
   <EuiPageBody
@@ -210,7 +210,7 @@ exports[`should render ELASTIC_CLOUD instructions when isCloudEnabled is true 1`
         size="l"
       />
       <div
-        className="text-center"
+        className="eui-textCenter"
       />
       <EuiSpacer
         size="l"
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/_radio_button_group.scss b/src/core_plugins/kibana/public/home/components/tutorial/_radio_button_group.scss
new file mode 100644
index 000000000000..38f499f386b4
--- /dev/null
+++ b/src/core_plugins/kibana/public/home/components/tutorial/_radio_button_group.scss
@@ -0,0 +1,10 @@
+
+// remove space between buttons
+.homRadioButtonGroup__button {
+  margin-left: 0px !important;
+
+  // give primary button same border as secondary button so they are even heights when placed side-by-side
+  &.kuiButton--primary {
+    border: solid 1px $euiColorPrimary;
+  }
+}
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/_tutorial.scss b/src/core_plugins/kibana/public/home/components/tutorial/_tutorial.scss
new file mode 100644
index 000000000000..d5b4a8cdd304
--- /dev/null
+++ b/src/core_plugins/kibana/public/home/components/tutorial/_tutorial.scss
@@ -0,0 +1,4 @@
+.homTutorial__notFoundPanel {
+  background: $euiColorEmptyShade;
+  padding: $euiSizeL;
+}
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/content.js b/src/core_plugins/kibana/public/home/components/tutorial/content.js
index 510fff56aa0d..a792546dd7d0 100644
--- a/src/core_plugins/kibana/public/home/components/tutorial/content.js
+++ b/src/core_plugins/kibana/public/home/components/tutorial/content.js
@@ -26,7 +26,7 @@ const whiteListedRules = ['backticks', 'emphasis', 'link', 'list'];
 export function Content({ text }) {
   return (
     <Markdown
-      className="euiText euiTextColor--subdued tutorialContent"
+      className="euiText"
       markdown={text}
       openLinksInNewTab={true}
       whiteListedRules={whiteListedRules}
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/instruction.js b/src/core_plugins/kibana/public/home/components/tutorial/instruction.js
index 4ffd18c6d75d..07418f35ba88 100644
--- a/src/core_plugins/kibana/public/home/components/tutorial/instruction.js
+++ b/src/core_plugins/kibana/public/home/components/tutorial/instruction.js
@@ -81,7 +81,7 @@ export function Instruction({ commands, paramValues, textPost, textPre, replaceT
   }
 
   return (
-    <div className="instruction">
+    <div>
 
       <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd">
         <EuiFlexItem grow={false}>
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/introduction.js b/src/core_plugins/kibana/public/home/components/tutorial/introduction.js
index 0d7650e3771d..1b3e06e35b29 100644
--- a/src/core_plugins/kibana/public/home/components/tutorial/introduction.js
+++ b/src/core_plugins/kibana/public/home/components/tutorial/introduction.js
@@ -73,9 +73,7 @@ export function Introduction({ description, previewUrl, title, exportedFieldsUrl
   let betaBadge;
   if (isBeta) {
     betaBadge = (
-      <EuiFlexItem grow={false}>
-        <EuiBetaBadge className="tutorialIntroBadge" label="BETA" />
-      </EuiFlexItem>
+      <EuiBetaBadge label="Beta" />
     );
   }
   return (
@@ -90,11 +88,11 @@ export function Introduction({ description, previewUrl, title, exportedFieldsUrl
           <EuiFlexItem grow={false}>
             <EuiTitle size="l">
               <h2>
-                {title}
+                {title} &nbsp;
+                {betaBadge}
               </h2>
             </EuiTitle>
           </EuiFlexItem>
-          {betaBadge}
         </EuiFlexGroup>
 
         <Content text={description} />
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/radio_button_group.js b/src/core_plugins/kibana/public/home/components/tutorial/radio_button_group.js
index 1f73afcb2df9..2a52646c8b91 100644
--- a/src/core_plugins/kibana/public/home/components/tutorial/radio_button_group.js
+++ b/src/core_plugins/kibana/public/home/components/tutorial/radio_button_group.js
@@ -17,7 +17,6 @@
  * under the License.
  */
 
-import './radio_button_group.less';
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
@@ -59,7 +58,7 @@ export class RadioButtonGroup extends React.Component {
       }
       return (
         <KuiButton
-          className="kuiRadioButton"
+          className="homRadioButtonGroup__button"
           buttonType={buttonType}
           onClick={handleOnClick}
           key={index}
@@ -74,7 +73,6 @@ export class RadioButtonGroup extends React.Component {
   render = () => {
     return (
       <KuiButtonGroup
-        className="radioButtonGroup"
         isUnited
       >
         {this.renderButtons()}
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/radio_button_group.less b/src/core_plugins/kibana/public/home/components/tutorial/radio_button_group.less
deleted file mode 100644
index 8630f2caf257..000000000000
--- a/src/core_plugins/kibana/public/home/components/tutorial/radio_button_group.less
+++ /dev/null
@@ -1,10 +0,0 @@
-
-// remove space between buttons
-.kuiRadioButton {
-  margin-left: 0px !important;
-}
-
-// give primary button same border as secondary button so they are even heights when placed side-by-side
-.kuiRadioButton.kuiButton--primary {
-  border: solid 1px #0079a5;
-}
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/tutorial.js b/src/core_plugins/kibana/public/home/components/tutorial/tutorial.js
index ff34d3f616a0..f04c07f686ce 100644
--- a/src/core_plugins/kibana/public/home/components/tutorial/tutorial.js
+++ b/src/core_plugins/kibana/public/home/components/tutorial/tutorial.js
@@ -17,7 +17,6 @@
  * under the License.
  */
 
-import './tutorial.less';
 import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -281,7 +280,7 @@ export class Tutorial extends React.Component {
     let content;
     if (this.state.notFound) {
       content = (
-        <div className="homePanel">
+        <div className="homTutorial__notFoundPanel">
           <EuiText>
             <p>
               Unable to find tutorial {this.props.tutorialId}
@@ -315,7 +314,7 @@ export class Tutorial extends React.Component {
           />
 
           <EuiSpacer />
-          <div className="text-center">
+          <div className="eui-textCenter">
             {this.renderInstructionSetsToggle()}
           </div>
 
@@ -329,7 +328,7 @@ export class Tutorial extends React.Component {
       );
     }
     return (
-      <EuiPage className="home">
+      <EuiPage className="homPage">
         <EuiPageBody>
 
           <div>
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/tutorial.less b/src/core_plugins/kibana/public/home/components/tutorial/tutorial.less
deleted file mode 100644
index 855a6a0f9774..000000000000
--- a/src/core_plugins/kibana/public/home/components/tutorial/tutorial.less
+++ /dev/null
@@ -1,8 +0,0 @@
-.text-center > .kuiButtonGroup {
-  display: inline-block !important;
-}
-
-.homePanel {
-  background: white;
-  padding: 24px;
-}
diff --git a/src/core_plugins/kibana/public/home/components/tutorial_directory.js b/src/core_plugins/kibana/public/home/components/tutorial_directory.js
index 4ed5bd4e5327..77ca6e379d71 100644
--- a/src/core_plugins/kibana/public/home/components/tutorial_directory.js
+++ b/src/core_plugins/kibana/public/home/components/tutorial_directory.js
@@ -149,7 +149,6 @@ export class TutorialDirectory extends React.Component {
   renderTabs = () => {
     return this.tabs.map((tab, index) => (
       <EuiTab
-        className="homeDirectoryTab"
         onClick={() => this.onSelectedTabChanged(tab.id)}
         isSelected={tab.id === this.state.selectedTabId}
         key={index}
@@ -214,7 +213,7 @@ export class TutorialDirectory extends React.Component {
 
   render() {
     return (
-      <EuiPage className="home">
+      <EuiPage className="homPage">
         <EuiPageBody>
 
           <a className="kuiLink" href="#/home">Home</a>
diff --git a/src/core_plugins/kibana/public/home/components/welcome.js b/src/core_plugins/kibana/public/home/components/welcome.js
index aa10b551f4ca..237a6de55507 100644
--- a/src/core_plugins/kibana/public/home/components/welcome.js
+++ b/src/core_plugins/kibana/public/home/components/welcome.js
@@ -41,7 +41,7 @@ import {
  * Shows a full-screen welcome page that gives helpful quick links to beginners.
  */
 export class Welcome extends React.Component {
-  hideOnEsc = (e) => {
+  hideOnEsc = e => {
     if (e.key === 'Escape') {
       this.props.onSkip();
     }
@@ -59,21 +59,23 @@ export class Welcome extends React.Component {
     const { urlBasePath, onSkip } = this.props;
 
     return (
-      <div className="home-welcome">
-        <header className="home-welcome-header">
-          <div className="home-welcome-content eui-textCenter">
+      <div className="homWelcome">
+        <header className="homWelcome__header">
+          <div className="homWelcome__content eui-textCenter">
             <EuiSpacer size="xxl" />
-            <span className="home-welcome-logo">
+            <span className="homWelcome__logo">
               <EuiIcon type="logoKibana" size="xxl" />
             </span>
-            <EuiTitle size="l" className="home-welcome-title">
+            <EuiTitle size="l" className="homWelcome__title">
               <h1>Welcome to Kibana</h1>
             </EuiTitle>
-            <EuiText size="s" className="welcome-subtitle">Your window into the Elastic Stack</EuiText>
+            <EuiText size="s" color="subdued" className="homWelcome__subtitle">
+              <p>Your window into the Elastic Stack</p>
+            </EuiText>
             <EuiSpacer size="xl" />
           </div>
         </header>
-        <div className="home-welcome-content home-welcome-body">
+        <div className="homWelcome__content homWelcome-body">
           <EuiFlexGroup gutterSize="l">
             <EuiFlexItem>
               <EuiCard
@@ -82,24 +84,24 @@ export class Welcome extends React.Component {
                 title="Let's get started"
                 description="We noticed that you don't have any data in your cluster.
                   You can try our sample data and dashboards or jump in with your own data."
-                footer={(
+                footer={
                   <footer>
                     <EuiButton
                       fill
-                      className="home-welcome-footer-action"
+                      className="homWelcome__footerAction"
                       href="#/home/tutorial_directory/sampleData"
                     >
                       Try our sample data
                     </EuiButton>
                     <EuiButtonEmpty
-                      className="home-welcome-footer-action"
+                      className="homWelcome__footerAction"
                       onClick={onSkip}
                       data-test-subj="skipWelcomeScreen"
                     >
                       Explore on my own
                     </EuiButtonEmpty>
                   </footer>
-                )}
+                }
               />
             </EuiFlexItem>
           </EuiFlexGroup>
diff --git a/src/core_plugins/kibana/public/home/home.less b/src/core_plugins/kibana/public/home/home.less
index f2c4764a2b58..6333478ecd5c 100644
--- a/src/core_plugins/kibana/public/home/home.less
+++ b/src/core_plugins/kibana/public/home/home.less
@@ -1,108 +1,7 @@
-@import (reference) "~ui/styles/variables.less";
-
-home-app {
-  background-color: @globalColorLightestGray;
-}
-
-.home {
-  min-height: 100vh;
-  max-width: 1200px;
-  margin: auto;
-}
-
-.homeDirectory {
-  background: @white;
-  margin: 0;
-  border-left: 1px solid @globalColorLightGray;
-  border-right: 1px solid @globalColorLightGray;
-  border-bottom: 1px solid @globalColorLightGray;
-  padding: 16px;
-}
-
-.homeDirectoryTab {
-  background-color: @globalColorLightestGray;
-}
-
-.sampleDataSetCard {
-  flex-grow: 0;
-}
-
-.home-welcome {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 100000;
-  background: inherit;
-  // When sassified, should pull in EUI colors: $euiColorLightestShade, $euiColorEmptyShade
-  background-image: linear-gradient(0deg, @globalColorLightestGray 0%, white 100%);
-  color: inherit;
-  opacity: 0;
-  overflow: auto;
-  animation: homeFadeIn 0.5s ease-in 0s forwards;
-}
-
-.home-welcome::before {
+.homWelcome::before {
   content: url(../assets/bg_top_branded.svg);
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 1;
 }
 
-.home-welcome::after {
+.homWelcome::after {
   content: url(../assets/bg_bottom_branded.svg);
-  position: fixed;
-  bottom: -2px; // Hides an odd space at the bottom of the svg
-  left: 0;
-  z-index: 1;
-}
-
-.home-welcome-header {
-  position: relative;
-  padding: 32px;
-  z-index: 10;
-}
-
-.home-welcome-logo {
-  display: inline-block;
-  margin-bottom: 24px;
-  background-color: white;
-  border-radius: 100%;
-  padding: 16px;
-  box-shadow: 0 4px 16px -6px rgba(0, 0, 0, 0.75);
-}
-
-.home-welcome-title {
-  color: inherit;
-  font-weight: 400;
-}
-
-.home-welcome-footer-action {
-  margin-right: 8px;
-}
-
-.welcome-subtitle {
-  opacity: 0.75;
-}
-
-.home-welcome-content {
-  position: relative;
-  margin: auto;
-  max-width: 512px;
-  padding-left: 32px;
-  padding-right: 32px;
-  z-index: 10;
-}
-
-@keyframes homeFadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(200px), scale(0.75);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0), scale(1);
-  }
 }
diff --git a/src/core_plugins/kibana/public/index.scss b/src/core_plugins/kibana/public/index.scss
index 5ae30066a8df..202284ae2835 100644
--- a/src/core_plugins/kibana/public/index.scss
+++ b/src/core_plugins/kibana/public/index.scss
@@ -1,7 +1,10 @@
 @import '../../../../src/ui/public/styles/styling_constants';
 
 // Discover styles
-@import 'discover/index';
+@import './discover/index';
+
+// Home styles
+@import './home/index';
 
 // Dashboard styles
 // MUST STAY AT THE BOTTOM BECAUSE OF DARK THEME IMPORTS
diff --git a/src/ui/public/styles/_styling_constants.scss b/src/ui/public/styles/_styling_constants.scss
index b86af2288e26..066890e9a1c1 100644
--- a/src/ui/public/styles/_styling_constants.scss
+++ b/src/ui/public/styles/_styling_constants.scss
@@ -6,8 +6,16 @@
 @import '../../../../node_modules/@elastic/eui/src/global_styling/mixins/index';
 
 // EUI TODO: Add this
-@mixin truncate($style: ellipsis) {
-  white-space: nowrap;
-  text-overflow: $style;
-  overflow: hidden;
+@mixin kibanaCircleLogo() {
+  display: inline-block;
+  @include size($euiSizeXXL * 2);
+  line-height: $euiSizeXXL * 2;
+  text-align: center;
+  background-color: $euiColorEmptyShade;
+  border-radius: 100%;
+  padding: $euiSize;
+
+  .euiIcon {
+    vertical-align: baseline;
+  }
 }