diff --git a/ui_framework/dist/ui_framework_theme_dark.css b/ui_framework/dist/ui_framework_theme_dark.css
index 2f210e2dce5ba..d9ea8bc4411c2 100644
--- a/ui_framework/dist/ui_framework_theme_dark.css
+++ b/ui_framework/dist/ui_framework_theme_dark.css
@@ -241,7 +241,7 @@ table {
   text-decoration: none;
   border: solid 1px transparent;
   border-radius: 24px;
-  padding: 0 8px;
+  padding: 0 12px;
   background-color: transparent;
   white-space: nowrap;
   vertical-align: middle; }
@@ -267,28 +267,46 @@ table {
       margin-right: 0; }
 
 .kuiBadge--default {
-  border-color: #333;
-  background-color: rgba(51, 51, 51, 0.1); }
+  color: black;
+  background-color: rgba(51, 51, 51, 0.4);
+  border-color: rgba(0, 0, 0, 0.2); }
+  .kuiBadge--default svg {
+    fill: black; }
 
 .kuiBadge--primary {
-  border-color: #4da1c0;
-  background-color: rgba(77, 161, 192, 0.1); }
+  color: #3985a1;
+  background-color: rgba(77, 161, 192, 0.1);
+  border-color: rgba(57, 133, 161, 0.2); }
+  .kuiBadge--primary svg {
+    fill: #3985a1; }
 
 .kuiBadge--secondary {
-  border-color: #00A69B;
-  background-color: rgba(0, 166, 155, 0.1); }
+  color: #00736b;
+  background-color: rgba(0, 166, 155, 0.1);
+  border-color: rgba(0, 115, 107, 0.2); }
+  .kuiBadge--secondary svg {
+    fill: #00736b; }
 
 .kuiBadge--warning {
-  border-color: #E5830E;
-  background-color: rgba(229, 131, 14, 0.1); }
+  color: #854c08;
+  background-color: rgba(229, 131, 14, 0.15);
+  border-color: rgba(133, 76, 8, 0.2); }
+  .kuiBadge--warning svg {
+    fill: #854c08; }
 
 .kuiBadge--danger {
-  border-color: #bf4d4d;
-  background-color: rgba(191, 77, 77, 0.1); }
+  color: #bf4d4d;
+  background-color: rgba(191, 77, 77, 0.1);
+  border-color: rgba(191, 77, 77, 0.2); }
+  .kuiBadge--danger svg {
+    fill: #bf4d4d; }
 
 .kuiBadge--accent {
-  border-color: #DD0A73;
-  background-color: rgba(221, 10, 115, 0.1); }
+  color: #c50966;
+  background-color: rgba(221, 10, 115, 0.1);
+  border-color: rgba(197, 9, 102, 0.2); }
+  .kuiBadge--accent svg {
+    fill: #c50966; }
 
 .kuiBottomBar {
   background: #1a1a1a;
@@ -405,9 +423,9 @@ table {
       margin-right: 8px;
       /* 1 */ }
   .kuiButton:hover {
-    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1); }
+    box-shadow: 0 4px 2px -1px rgba(0, 0, 0, 0.1); }
   .kuiButton:active {
-    box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.2); }
+    box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.15); }
   .kuiButton:hover, .kuiButton:focus {
     background-color: rgba(77, 161, 192, 0.1); }
   .kuiButton:disabled {
@@ -431,88 +449,113 @@ table {
 
 .kuiButton--primary {
   color: #4da1c0;
-  border-color: #4da1c0; }
+  border-color: rgba(77, 161, 192, 0.3); }
+  .kuiButton--primary:hover, .kuiButton--primary:focus {
+    background-color: rgba(77, 161, 192, 0.1);
+    border-color: rgba(77, 161, 192, 0.5); }
   .kuiButton--primary .kuiButton__icon {
     fill: #4da1c0; }
   .kuiButton--primary.kuiButton--fill {
-    background-color: #4da1c0;
-    border-color: #4da1c0;
-    color: #DDD; }
+    color: #DDD;
+    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3);
+    background: linear-gradient(0deg, #4da1c0, #73b5cd);
+    border-color: #4da1c0; }
+    .kuiButton--primary.kuiButton--fill:hover {
+      box-shadow: 0 4px 2px -1px rgba(0, 0, 0, 0.15); }
+    .kuiButton--primary.kuiButton--fill:active {
+      box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.3); }
     .kuiButton--primary.kuiButton--fill:hover, .kuiButton--primary.kuiButton--fill:focus {
       background-color: #4095b4;
       border-color: #4095b4; }
     .kuiButton--primary.kuiButton--fill .kuiButton__icon {
       fill: #DDD; }
-  .kuiButton--primary:hover, .kuiButton--primary:focus {
-    background-color: rgba(77, 161, 192, 0.1); }
 
 .kuiButton--secondary {
-  color: #00A69B;
-  border-color: #00A69B; }
+  color: #008d83;
+  border-color: rgba(0, 141, 131, 0.3); }
+  .kuiButton--secondary:hover, .kuiButton--secondary:focus {
+    background-color: rgba(0, 141, 131, 0.1);
+    border-color: rgba(0, 141, 131, 0.5); }
   .kuiButton--secondary .kuiButton__icon {
-    fill: #00A69B; }
+    fill: #008d83; }
   .kuiButton--secondary.kuiButton--fill {
-    background-color: #00A69B;
-    border-color: #00A69B;
-    color: #DDD; }
+    color: #DDD;
+    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3);
+    background: linear-gradient(0deg, #008d83, #00c0b3);
+    border-color: #008d83; }
+    .kuiButton--secondary.kuiButton--fill:hover {
+      box-shadow: 0 4px 2px -1px rgba(0, 0, 0, 0.15); }
+    .kuiButton--secondary.kuiButton--fill:active {
+      box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.3); }
     .kuiButton--secondary.kuiButton--fill:hover, .kuiButton--secondary.kuiButton--fill:focus {
-      background-color: #008d83;
-      border-color: #008d83; }
+      background-color: #00736b;
+      border-color: #00736b; }
     .kuiButton--secondary.kuiButton--fill .kuiButton__icon {
       fill: #DDD; }
-  .kuiButton--secondary:hover, .kuiButton--secondary:focus {
-    background-color: rgba(0, 166, 155, 0.1); }
 
 .kuiButton--warning {
-  color: #E5830E;
-  border-color: #E5830E; }
+  color: #c3700c;
+  border-color: rgba(195, 112, 12, 0.3); }
+  .kuiButton--warning:hover, .kuiButton--warning:focus {
+    background-color: rgba(195, 112, 12, 0.1);
+    border-color: rgba(195, 112, 12, 0.5); }
   .kuiButton--warning .kuiButton__icon {
-    fill: #E5830E; }
+    fill: #c3700c; }
   .kuiButton--warning.kuiButton--fill {
-    background-color: #E5830E;
-    border-color: #E5830E;
-    color: #DDD; }
+    color: #DDD;
+    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3);
+    background: linear-gradient(0deg, #c3700c, #f29425);
+    border-color: #c3700c; }
+    .kuiButton--warning.kuiButton--fill:hover {
+      box-shadow: 0 4px 2px -1px rgba(0, 0, 0, 0.15); }
+    .kuiButton--warning.kuiButton--fill:active {
+      box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.3); }
     .kuiButton--warning.kuiButton--fill:hover, .kuiButton--warning.kuiButton--fill:focus {
-      background-color: #cd750d;
-      border-color: #cd750d; }
+      background-color: #ab620a;
+      border-color: #ab620a; }
     .kuiButton--warning.kuiButton--fill .kuiButton__icon {
       fill: #DDD; }
-  .kuiButton--warning:hover, .kuiButton--warning:focus {
-    background-color: rgba(229, 131, 14, 0.1); }
 
 .kuiButton--danger {
   color: #bf4d4d;
-  border-color: #bf4d4d; }
+  border-color: rgba(191, 77, 77, 0.3); }
+  .kuiButton--danger:hover, .kuiButton--danger:focus {
+    background-color: rgba(191, 77, 77, 0.1);
+    border-color: rgba(191, 77, 77, 0.5); }
   .kuiButton--danger .kuiButton__icon {
     fill: #bf4d4d; }
   .kuiButton--danger.kuiButton--fill {
-    background-color: #bf4d4d;
-    border-color: #bf4d4d;
-    color: #DDD; }
+    color: #DDD;
+    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3);
+    background: linear-gradient(0deg, #bf4d4d, #c86767);
+    border-color: #bf4d4d; }
+    .kuiButton--danger.kuiButton--fill:hover {
+      box-shadow: 0 4px 2px -1px rgba(0, 0, 0, 0.15); }
+    .kuiButton--danger.kuiButton--fill:active {
+      box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.3); }
     .kuiButton--danger.kuiButton--fill:hover, .kuiButton--danger.kuiButton--fill:focus {
       background-color: #b24040;
       border-color: #b24040; }
     .kuiButton--danger.kuiButton--fill .kuiButton__icon {
       fill: #DDD; }
-  .kuiButton--danger:hover, .kuiButton--danger:focus {
-    background-color: rgba(191, 77, 77, 0.1); }
 
 .kuiButton--ghost {
   color: #FFF;
-  border-color: #FFF; }
+  border-color: rgba(255, 255, 255, 0.3); }
+  .kuiButton--ghost:hover, .kuiButton--ghost:focus {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.5); }
   .kuiButton--ghost .kuiButton__icon {
     fill: #FFF; }
   .kuiButton--ghost.kuiButton--fill {
+    color: #000;
     background-color: #FFF;
-    border-color: #FFF;
-    color: #000; }
+    border-color: #FFF; }
     .kuiButton--ghost.kuiButton--fill:hover, .kuiButton--ghost.kuiButton--fill:focus {
       background-color: #f2f2f2;
       border-color: #f2f2f2; }
     .kuiButton--ghost.kuiButton--fill .kuiButton__icon {
       fill: #000; }
-  .kuiButton--ghost:hover, .kuiButton--ghost:focus {
-    background-color: rgba(255, 255, 255, 0.1); }
 
 .kuiButtonEmpty {
   display: inline-block;
@@ -727,10 +770,10 @@ table {
 
 .kuiCallOut {
   padding: 16px;
-  border-left: 2px solid transparent; }
+  border: 1px solid transparent; }
 
 .kuiCallOut--info {
-  border-color: #4da1c0;
+  border-color: rgba(77, 161, 192, 0.2);
   background-color: #17303a; }
   .kuiCallOut--info .kuiCallOutHeader__icon {
     fill: #cae3ec; }
@@ -738,7 +781,7 @@ table {
     color: #cae3ec; }
 
 .kuiCallOut--success {
-  border-color: #00A69B;
+  border-color: rgba(0, 166, 155, 0.2);
   background-color: #00322f; }
   .kuiCallOut--success .kuiCallOutHeader__icon {
     fill: #b3e4e1; }
@@ -746,7 +789,7 @@ table {
     color: #b3e4e1; }
 
 .kuiCallOut--warning {
-  border-color: #E5830E;
+  border-color: rgba(229, 131, 14, 0.2);
   background-color: #452704; }
   .kuiCallOut--warning .kuiCallOutHeader__icon {
     fill: #f7dab7; }
@@ -754,7 +797,7 @@ table {
     color: #f7dab7; }
 
 .kuiCallOut--danger {
-  border-color: #bf4d4d;
+  border-color: rgba(191, 77, 77, 0.2);
   background-color: #391717; }
   .kuiCallOut--danger .kuiCallOutHeader__icon {
     fill: #eccaca; }
@@ -1393,8 +1436,12 @@ table {
               mask: url("../src/components/icon/assets/check.svg") center center no-repeat; }
     .kuiCheckbox .kuiCheckbox__input:focus ~ .kuiCheckbox__square,
     .kuiCheckbox .kuiCheckbox__input:active ~ .kuiCheckbox__square {
-      background-color: #275160;
-      border-color: #4da1c0; }
+      background-color: #222;
+      border: 2px solid #4da1c0 !important;
+      box-shadow: 0 4px 2px -1px rgba(0, 0, 0, 0.15); }
+    .kuiCheckbox .kuiCheckbox__input:checked:focus ~ .kuiCheckbox__square .kuiCheckbox__check,
+    .kuiCheckbox .kuiCheckbox__input:checked:active ~ .kuiCheckbox__square .kuiCheckbox__check {
+      background-color: #4da1c0; }
   .kuiCheckbox .kuiCheckbox__square {
     position: absolute;
     height: 24px;
@@ -1416,12 +1463,10 @@ table {
     font-size: 14px;
     cursor: pointer; }
   .kuiCheckbox.kuiCheckbox--inList .kuiCheckbox__input:checked ~ .kuiCheckbox__square {
-    background: #4da1c0;
+    background: #222;
     border-color: #4da1c0; }
     .kuiCheckbox.kuiCheckbox--inList .kuiCheckbox__input:checked ~ .kuiCheckbox__square .kuiCheckbox__check {
-      background-color: #222; }
-  .kuiCheckbox.kuiCheckbox--inList .kuiCheckbox__input:focus:checked ~ .kuiCheckbox__square {
-    background: #3e819a; }
+      background-color: #4da1c0; }
 
 .kuiCheckboxGroup__item + .kuiCheckboxGroup__item {
   margin-top: 8px; }
@@ -1548,8 +1593,9 @@ table {
 
 .kuiFormErrorText {
   font-size: 12px;
-  padding: 8px 0;
-  color: #bf4d4d; }
+  padding: 8px;
+  color: #bf4d4d;
+  background-color: #391717; }
 
 .kuiFormHelpText {
   font-size: 12px;
@@ -1596,7 +1642,9 @@ table {
   .kuiFormRow.kuiFormRow--hasEmptyLabelSpace {
     padding-top: 20px;
     /* 2 */ }
-  .kuiFormRow .kuiFormRow__text + .kuiFormRow__text {
+  .kuiFormRow .kuiFormErrorText + .kuiFormErrorText {
+    padding-top: 0; }
+  .kuiFormRow .kuiFormHelpText + .kuiFormHelpText {
     padding-top: 0; }
 
 .kuiRange {
@@ -1605,17 +1653,24 @@ table {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  margin: 8px 0; }
+  margin: 8px 0;
+  /**
+   * 1. We can't group these selectors or else the styles won't be applied.
+   */ }
   .kuiRange.kuiRange--fullWidth {
     max-width: 100%; }
   .kuiRange:focus::-webkit-slider-thumb {
-    border: 2px solid #4da1c0; }
+    /* 1 */
+    border: 2px solid #4da1c0;
+    box-shadow: 0 4px 2px -1px rgba(0, 0, 0, 0.15); }
   .kuiRange:focus::-moz-range-thumb {
-    border: 2px solid #4da1c0; }
+    /* 1 */
+    border: 2px solid #4da1c0;
+    box-shadow: 0 4px 2px -1px rgba(0, 0, 0, 0.15); }
   .kuiRange:focus::-ms-thumb {
-    border: 2px solid #4da1c0; }
-  .kuiRange:focus::-webkit-slider-runnable-track {
-    background-color: #4da1c0; }
+    /* 1 */
+    border: 2px solid #4da1c0;
+    box-shadow: 0 4px 2px -1px rgba(0, 0, 0, 0.15); }
   .kuiRange::-webkit-slider-runnable-track {
     cursor: pointer;
     height: 2px;
@@ -1626,7 +1681,7 @@ table {
     border-radius: 4px; }
   .kuiRange::-webkit-slider-thumb {
     background: #222;
-    border: 2px solid #DDD;
+    border: 2px solid #444;
     border-radius: 50%;
     cursor: pointer;
     height: 16px;
@@ -1643,7 +1698,7 @@ table {
     border-radius: 4px; }
   .kuiRange::-moz-range-thumb {
     background: #222;
-    border: 2px solid #DDD;
+    border: 2px solid #444;
     border-radius: 50%;
     cursor: pointer;
     height: 16px;
@@ -1667,7 +1722,7 @@ table {
     border-radius: 8px; }
   .kuiRange::-ms-thumb {
     background: #222;
-    border: 2px solid #DDD;
+    border: 2px solid #444;
     border-radius: 50%;
     cursor: pointer;
     height: 16px;
@@ -1730,17 +1785,15 @@ table {
     width: 100%;
     height: 100%;
     cursor: pointer; }
-  .kuiSwitch .kuiSwitch__input:focus + .kuiSwitch__body {
-    background: #222; }
-    .kuiSwitch .kuiSwitch__input:focus + .kuiSwitch__body .kuiSwitch__thumb {
-      border-color: #4da1c0;
-      background-color: #4da1c0; }
+  .kuiSwitch .kuiSwitch__input:focus + .kuiSwitch__body .kuiSwitch__thumb {
+    border: 2px solid #4da1c0 !important;
+    box-shadow: 0 4px 2px -1px rgba(0, 0, 0, 0.15); }
   .kuiSwitch .kuiSwitch__body {
     pointer-events: none;
     width: 52px;
     height: 24px;
-    background: #1d1d1d;
-    box-shadow: inset 0 0 0 1px #333;
+    background-color: rgba(0, 166, 155, 0.1);
+    box-shadow: inset 0 0 0 1px rgba(0, 166, 155, 0.5);
     display: inline-block;
     position: relative;
     border-radius: 24px;
@@ -1753,7 +1806,7 @@ table {
     background-color: #222;
     left: 28px;
     border-radius: 50%;
-    border: 1px solid #333;
+    border: 1px solid rgba(0, 166, 155, 0.5);
     transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
     transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
     transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1); }
@@ -1777,20 +1830,24 @@ table {
   .kuiSwitch .kuiSwitch__icon--checked {
     right: auto;
     left: -8px;
-    fill: #DDD; }
+    fill: #00a297; }
   .kuiSwitch:hover .kuiSwitch__thumb {
     -webkit-transform: scale(1.05);
             transform: scale(1.05); }
   .kuiSwitch:active .kuiSwitch__thumb {
     -webkit-transform: scale(0.95);
             transform: scale(0.95); }
-  .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body .kuiSwitch__thumb {
-    left: 0; }
-  .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body .kuiSwitch__icon {
-    right: -8px; }
-    .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body .kuiSwitch__icon.kuiSwitch__icon--checked {
-      right: auto;
-      left: -40px; }
+  .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body {
+    background: #1d1d1d;
+    box-shadow: inset 0 0 0 1px #333; }
+    .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body .kuiSwitch__thumb {
+      left: 0;
+      border: 1px solid #333; }
+    .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body .kuiSwitch__icon {
+      right: -8px; }
+      .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body .kuiSwitch__icon.kuiSwitch__icon--checked {
+        right: auto;
+        left: -40px; }
 
 .kuiTextArea {
   max-width: 400px;
@@ -1921,7 +1978,9 @@ table {
   line-height: 64px;
   padding: 0 16px;
   position: relative;
-  color: #F5F5F5; }
+  color: #4da1c0; }
+  .kuiHeaderBreadcrumb:hover {
+    color: #3985a1; }
   .kuiHeaderBreadcrumb:not(:last-child):after {
     position: absolute;
     top: 24px;
@@ -1932,20 +1991,22 @@ table {
     -webkit-transform: rotate(15deg);
             transform: rotate(15deg);
     background: #333; }
-  .kuiHeaderBreadcrumb:not(.kuiHeaderBreadcrumb--collapsed):hover {
+  .kuiHeaderBreadcrumb:not(:last-child) .kuiHeaderBreadcrumb__text {
+    max-width: 150px;
+    text-overflow: ellipsis;
+    overflow: hidden; }
+  .kuiHeaderBreadcrumb:not(.kuiHeaderBreadcrumb--collapsed):not(.kuiHeaderBreadcrumb-isActive):hover {
     text-decoration: underline; }
-  .kuiHeaderBreadcrumb:not(.kuiHeaderBreadcrumb--collapsed):focus {
+  .kuiHeaderBreadcrumb:not(.kuiHeaderBreadcrumb--collapsed):not(.kuiHeaderBreadcrumb-isActive):focus {
     text-decoration: underline;
     background: #275160; }
   .kuiHeaderBreadcrumb.kuiHeaderBreadcrumb-isActive {
-    color: #444; }
+    color: #F5F5F5;
+    font-weight: 500; }
 
 .kuiHeaderBreadcrumb__text {
   white-space: nowrap;
-  max-width: 150px;
-  display: block;
-  text-overflow: ellipsis;
-  overflow: hidden; }
+  display: block; }
 
 .kuiHeaderBreadcrumb--collapsed {
   color: #333; }
@@ -1991,7 +2052,7 @@ table {
     position: absolute;
     content: "";
     width: 1px;
-    top: 16px;
+    top: 0;
     bottom: 0;
     background: #333;
     left: 0; }
@@ -2464,10 +2525,10 @@ table {
             transform: rotate(359deg); } }
 
 .kuiModal {
-  box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
   background-color: #222;
   border: 1px solid #333;
   border-radius: 4px;
+  box-shadow: 0 1px 8px -1px rgba(0, 0, 0, 0.15), 0 16px 16px -8px rgba(0, 0, 0, 0.1);
   z-index: 8000;
   padding: 32px;
   min-width: 50%;
@@ -2740,8 +2801,12 @@ table {
     padding: 16px; }
   .kuiPanel.kuiPanel--paddingLarge {
     padding: 24px; }
+  .kuiPanel.kuiPanel--paddingXLarge {
+    padding: 32px; }
+  .kuiPanel.kuiPanel--paddingXXLarge {
+    padding: 40px; }
   .kuiPanel.kuiPanel--shadow {
-    box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); }
+    box-shadow: 0 1px 8px -1px rgba(0, 0, 0, 0.15), 0 16px 16px -8px rgba(0, 0, 0, 0.1); }
   .kuiPanel.kuiPanel--flexGrowZero {
     -webkit-box-flex: 0;
     -webkit-flex-grow: 0;
@@ -3121,35 +3186,35 @@ table {
   .kuiProgress::-moz-progress-bar {
     transition: width 250ms linear; }
   .kuiProgress.kuiProgress--primary::-webkit-progress-value {
-    background-color: #4da1c0; }
+    background-color: rgba(77, 161, 192, 0.6); }
   .kuiProgress.kuiProgress--primary::-moz-progress-bar {
-    background-color: #4da1c0; }
+    background-color: rgba(77, 161, 192, 0.6); }
   .kuiProgress.kuiProgress--primary.kuiProgress--indeterminate:before {
-    background-color: #4da1c0; }
+    background-color: rgba(77, 161, 192, 0.6); }
   .kuiProgress.kuiProgress--secondary::-webkit-progress-value {
-    background-color: #00A69B; }
+    background-color: rgba(0, 166, 155, 0.75); }
   .kuiProgress.kuiProgress--secondary::-moz-progress-bar {
-    background-color: #00A69B; }
+    background-color: rgba(0, 166, 155, 0.75); }
   .kuiProgress.kuiProgress--secondary.kuiProgress--indeterminate:before {
-    background-color: #00A69B; }
+    background-color: rgba(0, 166, 155, 0.75); }
   .kuiProgress.kuiProgress--warning::-webkit-progress-value {
-    background-color: #E5830E; }
+    background-color: rgba(229, 131, 14, 0.75); }
   .kuiProgress.kuiProgress--warning::-moz-progress-bar {
-    background-color: #E5830E; }
+    background-color: rgba(229, 131, 14, 0.75); }
   .kuiProgress.kuiProgress--warning.kuiProgress--indeterminate:before {
-    background-color: #E5830E; }
+    background-color: rgba(229, 131, 14, 0.75); }
   .kuiProgress.kuiProgress--danger::-webkit-progress-value {
-    background-color: #bf4d4d; }
+    background-color: #cc7373; }
   .kuiProgress.kuiProgress--danger::-moz-progress-bar {
-    background-color: #bf4d4d; }
+    background-color: #cc7373; }
   .kuiProgress.kuiProgress--danger.kuiProgress--indeterminate:before {
-    background-color: #bf4d4d; }
+    background-color: #cc7373; }
   .kuiProgress.kuiProgress--accent::-webkit-progress-value {
-    background-color: #DD0A73; }
+    background-color: rgba(221, 10, 115, 0.5); }
   .kuiProgress.kuiProgress--accent::-moz-progress-bar {
-    background-color: #DD0A73; }
+    background-color: rgba(221, 10, 115, 0.5); }
   .kuiProgress.kuiProgress--accent.kuiProgress--indeterminate:before {
-    background-color: #DD0A73; }
+    background-color: rgba(221, 10, 115, 0.5); }
   .kuiProgress.kuiProgress--subdued::-webkit-progress-value {
     background-color: #444; }
   .kuiProgress.kuiProgress--subdued::-moz-progress-bar {
@@ -3207,6 +3272,9 @@ table {
   position: relative;
   height: 100%; }
 
+.kuiSideNav__content {
+  padding: 12px; }
+
 .kuiSideNav__mobileToggle {
   display: none;
   border-bottom: 1px solid #333;
@@ -3311,42 +3379,27 @@ table {
   display: block;
   width: 100%;
   text-align: left;
-  padding: 4px 8px;
+  padding: 2px 0;
   color: #D9D9D9;
   white-space: nowrap;
   overflow: hidden;
-  text-overflow: ellipsis;
-  border: 1px solid #333;
-  border-color: transparent; }
+  text-overflow: ellipsis; }
   .kuiSideNavItem.kuiSideNavItem-isSelected {
-    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
-    color: #00A69B;
-    border-left: 2px solid #333;
-    border-left-color: #00A69B;
-    background-color: #222; }
+    color: #DDD;
+    font-weight: 500;
+    cursor: default; }
   .kuiSideNavItem.kuiSideNavItem--indent {
-    margin-left: 16px;
-    font-size: 14px;
-    padding: 2px 8px;
-    border-left: 1px solid #333;
-    border-left-color: #333; }
-    .kuiSideNavItem.kuiSideNavItem--indent.kuiSideNavItem-isSelected {
-      border-left-color: #00A69B;
-      background-color: transparent;
-      box-shadow: none; }
-  .kuiSideNavItem:hover {
+    padding-left: 8px; }
+  .kuiSideNavItem:hover:not(.kuiSideNavItem-isSelected), .kuiSideNavItem:focus:not(.kuiSideNavItem-isSelected) {
+    color: #DDD;
     text-decoration: underline; }
-  .kuiSideNavItem:focus {
-    background-color: #275160 !important; }
-  .kuiSideNavItem:focus:not(.kuiSideNavItem-isSelected) {
-    border: solid 1px #18323c; }
 
 .kuiSideNavTitle {
   font-size: 16px;
   font-size: 1rem;
   line-height: 1.5;
   font-weight: 500;
-  margin-bottom: 8px;
+  margin-bottom: 2px;
   margin-top: 16px;
   /**
    * 1. Only want the first title to have margin. Since buttons exist in nav
@@ -3386,37 +3439,42 @@ table {
   font-size: 0.875rem;
   line-height: 1.5;
   width: 100%;
-  border: none;
+  border: 1px solid #E4E4E4;
   border-collapse: collapse;
   background-color: #222; }
 
 .kuiTable--compressed .kuiTableCellContent {
   padding: 8px; }
 
-.kuiTable--compressed .kuiTableHeaderButton:focus {
-  outline: solid 8px #275160; }
-
 .kuiTableHeaderCell {
   max-width: 20px;
   /* 1 */
   vertical-align: middle;
+  background-color: #272727;
   color: #FFF; }
-  .kuiTableHeaderCell .kuiTableHeaderButton {
-    text-align: left; }
 
 .kuiTableHeaderCellCheckbox {
   width: 36px;
-  vertical-align: middle; }
+  vertical-align: middle;
+  background-color: #272727;
+  /**
+   * 1. Allow checkbox box-shadow to be visible.
+   */ }
   .kuiTableHeaderCellCheckbox .kuiTableCellContent {
     padding-right: 0;
     padding-top: 0;
     padding-bottom: 0; }
+  .kuiTableHeaderCellCheckbox .kuiTableCellContent {
+    overflow: visible;
+    /* 1 */ }
 
 .kuiTableHeaderButton {
   font-size: 14px;
   font-size: 0.875rem;
   line-height: 1.5;
+  text-align: left;
   color: inherit;
+  font-weight: inherit;
   width: 100%; }
   .kuiTableHeaderButton:hover, .kuiTableHeaderButton:focus {
     text-decoration: underline;
@@ -3425,7 +3483,7 @@ table {
       display: block;
       fill: #4da1c0; }
   .kuiTableHeaderButton:focus {
-    background: #275160; }
+    box-shadow: inset 0 -2px 0 0 #4da1c0; }
 
 .kuiTableSortIcon {
   margin-left: 4px;
@@ -3435,28 +3493,54 @@ table {
 
 .kuiTableRow {
   transition: background-color 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); }
-  .kuiTableRow:hover {
+  .kuiTableRow:hover:not(.kuiTableRow-isSelected) {
     background-color: #1f1f1f; }
+    .kuiTableRow:hover:not(.kuiTableRow-isSelected) .kuiTableRowCell,
+    .kuiTableRow:hover:not(.kuiTableRow-isSelected) .kuiTableRowCellCheckbox {
+      border-color: #333; }
+    .kuiTableRow:hover:not(.kuiTableRow-isSelected) + .kuiTableRow .kuiTableRowCell,
+    .kuiTableRow:hover:not(.kuiTableRow-isSelected) + .kuiTableRow .kuiTableRowCellCheckbox {
+      border-color: #333; }
   .kuiTableRow.kuiTableRow-isSelected {
     background-color: rgba(77, 161, 192, 0.05); }
+    .kuiTableRow.kuiTableRow-isSelected:hover {
+      background-color: rgba(77, 161, 192, 0.1); }
+      .kuiTableRow.kuiTableRow-isSelected:hover .kuiTableRowCell,
+      .kuiTableRow.kuiTableRow-isSelected:hover .kuiTableRowCellCheckbox {
+        border-color: rgba(77, 161, 192, 0.3); }
+      .kuiTableRow.kuiTableRow-isSelected:hover + .kuiTableRow .kuiTableRowCell,
+      .kuiTableRow.kuiTableRow-isSelected:hover + .kuiTableRow .kuiTableRowCellCheckbox {
+        border-top-color: rgba(77, 161, 192, 0.3); }
 
 .kuiTableRowCell {
   max-width: 20px;
   /* 1 */
   vertical-align: middle;
   color: #DDD;
-  border-top: 1px solid #333;
-  border-bottom: 1px solid #333; }
+  border-top: 1px solid #E4E4E4; }
+  .kuiTableRowCell:first-child {
+    border-left: 1px solid #E4E4E4; }
+  .kuiTableRowCell:last-child {
+    border-right: 1px solid #E4E4E4; }
 
 .kuiTableRowCellCheckbox {
   width: 36px;
   vertical-align: middle;
-  border-top: 1px solid #333;
-  border-bottom: 1px solid #333; }
+  border-top: 1px solid #E4E4E4;
+  /**
+   * 1. Allow checkbox box-shadow to be visible.
+   */ }
   .kuiTableRowCellCheckbox .kuiTableCellContent {
     padding-right: 0;
     padding-top: 0;
     padding-bottom: 0; }
+  .kuiTableRowCellCheckbox:first-child {
+    border-left: 1px solid #E4E4E4; }
+  .kuiTableRowCellCheckbox:last-child {
+    border-right: 1px solid #E4E4E4; }
+  .kuiTableRowCellCheckbox .kuiTableCellContent {
+    overflow: visible;
+    /* 1 */ }
 
 /**
  * 1. Vertically align all children.
@@ -3493,7 +3577,10 @@ table {
           justify-content: flex-end; }
 
 .kuiTableCellContent--wrapText {
-  white-space: normal; }
+  white-space: normal;
+  overflow: visible; }
+  .kuiTableCellContent--wrapText .kuiTableCellContent__text {
+    overflow: visible; }
 
 .kuiTabs {
   display: -webkit-box;
@@ -3520,7 +3607,7 @@ table {
     text-decoration: underline; }
   .kuiTab.kuiTab-isSelected {
     cursor: default;
-    color: #00A69B; }
+    color: #4da1c0; }
     .kuiTab.kuiTab-isSelected:after {
       position: absolute;
       bottom: -1px;
@@ -3528,7 +3615,7 @@ table {
       content: ' ';
       width: 100%;
       height: 2px;
-      background-color: #00A69B;
+      background-color: #4da1c0;
       -webkit-animation: kuiTab 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
               animation: kuiTab 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); }
 
@@ -3561,17 +3648,20 @@ table {
   font-weight: 300;
   font-size: 24px;
   font-size: 1.5rem;
-  line-height: 1.5; }
+  line-height: 1.5;
+  font-weight: 400; }
 
 .kuiTitle--small {
   font-size: 16px;
   font-size: 1rem;
-  line-height: 1.5; }
+  line-height: 1.5;
+  font-weight: 400; }
 
 .kuiTitle--large {
   font-size: 32px;
   font-size: 2rem;
-  line-height: 1.5; }
+  line-height: 1.5;
+  font-weight: 400; }
 
 /**
  * 1. Allow list to expand as items are added, but cap it at the screen height.
@@ -3662,7 +3752,7 @@ table {
     /* 1 */ } }
 
 .kuiToast {
-  box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 8px -1px rgba(0, 0, 0, 0.15), 0 16px 16px -8px rgba(0, 0, 0, 0.1);
   position: relative;
   padding: 16px;
   background-color: #222;
@@ -3747,7 +3837,7 @@ table {
 
 .kuiToastHeader__title {
   color: #FFF;
-  font-weight: 300; }
+  font-weight: 400; }
 
 .kuiToastHeader--withBody {
   margin-bottom: 12px; }
diff --git a/ui_framework/dist/ui_framework_theme_light.css b/ui_framework/dist/ui_framework_theme_light.css
index f2be1a8574ee7..98f11ad644341 100644
--- a/ui_framework/dist/ui_framework_theme_light.css
+++ b/ui_framework/dist/ui_framework_theme_light.css
@@ -241,7 +241,7 @@ table {
   text-decoration: none;
   border: solid 1px transparent;
   border-radius: 24px;
-  padding: 0 8px;
+  padding: 0 12px;
   background-color: transparent;
   white-space: nowrap;
   vertical-align: middle; }
@@ -267,28 +267,46 @@ table {
       margin-right: 0; }
 
 .kuiBadge--default {
-  border-color: #D9D9D9;
-  background-color: rgba(217, 217, 217, 0.1); }
+  color: #404040;
+  background-color: rgba(217, 217, 217, 0.4);
+  border-color: rgba(64, 64, 64, 0.2); }
+  .kuiBadge--default svg {
+    fill: #404040; }
 
 .kuiBadge--primary {
-  border-color: #0079a5;
-  background-color: rgba(0, 121, 165, 0.1); }
+  color: #005472;
+  background-color: rgba(0, 121, 165, 0.1);
+  border-color: rgba(0, 84, 114, 0.2); }
+  .kuiBadge--primary svg {
+    fill: #005472; }
 
 .kuiBadge--secondary {
-  border-color: #00A69B;
-  background-color: rgba(0, 166, 155, 0.1); }
+  color: #00736b;
+  background-color: rgba(0, 166, 155, 0.1);
+  border-color: rgba(0, 115, 107, 0.2); }
+  .kuiBadge--secondary svg {
+    fill: #00736b; }
 
 .kuiBadge--warning {
-  border-color: #E5830E;
-  background-color: rgba(229, 131, 14, 0.1); }
+  color: #854c08;
+  background-color: rgba(229, 131, 14, 0.15);
+  border-color: rgba(133, 76, 8, 0.2); }
+  .kuiBadge--warning svg {
+    fill: #854c08; }
 
 .kuiBadge--danger {
-  border-color: #A30000;
-  background-color: rgba(163, 0, 0, 0.1); }
+  color: #A30000;
+  background-color: rgba(163, 0, 0, 0.1);
+  border-color: rgba(163, 0, 0, 0.2); }
+  .kuiBadge--danger svg {
+    fill: #A30000; }
 
 .kuiBadge--accent {
-  border-color: #DD0A73;
-  background-color: rgba(221, 10, 115, 0.1); }
+  color: #c50966;
+  background-color: rgba(221, 10, 115, 0.1);
+  border-color: rgba(197, 9, 102, 0.2); }
+  .kuiBadge--accent svg {
+    fill: #c50966; }
 
 .kuiBottomBar {
   background: #404040;
@@ -405,9 +423,9 @@ table {
       margin-right: 8px;
       /* 1 */ }
   .kuiButton:hover {
-    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1); }
+    box-shadow: 0 4px 2px -1px rgba(0, 0, 0, 0.1); }
   .kuiButton:active {
-    box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.2); }
+    box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.15); }
   .kuiButton:hover, .kuiButton:focus {
     background-color: rgba(0, 121, 165, 0.1); }
   .kuiButton:disabled {
@@ -431,88 +449,113 @@ table {
 
 .kuiButton--primary {
   color: #0079a5;
-  border-color: #0079a5; }
+  border-color: rgba(0, 121, 165, 0.3); }
+  .kuiButton--primary:hover, .kuiButton--primary:focus {
+    background-color: rgba(0, 121, 165, 0.1);
+    border-color: rgba(0, 121, 165, 0.5); }
   .kuiButton--primary .kuiButton__icon {
     fill: #0079a5; }
   .kuiButton--primary.kuiButton--fill {
-    background-color: #0079a5;
-    border-color: #0079a5;
-    color: #FFF; }
+    color: #FFF;
+    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3);
+    background: linear-gradient(0deg, #0079a5, #009ed8);
+    border-color: #0079a5; }
+    .kuiButton--primary.kuiButton--fill:hover {
+      box-shadow: 0 4px 2px -1px rgba(0, 0, 0, 0.15); }
+    .kuiButton--primary.kuiButton--fill:active {
+      box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.3); }
     .kuiButton--primary.kuiButton--fill:hover, .kuiButton--primary.kuiButton--fill:focus {
       background-color: #00668c;
       border-color: #00668c; }
     .kuiButton--primary.kuiButton--fill .kuiButton__icon {
       fill: #FFF; }
-  .kuiButton--primary:hover, .kuiButton--primary:focus {
-    background-color: rgba(0, 121, 165, 0.1); }
 
 .kuiButton--secondary {
-  color: #00A69B;
-  border-color: #00A69B; }
+  color: #008d83;
+  border-color: rgba(0, 141, 131, 0.3); }
+  .kuiButton--secondary:hover, .kuiButton--secondary:focus {
+    background-color: rgba(0, 141, 131, 0.1);
+    border-color: rgba(0, 141, 131, 0.5); }
   .kuiButton--secondary .kuiButton__icon {
-    fill: #00A69B; }
+    fill: #008d83; }
   .kuiButton--secondary.kuiButton--fill {
-    background-color: #00A69B;
-    border-color: #00A69B;
-    color: #FFF; }
+    color: #FFF;
+    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3);
+    background: linear-gradient(0deg, #008d83, #00c0b3);
+    border-color: #008d83; }
+    .kuiButton--secondary.kuiButton--fill:hover {
+      box-shadow: 0 4px 2px -1px rgba(0, 0, 0, 0.15); }
+    .kuiButton--secondary.kuiButton--fill:active {
+      box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.3); }
     .kuiButton--secondary.kuiButton--fill:hover, .kuiButton--secondary.kuiButton--fill:focus {
-      background-color: #008d83;
-      border-color: #008d83; }
+      background-color: #00736b;
+      border-color: #00736b; }
     .kuiButton--secondary.kuiButton--fill .kuiButton__icon {
       fill: #FFF; }
-  .kuiButton--secondary:hover, .kuiButton--secondary:focus {
-    background-color: rgba(0, 166, 155, 0.1); }
 
 .kuiButton--warning {
-  color: #E5830E;
-  border-color: #E5830E; }
+  color: #c3700c;
+  border-color: rgba(195, 112, 12, 0.3); }
+  .kuiButton--warning:hover, .kuiButton--warning:focus {
+    background-color: rgba(195, 112, 12, 0.1);
+    border-color: rgba(195, 112, 12, 0.5); }
   .kuiButton--warning .kuiButton__icon {
-    fill: #E5830E; }
+    fill: #c3700c; }
   .kuiButton--warning.kuiButton--fill {
-    background-color: #E5830E;
-    border-color: #E5830E;
-    color: #FFF; }
+    color: #FFF;
+    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3);
+    background: linear-gradient(0deg, #c3700c, #f29425);
+    border-color: #c3700c; }
+    .kuiButton--warning.kuiButton--fill:hover {
+      box-shadow: 0 4px 2px -1px rgba(0, 0, 0, 0.15); }
+    .kuiButton--warning.kuiButton--fill:active {
+      box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.3); }
     .kuiButton--warning.kuiButton--fill:hover, .kuiButton--warning.kuiButton--fill:focus {
-      background-color: #cd750d;
-      border-color: #cd750d; }
+      background-color: #ab620a;
+      border-color: #ab620a; }
     .kuiButton--warning.kuiButton--fill .kuiButton__icon {
       fill: #FFF; }
-  .kuiButton--warning:hover, .kuiButton--warning:focus {
-    background-color: rgba(229, 131, 14, 0.1); }
 
 .kuiButton--danger {
   color: #A30000;
-  border-color: #A30000; }
+  border-color: rgba(163, 0, 0, 0.3); }
+  .kuiButton--danger:hover, .kuiButton--danger:focus {
+    background-color: rgba(163, 0, 0, 0.1);
+    border-color: rgba(163, 0, 0, 0.5); }
   .kuiButton--danger .kuiButton__icon {
     fill: #A30000; }
   .kuiButton--danger.kuiButton--fill {
-    background-color: #A30000;
-    border-color: #A30000;
-    color: #FFF; }
+    color: #FFF;
+    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3);
+    background: linear-gradient(0deg, #A30000, #c70000);
+    border-color: #A30000; }
+    .kuiButton--danger.kuiButton--fill:hover {
+      box-shadow: 0 4px 2px -1px rgba(0, 0, 0, 0.15); }
+    .kuiButton--danger.kuiButton--fill:active {
+      box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.3); }
     .kuiButton--danger.kuiButton--fill:hover, .kuiButton--danger.kuiButton--fill:focus {
       background-color: #8a0000;
       border-color: #8a0000; }
     .kuiButton--danger.kuiButton--fill .kuiButton__icon {
       fill: #FFF; }
-  .kuiButton--danger:hover, .kuiButton--danger:focus {
-    background-color: rgba(163, 0, 0, 0.1); }
 
 .kuiButton--ghost {
   color: #FFF;
-  border-color: #FFF; }
+  border-color: rgba(255, 255, 255, 0.3); }
+  .kuiButton--ghost:hover, .kuiButton--ghost:focus {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.5); }
   .kuiButton--ghost .kuiButton__icon {
     fill: #FFF; }
   .kuiButton--ghost.kuiButton--fill {
+    color: #000;
     background-color: #FFF;
-    border-color: #FFF;
-    color: #000; }
+    border-color: #FFF; }
     .kuiButton--ghost.kuiButton--fill:hover, .kuiButton--ghost.kuiButton--fill:focus {
       background-color: #f2f2f2;
       border-color: #f2f2f2; }
     .kuiButton--ghost.kuiButton--fill .kuiButton__icon {
       fill: #000; }
-  .kuiButton--ghost:hover, .kuiButton--ghost:focus {
-    background-color: rgba(255, 255, 255, 0.1); }
 
 .kuiButtonEmpty {
   display: inline-block;
@@ -727,10 +770,10 @@ table {
 
 .kuiCallOut {
   padding: 16px;
-  border-left: 2px solid transparent; }
+  border: 1px solid transparent; }
 
 .kuiCallOut--info {
-  border-color: #0079a5;
+  border-color: rgba(0, 121, 165, 0.2);
   background-color: #e6f2f6; }
   .kuiCallOut--info .kuiCallOutHeader__icon {
     fill: #005574; }
@@ -738,7 +781,7 @@ table {
     color: #005574; }
 
 .kuiCallOut--success {
-  border-color: #00A69B;
+  border-color: rgba(0, 166, 155, 0.2);
   background-color: #e6f6f5; }
   .kuiCallOut--success .kuiCallOutHeader__icon {
     fill: #00746d; }
@@ -746,7 +789,7 @@ table {
     color: #00746d; }
 
 .kuiCallOut--warning {
-  border-color: #E5830E;
+  border-color: rgba(229, 131, 14, 0.2);
   background-color: #fcf3e7; }
   .kuiCallOut--warning .kuiCallOutHeader__icon {
     fill: #a05c0a; }
@@ -754,7 +797,7 @@ table {
     color: #a05c0a; }
 
 .kuiCallOut--danger {
-  border-color: #A30000;
+  border-color: rgba(163, 0, 0, 0.2);
   background-color: #f6e6e6; }
   .kuiCallOut--danger .kuiCallOutHeader__icon {
     fill: #720000; }
@@ -1393,8 +1436,12 @@ table {
               mask: url("../src/components/icon/assets/check.svg") center center no-repeat; }
     .kuiCheckbox .kuiCheckbox__input:focus ~ .kuiCheckbox__square,
     .kuiCheckbox .kuiCheckbox__input:active ~ .kuiCheckbox__square {
-      background-color: #e6f2f6;
-      border-color: #0079a5; }
+      background-color: #FFF;
+      border: 2px solid #0079a5 !important;
+      box-shadow: 0 4px 2px -1px rgba(0, 0, 0, 0.15); }
+    .kuiCheckbox .kuiCheckbox__input:checked:focus ~ .kuiCheckbox__square .kuiCheckbox__check,
+    .kuiCheckbox .kuiCheckbox__input:checked:active ~ .kuiCheckbox__square .kuiCheckbox__check {
+      background-color: #0079a5; }
   .kuiCheckbox .kuiCheckbox__square {
     position: absolute;
     height: 24px;
@@ -1416,12 +1463,10 @@ table {
     font-size: 14px;
     cursor: pointer; }
   .kuiCheckbox.kuiCheckbox--inList .kuiCheckbox__input:checked ~ .kuiCheckbox__square {
-    background: #0079a5;
+    background: #FFF;
     border-color: #0079a5; }
     .kuiCheckbox.kuiCheckbox--inList .kuiCheckbox__input:checked ~ .kuiCheckbox__square .kuiCheckbox__check {
-      background-color: #FFF; }
-  .kuiCheckbox.kuiCheckbox--inList .kuiCheckbox__input:focus:checked ~ .kuiCheckbox__square {
-    background: #3394b7; }
+      background-color: #0079a5; }
 
 .kuiCheckboxGroup__item + .kuiCheckboxGroup__item {
   margin-top: 8px; }
@@ -1548,8 +1593,9 @@ table {
 
 .kuiFormErrorText {
   font-size: 12px;
-  padding: 8px 0;
-  color: #A30000; }
+  padding: 8px;
+  color: #A30000;
+  background-color: #f6e6e6; }
 
 .kuiFormHelpText {
   font-size: 12px;
@@ -1596,7 +1642,9 @@ table {
   .kuiFormRow.kuiFormRow--hasEmptyLabelSpace {
     padding-top: 20px;
     /* 2 */ }
-  .kuiFormRow .kuiFormRow__text + .kuiFormRow__text {
+  .kuiFormRow .kuiFormErrorText + .kuiFormErrorText {
+    padding-top: 0; }
+  .kuiFormRow .kuiFormHelpText + .kuiFormHelpText {
     padding-top: 0; }
 
 .kuiRange {
@@ -1605,17 +1653,24 @@ table {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  margin: 8px 0; }
+  margin: 8px 0;
+  /**
+   * 1. We can't group these selectors or else the styles won't be applied.
+   */ }
   .kuiRange.kuiRange--fullWidth {
     max-width: 100%; }
   .kuiRange:focus::-webkit-slider-thumb {
-    border: 2px solid #0079a5; }
+    /* 1 */
+    border: 2px solid #0079a5;
+    box-shadow: 0 4px 2px -1px rgba(0, 0, 0, 0.15); }
   .kuiRange:focus::-moz-range-thumb {
-    border: 2px solid #0079a5; }
+    /* 1 */
+    border: 2px solid #0079a5;
+    box-shadow: 0 4px 2px -1px rgba(0, 0, 0, 0.15); }
   .kuiRange:focus::-ms-thumb {
-    border: 2px solid #0079a5; }
-  .kuiRange:focus::-webkit-slider-runnable-track {
-    background-color: #0079a5; }
+    /* 1 */
+    border: 2px solid #0079a5;
+    box-shadow: 0 4px 2px -1px rgba(0, 0, 0, 0.15); }
   .kuiRange::-webkit-slider-runnable-track {
     cursor: pointer;
     height: 2px;
@@ -1626,7 +1681,7 @@ table {
     border-radius: 4px; }
   .kuiRange::-webkit-slider-thumb {
     background: #FFF;
-    border: 2px solid #3F3F3F;
+    border: 2px solid #999;
     border-radius: 50%;
     cursor: pointer;
     height: 16px;
@@ -1643,7 +1698,7 @@ table {
     border-radius: 4px; }
   .kuiRange::-moz-range-thumb {
     background: #FFF;
-    border: 2px solid #3F3F3F;
+    border: 2px solid #999;
     border-radius: 50%;
     cursor: pointer;
     height: 16px;
@@ -1667,7 +1722,7 @@ table {
     border-radius: 8px; }
   .kuiRange::-ms-thumb {
     background: #FFF;
-    border: 2px solid #3F3F3F;
+    border: 2px solid #999;
     border-radius: 50%;
     cursor: pointer;
     height: 16px;
@@ -1730,17 +1785,15 @@ table {
     width: 100%;
     height: 100%;
     cursor: pointer; }
-  .kuiSwitch .kuiSwitch__input:focus + .kuiSwitch__body {
-    background: #FFF; }
-    .kuiSwitch .kuiSwitch__input:focus + .kuiSwitch__body .kuiSwitch__thumb {
-      border-color: #0079a5;
-      background-color: #0079a5; }
+  .kuiSwitch .kuiSwitch__input:focus + .kuiSwitch__body .kuiSwitch__thumb {
+    border: 2px solid #0079a5 !important;
+    box-shadow: 0 4px 2px -1px rgba(0, 0, 0, 0.15); }
   .kuiSwitch .kuiSwitch__body {
     pointer-events: none;
     width: 52px;
     height: 24px;
-    background: #fbfbfb;
-    box-shadow: inset 0 0 0 1px #D9D9D9;
+    background-color: rgba(0, 166, 155, 0.1);
+    box-shadow: inset 0 0 0 1px rgba(0, 166, 155, 0.5);
     display: inline-block;
     position: relative;
     border-radius: 24px;
@@ -1753,7 +1806,7 @@ table {
     background-color: #FFF;
     left: 28px;
     border-radius: 50%;
-    border: 1px solid #D9D9D9;
+    border: 1px solid rgba(0, 166, 155, 0.5);
     transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
     transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
     transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1); }
@@ -1777,20 +1830,24 @@ table {
   .kuiSwitch .kuiSwitch__icon--checked {
     right: auto;
     left: -8px;
-    fill: #3F3F3F; }
+    fill: #00a297; }
   .kuiSwitch:hover .kuiSwitch__thumb {
     -webkit-transform: scale(1.05);
             transform: scale(1.05); }
   .kuiSwitch:active .kuiSwitch__thumb {
     -webkit-transform: scale(0.95);
             transform: scale(0.95); }
-  .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body .kuiSwitch__thumb {
-    left: 0; }
-  .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body .kuiSwitch__icon {
-    right: -8px; }
-    .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body .kuiSwitch__icon.kuiSwitch__icon--checked {
-      right: auto;
-      left: -40px; }
+  .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body {
+    background: #fbfbfb;
+    box-shadow: inset 0 0 0 1px #D9D9D9; }
+    .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body .kuiSwitch__thumb {
+      left: 0;
+      border: 1px solid #D9D9D9; }
+    .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body .kuiSwitch__icon {
+      right: -8px; }
+      .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body .kuiSwitch__icon.kuiSwitch__icon--checked {
+        right: auto;
+        left: -40px; }
 
 .kuiTextArea {
   max-width: 400px;
@@ -1921,7 +1978,9 @@ table {
   line-height: 64px;
   padding: 0 16px;
   position: relative;
-  color: #3F3F3F; }
+  color: #0079a5; }
+  .kuiHeaderBreadcrumb:hover {
+    color: #005472; }
   .kuiHeaderBreadcrumb:not(:last-child):after {
     position: absolute;
     top: 24px;
@@ -1932,20 +1991,22 @@ table {
     -webkit-transform: rotate(15deg);
             transform: rotate(15deg);
     background: #D9D9D9; }
-  .kuiHeaderBreadcrumb:not(.kuiHeaderBreadcrumb--collapsed):hover {
+  .kuiHeaderBreadcrumb:not(:last-child) .kuiHeaderBreadcrumb__text {
+    max-width: 150px;
+    text-overflow: ellipsis;
+    overflow: hidden; }
+  .kuiHeaderBreadcrumb:not(.kuiHeaderBreadcrumb--collapsed):not(.kuiHeaderBreadcrumb-isActive):hover {
     text-decoration: underline; }
-  .kuiHeaderBreadcrumb:not(.kuiHeaderBreadcrumb--collapsed):focus {
+  .kuiHeaderBreadcrumb:not(.kuiHeaderBreadcrumb--collapsed):not(.kuiHeaderBreadcrumb-isActive):focus {
     text-decoration: underline;
     background: #e6f2f6; }
   .kuiHeaderBreadcrumb.kuiHeaderBreadcrumb-isActive {
-    color: #999; }
+    color: #3F3F3F;
+    font-weight: 500; }
 
 .kuiHeaderBreadcrumb__text {
   white-space: nowrap;
-  max-width: 150px;
-  display: block;
-  text-overflow: ellipsis;
-  overflow: hidden; }
+  display: block; }
 
 .kuiHeaderBreadcrumb--collapsed {
   color: #D9D9D9; }
@@ -1991,7 +2052,7 @@ table {
     position: absolute;
     content: "";
     width: 1px;
-    top: 16px;
+    top: 0;
     bottom: 0;
     background: #D9D9D9;
     left: 0; }
@@ -2464,10 +2525,10 @@ table {
             transform: rotate(359deg); } }
 
 .kuiModal {
-  box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
   background-color: #FFF;
   border: 1px solid #D9D9D9;
   border-radius: 4px;
+  box-shadow: 0 1px 8px -1px rgba(0, 0, 0, 0.15), 0 16px 16px -8px rgba(0, 0, 0, 0.1);
   z-index: 8000;
   padding: 32px;
   min-width: 50%;
@@ -2740,8 +2801,12 @@ table {
     padding: 16px; }
   .kuiPanel.kuiPanel--paddingLarge {
     padding: 24px; }
+  .kuiPanel.kuiPanel--paddingXLarge {
+    padding: 32px; }
+  .kuiPanel.kuiPanel--paddingXXLarge {
+    padding: 40px; }
   .kuiPanel.kuiPanel--shadow {
-    box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); }
+    box-shadow: 0 1px 8px -1px rgba(0, 0, 0, 0.15), 0 16px 16px -8px rgba(0, 0, 0, 0.1); }
   .kuiPanel.kuiPanel--flexGrowZero {
     -webkit-box-flex: 0;
     -webkit-flex-grow: 0;
@@ -3121,35 +3186,35 @@ table {
   .kuiProgress::-moz-progress-bar {
     transition: width 250ms linear; }
   .kuiProgress.kuiProgress--primary::-webkit-progress-value {
-    background-color: #0079a5; }
+    background-color: rgba(0, 121, 165, 0.6); }
   .kuiProgress.kuiProgress--primary::-moz-progress-bar {
-    background-color: #0079a5; }
+    background-color: rgba(0, 121, 165, 0.6); }
   .kuiProgress.kuiProgress--primary.kuiProgress--indeterminate:before {
-    background-color: #0079a5; }
+    background-color: rgba(0, 121, 165, 0.6); }
   .kuiProgress.kuiProgress--secondary::-webkit-progress-value {
-    background-color: #00A69B; }
+    background-color: rgba(0, 166, 155, 0.75); }
   .kuiProgress.kuiProgress--secondary::-moz-progress-bar {
-    background-color: #00A69B; }
+    background-color: rgba(0, 166, 155, 0.75); }
   .kuiProgress.kuiProgress--secondary.kuiProgress--indeterminate:before {
-    background-color: #00A69B; }
+    background-color: rgba(0, 166, 155, 0.75); }
   .kuiProgress.kuiProgress--warning::-webkit-progress-value {
-    background-color: #E5830E; }
+    background-color: rgba(229, 131, 14, 0.75); }
   .kuiProgress.kuiProgress--warning::-moz-progress-bar {
-    background-color: #E5830E; }
+    background-color: rgba(229, 131, 14, 0.75); }
   .kuiProgress.kuiProgress--warning.kuiProgress--indeterminate:before {
-    background-color: #E5830E; }
+    background-color: rgba(229, 131, 14, 0.75); }
   .kuiProgress.kuiProgress--danger::-webkit-progress-value {
-    background-color: #A30000; }
+    background-color: #d60000; }
   .kuiProgress.kuiProgress--danger::-moz-progress-bar {
-    background-color: #A30000; }
+    background-color: #d60000; }
   .kuiProgress.kuiProgress--danger.kuiProgress--indeterminate:before {
-    background-color: #A30000; }
+    background-color: #d60000; }
   .kuiProgress.kuiProgress--accent::-webkit-progress-value {
-    background-color: #DD0A73; }
+    background-color: rgba(221, 10, 115, 0.5); }
   .kuiProgress.kuiProgress--accent::-moz-progress-bar {
-    background-color: #DD0A73; }
+    background-color: rgba(221, 10, 115, 0.5); }
   .kuiProgress.kuiProgress--accent.kuiProgress--indeterminate:before {
-    background-color: #DD0A73; }
+    background-color: rgba(221, 10, 115, 0.5); }
   .kuiProgress.kuiProgress--subdued::-webkit-progress-value {
     background-color: #999; }
   .kuiProgress.kuiProgress--subdued::-moz-progress-bar {
@@ -3207,6 +3272,9 @@ table {
   position: relative;
   height: 100%; }
 
+.kuiSideNav__content {
+  padding: 12px; }
+
 .kuiSideNav__mobileToggle {
   display: none;
   border-bottom: 1px solid #D9D9D9;
@@ -3311,42 +3379,27 @@ table {
   display: block;
   width: 100%;
   text-align: left;
-  padding: 4px 8px;
+  padding: 2px 0;
   color: #666;
   white-space: nowrap;
   overflow: hidden;
-  text-overflow: ellipsis;
-  border: 1px solid #D9D9D9;
-  border-color: transparent; }
+  text-overflow: ellipsis; }
   .kuiSideNavItem.kuiSideNavItem-isSelected {
-    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
-    color: #00A69B;
-    border-left: 2px solid #D9D9D9;
-    border-left-color: #00A69B;
-    background-color: #FFF; }
+    color: #3F3F3F;
+    font-weight: 500;
+    cursor: default; }
   .kuiSideNavItem.kuiSideNavItem--indent {
-    margin-left: 16px;
-    font-size: 14px;
-    padding: 2px 8px;
-    border-left: 1px solid #D9D9D9;
-    border-left-color: #D9D9D9; }
-    .kuiSideNavItem.kuiSideNavItem--indent.kuiSideNavItem-isSelected {
-      border-left-color: #00A69B;
-      background-color: transparent;
-      box-shadow: none; }
-  .kuiSideNavItem:hover {
+    padding-left: 8px; }
+  .kuiSideNavItem:hover:not(.kuiSideNavItem-isSelected), .kuiSideNavItem:focus:not(.kuiSideNavItem-isSelected) {
+    color: #3F3F3F;
     text-decoration: underline; }
-  .kuiSideNavItem:focus {
-    background-color: #e6f2f6 !important; }
-  .kuiSideNavItem:focus:not(.kuiSideNavItem-isSelected) {
-    border: solid 1px #c1dfe9; }
 
 .kuiSideNavTitle {
   font-size: 16px;
   font-size: 1rem;
   line-height: 1.5;
   font-weight: 500;
-  margin-bottom: 8px;
+  margin-bottom: 2px;
   margin-top: 16px;
   /**
    * 1. Only want the first title to have margin. Since buttons exist in nav
@@ -3386,37 +3439,42 @@ table {
   font-size: 0.875rem;
   line-height: 1.5;
   width: 100%;
-  border: none;
+  border: 1px solid #E4E4E4;
   border-collapse: collapse;
   background-color: #FFF; }
 
 .kuiTable--compressed .kuiTableCellContent {
   padding: 8px; }
 
-.kuiTable--compressed .kuiTableHeaderButton:focus {
-  outline: solid 8px #e6f2f6; }
-
 .kuiTableHeaderCell {
   max-width: 20px;
   /* 1 */
   vertical-align: middle;
+  background-color: #F5F5F5;
   color: #000; }
-  .kuiTableHeaderCell .kuiTableHeaderButton {
-    text-align: left; }
 
 .kuiTableHeaderCellCheckbox {
   width: 36px;
-  vertical-align: middle; }
+  vertical-align: middle;
+  background-color: #F5F5F5;
+  /**
+   * 1. Allow checkbox box-shadow to be visible.
+   */ }
   .kuiTableHeaderCellCheckbox .kuiTableCellContent {
     padding-right: 0;
     padding-top: 0;
     padding-bottom: 0; }
+  .kuiTableHeaderCellCheckbox .kuiTableCellContent {
+    overflow: visible;
+    /* 1 */ }
 
 .kuiTableHeaderButton {
   font-size: 14px;
   font-size: 0.875rem;
   line-height: 1.5;
+  text-align: left;
   color: inherit;
+  font-weight: inherit;
   width: 100%; }
   .kuiTableHeaderButton:hover, .kuiTableHeaderButton:focus {
     text-decoration: underline;
@@ -3425,7 +3483,7 @@ table {
       display: block;
       fill: #0079a5; }
   .kuiTableHeaderButton:focus {
-    background: #e6f2f6; }
+    box-shadow: inset 0 -2px 0 0 #0079a5; }
 
 .kuiTableSortIcon {
   margin-left: 4px;
@@ -3435,28 +3493,54 @@ table {
 
 .kuiTableRow {
   transition: background-color 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); }
-  .kuiTableRow:hover {
+  .kuiTableRow:hover:not(.kuiTableRow-isSelected) {
     background-color: #fafafa; }
+    .kuiTableRow:hover:not(.kuiTableRow-isSelected) .kuiTableRowCell,
+    .kuiTableRow:hover:not(.kuiTableRow-isSelected) .kuiTableRowCellCheckbox {
+      border-color: #D9D9D9; }
+    .kuiTableRow:hover:not(.kuiTableRow-isSelected) + .kuiTableRow .kuiTableRowCell,
+    .kuiTableRow:hover:not(.kuiTableRow-isSelected) + .kuiTableRow .kuiTableRowCellCheckbox {
+      border-color: #D9D9D9; }
   .kuiTableRow.kuiTableRow-isSelected {
     background-color: rgba(0, 121, 165, 0.05); }
+    .kuiTableRow.kuiTableRow-isSelected:hover {
+      background-color: rgba(0, 121, 165, 0.1); }
+      .kuiTableRow.kuiTableRow-isSelected:hover .kuiTableRowCell,
+      .kuiTableRow.kuiTableRow-isSelected:hover .kuiTableRowCellCheckbox {
+        border-color: rgba(0, 121, 165, 0.3); }
+      .kuiTableRow.kuiTableRow-isSelected:hover + .kuiTableRow .kuiTableRowCell,
+      .kuiTableRow.kuiTableRow-isSelected:hover + .kuiTableRow .kuiTableRowCellCheckbox {
+        border-top-color: rgba(0, 121, 165, 0.3); }
 
 .kuiTableRowCell {
   max-width: 20px;
   /* 1 */
   vertical-align: middle;
   color: #3F3F3F;
-  border-top: 1px solid #D9D9D9;
-  border-bottom: 1px solid #D9D9D9; }
+  border-top: 1px solid #E4E4E4; }
+  .kuiTableRowCell:first-child {
+    border-left: 1px solid #E4E4E4; }
+  .kuiTableRowCell:last-child {
+    border-right: 1px solid #E4E4E4; }
 
 .kuiTableRowCellCheckbox {
   width: 36px;
   vertical-align: middle;
-  border-top: 1px solid #D9D9D9;
-  border-bottom: 1px solid #D9D9D9; }
+  border-top: 1px solid #E4E4E4;
+  /**
+   * 1. Allow checkbox box-shadow to be visible.
+   */ }
   .kuiTableRowCellCheckbox .kuiTableCellContent {
     padding-right: 0;
     padding-top: 0;
     padding-bottom: 0; }
+  .kuiTableRowCellCheckbox:first-child {
+    border-left: 1px solid #E4E4E4; }
+  .kuiTableRowCellCheckbox:last-child {
+    border-right: 1px solid #E4E4E4; }
+  .kuiTableRowCellCheckbox .kuiTableCellContent {
+    overflow: visible;
+    /* 1 */ }
 
 /**
  * 1. Vertically align all children.
@@ -3493,7 +3577,10 @@ table {
           justify-content: flex-end; }
 
 .kuiTableCellContent--wrapText {
-  white-space: normal; }
+  white-space: normal;
+  overflow: visible; }
+  .kuiTableCellContent--wrapText .kuiTableCellContent__text {
+    overflow: visible; }
 
 .kuiTabs {
   display: -webkit-box;
@@ -3520,7 +3607,7 @@ table {
     text-decoration: underline; }
   .kuiTab.kuiTab-isSelected {
     cursor: default;
-    color: #00A69B; }
+    color: #0079a5; }
     .kuiTab.kuiTab-isSelected:after {
       position: absolute;
       bottom: -1px;
@@ -3528,7 +3615,7 @@ table {
       content: ' ';
       width: 100%;
       height: 2px;
-      background-color: #00A69B;
+      background-color: #0079a5;
       -webkit-animation: kuiTab 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
               animation: kuiTab 150ms cubic-bezier(0.694, 0.0482, 0.335, 1); }
 
@@ -3561,17 +3648,20 @@ table {
   font-weight: 300;
   font-size: 24px;
   font-size: 1.5rem;
-  line-height: 1.5; }
+  line-height: 1.5;
+  font-weight: 400; }
 
 .kuiTitle--small {
   font-size: 16px;
   font-size: 1rem;
-  line-height: 1.5; }
+  line-height: 1.5;
+  font-weight: 400; }
 
 .kuiTitle--large {
   font-size: 32px;
   font-size: 2rem;
-  line-height: 1.5; }
+  line-height: 1.5;
+  font-weight: 400; }
 
 /**
  * 1. Allow list to expand as items are added, but cap it at the screen height.
@@ -3662,7 +3752,7 @@ table {
     /* 1 */ } }
 
 .kuiToast {
-  box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 8px -1px rgba(0, 0, 0, 0.15), 0 16px 16px -8px rgba(0, 0, 0, 0.1);
   position: relative;
   padding: 16px;
   background-color: #FFF;
@@ -3747,7 +3837,7 @@ table {
 
 .kuiToastHeader__title {
   color: #000;
-  font-weight: 300; }
+  font-weight: 400; }
 
 .kuiToastHeader--withBody {
   margin-bottom: 12px; }
diff --git a/ui_framework/doc_site/src/views/advanced_settings/advanced_settings.js b/ui_framework/doc_site/src/views/advanced_settings/advanced_settings.js
index 3f6f767c93925..aaf64e2f609c8 100644
--- a/ui_framework/doc_site/src/views/advanced_settings/advanced_settings.js
+++ b/ui_framework/doc_site/src/views/advanced_settings/advanced_settings.js
@@ -107,7 +107,7 @@ export default class extends Component {
         </KuiHeaderBreadcrumb>
 
         <KuiHeaderBreadcrumb href="#" isActive>
-          Advanced settings
+          Kibana Advanced settings &raquo; General
         </KuiHeaderBreadcrumb>
       </KuiHeaderBreadcrumbs>
     );
@@ -388,7 +388,7 @@ export default class extends Component {
             Kibana
           </KuiSideNavTitle>
 
-          <KuiSideNavItem isSelected>
+          <KuiSideNavItem>
             <button>
               Advanced settings
             </button>
diff --git a/ui_framework/doc_site/src/views/kibana/kibana.js b/ui_framework/doc_site/src/views/kibana/kibana.js
index 4d21cc84de88b..10a18e3a9c2c3 100644
--- a/ui_framework/doc_site/src/views/kibana/kibana.js
+++ b/ui_framework/doc_site/src/views/kibana/kibana.js
@@ -6,18 +6,19 @@ import React, {
 import {
   KuiAvatar,
   KuiButton,
+  KuiCallOut,
   KuiFlexGroup,
   KuiFlexItem,
+  KuiGlobalToastList,
+  KuiGlobalToastListItem,
   KuiHeader,
+  KuiHeaderAlert,
   KuiHeaderBreadcrumb,
-  KuiHeaderBreadcrumbCollapsed,
   KuiHeaderBreadcrumbs,
   KuiHeaderLogo,
   KuiHeaderSection,
   KuiHeaderSectionItem,
   KuiHeaderSectionItemButton,
-  KuiGlobalToastList,
-  KuiGlobalToastListItem,
   KuiIcon,
   KuiKeyPadMenu,
   KuiKeyPadMenuItem,
@@ -28,18 +29,15 @@ import {
   KuiPageContentBody,
   KuiPageContentHeader,
   KuiPageContentHeaderSection,
-  KuiPageHeader,
-  KuiPageHeaderSection,
   KuiPageSideBar,
   KuiPopover,
   KuiSideNav,
   KuiSideNavItem,
   KuiSideNavTitle,
-  KuiToast,
-  KuiTitle,
-  KuiText,
   KuiSpacer,
-  KuiHeaderAlert,
+  KuiText,
+  KuiTitle,
+  KuiToast,
 } from '../../../../components';
 
 import {
@@ -161,18 +159,8 @@ export default class extends Component {
           Management
         </KuiHeaderBreadcrumb>
 
-        <KuiHeaderBreadcrumb href="#">
-          Truncation test is here
-        </KuiHeaderBreadcrumb>
-
-        <KuiHeaderBreadcrumbCollapsed />
-
-        <KuiHeaderBreadcrumb href="#">
-          Users
-        </KuiHeaderBreadcrumb>
-
         <KuiHeaderBreadcrumb href="#" isActive>
-          Create
+          Elasticsearch Watches
         </KuiHeaderBreadcrumb>
       </KuiHeaderBreadcrumbs>
     );
@@ -430,16 +418,9 @@ export default class extends Component {
   renderPage() {
     return (
       <KuiPage>
-        <KuiPageHeader>
-          <KuiPageHeaderSection>
-            <KuiTitle size="large">
-              <h1>Management</h1>
-            </KuiTitle>
-          </KuiPageHeaderSection>
-        </KuiPageHeader>
         <KuiPageBody>
           {this.renderSideNav()}
-          <KuiPageContent>
+          <KuiPageContent panelPaddingSize="xxl">
             <KuiPageContentHeader>
               <KuiPageContentHeaderSection>
                 <KuiTitle>
@@ -468,8 +449,21 @@ export default class extends Component {
                 </KuiFlexGroup>
               </KuiPageContentHeaderSection>
             </KuiPageContentHeader>
+
             <KuiPageContentBody>
-              <Table />
+              <KuiCallOut
+                title="Watch saved"
+                type="success"
+                iconType="user"
+              >
+                <p>
+                  Your <KuiLink href="#">new watch</KuiLink> has been saved.
+                </p>
+              </KuiCallOut>
+
+              <KuiSpacer size="m" />
+
+              <Table compressed />
             </KuiPageContentBody>
           </KuiPageContent>
         </KuiPageBody>
diff --git a/ui_framework/doc_site/src/views/table/table.js b/ui_framework/doc_site/src/views/table/table.js
index 03b9ecfac952e..4d6b1ad31d02b 100644
--- a/ui_framework/doc_site/src/views/table/table.js
+++ b/ui_framework/doc_site/src/views/table/table.js
@@ -11,6 +11,7 @@ import {
   KuiFlexItem,
   KuiFieldSearch,
   KuiSpacer,
+  KuiSwitch,
   KuiTable,
   KuiTableBody,
   KuiTableHeader,
@@ -36,133 +37,188 @@ export class Table extends Component {
         2: true,
       },
       sortedColumn: 'title',
+      items: [{
+        id: 0,
+        title: 'A very long line which will not wrap on narrower screens and instead will become truncated and replaced by an ellipsis',
+        type: 'user',
+        dateCreated: 'Tue Dec 06 2016 12:56:15 GMT-0800 (PST)',
+        isActive: {
+          value: true,
+          isWrapped: true,
+        },
+        magnitude: 1,
+      }, {
+        id: 1,
+        title: {
+          value: 'A very long line which will wrap on narrower screens and NOT become truncated and replaced by an ellipsis',
+          isWrapped: true,
+        },
+        type: 'user',
+        dateCreated: 'Tue Dec 01 2016 12:56:15 GMT-0800 (PST)',
+        isActive: {
+          value: true,
+          isWrapped: true,
+        },
+        magnitude: 1,
+      }, {
+        id: 2,
+        title: {
+          value: 'Boomerang',
+          isLink: true,
+        },
+        type: 'user',
+        dateCreated: 'Tue Dec 28 2016 12:56:15 GMT-0800 (PST)',
+        isActive: {
+          value: false,
+          isWrapped: true,
+        },
+        magnitude: 10,
+      }, {
+        id: 3,
+        title: {
+          value: 'Celebration',
+          isLink: true,
+        },
+        type: 'user',
+        dateCreated: 'Tue Dec 16 2016 12:56:15 GMT-0800 (PST)',
+        isActive: {
+          value: false,
+          isWrapped: true,
+        },
+        magnitude: 100,
+      }, {
+        id: 4,
+        title: {
+          value: 'Dog',
+          isLink: true,
+        },
+        type: 'user',
+        dateCreated: 'Tue Dec 13 2016 12:56:15 GMT-0800 (PST)',
+        isActive: {
+          value: false,
+          isWrapped: true,
+        },
+        magnitude: 1000,
+      }, {
+        id: 5,
+        title: {
+          value: 'Dragon',
+          isLink: true,
+        },
+        type: 'user',
+        dateCreated: 'Tue Dec 11 2016 12:56:15 GMT-0800 (PST)',
+        isActive: {
+          value: true,
+          isWrapped: true,
+        },
+        magnitude: 10000,
+      }, {
+        id: 6,
+        title: {
+          value: 'Bear',
+          isLink: true,
+        },
+        type: 'user',
+        dateCreated: 'Tue Dec 11 2016 12:56:15 GMT-0800 (PST)',
+        isActive: {
+          value: false,
+          isWrapped: true,
+        },
+        magnitude: 10000,
+      }, {
+        id: 7,
+        title: {
+          value: 'Dinosaur',
+          isLink: true,
+        },
+        type: 'user',
+        dateCreated: 'Tue Dec 11 2016 12:56:15 GMT-0800 (PST)',
+        isActive: {
+          value: false,
+          isWrapped: true,
+        },
+        magnitude: 10000,
+      }, {
+        id: 8,
+        title: {
+          value: 'Spider',
+          isLink: true,
+        },
+        type: 'user',
+        dateCreated: 'Tue Dec 11 2016 12:56:15 GMT-0800 (PST)',
+        isActive: {
+          value: true,
+          isWrapped: true,
+        },
+        magnitude: 10000,
+      }, {
+        id: 9,
+        title: {
+          value: 'Bugbear',
+          isLink: true,
+        },
+        type: 'user',
+        dateCreated: 'Tue Dec 11 2016 12:56:15 GMT-0800 (PST)',
+        isActive: {
+          value: true,
+          isWrapped: true,
+        },
+        magnitude: 10000,
+      }, {
+        id: 10,
+        title: {
+          value: 'Bear',
+          isLink: true,
+        },
+        type: 'user',
+        dateCreated: 'Tue Dec 11 2016 12:56:15 GMT-0800 (PST)',
+        isActive: {
+          value: true,
+          isWrapped: true,
+        },
+        magnitude: 10000,
+      }, {
+        id: 11,
+        title: {
+          value: 'Dinosaur',
+          isLink: true,
+        },
+        type: 'user',
+        dateCreated: 'Tue Dec 11 2016 12:56:15 GMT-0800 (PST)',
+        isActive: {
+          value: false,
+          isWrapped: true,
+        },
+        magnitude: 10000,
+      }, {
+        id: 12,
+        title: {
+          value: 'Spider',
+          isLink: true,
+        },
+        type: 'user',
+        dateCreated: 'Tue Dec 11 2016 12:56:15 GMT-0800 (PST)',
+        isActive: {
+          value: false,
+          isWrapped: true,
+        },
+        magnitude: 10000,
+      }, {
+        id: 13,
+        title: {
+          value: 'Bugbear',
+          isLink: true,
+        },
+        type: 'user',
+        dateCreated: 'Tue Dec 11 2016 12:56:15 GMT-0800 (PST)',
+        isActive: {
+          value: false,
+          isWrapped: true,
+        },
+        magnitude: 10000,
+      }],
     };
 
-    this.items = [{
-      id: 0,
-      title: 'A very long line which will not wrap on narrower screens and instead will become truncated and replaced by an ellipsis',
-      type: 'user',
-      dateCreated: 'Tue Dec 06 2016 12:56:15 GMT-0800 (PST)',
-      magnitude: 1,
-    }, {
-      id: 1,
-      title: {
-        value: 'A very long line which will wrap on narrower screens and NOT become truncated and replaced by an ellipsis',
-        isWrapped: true,
-      },
-      type: 'user',
-      dateCreated: 'Tue Dec 01 2016 12:56:15 GMT-0800 (PST)',
-      magnitude: 1,
-    }, {
-      id: 2,
-      title: {
-        value: 'Boomerang',
-        isLink: true,
-      },
-      type: 'user',
-      dateCreated: 'Tue Dec 28 2016 12:56:15 GMT-0800 (PST)',
-      magnitude: 10,
-    }, {
-      id: 3,
-      title: {
-        value: 'Celebration',
-        isLink: true,
-      },
-      type: 'user',
-      dateCreated: 'Tue Dec 16 2016 12:56:15 GMT-0800 (PST)',
-      magnitude: 100,
-    }, {
-      id: 4,
-      title: {
-        value: 'Dog',
-        isLink: true,
-      },
-      type: 'user',
-      dateCreated: 'Tue Dec 13 2016 12:56:15 GMT-0800 (PST)',
-      magnitude: 1000,
-    }, {
-      id: 5,
-      title: {
-        value: 'Dragon',
-        isLink: true,
-      },
-      type: 'user',
-      dateCreated: 'Tue Dec 11 2016 12:56:15 GMT-0800 (PST)',
-      magnitude: 10000,
-    }, {
-      id: 6,
-      title: {
-        value: 'Bear',
-        isLink: true,
-      },
-      type: 'user',
-      dateCreated: 'Tue Dec 11 2016 12:56:15 GMT-0800 (PST)',
-      magnitude: 10000,
-    }, {
-      id: 7,
-      title: {
-        value: 'Dinosaur',
-        isLink: true,
-      },
-      type: 'user',
-      dateCreated: 'Tue Dec 11 2016 12:56:15 GMT-0800 (PST)',
-      magnitude: 10000,
-    }, {
-      id: 8,
-      title: {
-        value: 'Spider',
-        isLink: true,
-      },
-      type: 'user',
-      dateCreated: 'Tue Dec 11 2016 12:56:15 GMT-0800 (PST)',
-      magnitude: 10000,
-    }, {
-      id: 9,
-      title: {
-        value: 'Bugbear',
-        isLink: true,
-      },
-      type: 'user',
-      dateCreated: 'Tue Dec 11 2016 12:56:15 GMT-0800 (PST)',
-      magnitude: 10000,
-    }, {
-      id: 10,
-      title: {
-        value: 'Bear',
-        isLink: true,
-      },
-      type: 'user',
-      dateCreated: 'Tue Dec 11 2016 12:56:15 GMT-0800 (PST)',
-      magnitude: 10000,
-    }, {
-      id: 11,
-      title: {
-        value: 'Dinosaur',
-        isLink: true,
-      },
-      type: 'user',
-      dateCreated: 'Tue Dec 11 2016 12:56:15 GMT-0800 (PST)',
-      magnitude: 10000,
-    }, {
-      id: 12,
-      title: {
-        value: 'Spider',
-        isLink: true,
-      },
-      type: 'user',
-      dateCreated: 'Tue Dec 11 2016 12:56:15 GMT-0800 (PST)',
-      magnitude: 10000,
-    }, {
-      id: 13,
-      title: {
-        value: 'Bugbear',
-        isLink: true,
-      },
-      type: 'user',
-      dateCreated: 'Tue Dec 11 2016 12:56:15 GMT-0800 (PST)',
-      magnitude: 10000,
-    }];
-
     this.sortableProperties = new SortableProperties([{
       name: 'title',
       getValue: item => item.title.toLowerCase(),
@@ -197,11 +253,19 @@ export class Table extends Component {
       label: 'Date created',
       alignment: LEFT_ALIGNMENT,
       isSortable: true,
+    }, {
+      id: 'on',
+      label: 'Active',
+      alignment: LEFT_ALIGNMENT,
+      isSortable: true,
+      isSwitch: true,
+      width: '100px',
     }, {
       id: 'magnitude',
       label: 'Orders of magnitude',
       alignment: RIGHT_ALIGNMENT,
       isSortable: true,
+      width: '200px',
     }];
   }
 
@@ -211,43 +275,54 @@ export class Table extends Component {
     this.setState({
       sortedColumn: prop,
     });
-  }
+  };
+
+  onSwitchChange = itemId => {
+    const items = this.state.items.slice(0);
+    const item = items.find(item => item.id === itemId);
+    item.isActive.value = !item.isActive.value;
+
+    this.setState({
+      items,
+    });
+  };
 
   toggleItem = itemId => {
-    const newItemIdToSelectedMap = Object.assign({}, this.state.itemIdToSelectedMap, {
+    const newItemIdToSelectedMap = {
+      ...this.state.itemIdToSelectedMap,
       [itemId]: !this.state.itemIdToSelectedMap[itemId],
-    });
+    };
 
     this.setState({
       itemIdToSelectedMap: newItemIdToSelectedMap,
     });
-  }
+  };
 
   toggleAll = () => {
     const allSelected = this.areAllItemsSelected();
     const newItemIdToSelectedMap = {};
-    this.items.forEach(item => newItemIdToSelectedMap[item.id] = !allSelected);
+    this.state.items.forEach(item => newItemIdToSelectedMap[item.id] = !allSelected);
 
 
     this.setState({
       itemIdToSelectedMap: newItemIdToSelectedMap,
     });
-  }
+  };
 
   isItemSelected = itemId => {
     return this.state.itemIdToSelectedMap[itemId];
-  }
+  };
 
   areAllItemsSelected = () => {
-    const indexOfUnselectedItem = this.items.findIndex(item => !this.isItemSelected(item.id));
+    const indexOfUnselectedItem = this.state.items.findIndex(item => !this.isItemSelected(item.id));
     return indexOfUnselectedItem === -1;
-  }
+  };
 
   areAnyRowsSelected = () => {
     return Object.keys(this.state.itemIdToSelectedMap).findIndex(id => {
       return this.state.itemIdToSelectedMap[id];
     }) !== -1;
-  }
+  };
 
   renderHeaderCells() {
     return this.columns.map((column, columnIndex) => {
@@ -283,7 +358,7 @@ export class Table extends Component {
   }
 
   renderRows() {
-    return this.items.map(item => {
+    return this.state.items.map(item => {
       const cells = this.columns.map(column => {
         const cell = item[column.id];
 
@@ -300,7 +375,25 @@ export class Table extends Component {
               />
             </KuiTableRowCellCheckbox>
           );
-        } else if (column.cellProvider) {
+        }
+
+        if (column.isSwitch) {
+          return (
+            <KuiTableRowCell
+              key={column.id}
+              align={column.alignment}
+              wrapText={item.isActive.isWrapped}
+            >
+              <KuiSwitch
+                id={`${item.id}-switch`}
+                checked={item.isActive.value}
+                onChange={this.onSwitchChange.bind(this, item.id)}
+              />
+            </KuiTableRowCell>
+          );
+        }
+
+        if (column.cellProvider) {
           child = column.cellProvider(cell);
         } else if (cell.isLink) {
           child = <KuiLink href="">{cell.value}</KuiLink>;
@@ -351,13 +444,13 @@ export class Table extends Component {
             <KuiFieldSearch fullWidth placeholder="Search..." />
           </KuiFlexItem>
           <KuiFlexItem grow={false}>
-            <KuiButton type="primary">Add new thing</KuiButton>
+            <KuiButton fill type="primary">Add new thing</KuiButton>
           </KuiFlexItem>
         </KuiFlexGroup>
 
         <KuiSpacer size="m" />
 
-        <KuiTable>
+        <KuiTable compressed={this.props.compressed}>
           <KuiTableHeader>
             {this.renderHeaderCells()}
           </KuiTableHeader>
diff --git a/ui_framework/src/components/badge/_badge.scss b/ui_framework/src/components/badge/_badge.scss
index 6d036515ee6ca..6f9f41110aa2c 100644
--- a/ui_framework/src/components/badge/_badge.scss
+++ b/ui_framework/src/components/badge/_badge.scss
@@ -5,7 +5,7 @@
   text-decoration: none;
   border: solid 1px transparent;
   border-radius: $kuiSizeL;
-  padding: 0 $kuiSizeS;
+  padding: 0 $kuiSizeM;
   background-color: transparent;
   white-space: nowrap;
   vertical-align: middle;
@@ -32,17 +32,43 @@
 
 // Modifier naming and colors.
 $badgeTypes: (
-  default: $kuiColorLightShade,
-  primary: $kuiColorPrimary,
-  secondary: $kuiColorSecondary,
-  warning: $kuiColorWarning,
-  danger: $kuiColorDanger,
-  accent: $kuiColorAccent
+  default: (
+    textColor: darken($kuiColorLightShade, 60%),
+    backgroundColor: transparentize($kuiColorLightShade, 0.6)
+  ),
+  primary: (
+    textColor: darken($kuiColorPrimary, 10%),
+    backgroundColor: transparentize($kuiColorPrimary, 0.9)
+  ),
+  secondary: (
+    textColor: darken($kuiColorSecondary, 10%),
+    backgroundColor: transparentize($kuiColorSecondary, 0.9)
+  ),
+  warning: (
+    textColor: darken($kuiColorWarning, 20%),
+    backgroundColor: transparentize($kuiColorWarning, 0.85)
+  ),
+  danger: (
+    textColor: $kuiColorDanger,
+    backgroundColor: transparentize($kuiColorDanger, 0.9)
+  ),
+  accent: (
+    textColor: darken($kuiColorAccent, 5%),
+    backgroundColor: transparentize($kuiColorAccent, 0.9)
+  ),
 );
 
 @each $name, $color in $badgeTypes {
+  $textColor: map-get($color, textColor);
+  $backgroundColor: map-get($color, backgroundColor);
+
   .kuiBadge--#{$name} {
-    border-color: $color;
-    background-color: transparentize($color, .9);
+    color: $textColor;
+    background-color: $backgroundColor;
+    border-color: transparentize($textColor, 0.8);
+
+    svg {
+      fill: $textColor;
+    }
   }
 }
diff --git a/ui_framework/src/components/button/_button.scss b/ui_framework/src/components/button/_button.scss
index 2e16204731ce8..880cebf90146b 100644
--- a/ui_framework/src/components/button/_button.scss
+++ b/ui_framework/src/components/button/_button.scss
@@ -67,39 +67,78 @@
 
 // Modifier naming and colors.
 $buttonTypes: (
-  primary: $kuiColorPrimary,
-  secondary: $kuiColorSecondary,
-  warning: $kuiColorWarning,
-  danger: $kuiColorDanger,
-  ghost: $kuiColorGhost, // Ghost is special, and does not care about theming.
+  primary: (
+    dark: $kuiColorPrimary,
+    light: lighten($kuiColorPrimary, 10%)
+  ),
+  secondary: (
+    dark: darken($kuiColorSecondary, 5%),
+    light: lighten($kuiColorSecondary, 5%)
+  ),
+  warning: (
+    dark: darken($kuiColorWarning, 7%),
+    light: lighten($kuiColorWarning, 7%)
+  ),
+  danger: (
+    dark: $kuiColorDanger,
+    light: lighten($kuiColorDanger, 7%)
+  ),
+  ghost: (
+    dark: $kuiColorGhost, // Ghost is special, and does not care about theming.
+    light: $kuiColorGhost,
+  )
 );
 
 // Create button modifiders based upon the map.
 @each $name, $color in $buttonTypes {
+  $colorDark: map-get($color, dark);
+  $colorLight: map-get($color, light);
+
   .kuiButton--#{$name} {
-    color: $color;
-    border-color: $color;
+    color: $colorDark;
+    border-color: transparentize($colorDark, 0.7);
+
+    &:hover, &:focus {
+      background-color: transparentize($colorDark, 0.9);
+      border-color: transparentize($colorDark, 0.5);
+
+      @if ($name == 'disabled') {
+        cursor: not-allowed;
+      }
+    }
 
     .kuiButton__icon {
-      fill: $color;
+      fill: $colorDark;
     }
 
     &.kuiButton--fill {
-      background-color: $color;
-      border-color: $color;
-
       @if ($name == 'ghost') {
         color: #000;
-      } @elseif (lightness($kuiTextColor) > 50) {
-        color: $kuiTextColor;
+        background-color: $colorDark;
+        border-color: $colorDark;
       } @else {
-        color: #FFF;
-      }
+        @if (lightness($kuiTextColor) > 50) {
+          color: $kuiTextColor;
+        } @else {
+          color: #FFF;
+        }
 
+        box-shadow: $kuiSmallShadow;
+        background: linear-gradient(0deg, $colorDark, $colorLight);
+        border-color: $colorDark;
+
+        &:hover {
+          box-shadow: $kuiSmallShadowHover;
+        }
+
+        &:active {
+          box-shadow: $kuiSmallShadowActive;
+        }
+      }
 
       &:hover, &:focus {
-        background-color: darken($color, 5%);
-        border-color: darken($color, 5%);
+        background-color: darken($colorDark, 5%);
+        border-color: darken($colorDark, 5%);
       }
 
       .kuiButton__icon {
@@ -112,13 +151,5 @@ $buttonTypes: (
         }
       }
     }
-
-    &:hover, &:focus {
-      background-color: transparentize($color, .9);
-
-      @if ($name == 'disabled') {
-        cursor: not-allowed;
-      }
-    }
   }
 }
diff --git a/ui_framework/src/components/call_out/_call_out.scss b/ui_framework/src/components/call_out/_call_out.scss
index 8ce78f71b0db0..42c5f162b6745 100644
--- a/ui_framework/src/components/call_out/_call_out.scss
+++ b/ui_framework/src/components/call_out/_call_out.scss
@@ -1,6 +1,6 @@
 .kuiCallOut {
   padding: $kuiSize;
-  border-left: $kuiSizeXS / 2 solid transparent;
+  border: 1px solid transparent;
 }
 
 // Modifier naming and colors.
@@ -14,7 +14,7 @@ $callOutTypes: (
 // Create button modifiders based upon the map.
 @each $name, $color in $callOutTypes {
   .kuiCallOut--#{$name} {
-    border-color: $color;
+    border-color: transparentize($color, 0.8);
     background-color: tintOrShade($color, 90%, 70%);
 
     $textColor: shadeOrTint($color, 30%, 70%);
diff --git a/ui_framework/src/components/form/checkbox/_checkbox.scss b/ui_framework/src/components/form/checkbox/_checkbox.scss
index 2eeeb64abd6ba..1f8be3e34e152 100644
--- a/ui_framework/src/components/form/checkbox/_checkbox.scss
+++ b/ui_framework/src/components/form/checkbox/_checkbox.scss
@@ -24,8 +24,16 @@
 
     &:focus ~ .kuiCheckbox__square,
     &:active ~ .kuiCheckbox__square {
-      background-color: $kuiFocusBackgroundColor;
-      border-color: $kuiColorPrimary;
+      background-color: $kuiColorEmptyShade;
+      border: 2px solid $kuiColorPrimary !important;
+      box-shadow: $kuiSmallShadowHover;
+    }
+
+    &:checked:focus ~ .kuiCheckbox__square,
+    &:checked:active ~ .kuiCheckbox__square {
+      .kuiCheckbox__check {
+        background-color: $kuiColorPrimary;
+      }
     }
   }
 
@@ -58,17 +66,13 @@
   &.kuiCheckbox--inList {
     .kuiCheckbox__input {
       &:checked ~ .kuiCheckbox__square {
-        background: $kuiColorPrimary;
+        background: $kuiColorEmptyShade;
         border-color: $kuiColorPrimary;
 
         .kuiCheckbox__check {
-          background-color: $kuiColorEmptyShade;
+          background-color: $kuiColorPrimary;
         }
       }
-
-      &:focus:checked ~.kuiCheckbox__square {
-        background: tintOrShade($kuiColorPrimary, 20%, 20%);
-      }
     }
   }
 }
diff --git a/ui_framework/src/components/form/form_error_text/_form_error_text.scss b/ui_framework/src/components/form/form_error_text/_form_error_text.scss
index de7e2053553a5..10f99079d377d 100644
--- a/ui_framework/src/components/form/form_error_text/_form_error_text.scss
+++ b/ui_framework/src/components/form/form_error_text/_form_error_text.scss
@@ -1,5 +1,6 @@
 .kuiFormErrorText {
   font-size: $kuiFontSizeXS;
-  padding: $kuiSizeS 0;
+  padding: $kuiSizeS;
   color: $kuiColorDanger;
+  background-color: tintOrShade($kuiColorDanger, 90%, 70%);
 }
diff --git a/ui_framework/src/components/form/form_row/_form_row.scss b/ui_framework/src/components/form/form_row/_form_row.scss
index 1fb61a59a4909..c34bcd687ca46 100644
--- a/ui_framework/src/components/form/form_row/_form_row.scss
+++ b/ui_framework/src/components/form/form_row/_form_row.scss
@@ -19,7 +19,11 @@
     padding-top: $kuiFontSizeXS + $kuiSizeS; /* 2 */
   }
 
-  .kuiFormRow__text + .kuiFormRow__text {
+  .kuiFormErrorText + .kuiFormErrorText {
+    padding-top: 0;
+  }
+
+  .kuiFormHelpText + .kuiFormHelpText {
     padding-top: 0;
   }
 }
diff --git a/ui_framework/src/components/form/range/_index.scss b/ui_framework/src/components/form/range/_index.scss
index 3dabcb56381af..68565d3d32884 100644
--- a/ui_framework/src/components/form/range/_index.scss
+++ b/ui_framework/src/components/form/range/_index.scss
@@ -5,7 +5,7 @@ $kuiRangeThumbRadius: 50%;
 $kuiRangeThumbHeight: $kuiSize;
 $kuiRangeThumbWidth: $kuiSize;
 $kuiRangeBorderWidth: 2px;
-$kuiRangeBorderColor: $kuiTextColor;
+$kuiRangeBorderColor: $kuiColorMediumShade;
 
 $kuiRangeTrackWidth: 100%;
 $kuiRangeTrackHeight: 2px;
diff --git a/ui_framework/src/components/form/range/_range.scss b/ui_framework/src/components/form/range/_range.scss
index 08537f4e9645b..a92af586c71a0 100644
--- a/ui_framework/src/components/form/range/_range.scss
+++ b/ui_framework/src/components/form/range/_range.scss
@@ -10,7 +10,7 @@
 
 .kuiRange {
   @include kuiFormControlSize;
-  
+
   appearance: none;
   margin: $kuiRangeThumbHeight / 2 0;
 
@@ -18,23 +18,24 @@
     max-width: 100%;
   }
 
+  /**
+   * 1. We can't group these selectors or else the styles won't be applied.
+   */
   &:focus {
-
-    &::-webkit-slider-thumb {
+    &::-webkit-slider-thumb { /* 1 */
       border: $kuiRangeBorderWidth solid $kuiColorPrimary;
+      box-shadow: $kuiSmallShadowHover;
     }
 
-    &::-moz-range-thumb {
+    &::-moz-range-thumb { /* 1 */
       border: $kuiRangeBorderWidth solid $kuiColorPrimary;
+      box-shadow: $kuiSmallShadowHover;
     }
 
-    &::-ms-thumb {
+    &::-ms-thumb { /* 1 */
       border: $kuiRangeBorderWidth solid $kuiColorPrimary;
+      box-shadow: $kuiSmallShadowHover;
     }
-    &::-webkit-slider-runnable-track {
-      background-color: $kuiColorPrimary;
-    }
-
   }
 
   &::-webkit-slider-runnable-track {
diff --git a/ui_framework/src/components/form/switch/_switch.scss b/ui_framework/src/components/form/switch/_switch.scss
index 9e6591ada2cc8..1e23ed83445fc 100644
--- a/ui_framework/src/components/form/switch/_switch.scss
+++ b/ui_framework/src/components/form/switch/_switch.scss
@@ -21,11 +21,9 @@
   }
 
   .kuiSwitch__input:focus + .kuiSwitch__body {
-    background: $kuiColorEmptyShade;
-
     .kuiSwitch__thumb {
-      border-color: $kuiColorPrimary;
-      background-color: $kuiColorPrimary;
+      border: 2px solid $kuiColorPrimary !important;
+      box-shadow: $kuiSmallShadowHover;
     }
   }
 
@@ -33,8 +31,8 @@
     pointer-events: none;
     width: $kuiSwitchWidth;
     height: $kuiSwitchHeight;
-    background: $kuiFormBackgroundColor;
-    box-shadow: inset 0 0 0 1px $kuiBorderColor;
+    background-color: transparentize($kuiColorSecondary, 0.9);
+    box-shadow: inset 0 0 0 1px transparentize($kuiColorSecondary, 0.5);
     display: inline-block;
     position: relative;
     border-radius: $kuiSwitchHeight;
@@ -49,7 +47,7 @@
     background-color: $kuiColorEmptyShade;
     left: $kuiSwitchWidth - $kuiSwitchThumbSize;
     border-radius: 50%;
-    border: $kuiBorderThin;
+    border: 1px solid transparentize($kuiColorSecondary, 0.5);
     transition: border-color $kuiAnimSpeedNormal $kuiAnimSlightBounce, background-color $kuiAnimSpeedNormal $kuiAnimSlightBounce, left $kuiAnimSpeedNormal $kuiAnimSlightBounce, transform $kuiAnimSpeedNormal $kuiAnimSlightBounce;
   }
 
@@ -77,7 +75,7 @@
   .kuiSwitch__icon--checked {
     right: auto;
     left: -$kuiSizeS;
-    fill: $kuiTextColor;
+    fill: darken($kuiColorSecondary, 0.85);
   }
 
   /**
@@ -99,8 +97,12 @@
    * When input is not checked, we shift around the positioning of sibling/child selectors.
    */
   .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body {
+    background: $kuiFormBackgroundColor;
+    box-shadow: inset 0 0 0 1px $kuiBorderColor;
+
     .kuiSwitch__thumb {
       left: 0;
+      border: $kuiBorderThin;
     }
 
     .kuiSwitch__icon {
diff --git a/ui_framework/src/components/form/switch/switch.js b/ui_framework/src/components/form/switch/switch.js
index fe0fa1481cce8..d827e9e015ee4 100644
--- a/ui_framework/src/components/form/switch/switch.js
+++ b/ui_framework/src/components/form/switch/switch.js
@@ -16,6 +16,19 @@ export const KuiSwitch = ({
 }) => {
   const classes = classNames('kuiSwitch', className);
 
+  let labelElement;
+
+  if (label) {
+    labelElement = (
+      <label
+        className="kuiSwitch__label"
+        htmlFor={id}
+      >
+        {label}
+      </label>
+    );
+  }
+
   return (
     <div className={classes} {...rest}>
       <input
@@ -44,12 +57,7 @@ export const KuiSwitch = ({
         </span>
       </span>
 
-      <label
-        className="kuiSwitch__label"
-        htmlFor={id}
-      >
-        {label}
-      </label>
+      {labelElement}
     </div>
   );
 };
diff --git a/ui_framework/src/components/header/header_breadcrumbs/_header_breadcrumbs.scss b/ui_framework/src/components/header/header_breadcrumbs/_header_breadcrumbs.scss
index 1e149572d5268..67fba7836a1cf 100644
--- a/ui_framework/src/components/header/header_breadcrumbs/_header_breadcrumbs.scss
+++ b/ui_framework/src/components/header/header_breadcrumbs/_header_breadcrumbs.scss
@@ -12,35 +12,45 @@
   line-height: $kuiHeaderChildSize;
   padding: 0 $kuiSize;
   position: relative;
-  color: $kuiHeaderBreadcrumbColor;
+  color: $kuiColorPrimary;
+
+  &:hover {
+    color: darken($kuiColorPrimary, 10%);
+  }
 
   // Slanted separator. Shows on all but last item.
-  &:not(:last-child):after {
-    position: absolute;
-    top: $kuiSizeL;
-    right: -3px; // Half the transformed width.
-    content: "";
-    width: 1px;
-    height: $kuiSize;
-    transform: rotate(15deg);
-    background: $kuiColorLightShade;
+  &:not(:last-child) {
+    &:after {
+      position: absolute;
+      top: $kuiSizeL;
+      right: -3px; // Half the transformed width.
+      content: "";
+      width: 1px;
+      height: $kuiSize;
+      transform: rotate(15deg);
+      background: $kuiColorLightShade;
+    }
+
+    .kuiHeaderBreadcrumb__text {
+      max-width: 150px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
   }
 
-  &:not(.kuiHeaderBreadcrumb--collapsed) {
+  &:not(.kuiHeaderBreadcrumb--collapsed):not(.kuiHeaderBreadcrumb-isActive) {
     @include kuiLink;
   }
 
   &.kuiHeaderBreadcrumb-isActive {
-    color: $kuiColorMediumShade;
+    color: $kuiHeaderBreadcrumbColor;
+    font-weight: $kuiFontWeightMedium;
   }
 }
 
   .kuiHeaderBreadcrumb__text {
     white-space: nowrap;
-    max-width: 150px;
     display: block;
-    text-overflow: ellipsis;
-    overflow: hidden;
   }
 
 .kuiHeaderBreadcrumb--collapsed {
diff --git a/ui_framework/src/components/header/header_breadcrumbs/header_breadcrumb.js b/ui_framework/src/components/header/header_breadcrumbs/header_breadcrumb.js
index 5bc909058ed5f..9f56ce00c6a03 100644
--- a/ui_framework/src/components/header/header_breadcrumbs/header_breadcrumb.js
+++ b/ui_framework/src/components/header/header_breadcrumbs/header_breadcrumb.js
@@ -14,6 +14,19 @@ export const KuiHeaderBreadcrumb = ({
     'kuiHeaderBreadcrumb-isActive': isActive,
   });
 
+  if (isActive) {
+    return (
+      <div
+        className={classes}
+        {...rest}
+      >
+        <div className="kuiHeaderBreadcrumb__text">
+          {children}
+        </div>
+      </div>
+    );
+  }
+
   return (
     <a
       href={href}
diff --git a/ui_framework/src/components/header/header_section/_header_section_item.scss b/ui_framework/src/components/header/header_section/_header_section_item.scss
index d69a6b577036a..fae480526526c 100644
--- a/ui_framework/src/components/header/header_section/_header_section_item.scss
+++ b/ui_framework/src/components/header/header_section/_header_section_item.scss
@@ -11,7 +11,7 @@
     position: absolute;
     content: "";
     width: 1px;
-    top: $kuiSize;
+    top: 0;
     bottom: 0;
     background: $kuiBorderColor;
     left: 0;
diff --git a/ui_framework/src/components/modal/_modal.scss b/ui_framework/src/components/modal/_modal.scss
index 7825d24b4aaed..214369b3098c6 100644
--- a/ui_framework/src/components/modal/_modal.scss
+++ b/ui_framework/src/components/modal/_modal.scss
@@ -1,9 +1,8 @@
 .kuiModal {
-  @include kuiBottomShadow;
-
   background-color: $kuiColorEmptyShade;
   border: $kuiBorderThin;
   border-radius: $kuiBorderRadius;
+  box-shadow: $kuiShadowMedium, $kuiBottomShadow;
   z-index: $kuiZModal;
   padding: $kuiSizeXL;
   min-width: 50%;
diff --git a/ui_framework/src/components/panel/_panel.scss b/ui_framework/src/components/panel/_panel.scss
index b798371ddaf20..9c6d00b003405 100644
--- a/ui_framework/src/components/panel/_panel.scss
+++ b/ui_framework/src/components/panel/_panel.scss
@@ -18,8 +18,16 @@
     padding: $kuiSizeL;
   }
 
+  &.kuiPanel--paddingXLarge {
+    padding: $kuiSizeXL;
+  }
+
+  &.kuiPanel--paddingXXLarge {
+    padding: $kuiSizeXXL;
+  }
+
   &.kuiPanel--shadow {
-    @include kuiBottomShadow;
+    box-shadow: $kuiShadowMedium, $kuiBottomShadow;
   }
 
   &.kuiPanel--flexGrowZero {
diff --git a/ui_framework/src/components/panel/panel.js b/ui_framework/src/components/panel/panel.js
index 561fd8c418d62..2b1a62b5be1d0 100644
--- a/ui_framework/src/components/panel/panel.js
+++ b/ui_framework/src/components/panel/panel.js
@@ -7,6 +7,8 @@ const paddingSizeToClassNameMap = {
   's': 'kuiPanel--paddingSmall',
   'm': 'kuiPanel--paddingMedium',
   'l': 'kuiPanel--paddingLarge',
+  'xl': 'kuiPanel--paddingXLarge',
+  'xxl': 'kuiPanel--paddingXXLarge',
 };
 
 export const SIZES = Object.keys(paddingSizeToClassNameMap);
diff --git a/ui_framework/src/components/progress/_progress.scss b/ui_framework/src/components/progress/_progress.scss
index 03367b423a3fd..889b6e9a8e14c 100644
--- a/ui_framework/src/components/progress/_progress.scss
+++ b/ui_framework/src/components/progress/_progress.scss
@@ -25,11 +25,11 @@
 
 	// Progress bars come in different colors.
 	$kuiProgressColors: (
-		primary: $kuiColorPrimary,
-		secondary: $kuiColorSecondary,
-		warning: $kuiColorWarning,
-		danger: $kuiColorDanger,
-		accent: $kuiColorAccent,
+		primary: transparentize($kuiColorPrimary, 0.4),
+		secondary: transparentize($kuiColorSecondary, 0.25),
+		warning: transparentize($kuiColorWarning, 0.25),
+		danger: lighten($kuiColorDanger, 10%),
+		accent: transparentize($kuiColorAccent, 0.5),
 		subdued: $kuiColorMediumShade,
 	);
 
diff --git a/ui_framework/src/components/side_nav/_side_nav.scss b/ui_framework/src/components/side_nav/_side_nav.scss
index a7954df287fd7..6df582702308f 100644
--- a/ui_framework/src/components/side_nav/_side_nav.scss
+++ b/ui_framework/src/components/side_nav/_side_nav.scss
@@ -3,6 +3,10 @@
   height: 100%;
 }
 
+  .kuiSideNav__content {
+    padding: $kuiSizeM;
+  }
+
   // These mobile children are hidden in everything but mobile view.
   .kuiSideNav__mobileToggle {
     display: none;
diff --git a/ui_framework/src/components/side_nav/_side_nav_item.scss b/ui_framework/src/components/side_nav/_side_nav_item.scss
index faa532118ac6f..5f8fb609693fd 100644
--- a/ui_framework/src/components/side_nav/_side_nav_item.scss
+++ b/ui_framework/src/components/side_nav/_side_nav_item.scss
@@ -4,49 +4,27 @@
   display: block;
   width: 100%;
   text-align: left;
-  padding: $kuiSizeXS $kuiSizeS;
+  padding: $kuiSizeXXS 0;
   color: $kuiColorDarkShade;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  border: $kuiBorderThin;
-  border-color: transparent;
 
   &.kuiSideNavItem-isSelected {
-    @include kuiBottomShadowSmall;
-
-    color: $kuiColorSecondary;
-    border-left: $kuiBorderThick;
-    border-left-color: $kuiColorSecondary;
-    background-color: $kuiColorEmptyShade;
+    color: $kuiTextColor;
+    font-weight: $kuiFontWeightMedium;
+    cursor: default;
   }
 
   // We allow one level of nesting.
   &.kuiSideNavItem--indent {
-    margin-left: $kuiSize;
-    font-size: $kuiFontSizeS;
-    padding: $kuiSizeXS / 2 $kuiSizeS;
-    border-left: $kuiBorderThin;
-    border-left-color: $kuiBorderColor;
-
-    // When indented and selected, make it not so heavy.
-    &.kuiSideNavItem-isSelected {
-      border-left-color: $kuiColorSecondary;
-      background-color: transparent;
-      box-shadow: none;
-    }
-  }
-
-  &:hover {
-    text-decoration: underline;
-  }
-
-  // Focus state background regardless of index/selected state.
-  &:focus {
-    background-color: $kuiFocusBackgroundColor !important;
+    padding-left: $kuiSizeS;
   }
 
-  &:focus:not(.kuiSideNavItem-isSelected) {
-    border: solid 1px darken($kuiFocusBackgroundColor, 10%);
+  &:hover, &:focus {
+    &:not(.kuiSideNavItem-isSelected) {
+      color: $kuiTextColor;
+      text-decoration: underline;
+    }
   }
 }
diff --git a/ui_framework/src/components/side_nav/_side_nav_title.scss b/ui_framework/src/components/side_nav/_side_nav_title.scss
index 2fc5d3fbed41c..e21f5147971d4 100644
--- a/ui_framework/src/components/side_nav/_side_nav_title.scss
+++ b/ui_framework/src/components/side_nav/_side_nav_title.scss
@@ -2,7 +2,7 @@
   @include kuiFontSize;
 
   font-weight: $kuiFontWeightMedium;
-  margin-bottom: $kuiSizeS;
+  margin-bottom: $kuiSizeXXS;
   margin-top: $kuiSize;
 
   /**
diff --git a/ui_framework/src/components/table/_index.scss b/ui_framework/src/components/table/_index.scss
index a73a338a7e2d5..4130425ec9db9 100644
--- a/ui_framework/src/components/table/_index.scss
+++ b/ui_framework/src/components/table/_index.scss
@@ -1,5 +1,6 @@
 $kuiTableCellPadding: $kuiSizeM;
 $kuiTableCellPaddingCompressed: $kuiSizeS;
+$kuiTableBorder: 1px solid $kuiColorLighterShade;
 
 /**
  * 1. Prevent cells from expanding based on content size. This substitutes for table-layout: fixed.
diff --git a/ui_framework/src/components/table/_table.scss b/ui_framework/src/components/table/_table.scss
index 57c402fab0909..eb8f6f3966149 100644
--- a/ui_framework/src/components/table/_table.scss
+++ b/ui_framework/src/components/table/_table.scss
@@ -6,7 +6,7 @@
   @include kuiFontSizeS;
 
   width: 100%;
-  border: none;
+  border: $kuiTableBorder;
   border-collapse: collapse;
   background-color: $kuiColorEmptyShade;
 }
@@ -15,30 +15,34 @@
   .kuiTableCellContent {
     padding: $kuiTableCellPaddingCompressed;
   }
-
-  .kuiTableHeaderButton:focus {
-    outline: solid $kuiTableCellPaddingCompressed $kuiFocusBackgroundColor;
-  }
 }
 
 .kuiTableHeaderCell {
   @include kuiTableCell;
 
+  background-color: $kuiColorLightestShade;
   color: $kuiTitleColor;
-
-  .kuiTableHeaderButton {
-    text-align: left;
-  }
 }
 
 .kuiTableHeaderCellCheckbox {
   @include kuiTableCellCheckbox;
+
+  background-color: $kuiColorLightestShade;
+
+  /**
+   * 1. Allow checkbox box-shadow to be visible.
+   */
+  .kuiTableCellContent {
+    overflow: visible; /* 1 */
+  }
 }
 
 .kuiTableHeaderButton {
   @include kuiFontSizeS;
 
+  text-align: left;
   color: inherit;
+  font-weight: inherit;
   width: 100%;
 
   &:hover, &:focus {
@@ -52,7 +56,7 @@
   }
 
   &:focus {
-    background: $kuiFocusBackgroundColor;
+    box-shadow: inset 0 -2px 0 0 $kuiColorPrimary;
   }
 }
 
@@ -67,12 +71,37 @@
 
 .kuiTableRow {
   transition: background-color $kuiAnimSpeedFast $kuiAnimSlightResistance;
-  &:hover {
+
+  &:hover:not(.kuiTableRow-isSelected) {
     background-color: tintOrShade($kuiColorLightestShade, 50%, 20%);
+
+    .kuiTableRowCell,
+    .kuiTableRowCellCheckbox {
+      border-color: $kuiColorLightShade;
+    }
+
+    & + .kuiTableRow .kuiTableRowCell,
+    & + .kuiTableRow .kuiTableRowCellCheckbox {
+      border-color: $kuiColorLightShade;
+    }
   }
 
   &.kuiTableRow-isSelected {
-    background-color: transparentize($kuiColorPrimary, .95);
+    background-color: transparentize($kuiColorPrimary, 0.95);
+
+    &:hover {
+      background-color: transparentize($kuiColorPrimary, 0.9);
+
+      .kuiTableRowCell,
+      .kuiTableRowCellCheckbox {
+        border-color: transparentize($kuiColorPrimary, 0.7);
+      }
+
+      & + .kuiTableRow .kuiTableRowCell,
+      & + .kuiTableRow .kuiTableRowCellCheckbox {
+        border-top-color: transparentize($kuiColorPrimary, 0.7);
+      }
+    }
   }
 }
 
@@ -80,15 +109,36 @@
   @include kuiTableCell;
 
   color: $kuiTextColor;
-  border-top: $kuiBorderThin;
-  border-bottom: $kuiBorderThin;
+  border-top: $kuiTableBorder;
+
+  &:first-child {
+    border-left: $kuiTableBorder;
+  }
+
+  &:last-child {
+    border-right: $kuiTableBorder;
+  }
 }
 
 .kuiTableRowCellCheckbox {
   @include kuiTableCellCheckbox;
 
-  border-top: $kuiBorderThin;
-  border-bottom: $kuiBorderThin;
+  border-top: $kuiTableBorder;
+
+  &:first-child {
+    border-left: $kuiTableBorder;
+  }
+
+  &:last-child {
+    border-right: $kuiTableBorder;
+  }
+
+  /**
+   * 1. Allow checkbox box-shadow to be visible.
+   */
+  .kuiTableCellContent {
+    overflow: visible; /* 1 */
+  }
 }
 
 /**
@@ -117,4 +167,9 @@
 
 .kuiTableCellContent--wrapText {
   white-space: normal;
+  overflow: visible;
+
+  .kuiTableCellContent__text {
+    overflow: visible;
+  }
 }
diff --git a/ui_framework/src/components/tabs/_tabs.scss b/ui_framework/src/components/tabs/_tabs.scss
index 4b4a66789426e..e49e922c79871 100644
--- a/ui_framework/src/components/tabs/_tabs.scss
+++ b/ui_framework/src/components/tabs/_tabs.scss
@@ -25,7 +25,7 @@
 
   &.kuiTab-isSelected {
     cursor: default;
-    color: $kuiColorSecondary;
+    color: $kuiColorPrimary;
 
     &:after {
       position: absolute;
@@ -34,7 +34,7 @@
       content: ' ';
       width: 100%;
       height: $kuiBorderWidthThick;
-      background-color: $kuiColorSecondary;
+      background-color: $kuiColorPrimary;
       animation: kuiTab $kuiAnimSpeedFast $kuiAnimSlightResistance;
     }
   }
diff --git a/ui_framework/src/components/title/_title.scss b/ui_framework/src/components/title/_title.scss
index 72b9248a1c160..f5a619edf6564 100644
--- a/ui_framework/src/components/title/_title.scss
+++ b/ui_framework/src/components/title/_title.scss
@@ -1,12 +1,15 @@
 .kuiTitle {
   @include kuiTitle;
   @include kuiFontSizeL;
+  font-weight: $kuiFontWeightRegular;
 }
 
 .kuiTitle--small {
   @include kuiFontSizeM;
+  font-weight: $kuiFontWeightRegular;
 }
 
 .kuiTitle--large {
   @include kuiFontSizeXL;
+  font-weight: $kuiFontWeightRegular;
 }
diff --git a/ui_framework/src/components/toast/_toast.scss b/ui_framework/src/components/toast/_toast.scss
index d561031607e7d..b2841d376d2dc 100644
--- a/ui_framework/src/components/toast/_toast.scss
+++ b/ui_framework/src/components/toast/_toast.scss
@@ -1,6 +1,5 @@
 .kuiToast {
-  @include kuiBottomShadow;
-
+  box-shadow: $kuiShadowMedium, $kuiBottomShadow;
   position: relative;
   padding: $kuiSize;
   background-color: $kuiColorEmptyShade;
@@ -88,7 +87,7 @@ $toastTypes: (
 
   .kuiToastHeader__title {
     color: $kuiTitleColor;
-    font-weight: $kuiFontWeightLight;
+    font-weight: $kuiFontWeightRegular;
   }
 
 .kuiToastHeader--withBody {
diff --git a/ui_framework/src/global_styling/mixins/_shadow.scss b/ui_framework/src/global_styling/mixins/_shadow.scss
index f0b39f59e2858..5ca3602583422 100644
--- a/ui_framework/src/global_styling/mixins/_shadow.scss
+++ b/ui_framework/src/global_styling/mixins/_shadow.scss
@@ -1,26 +1,41 @@
+$kuiBottomShadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
+$kuiBottomShadowSmall: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
+$kuiBottomShadowMedium: 0 4px 4px -2px rgba(0, 0, 0, 0.2);
+
+$kuiSlightShadow: 0 2px 2px -1px rgba(0, 0, 0, 0.15);
+$kuiSlightShadowHover: 0 4px 2px -1px rgba(0, 0, 0, 0.1);
+$kuiSlightShadowActive: 0 1px 2px -1px rgba(0, 0, 0, 0.15);
+
+$kuiSmallShadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3);
+$kuiSmallShadowHover: 0 4px 2px -1px rgba(0, 0, 0, 0.15);
+$kuiSmallShadowActive: 0 1px 2px -1px rgba(0, 0, 0, 0.3);
+
+$kuiShadowMedium: 0 1px 8px -1px rgba(0, 0, 0, 0.15);
+
 @mixin kuiBottomShadow {
-  box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
+  box-shadow: $kuiBottomShadow;
 }
 
 @mixin kuiBottomShadowSmall {
-  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
+  box-shadow: $kuiBottomShadowSmall;
 }
 
 @mixin kuiBottomShadowMedium {
-  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.2);
+  box-shadow: $kuiBottomShadowMedium;
 }
 
 @mixin kuiSlightShadow {
-  box-shadow:
-    0 2px 2px -1px rgba(0, 0, 0, 0.15),
+  box-shadow: $kuiSlightShadow;
 }
 
 @mixin kuiSlightShadowHover {
-  box-shadow:
-    0 4px 4px -2px rgba(0, 0, 0, 0.1),
+  box-shadow: $kuiSlightShadowHover;
 }
 
 @mixin kuiSlightShadowActive {
-  box-shadow:
-    0 1px 1px 0px rgba(0, 0, 0, 0.2),
+  box-shadow: $kuiSlightShadowActive;
+}
+
+@mixin kuiShadowMedium {
+  box-shadow: $kuiShadowMedium;
 }
diff --git a/ui_framework/src/global_styling/variables/_borders.scss b/ui_framework/src/global_styling/variables/_borders.scss
index 75234d7f0dbe8..42fb55765a599 100644
--- a/ui_framework/src/global_styling/variables/_borders.scss
+++ b/ui_framework/src/global_styling/variables/_borders.scss
@@ -4,6 +4,8 @@ $kuiBorderWidthThin: 1px;
 $kuiBorderWidthThick: 2px;
 
 $kuiBorderColor: $kuiColorLightShade;
+$kuiBorderColorLight: $kuiColorLightestShade;
 $kuiBorderRadius: 4px;
 $kuiBorderThick: $kuiBorderWidthThick solid $kuiBorderColor;
 $kuiBorderThin: $kuiBorderWidthThin solid $kuiBorderColor;
+$kuiBorderThinner: $kuiBorderWidthThin solid $kuiColorLighterShade;
diff --git a/ui_framework/src/global_styling/variables/_colors.scss b/ui_framework/src/global_styling/variables/_colors.scss
index d149a106c9959..0e30a9af895dd 100644
--- a/ui_framework/src/global_styling/variables/_colors.scss
+++ b/ui_framework/src/global_styling/variables/_colors.scss
@@ -41,6 +41,7 @@ $kuiColorWarning: #E5830E !default;
 // Grays
 $kuiColorEmptyShade: #FFF !default;
 $kuiColorLightestShade: #F5F5F5 !default;
+$kuiColorLighterShade: #E4E4E4 !default;
 $kuiColorLightShade: #D9D9D9 !default;
 $kuiColorMediumShade: #999 !default;
 $kuiColorDarkShade: #666 !default;
diff --git a/ui_framework/src/global_styling/variables/_size.scss b/ui_framework/src/global_styling/variables/_size.scss
index e05e6b4dc031d..60366b5c52c13 100644
--- a/ui_framework/src/global_styling/variables/_size.scss
+++ b/ui_framework/src/global_styling/variables/_size.scss
@@ -1,5 +1,6 @@
 $kuiSize:     16px;
 
+$kuiSizeXXS:   $kuiSize * .125;
 $kuiSizeXS:   $kuiSize * .25;
 $kuiSizeS:    $kuiSize * .5;
 $kuiSizeM:    $kuiSize * .75;