diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss
index 28cb1b9d56af..6fb6cbfcd136 100644
--- a/src/components/accordion/_accordion.scss
+++ b/src/components/accordion/_accordion.scss
@@ -17,7 +17,7 @@
 
   .#{$prefix}--accordion__item {
     transition: all $transition--base $carbon--standard-easing;
-    border-top: 1px solid $ui-04;
+    border-top: 1px solid $ui-03;
     overflow: hidden;
 
     &:focus {
@@ -26,12 +26,12 @@
       .#{$prefix}--accordion__arrow {
         @include focus-outline('border');
         overflow: visible; // safari fix
-        outline-offset: -.5px; // safari fix
+        outline-offset: -0.5px; // safari fix
       }
     }
 
     &:last-child {
-      border-bottom: 1px solid $ui-04;
+      border-bottom: 1px solid $ui-03;
     }
   }
 
@@ -53,7 +53,7 @@
       .#{$prefix}--accordion__arrow {
         @include focus-outline('border');
         overflow: visible; // safari fix
-        outline-offset: -.5px; // safari fix
+        outline-offset: -0.5px; // safari fix
       }
     }
   }
diff --git a/src/components/breadcrumb/_breadcrumb.scss b/src/components/breadcrumb/_breadcrumb.scss
index e80b0bf4653f..2ae4b06bbece 100644
--- a/src/components/breadcrumb/_breadcrumb.scss
+++ b/src/components/breadcrumb/_breadcrumb.scss
@@ -28,7 +28,7 @@
   .#{$prefix}--breadcrumb-item::after {
     content: '/';
     margin-left: $spacing-md;
-    color: $text-03;
+    color: $text-02;
   }
 
   .#{$prefix}--breadcrumb--no-trailing-slash .#{$prefix}--breadcrumb-item:last-child::after {
@@ -52,8 +52,8 @@
     &:hover,
     &:focus {
       outline: none;
-      color: $brand-01;
-      border-bottom: 1px solid $brand-01;
+      color: $hover-primary-text;
+      border-bottom: 1px solid $hover-primary-text;
     }
 
     // Applies to Firefox only
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
index 2859862288ac..f5cb78ce4d93 100644
--- a/src/components/button/_button.scss
+++ b/src/components/button/_button.scss
@@ -35,23 +35,11 @@
   }
 
   .#{$prefix}--btn--primary {
-    @include button-theme(
-      $brand-01,
-      transparent,
-      $inverse-01,
-      $brand-02,
-      $ui-01
-    );
+    @include button-theme($brand-01, transparent, $inverse-01, $hover-primary, $ui-01);
   }
 
   .#{$prefix}--btn--secondary {
-    @include button-theme(
-      transparent,
-      $brand-01,
-      $brand-01,
-      $brand-01,
-      $brand-01
-    );
+    @include button-theme(transparent, $brand-01, $brand-01, $hover-secondary, $brand-01);
 
     &:hover,
     &:focus {
@@ -74,13 +62,7 @@
   }
 
   .#{$prefix}--btn--tertiary {
-    @include button-theme(
-      transparent,
-      $ui-05,
-      $ui-05,
-      $ui-05,
-      $ui-05
-    );
+    @include button-theme(transparent, $ui-05, $ui-05, $ui-05, $ui-05);
 
     &:hover,
     &:focus {
@@ -98,13 +80,7 @@
   }
 
   .#{$prefix}--btn--ghost {
-    @include button-theme(
-      transparent,
-      transparent,
-      $brand-01,
-      $brand-01,
-      $brand-01
-    );
+    @include button-theme(transparent, transparent, $brand-01, $brand-01, $brand-01);
 
     &:hover,
     &:focus {
@@ -130,13 +106,7 @@
   }
 
   .#{$prefix}--btn--danger {
-    @include button-theme(
-      transparent,
-      $support-01,
-      $support-01,
-      $support-01,
-      $support-01
-    );
+    @include button-theme(transparent, $support-01, $support-01, $support-01, $support-01);
 
     &:hover {
       color: $inverse-01;
@@ -155,13 +125,7 @@
   }
 
   .#{$prefix}--btn--danger--primary {
-    @include button-theme(
-      $support-01,
-      transparent,
-      $inverse-01,
-      darken($support-01, 10%),
-      $ui-01
-    );
+    @include button-theme($support-01, transparent, $inverse-01, darken($support-01, 10%), $ui-01);
 
     &:hover:disabled,
     &:focus:disabled {
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
index 94f6babe1787..c5419d09ab8a 100644
--- a/src/components/card/_card.scss
+++ b/src/components/card/_card.scss
@@ -26,7 +26,7 @@
       width: rem(200px);
       height: rem(240px);
       background-color: $ui-01;
-      border: 1px solid $ui-04;
+      border: 1px solid $ui-03;
 
       &:focus {
         @include focus-outline('border');
@@ -58,7 +58,7 @@
       align-items: center;
       justify-content: space-between;
       height: rem(48px);
-      background-color: $ui-03;
+      background-color: $ui-02;
       padding-left: 1rem;
       padding-right: 1rem;
 
@@ -130,7 +130,7 @@
       width: rem(50px);
       height: rem(50px);
       background-color: $ui-01;
-      border: 1px solid $ui-04;
+      border: 1px solid $ui-03;
       border-radius: 100%;
 
       .#{$prefix}--about__icon--img {
@@ -181,7 +181,7 @@
       &:hover,
       &:focus {
         .#{$prefix}--app-actions__button--icon {
-          fill: $brand-01;
+          fill: $hover-secondary;
         }
       }
 
diff --git a/src/components/checkbox/_checkbox.scss b/src/components/checkbox/_checkbox.scss
index adfccdbae38d..378d2f8dda74 100644
--- a/src/components/checkbox/_checkbox.scss
+++ b/src/components/checkbox/_checkbox.scss
@@ -45,7 +45,7 @@
     top: calc(50% - 9px);
     height: rem(18px);
     width: rem(18px);
-    border: $checkbox-border-width solid $ui-05;
+    border: $checkbox-border-width solid $ui-04;
     background-color: $ui-01;
   }
 
@@ -116,7 +116,7 @@
     width: rem(18px);
     margin-right: $spacing-xs;
     background-color: $ui-01;
-    border: $checkbox-border-width solid $ui-05;
+    border: $checkbox-border-width solid $ui-04;
     min-width: rem(18px);
   }
 
diff --git a/src/components/content-switcher/_content-switcher.scss b/src/components/content-switcher/_content-switcher.scss
index 64175c7e2431..8525587d241a 100644
--- a/src/components/content-switcher/_content-switcher.scss
+++ b/src/components/content-switcher/_content-switcher.scss
@@ -29,10 +29,10 @@
 
     &:focus {
       outline: 1px solid transparent;
-      box-shadow: 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20;
-      background-color: $brand-02;
+      // box-shadow: 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20;
+      background-color: $hover-primary;
       z-index: 2;
-      border-color: $brand-02;
+      border-color: $hover-primary;
       text-decoration: underline;
       color: $inverse-01;
     }
@@ -43,8 +43,8 @@
 
     &:hover,
     &:active {
-      background-color: $brand-02;
-      border-color: $brand-02;
+      background-color: $hover-primary;
+      border-color: $hover-primary;
       color: $inverse-01;
     }
   }
@@ -64,6 +64,10 @@
 
   .#{$prefix}--content-switcher-btn:not(:first-of-type) {
     border-left: $content-switcher-option-border;
+
+    &:hover {
+      border-left-color: $hover-primary;
+    }
   }
 
   .#{$prefix}--content-switcher-btn:first-of-type {
@@ -71,11 +75,11 @@
     border-top-left-radius: $content-switcher-border-radius;
 
     &:hover {
-      border-color: $brand-02;
+      border-color: $hover-primary;
     }
 
     &:focus {
-      box-shadow: -2px 0 0 0 $color__blue-20, 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20;
+      // box-shadow: -2px 0 0 0 $color__blue-20, 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20;
       z-index: 0;
     }
   }
@@ -85,11 +89,11 @@
     border-bottom-right-radius: $content-switcher-border-radius;
 
     &:hover {
-      border-color: $brand-02;
+      border-color: $hover-primary;
     }
 
     &:focus {
-      box-shadow: 2px 0 0 0 $color__blue-20, 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20;
+      // box-shadow: 2px 0 0 0 $color__blue-20, 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20;
       z-index: 0;
     }
   }
@@ -100,8 +104,10 @@
     font-weight: 400;
     outline: 1px solid transparent;
 
-    &:hover {
-      border-color: $brand-01;
+    &:hover,
+    &:focus {
+      border-color: $hover-primary;
+      background-color: $hover-primary;
     }
   }
 }
diff --git a/src/components/copy-button/_copy-button.scss b/src/components/copy-button/_copy-button.scss
index 7f72905d487c..a9ffa6aadb37 100644
--- a/src/components/copy-button/_copy-button.scss
+++ b/src/components/copy-button/_copy-button.scss
@@ -28,7 +28,7 @@
       @include typescale('omega');
       top: 1.1rem;
       padding: 0.5rem 1rem;
-      border: 1px solid $ui-04;
+      border: 1px solid $ui-03;
       color: $text-01;
       content: attr(data-feedback);
       transform: translateX(-50%);
@@ -40,8 +40,8 @@
       top: 0.85rem;
       width: 0.5rem;
       height: 0.5rem;
-      border-right: 1px solid $ui-04;
-      border-bottom: 1px solid $ui-04;
+      border-right: 1px solid $ui-03;
+      border-bottom: 1px solid $ui-03;
       content: '';
       transform: rotate(-135deg);
     }
diff --git a/src/components/data-table-v2/_data-table-v2-action.scss b/src/components/data-table-v2/_data-table-v2-action.scss
index 543e4f59d3ab..6710d66b4987 100644
--- a/src/components/data-table-v2/_data-table-v2-action.scss
+++ b/src/components/data-table-v2/_data-table-v2-action.scss
@@ -37,20 +37,20 @@
 
     &:hover {
       > .#{$prefix}--toolbar-action__icon {
-        fill: $brand-01;
+        fill: $hover-secondary;
       }
     }
 
     &:focus {
       @include focus-outline;
       > .#{$prefix}--toolbar-action__icon {
-        fill: $brand-01;
+        fill: $hover-secondary;
       }
     }
 
     &:active {
       > .#{$prefix}--toolbar-action__icon {
-        fill: darken($brand-01, 5%);
+        fill: $hover-secondary;
       }
     }
 
diff --git a/src/components/data-table-v2/_data-table-v2-core.scss b/src/components/data-table-v2/_data-table-v2-core.scss
index 6166840f0d6a..825ff5fe3d56 100644
--- a/src/components/data-table-v2/_data-table-v2-core.scss
+++ b/src/components/data-table-v2/_data-table-v2-core.scss
@@ -12,7 +12,7 @@
     border-collapse: collapse;
     border-spacing: 0;
     width: 100%;
-    border-bottom: 1px solid $ui-04;
+    border-bottom: 1px solid $ui-03;
 
     thead {
       @include typescale('zeta');
@@ -50,24 +50,24 @@
     }
 
     th {
-      border-top: 1px solid $ui-04;
+      border-top: 1px solid $ui-03;
     }
 
     th,
     td {
-      border-top: 1px solid $ui-04;
+      border-top: 1px solid $ui-03;
       padding-left: $spacing-sm;
       vertical-align: middle;
       text-align: left;
 
       &:first-of-type {
         padding-left: rem(24px);
-        border-left: 1px solid $ui-04;
+        border-left: 1px solid $ui-03;
       }
 
       &:last-of-type {
         padding-right: $spacing-lg;
-        border-right: 1px solid $ui-04;
+        border-right: 1px solid $ui-03;
       }
     }
 
@@ -123,7 +123,7 @@
       }
 
       &:last-of-type {
-        border-right-color: $ui-04;
+        border-right-color: $ui-03;
       }
     }
   }
diff --git a/src/components/data-table-v2/_data-table-v2-expandable.scss b/src/components/data-table-v2/_data-table-v2-expandable.scss
index 50c67fb77137..9690f3b1d225 100644
--- a/src/components/data-table-v2/_data-table-v2-expandable.scss
+++ b/src/components/data-table-v2/_data-table-v2-expandable.scss
@@ -34,7 +34,7 @@
 
     &:hover {
       > td {
-        background-color: rgba($brand-02, 0.1);
+        background-color: $hover-row;
       }
 
       > td:first-of-type {
@@ -51,7 +51,7 @@
 
       + tr[data-child-row] {
         > td {
-          background-color: rgba($brand-02, 0.1);
+          background-color: $hover-row;
           border-bottom: 1px solid $brand-01;
           border-right: 1px solid $brand-01;
         }
@@ -61,7 +61,7 @@
 
   tr.#{$prefix}--expandable-row--hover-v2 {
     > td {
-      background-color: rgba($brand-02, 0.1);
+      background-color: $hover-row;
       border-top: 1px solid $brand-01;
     }
 
diff --git a/src/components/data-table-v2/data-table-v2--pagination.html b/src/components/data-table-v2/data-table-v2--pagination.html
index e04de64a9eec..3c1e522eaa2a 100644
--- a/src/components/data-table-v2/data-table-v2--pagination.html
+++ b/src/components/data-table-v2/data-table-v2--pagination.html
@@ -31,7 +31,7 @@ <h4 class="bx--data-table-v2-header">Table title</h4>
       </div>
     </div>
     <div class="bx--toolbar-search-container">
-      <div data-search class="bx--search bx--search--sm" role="search">
+      <div data-search class="bx--search bx--search--sm bx--search--light" role="search">
         <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
           <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
           <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
diff --git a/src/components/data-table-v2/data-table-v2.html b/src/components/data-table-v2/data-table-v2.html
index a72aa6eecc94..6faa607bc914 100644
--- a/src/components/data-table-v2/data-table-v2.html
+++ b/src/components/data-table-v2/data-table-v2.html
@@ -32,7 +32,7 @@ <h4 class="bx--data-table-v2-header">Table title</h4>
     </div>
 
     <div class="bx--toolbar-search-container">
-      <div data-search class="bx--search bx--search--sm" role="search">
+      <div data-search class="bx--search bx--search--sm bx--search--light" role="search">
         <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
           <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
           <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
diff --git a/src/components/data-table/_data-table.scss b/src/components/data-table/_data-table.scss
index 7e02c767bc9a..ad3fc9296f16 100644
--- a/src/components/data-table/_data-table.scss
+++ b/src/components/data-table/_data-table.scss
@@ -22,7 +22,7 @@
     min-width: 500px;
     border-collapse: collapse;
     border-spacing: 0;
-    border: 2px solid $ui-04;
+    border: 2px solid $ui-03;
 
     td {
       @include reset;
@@ -67,7 +67,7 @@
       @include reset;
       border-collapse: collapse;
       width: auto;
-      border: 2px solid $ui-04;
+      border: 2px solid $ui-03;
 
       tr td:first-child,
       tr th:first-child {
@@ -116,10 +116,10 @@
       }
 
       &--even {
-        background-color: $ui-03;
+        background-color: $ui-02;
 
         & + .#{$prefix}--expandable-row {
-          background-color: $ui-03;
+          background-color: $ui-02;
         }
       }
     }
diff --git a/src/components/date-picker/_date-picker.scss b/src/components/date-picker/_date-picker.scss
index 15347e9fb811..e7e39215b300 100644
--- a/src/components/date-picker/_date-picker.scss
+++ b/src/components/date-picker/_date-picker.scss
@@ -15,8 +15,18 @@
     align-items: flex-start;
   }
 
+  .#{$prefix}--date-picker--light .#{$prefix}--date-picker__input {
+    background: $field-02;
+  }
+
+  .#{$prefix}--date-picker ~ .#{$prefix}--label {
+    order: 1;
+  }
+
   .#{$prefix}--date-picker-container {
     position: relative;
+    display: flex;
+    flex-direction: column;
   }
 
   .#{$prefix}--date-picker.#{$prefix}--date-picker--simple {
@@ -47,12 +57,40 @@
     max-width: 9rem;
     padding: 0 $spacing-md;
     background-color: $field-01;
+    border: none;
+    box-shadow: 0 1px 0 0 $text-02;
+    order: 2;
     color: $text-01;
-    border: 1px solid transparent;
 
     &:focus,
     &.#{$prefix}--focused {
-      @include focus-outline('border');
+      outline: none;
+      box-shadow: 0 2px 0 0 $brand-01;
+    }
+
+    &:focus ~ .#{$prefix}--label {
+      color: $brand-01;
+    }
+
+    &[data-invalid],
+    &[data-invalid]:focus {
+      box-shadow: 0 2px 0 0 $support-01;
+    }
+
+    &[data-invalid]:focus + .#{$prefix}--label {
+      color: $support-01;
+    }
+
+    & ~ .#{$prefix}--form-requirement {
+      order: 3;
+      color: $support-01;
+      font-weight: 400;
+      margin-top: $spacing-2xs;
+      overflow: visible;
+
+      &::before {
+        display: none;
+      }
     }
 
     &:disabled {
@@ -114,7 +152,7 @@
     border-radius: 0;
     border: none;
     overflow: hidden;
-    margin-top: -1px;
+    margin-top: 1px;
 
     &:before,
     &:after {
@@ -141,7 +179,7 @@
     fill: $text-01;
 
     &:hover svg {
-      fill: $brand-01;
+      fill: $hover-secondary;
     }
   }
 
@@ -238,20 +276,34 @@
     justify-content: center;
     color: $text-01;
     border-radius: 0;
+    border: 2px solid transparent;
 
     &:hover {
-      background: $ui-04;
+      background: $hover-row;
     }
 
     &:focus {
       outline: none;
-      background: $ui-04;
+      background: $ui-03;
     }
   }
 
   .#{$prefix}--date-picker__day.today,
   .flatpickr-day.today {
-    border: 2px solid $brand-01;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      display: block;
+      top: 90%;
+      left: 50%;
+      transform: translateX(-50%);
+      height: 3px;
+      width: 3px;
+      border-radius: 50%;
+      background: $brand-01;
+    }
   }
 
   .#{$prefix}--date-picker__day.today.no-border,
@@ -259,6 +311,13 @@
     border: none;
   }
 
+  .#{$prefix}--date-picker__day.today.selected {
+    border: 2px solid $brand-01;
+    &::after {
+      display: none;
+    }
+  }
+
   .#{$prefix}--date-picker__day.disabled,
   .flatpickr-day.disabled {
     cursor: not-allowed;
@@ -271,16 +330,14 @@
 
   .#{$prefix}--date-picker__day.inRange,
   .flatpickr-day.inRange {
-    background: $brand-02;
-    box-shadow: -6px 0 0 $brand-02, 6px 0 0 $brand-02;
-    border: 2px solid transparent;
+    background: $ui-02;
+    box-shadow: -6px 0 0 $ui-02, 6px 0 0 $ui-02;
   }
 
   .#{$prefix}--date-picker__day.selected,
   .flatpickr-day.selected {
-    background: $brand-01;
-    color: $inverse-01;
-    border: 2px solid transparent;
+    border: 2px solid $brand-01;
+    background: $ui-01;
   }
 
   .#{$prefix}--date-picker__day.startRange.selected,
@@ -300,10 +357,9 @@
 
   .#{$prefix}--date-picker__day.endRange.inRange.selected,
   .flatpickr-day.endRange.inRange.selected {
-    background: $brand-01;
-    border: none;
-    color: $inverse-01;
     box-shadow: none;
+    border: 2px solid $brand-01;
+    background: $ui-01;
   }
 
   .#{$prefix}--date-picker__day.startRange.inRange:not(.selected),
diff --git a/src/components/date-picker/_flatpickr.scss b/src/components/date-picker/_flatpickr.scss
index b25b950306fb..481d16937bdb 100644
--- a/src/components/date-picker/_flatpickr.scss
+++ b/src/components/date-picker/_flatpickr.scss
@@ -17,7 +17,7 @@
   box-sizing: border-box;
   touch-action: manipulation;
   background: #fff;
-  box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);
+  box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
 }
 
 .flatpickr-calendar.open,
@@ -35,7 +35,7 @@
 
 .flatpickr-calendar.animate.open {
   -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
-          animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
+  animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .flatpickr-calendar.inline {
@@ -127,16 +127,16 @@
 }
 .flatpickr-month {
   background: transparent;
-  color: rgba(0,0,0,0.9);
-  fill: rgba(0,0,0,0.9);
+  color: rgba(0, 0, 0, 0.9);
+  fill: rgba(0, 0, 0, 0.9);
   height: 28px;
   line-height: 1;
   text-align: center;
   position: relative;
   -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
   overflow: hidden;
 }
 .flatpickr-prev-month,
@@ -156,14 +156,14 @@
 }
 .flatpickr-prev-month.flatpickr-prev-month,
 .flatpickr-next-month.flatpickr-prev-month {
-/*
+  /*
         /*rtl:begin:ignore*/
-/*
+  /*
         */
   left: 0;
-/*
+  /*
         /*rtl:end:ignore*/
-/*
+  /*
         */
 }
 /*
@@ -172,14 +172,14 @@
         /*rtl:end:ignore*/
 .flatpickr-prev-month.flatpickr-next-month,
 .flatpickr-next-month.flatpickr-next-month {
-/*
+  /*
         /*rtl:begin:ignore*/
-/*
+  /*
         */
   right: 0;
-/*
+  /*
         /*rtl:end:ignore*/
-/*
+  /*
         */
 }
 /*
@@ -223,18 +223,18 @@
   line-height: 50%;
   opacity: 0;
   cursor: pointer;
-  border: 1px solid rgba(57,57,57,0.05);
+  border: 1px solid rgba(57, 57, 57, 0.05);
   box-sizing: border-box;
 }
 .numInputWrapper span:hover {
-  background: rgba(0,0,0,0.1);
+  background: rgba(0, 0, 0, 0.1);
 }
 .numInputWrapper span:active {
-  background: rgba(0,0,0,0.2);
+  background: rgba(0, 0, 0, 0.2);
 }
 .numInputWrapper span:after {
   display: block;
-  content: "";
+  content: '';
   position: absolute;
   top: 33%;
 }
@@ -245,7 +245,7 @@
 .numInputWrapper span.arrowUp:after {
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
-  border-bottom: 4px solid rgba(57,57,57,0.6);
+  border-bottom: 4px solid rgba(57, 57, 57, 0.6);
 }
 .numInputWrapper span.arrowDown {
   top: 50%;
@@ -253,17 +253,17 @@
 .numInputWrapper span.arrowDown:after {
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
-  border-top: 4px solid rgba(57,57,57,0.6);
+  border-top: 4px solid rgba(57, 57, 57, 0.6);
 }
 .numInputWrapper span svg {
   width: inherit;
   height: auto;
 }
 .numInputWrapper span svg path {
-  fill: rgba(0,0,0,0.5);
+  fill: rgba(0, 0, 0, 0.5);
 }
 .numInputWrapper:hover {
-  background: rgba(0,0,0,0.05);
+  background: rgba(0, 0, 0, 0.05);
 }
 .numInputWrapper:hover span {
   opacity: 1;
@@ -282,31 +282,31 @@
   display: inline-block;
   text-align: center;
   -webkit-transform: translate3d(0px, 0px, 0px);
-          transform: translate3d(0px, 0px, 0px);
+  transform: translate3d(0px, 0px, 0px);
 }
 .flatpickr-current-month.slideLeft {
   -webkit-transform: translate3d(-100%, 0px, 0px);
-          transform: translate3d(-100%, 0px, 0px);
+  transform: translate3d(-100%, 0px, 0px);
   -webkit-animation: fpFadeOut 400ms ease, fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
-          animation: fpFadeOut 400ms ease, fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
+  animation: fpFadeOut 400ms ease, fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 .flatpickr-current-month.slideLeftNew {
   -webkit-transform: translate3d(100%, 0px, 0px);
-          transform: translate3d(100%, 0px, 0px);
+  transform: translate3d(100%, 0px, 0px);
   -webkit-animation: fpFadeIn 400ms ease, fpSlideLeftNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
-          animation: fpFadeIn 400ms ease, fpSlideLeftNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
+  animation: fpFadeIn 400ms ease, fpSlideLeftNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 .flatpickr-current-month.slideRight {
   -webkit-transform: translate3d(100%, 0px, 0px);
-          transform: translate3d(100%, 0px, 0px);
+  transform: translate3d(100%, 0px, 0px);
   -webkit-animation: fpFadeOut 400ms ease, fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
-          animation: fpFadeOut 400ms ease, fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
+  animation: fpFadeOut 400ms ease, fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 .flatpickr-current-month.slideRightNew {
   -webkit-transform: translate3d(0, 0, 0px);
-          transform: translate3d(0, 0, 0px);
+  transform: translate3d(0, 0, 0px);
   -webkit-animation: fpFadeIn 400ms ease, fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
-          animation: fpFadeIn 400ms ease, fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
+  animation: fpFadeIn 400ms ease, fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 .flatpickr-current-month span.cur-month {
   font-family: inherit;
@@ -317,7 +317,7 @@
   padding: 0;
 }
 .flatpickr-current-month span.cur-month:hover {
-  background: rgba(0,0,0,0.05);
+  background: rgba(0, 0, 0, 0.05);
 }
 .flatpickr-current-month .numInputWrapper {
   width: 6ch;
@@ -325,10 +325,10 @@
   display: inline-block;
 }
 .flatpickr-current-month .numInputWrapper span.arrowUp:after {
-  border-bottom-color: rgba(0,0,0,0.9);
+  border-bottom-color: rgba(0, 0, 0, 0.9);
 }
 .flatpickr-current-month .numInputWrapper span.arrowDown:after {
-  border-top-color: rgba(0,0,0,0.9);
+  border-top-color: rgba(0, 0, 0, 0.9);
 }
 .flatpickr-current-month input.cur-year {
   background: transparent;
@@ -353,7 +353,7 @@
 .flatpickr-current-month input.cur-year[disabled],
 .flatpickr-current-month input.cur-year[disabled]:hover {
   font-size: 100%;
-  color: rgba(0,0,0,0.5);
+  color: rgba(0, 0, 0, 0.5);
   background: transparent;
   pointer-events: none;
 }
@@ -366,22 +366,22 @@
   display: -ms-flexbox;
   display: flex;
   -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
   height: 28px;
 }
 span.flatpickr-weekday {
   cursor: default;
   font-size: 90%;
   background: transparent;
-  color: rgba(0,0,0,0.54);
+  color: rgba(0, 0, 0, 0.54);
   line-height: 1;
   margin: 0;
   text-align: center;
   display: block;
   -webkit-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  -ms-flex: 1;
+  flex: 1;
   font-weight: bolder;
 }
 .dayContainer,
@@ -412,37 +412,37 @@ span.flatpickr-weekday {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
-          flex-wrap: wrap;
+  flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   -ms-flex-pack: justify;
   -webkit-justify-content: space-around;
-          justify-content: space-around;
+  justify-content: space-around;
   -webkit-transform: translate3d(0px, 0px, 0px);
-          transform: translate3d(0px, 0px, 0px);
+  transform: translate3d(0px, 0px, 0px);
   opacity: 1;
 }
 .flatpickr-calendar.animate .dayContainer.slideLeft {
   -webkit-animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
-          animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
+  animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 .flatpickr-calendar.animate .dayContainer.slideLeft,
 .flatpickr-calendar.animate .dayContainer.slideLeftNew {
   -webkit-transform: translate3d(-100%, 0px, 0px);
-          transform: translate3d(-100%, 0px, 0px);
+  transform: translate3d(-100%, 0px, 0px);
 }
 .flatpickr-calendar.animate .dayContainer.slideLeftNew {
   -webkit-animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
-          animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
+  animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 .flatpickr-calendar.animate .dayContainer.slideRight {
   -webkit-animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
-          animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
+  animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
   -webkit-transform: translate3d(100%, 0px, 0px);
-          transform: translate3d(100%, 0px, 0px);
+  transform: translate3d(100%, 0px, 0px);
 }
 .flatpickr-calendar.animate .dayContainer.slideRightNew {
   -webkit-animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
-          animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
+  animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 .flatpickr-day {
   background: none;
@@ -454,8 +454,8 @@ span.flatpickr-weekday {
   font-weight: 400;
   width: 14.2857143%;
   -webkit-flex-basis: 14.2857143%;
-      -ms-flex-preferred-size: 14.2857143%;
-          flex-basis: 14.2857143%;
+  -ms-flex-preferred-size: 14.2857143%;
+  flex-basis: 14.2857143%;
   max-width: 40px;
   height: 40px;
   line-height: 40px;
@@ -463,8 +463,8 @@ span.flatpickr-weekday {
   display: inline-block;
   position: relative;
   -webkit-justify-content: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
   text-align: center;
 }
 // .flatpickr-day.inRange,
@@ -560,9 +560,9 @@ span.flatpickr-weekday {
   border-radius: 0;
   box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
 }
-.rangeMode .flatpickr-day {
-  margin-top: 1px;
-}
+// .rangeMode .flatpickr-day {
+//   margin-top: 1px;
+// }
 .flatpickr-weekwrapper {
   display: inline-block;
   float: left;
@@ -608,14 +608,14 @@ span.flatpickr-weekday {
   display: flex;
 }
 .flatpickr-time:after {
-  content: "";
+  content: '';
   display: table;
   clear: both;
 }
 .flatpickr-time .numInputWrapper {
   -webkit-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  -ms-flex: 1;
+  flex: 1;
   width: 40%;
   height: 40px;
   float: left;
@@ -669,13 +669,13 @@ span.flatpickr-weekday {
   font-weight: bold;
   width: 2%;
   -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
   -webkit-align-self: center;
-      -ms-flex-item-align: center;
-              -ms-grid-row-align: center;
-          align-self: center;
+  -ms-flex-item-align: center;
+  -ms-grid-row-align: center;
+  align-self: center;
 }
 .flatpickr-time .flatpickr-am-pm {
   outline: 0;
@@ -695,104 +695,104 @@ span.flatpickr-weekday {
   from {
     opacity: 0;
     -webkit-transform: translate3d(0, -20px, 0);
-            transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
   }
   to {
     opacity: 1;
     -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
   }
 }
 @keyframes fpFadeInDown {
   from {
     opacity: 0;
     -webkit-transform: translate3d(0, -20px, 0);
-            transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
   }
   to {
     opacity: 1;
     -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
   }
 }
 @-webkit-keyframes fpSlideLeft {
   from {
     -webkit-transform: translate3d(0px, 0px, 0px);
-            transform: translate3d(0px, 0px, 0px);
+    transform: translate3d(0px, 0px, 0px);
   }
   to {
     -webkit-transform: translate3d(-100%, 0px, 0px);
-            transform: translate3d(-100%, 0px, 0px);
+    transform: translate3d(-100%, 0px, 0px);
   }
 }
 @keyframes fpSlideLeft {
   from {
     -webkit-transform: translate3d(0px, 0px, 0px);
-            transform: translate3d(0px, 0px, 0px);
+    transform: translate3d(0px, 0px, 0px);
   }
   to {
     -webkit-transform: translate3d(-100%, 0px, 0px);
-            transform: translate3d(-100%, 0px, 0px);
+    transform: translate3d(-100%, 0px, 0px);
   }
 }
 @-webkit-keyframes fpSlideLeftNew {
   from {
     -webkit-transform: translate3d(100%, 0px, 0px);
-            transform: translate3d(100%, 0px, 0px);
+    transform: translate3d(100%, 0px, 0px);
   }
   to {
     -webkit-transform: translate3d(0px, 0px, 0px);
-            transform: translate3d(0px, 0px, 0px);
+    transform: translate3d(0px, 0px, 0px);
   }
 }
 @keyframes fpSlideLeftNew {
   from {
     -webkit-transform: translate3d(100%, 0px, 0px);
-            transform: translate3d(100%, 0px, 0px);
+    transform: translate3d(100%, 0px, 0px);
   }
   to {
     -webkit-transform: translate3d(0px, 0px, 0px);
-            transform: translate3d(0px, 0px, 0px);
+    transform: translate3d(0px, 0px, 0px);
   }
 }
 @-webkit-keyframes fpSlideRight {
   from {
     -webkit-transform: translate3d(0, 0, 0px);
-            transform: translate3d(0, 0, 0px);
+    transform: translate3d(0, 0, 0px);
   }
   to {
     -webkit-transform: translate3d(100%, 0px, 0px);
-            transform: translate3d(100%, 0px, 0px);
+    transform: translate3d(100%, 0px, 0px);
   }
 }
 @keyframes fpSlideRight {
   from {
     -webkit-transform: translate3d(0, 0, 0px);
-            transform: translate3d(0, 0, 0px);
+    transform: translate3d(0, 0, 0px);
   }
   to {
     -webkit-transform: translate3d(100%, 0px, 0px);
-            transform: translate3d(100%, 0px, 0px);
+    transform: translate3d(100%, 0px, 0px);
   }
 }
 @-webkit-keyframes fpSlideRightNew {
   from {
     -webkit-transform: translate3d(-100%, 0, 0px);
-            transform: translate3d(-100%, 0, 0px);
+    transform: translate3d(-100%, 0, 0px);
   }
   to {
     -webkit-transform: translate3d(0, 0, 0px);
-            transform: translate3d(0, 0, 0px);
+    transform: translate3d(0, 0, 0px);
   }
 }
 @keyframes fpSlideRightNew {
   from {
     -webkit-transform: translate3d(-100%, 0, 0px);
-            transform: translate3d(-100%, 0, 0px);
+    transform: translate3d(-100%, 0, 0px);
   }
   to {
     -webkit-transform: translate3d(0, 0, 0px);
-            transform: translate3d(0, 0, 0px);
+    transform: translate3d(0, 0, 0px);
   }
 }
 @-webkit-keyframes fpFadeOut {
diff --git a/src/components/date-picker/date-picker--light.html b/src/components/date-picker/date-picker--light.html
new file mode 100644
index 000000000000..4dbdf0ea4b82
--- /dev/null
+++ b/src/components/date-picker/date-picker--light.html
@@ -0,0 +1,24 @@
+<!-- Basic without calendar (mm/yy only) -->
+<div class="bx--form-item">
+  <div class="bx--date-picker bx--date-picker--simple bx--date-picker--short bx--date-picker--light">
+    <div class="bx--date-picker-container">
+      <input type="text" id="date-picker-4" class="bx--date-picker__input" pattern="\d{1,2}/\d{4}" placeholder="mm/yyyy" data-date-picker-input
+      />
+      <label for="date-picker-4" class="bx--label">Date Picker label</label>
+    </div>
+  </div>
+</div>
+
+<!-- Basic without calendar -->
+<div class="bx--form-item">
+  <div class="bx--date-picker bx--date-picker--simple bx--date-picker--light">
+    <div class="bx--date-picker-container">
+      <input data-invalid type="text" id="date-picker-6" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
+        data-date-picker-input />
+      <label for="date-picker-6" class="bx--label">Date Picker label</label>
+      <div class="bx--form-requirement">
+        Invalid date format.
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/components/date-picker/date-picker--range-light.html b/src/components/date-picker/date-picker--range-light.html
new file mode 100644
index 000000000000..a7cad332a453
--- /dev/null
+++ b/src/components/date-picker/date-picker--range-light.html
@@ -0,0 +1,41 @@
+<!-- Ranged -->
+<div class="bx--form-item">
+  <div data-date-picker data-date-picker-type="range" class="bx--date-picker bx--date-picker--range bx--date-picker--light">
+    <div class="bx--date-picker-container">
+      <input type="text" id="date-picker-1" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
+        data-date-picker-input-from />
+      <label for="date-picker-1" class="bx--label">Start date label</label>
+    </div>
+    <div class="bx--date-picker-container">
+      <input type="text" id="date-picker-2" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
+        data-date-picker-input-to />
+      <label for="date-picker-2" class="bx--label">End date label</label>
+    </div>
+    <svg data-date-picker-icon class="bx--date-picker__icon" width="17" height="19" viewBox="0 0 17 19">
+      <path d="M12 0h2v2.7h-2zM3 0h2v2.7H3z" />
+      <path d="M0 2v17h17V2H0zm15 15H2V7h13v10z" />
+      <path d="M9.9 15H8.6v-3.9H7.1v-.9c.9 0 1.7-.3 1.8-1.2h1v6z" />
+    </svg>
+  </div>
+</div>
+
+<!-- Ranged -->
+<div class="bx--form-item">
+  <div data-date-picker data-date-picker-type="range" class="bx--date-picker bx--date-picker--range bx--date-picker--light">
+    <div class="bx--date-picker-container">
+      <input type="text" id="date-picker-1" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
+        data-date-picker-input-from />
+      <label for="date-picker-1" class="bx--label">Start date label</label>
+    </div>
+    <div class="bx--date-picker-container">
+      <input type="text" id="date-picker-2" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
+        data-date-picker-input-to />
+      <label for="date-picker-2" class="bx--label">End date label</label>
+    </div>
+    <svg data-date-picker-icon class="bx--date-picker__icon" width="17" height="19" viewBox="0 0 17 19">
+      <path d="M12 0h2v2.7h-2zM3 0h2v2.7H3z" />
+      <path d="M0 2v17h17V2H0zm15 15H2V7h13v10z" />
+      <path d="M9.9 15H8.6v-3.9H7.1v-.9c.9 0 1.7-.3 1.8-1.2h1v6z" />
+    </svg>
+  </div>
+</div>
diff --git a/src/components/date-picker/date-picker--range.html b/src/components/date-picker/date-picker--range.html
index 184323fdd0d9..bfe33d0050d9 100644
--- a/src/components/date-picker/date-picker--range.html
+++ b/src/components/date-picker/date-picker--range.html
@@ -2,20 +2,14 @@
 <div class="bx--form-item">
   <div data-date-picker data-date-picker-type="range" class="bx--date-picker bx--date-picker--range">
     <div class="bx--date-picker-container">
-      <label for="date-picker-1" class="bx--label">Start date label</label>
       <input type="text" id="date-picker-1" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
         data-date-picker-input-from />
-      <div class="bx--form-requirement">
-        Invalid date format.
-      </div>
+      <label for="date-picker-1" class="bx--label">Start date label</label>
     </div>
     <div class="bx--date-picker-container">
-      <label for="date-picker-2" class="bx--label">End date label</label>
       <input type="text" id="date-picker-2" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
         data-date-picker-input-to />
-      <div class="bx--form-requirement">
-        Invalid date format.
-      </div>
+      <label for="date-picker-2" class="bx--label">End date label</label>
     </div>
     <svg data-date-picker-icon class="bx--date-picker__icon" width="17" height="19" viewBox="0 0 17 19">
       <path d="M12 0h2v2.7h-2zM3 0h2v2.7H3z" />
diff --git a/src/components/date-picker/date-picker--single-light.html b/src/components/date-picker/date-picker--single-light.html
new file mode 100644
index 000000000000..8dc0e4dd2886
--- /dev/null
+++ b/src/components/date-picker/date-picker--single-light.html
@@ -0,0 +1,15 @@
+<!-- Basic with calendar -->
+<div class="bx--form-item">
+  <div data-date-picker data-date-picker-type="single" class="bx--date-picker bx--date-picker--single bx--date-picker--light">
+    <div class="bx--date-picker-container">
+      <svg data-date-picker-icon class="bx--date-picker__icon" width="17" height="19" viewBox="0 0 17 19">
+        <path d="M12 0h2v2.7h-2zM3 0h2v2.7H3z" />
+        <path d="M0 2v17h17V2H0zm15 15H2V7h13v10z" />
+        <path d="M9.9 15H8.6v-3.9H7.1v-.9c.9 0 1.7-.3 1.8-1.2h1v6z" />
+      </svg>
+      <input type="text" id="date-picker-3" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
+        data-date-picker-input />
+      <label for="date-picker-3" class="bx--label">Date Picker label</label>
+    </div>
+  </div>
+</div>
diff --git a/src/components/date-picker/date-picker--single.html b/src/components/date-picker/date-picker--single.html
index d9e4742fcf4a..ddb127211e90 100644
--- a/src/components/date-picker/date-picker--single.html
+++ b/src/components/date-picker/date-picker--single.html
@@ -2,7 +2,6 @@
 <div class="bx--form-item">
   <div data-date-picker data-date-picker-type="single" class="bx--date-picker bx--date-picker--single">
     <div class="bx--date-picker-container">
-      <label for="date-picker-3" class="bx--label">Date Picker label</label>
       <svg data-date-picker-icon class="bx--date-picker__icon" width="17" height="19" viewBox="0 0 17 19">
         <path d="M12 0h2v2.7h-2zM3 0h2v2.7H3z" />
         <path d="M0 2v17h17V2H0zm15 15H2V7h13v10z" />
@@ -10,9 +9,7 @@
       </svg>
       <input type="text" id="date-picker-3" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
         data-date-picker-input />
-      <div class="bx--form-requirement">
-        Invalid date format.
-      </div>
+      <label for="date-picker-3" class="bx--label">Date Picker label</label>
     </div>
   </div>
 </div>
diff --git a/src/components/date-picker/date-picker.html b/src/components/date-picker/date-picker.html
index ff2eb703fa44..48ff1ef7d8b1 100644
--- a/src/components/date-picker/date-picker.html
+++ b/src/components/date-picker/date-picker.html
@@ -2,12 +2,9 @@
 <div class="bx--form-item">
   <div class="bx--date-picker bx--date-picker--simple bx--date-picker--short">
     <div class="bx--date-picker-container">
-      <label for="date-picker-4" class="bx--label">Date Picker label</label>
       <input type="text" id="date-picker-4" class="bx--date-picker__input" pattern="\d{1,2}/\d{4}" placeholder="mm/yyyy" data-date-picker-input
       />
-      <div class="bx--form-requirement">
-        Invalid date format.
-      </div>
+      <label for="date-picker-4" class="bx--label">Date Picker label</label>
     </div>
   </div>
 </div>
@@ -16,9 +13,9 @@
 <div class="bx--form-item">
   <div class="bx--date-picker bx--date-picker--simple">
     <div class="bx--date-picker-container">
-      <label for="date-picker-5" class="bx--label">Date Picker label</label>
-      <input data-invalid type="text" id="date-picker-5" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
+      <input data-invalid type="text" id="date-picker-6" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
         data-date-picker-input />
+      <label for="date-picker-6" class="bx--label">Date Picker label</label>
       <div class="bx--form-requirement">
         Invalid date format.
       </div>
diff --git a/src/components/detail-page-header/_detail-page-header.scss b/src/components/detail-page-header/_detail-page-header.scss
index f90080e0ad6d..73deb4675a6b 100644
--- a/src/components/detail-page-header/_detail-page-header.scss
+++ b/src/components/detail-page-header/_detail-page-header.scss
@@ -14,8 +14,7 @@
 
 @include exports('detail-page-header') {
   @include deprecate(
-    'Accessing the `detail-page-header` component from the ' +
-      '`carbon-components` package is deprecated. Use the ' +
+    'Accessing the `detail-page-header` component from the ' + '`carbon-components` package is deprecated. Use the ' +
       '`carbon-addons-bluemix` package instead.'
   ) {
     .#{$prefix}--detail-page-header--no-tabs {
@@ -106,7 +105,7 @@
       justify-content: center;
       align-items: center;
       border-radius: 50%;
-      border: 1px solid $ui-05;
+      border: 1px solid $ui-04;
       height: rem(36px);
       width: rem(36px);
       margin-right: 0.625rem;
diff --git a/src/components/dropdown/_dropdown.scss b/src/components/dropdown/_dropdown.scss
index 4d5820632129..9212deac8cd8 100644
--- a/src/components/dropdown/_dropdown.scss
+++ b/src/components/dropdown/_dropdown.scss
@@ -22,30 +22,34 @@
     list-style: none;
     display: block;
     background-color: $field-01;
+    border: none;
+    box-shadow: 0 1px 0 0 $text-02;
+    order: 1;
     width: 100%;
     height: rem(40px);
     cursor: pointer;
     color: $text-01;
 
     &:focus {
-      @include focus-outline('border');
+      outline: none;
+      box-shadow: 0 2px 0 0 $brand-01;
     }
 
     &.#{$prefix}--dropdown--open:focus {
       outline: 1px solid transparent;
-      box-shadow: 0 -1px 0 0 $brand-01, 1px 0 0 0 $brand-01, -1px 0 0 0 $brand-01;
+      box-shadow: none;
     }
-  }
 
-  .#{$prefix}--dropdown--up {
-    &.#{$prefix}--dropdown--open:focus {
-      box-shadow: 0 1px 0 0 $brand-01, 1px 0 0 0 $brand-01, -1px 0 0 0 $brand-01;
-
-      .#{$prefix}--dropdown-list {
-        box-shadow: 0 -1px 0 0 $brand-01, 1px 0 0 0 $brand-01, -1px 0 0 0 $brand-01;
-      }
+    .#{$prefix}--dropdown--open .#{$prefix}--dropdown-list {
+      @include layer('overlay');
     }
+  }
 
+  .#{$prefix}--dropdown--light {
+    background-color: $field-02;
+  }
+
+  .#{$prefix}--dropdown--up {
     .#{$prefix}--dropdown-list {
       bottom: 2.5rem;
     }
@@ -64,7 +68,7 @@
   }
 
   .#{$prefix}--dropdown[data-value=''] .#{$prefix}--dropdown-text {
-    color: $text-03;
+    color: $text-02;
   }
 
   .#{$prefix}--dropdown-text {
@@ -111,10 +115,10 @@
 
     &:hover,
     &:focus {
-      background-color: $brand-01;
-      color: $inverse-01;
+      background-color: $hover-row;
       outline: 1px solid transparent;
       text-decoration: underline;
+      color: $text-01;
     }
   }
 
@@ -135,12 +139,6 @@
       }
     }
 
-    &:focus {
-      .#{$prefix}--dropdown-list {
-        box-shadow: 0 1px 0 0 $brand-01, 1px 0 0 0 $brand-01, -1px 0 0 0 $brand-01;
-      }
-    }
-
     .#{$prefix}--dropdown-item {
       opacity: 1;
     }
diff --git a/src/components/dropdown/dropdown--light.html b/src/components/dropdown/dropdown--light.html
new file mode 100644
index 000000000000..d566db871743
--- /dev/null
+++ b/src/components/dropdown/dropdown--light.html
@@ -0,0 +1,25 @@
+<ul data-dropdown data-value class="bx--dropdown bx--dropdown--light" tabindex="0">
+  <li class="bx--dropdown-text">Dropdown label</li>
+  <svg class="bx--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+    <path d="M10 0L5 5 0 0z"></path>
+  </svg>
+  <li>
+    <ul class="bx--dropdown-list">
+      <li data-option data-value="all" class="bx--dropdown-item">
+        <a class="bx--dropdown-link" href="javascript:void(0)">Option 1</a>
+      </li>
+      <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
+        <a class="bx--dropdown-link" href="javascript:void(0)">Option 2</a>
+      </li>
+      <li data-option data-value="staging" class="bx--dropdown-item">
+        <a class="bx--dropdown-link" href="javascript:void(0)">Option 3</a>
+      </li>
+      <li data-option data-value="dea" class="bx--dropdown-item">
+        <a class="bx--dropdown-link" href="javascript:void(0)">Option 4</a>
+      </li>
+      <li data-option data-value="router" class="bx--dropdown-item">
+        <a class="bx--dropdown-link" href="javascript:void(0)">Option 5</a>
+      </li>
+    </ul>
+  </li>
+</ul>
diff --git a/src/components/file-uploader/_file-uploader.scss b/src/components/file-uploader/_file-uploader.scss
index 836a216b3be0..589b1bed35d0 100644
--- a/src/components/file-uploader/_file-uploader.scss
+++ b/src/components/file-uploader/_file-uploader.scss
@@ -44,7 +44,8 @@
     align-items: center;
     justify-content: space-between;
     min-height: rem(30px);
-    background-color: $field-01;
+    background-color: $field-02;
+    border: 1px solid $ui-03;
     padding: 0 $spacing-md;
     margin-bottom: $spacing-md;
 
diff --git a/src/components/form/_form.scss b/src/components/form/_form.scss
index 3ebb377830cd..7a18745b7248 100644
--- a/src/components/form/_form.scss
+++ b/src/components/form/_form.scss
@@ -12,14 +12,16 @@
 
   .#{$prefix}--form-item {
     @include font-family;
+    display: flex;
+    flex-direction: column;
     flex: 1;
     margin-right: $spacing-md;
     margin-bottom: $spacing-lg;
+  }
 
-    &:last-of-type {
-      margin-right: 0;
-      margin-bottom: 0;
-    }
+  .#{$prefix}--form-item--light input,
+  .#{$prefix}--form-item--light input[type='number'] {
+    background: $field-02 !important;
   }
 
   .#{$prefix}--label {
@@ -65,4 +67,15 @@
       color: $support-01;
     }
   }
+
+  .#{$prefix}--form__helper-text {
+    @include typescale('omega');
+    color: $text-02;
+    order: 1;
+    line-height: 1.5;
+    z-index: 0;
+    max-height: 3rem;
+    opacity: 1;
+    margin-bottom: $spacing-xs;
+  }
 }
diff --git a/src/components/form/form--light.html b/src/components/form/form--light.html
new file mode 100644
index 000000000000..1d338c456089
--- /dev/null
+++ b/src/components/form/form--light.html
@@ -0,0 +1,31 @@
+<div class="bx--form-item">
+  <input id="text-input-3" type="text" class="bx--text-input bx--text-input--light" placeholder="Optional placeholder text">
+  <label for="text-input-3" class="bx--label">Text Input label</label>
+</div>
+<div class="bx--form-item">
+  <textarea id="text-area-2" class="bx--text-area bx--text-area--light" rows="4" cols="50" placeholder="Placeholder text."></textarea>
+  <label for="text-area-2" class="bx--label">Text Area label</label>
+</div>
+<div class="bx--form-item">
+  <div class="bx--select bx--select--light">
+    <select id="select-id" class="bx--select-input">
+      <option class="bx--select-option" disabled selected hidden>Choose an option</option>
+      <option class="bx--select-option" value="solong">A much longer option that is worth having around to check how text flows</option>
+      <optgroup class="bx--select-optgroup" label="Category 1">
+        <option class="bx--select-option" value="option1">Option 1</option>
+        <option class="bx--select-option" value="option2">Option 2</option>
+      </optgroup>
+      <optgroup class="bx--select-optgroup" label="Category 2">
+        <option class="bx--select-option" value="option1">Option 1</option>
+        <option class="bx--select-option" value="option2">Option 2</option>
+      </optgroup>
+    </select>
+    <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+      <path d="M10 0L5 5 0 0z"></path>
+    </svg>
+    <label for="select-id" class="bx--label">Select label</label>
+  </div>
+</div>
+<div class="bx--form-item">
+  <button class="bx--btn bx--btn--primary" type="button">Submit</button>
+</div>
diff --git a/src/components/form/form.html b/src/components/form/form.html
index 4d126b5debb1..d1fff48c4f83 100644
--- a/src/components/form/form.html
+++ b/src/components/form/form.html
@@ -1,21 +1,14 @@
 <div class="bx--form-item">
-  <label for="text1" class="bx--label">Text Input label</label>
-  <input id="text1" type="text" class="bx--text-input" placeholder="Placeholder text" />
-  <div class="bx--form-requirement">
-    Username is taken.
-  </div>
+  <input id="text-input-3" type="text" class="bx--text-input" placeholder="Optional placeholder text">
+  <label for="text-input-3" class="bx--label">Text Input label</label>
 </div>
 <div class="bx--form-item">
-  <label for="text-area-2" class="bx--label">Text area label</label>
-  <textarea id="text-area-2" class="bx--text-area" rows="4" cols="50" placeholder="Placeholder text"></textarea>
-  <div class="bx--form-requirement">
-    Please do not leave blank.
-  </div>
+  <textarea id="text-area-2" class="bx--text-area" rows="4" cols="50" placeholder="Placeholder text."></textarea>
+  <label for="text-area-2" class="bx--label">Text Area label</label>
 </div>
 <div class="bx--form-item">
-  <label for="select-id-form" class="bx--label">Select label</label>
   <div class="bx--select">
-    <select id="select-id-form" class="bx--select-input">
+    <select id="select-id" class="bx--select-input">
       <option class="bx--select-option" disabled selected hidden>Choose an option</option>
       <option class="bx--select-option" value="solong">A much longer option that is worth having around to check how text flows</option>
       <optgroup class="bx--select-optgroup" label="Category 1">
@@ -27,12 +20,10 @@
         <option class="bx--select-option" value="option2">Option 2</option>
       </optgroup>
     </select>
-    <div class="bx--form-requirement">
-      Please choose an option.
-    </div>
     <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
       <path d="M10 0L5 5 0 0z"></path>
     </svg>
+    <label for="select-id" class="bx--label">Select label</label>
   </div>
 </div>
 <div class="bx--form-item">
diff --git a/src/components/link/_link.scss b/src/components/link/_link.scss
index 217f2ba5255f..637c648b09c4 100644
--- a/src/components/link/_link.scss
+++ b/src/components/link/_link.scss
@@ -28,15 +28,15 @@
     &:active,
     &:hover,
     &:focus {
-      color: $brand-02;
+      color: $hover-primary-text;
     }
 
     &:focus {
       @include focus-outline('border');
     }
 
-    &[aria-disabled="true"] {
-      opacity: .5;
+    &[aria-disabled='true'] {
+      opacity: 0.5;
       pointer-events: none;
     }
   }
diff --git a/src/components/module/_module.scss b/src/components/module/_module.scss
index 6d1a122a11a3..db36e1f66908 100644
--- a/src/components/module/_module.scss
+++ b/src/components/module/_module.scss
@@ -35,7 +35,7 @@
         display: flex;
         align-items: center;
         padding: 1rem 1.5rem;
-        border-bottom: 1px solid $ui-04;
+        border-bottom: 1px solid $ui-03;
       }
 
       .#{$prefix}--module__title {
diff --git a/src/components/notification/_inline-notification.scss b/src/components/notification/_inline-notification.scss
index 8d8f9d96a8b3..c0ee7acc4e74 100644
--- a/src/components/notification/_inline-notification.scss
+++ b/src/components/notification/_inline-notification.scss
@@ -23,7 +23,7 @@
     background-color: transparent;
     padding: $spacing-sm $spacing-md;
     min-height: rem(40px);
-    color: $text-03;
+    color: $text-02;
     margin-top: $spacing-md;
     margin-bottom: $spacing-md;
   }
@@ -95,7 +95,7 @@
   .#{$prefix}--inline-notification__close-icon {
     height: 10px;
     width: 10px;
-    fill: $text-03;
+    fill: $ui-05;
     position: absolute;
     top: 3px;
     right: 1px;
diff --git a/src/components/notification/_toast-notification.scss b/src/components/notification/_toast-notification.scss
index 8862b1a73801..883a034d823e 100644
--- a/src/components/notification/_toast-notification.scss
+++ b/src/components/notification/_toast-notification.scss
@@ -22,7 +22,7 @@
     justify-content: space-between;
     width: 16.875rem;
     padding: $spacing-md $spacing-md $spacing-xs $spacing-md;
-    background-color: $inverse-01;
+    background-color: $ui-01;
     color: $text-01;
     margin-top: $spacing-xs;
     margin-bottom: $spacing-xs;
@@ -50,7 +50,7 @@
   }
 
   .#{$prefix}--toast-notification__close-button {
-    background-color: $inverse-01;
+    background-color: $ui-01;
     border: none;
     cursor: pointer;
     margin: 0;
@@ -66,7 +66,7 @@
   .#{$prefix}--toast-notification__icon {
     height: 10px;
     width: 10px;
-    fill: $text-03;
+    fill: $ui-05;
     position: absolute;
     top: 1px;
     right: 1px;
@@ -82,7 +82,7 @@
 
   .#{$prefix}--toast-notification__subtitle {
     @include typescale('omega');
-    color: $text-03;
+    color: $text-02;
     margin-top: 0;
     margin-bottom: $spacing-md;
     line-height: 1.2;
@@ -90,7 +90,7 @@
 
   .#{$prefix}--toast-notification__caption {
     @include typescale('omega');
-    color: $text-03;
+    color: $text-02;
     line-height: 1;
   }
 }
diff --git a/src/components/number-input/_number-input.scss b/src/components/number-input/_number-input.scss
index e2c2c2e675a5..ce581948820b 100644
--- a/src/components/number-input/_number-input.scss
+++ b/src/components/number-input/_number-input.scss
@@ -11,6 +11,8 @@
   .#{$prefix}--number {
     @include reset;
     display: flex;
+    flex-direction: column;
+    position: relative;
   }
 
   .#{$prefix}--number input[type='number'] {
@@ -26,11 +28,22 @@
     height: rem(40px);
     color: $text-01;
     background-color: $field-01;
-    border: $input-border;
+    border: none;
+    box-shadow: 0 1px 0 0 $text-02;
+    order: 2;
     border-radius: 0;
 
+    & ~ .#{$prefix}--label {
+      order: 1;
+    }
+
     &:focus {
-      @include focus-outline('border');
+      outline: none;
+      box-shadow: 0 2px 0 0 $brand-01;
+    }
+
+    &:focus ~ .#{$prefix}--label {
+      color: $brand-01;
     }
 
     &:disabled {
@@ -43,6 +56,18 @@
       cursor: not-allowed;
       pointer-events: none;
     }
+
+    & ~ .#{$prefix}--form-requirement {
+      order: 3;
+      color: $support-01;
+      font-weight: 400;
+      margin-top: $spacing-2xs;
+      overflow: visible;
+
+      &::before {
+        display: none;
+      }
+    }
   }
 
   .#{$prefix}--number input[type='number'] {
@@ -59,13 +84,16 @@
 
   .#{$prefix}--number__controls {
     @include reset;
-    position: relative;
+    position: absolute;
     display: block;
-    left: -1.75rem;
+    left: auto;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    left: auto;
+    right: 0.5rem;
+    bottom: 0.5rem;
   }
 
   .#{$prefix}--number__control-btn {
@@ -84,7 +112,7 @@
     }
 
     &:hover svg {
-      fill: $brand-02;
+      fill: $hover-primary;
     }
   }
 
@@ -96,16 +124,31 @@
     // Hover styles for use with old HTML w/o button
     &:hover {
       cursor: pointer;
-      fill: $brand-02;
+      fill: $hover-primary;
     }
   }
-}
 
-.#{$prefix}--number[data-invalid] {
-  input[type='number'] {
-    box-shadow: 0 2px 0px 0px $support-01;
+  .#{$prefix}--number[data-invalid] {
+    input[type='number'],
+    input[type='number']:focus {
+      outline: none;
+      box-shadow: 0 2px 0px 0px $support-01;
+    }
+
+    input[type='number']:focus ~ .#{$prefix}--label {
+      color: $support-01;
+    }
+
+    ~ .#{$prefix}--form-requirement {
+      max-height: rem(200px);
+    }
+
+    .#{$prefix}--number__controls {
+      bottom: 0.75rem;
+    }
   }
-  ~ .#{$prefix}--form-requirement {
-    max-height: rem(200px);
+
+  .#{$prefix}--number--light input[type='number'] {
+    background: $field-02;
   }
 }
diff --git a/src/components/number-input/number-input--light.html b/src/components/number-input/number-input--light.html
new file mode 100644
index 000000000000..cb844d6ca719
--- /dev/null
+++ b/src/components/number-input/number-input--light.html
@@ -0,0 +1,62 @@
+<div class="bx--form-item">
+  <div data-numberinput class="bx--number bx--number--light">
+    <div class="bx--number__controls">
+      <button class="bx--number__control-btn up-icon">
+        <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
+          <path d="M10 5L5 0 0 5z"></path>
+        </svg>
+      </button>
+      <button class="bx--number__control-btn down-icon">
+        <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
+          <path d="M10 0L5 5 0 0z"></path>
+        </svg>
+      </button>
+    </div>
+    <input id="number-input" type="number" min="0" max="100" value="1">
+    <label for="number-input" class="bx--label">Number Input label</label>
+  </div>
+</div>
+
+<div class="bx--form-item">
+  <div data-invalid data-numberinput class="bx--number bx--number--light">
+    <input id="number-input" type="number" min="0" max="100" value="1">
+    <div class="bx--number__controls">
+      <button class="bx--number__control-btn up-icon">
+        <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
+          <path d="M10 5L5 0 0 5z"></path>
+        </svg>
+      </button>
+      <button class="bx--number__control-btn down-icon">
+        <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
+          <path d="M10 0L5 5 0 0z"></path>
+        </svg>
+      </button>
+    </div>
+    <label for="number-input" class="bx--label">Number Input label</label>
+    <div class="bx--form-requirement">
+      Invalid number
+    </div>
+  </div>
+</div>
+
+<div class="bx--form-item">
+  <div data-numberinput class="bx--number bx--number--light">
+    <input id="number-input" type="number" min="0" max="100" value="1">
+    <div class="bx--number__controls">
+      <button class="bx--number__control-btn up-icon">
+        <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
+          <path d="M10 5L5 0 0 5z"></path>
+        </svg>
+      </button>
+      <button class="bx--number__control-btn down-icon">
+        <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
+          <path d="M10 0L5 5 0 0z"></path>
+        </svg>
+      </button>
+    </div>
+    <label for="number-input" class="bx--label">Number Input label</label>
+    <div class="bx--form__helper-text">
+      Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
+    </div>
+  </div>
+</div>
diff --git a/src/components/number-input/number-input.html b/src/components/number-input/number-input.html
index 78ca84ba7a23..2e364f27c424 100644
--- a/src/components/number-input/number-input.html
+++ b/src/components/number-input/number-input.html
@@ -1,7 +1,5 @@
 <div class="bx--form-item">
-  <label for="number-input" class="bx--label">Number Input label</label>
   <div data-numberinput class="bx--number">
-    <input id="number-input" type="number" min="0" max="100" value="1">
     <div class="bx--number__controls">
       <button class="bx--number__control-btn up-icon">
         <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
@@ -14,11 +12,12 @@
         </svg>
       </button>
     </div>
+    <input id="number-input" type="number" min="0" max="100" value="1">
+    <label for="number-input" class="bx--label">Number Input label</label>
   </div>
 </div>
 
 <div class="bx--form-item">
-  <label for="number-input" class="bx--label">Number Input label</label>
   <div data-invalid data-numberinput class="bx--number">
     <input id="number-input" type="number" min="0" max="100" value="1">
     <div class="bx--number__controls">
@@ -33,8 +32,31 @@
         </svg>
       </button>
     </div>
+    <label for="number-input" class="bx--label">Number Input label</label>
+    <div class="bx--form-requirement">
+      Invalid number
+    </div>
   </div>
-  <div class="bx--form-requirement">
-    Invalid number
+</div>
+
+<div class="bx--form-item">
+  <div data-numberinput class="bx--number">
+    <input id="number-input" type="number" min="0" max="100" value="1">
+    <div class="bx--number__controls">
+      <button class="bx--number__control-btn up-icon">
+        <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
+          <path d="M10 5L5 0 0 5z"></path>
+        </svg>
+      </button>
+      <button class="bx--number__control-btn down-icon">
+        <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
+          <path d="M10 0L5 5 0 0z"></path>
+        </svg>
+      </button>
+    </div>
+    <label for="number-input" class="bx--label">Number Input label</label>
+    <div class="bx--form__helper-text">
+      Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
+    </div>
   </div>
 </div>
diff --git a/src/components/order-summary/_order-summary.scss b/src/components/order-summary/_order-summary.scss
index 0d5a642a56dd..d669cf96100e 100644
--- a/src/components/order-summary/_order-summary.scss
+++ b/src/components/order-summary/_order-summary.scss
@@ -10,7 +10,7 @@
 @include exports('order-summary') {
   @include deprecate(
     'Accessing the `order-summary` component from the `carbon-components` ' +
-    'package is deprecated. Use the `carbon-addons-bluemix` package instead.'
+      'package is deprecated. Use the `carbon-addons-bluemix` package instead.'
   ) {
     .#{$prefix}--order-summary {
       @include typescale('zeta');
@@ -26,7 +26,7 @@
       display: flex;
       align-items: center;
       padding: 0 0 0 1.25rem;
-      border-bottom: 1px solid $ui-05;
+      border-bottom: 1px solid $ui-03;
 
       .#{$prefix}--dropdown {
         flex: 1;
@@ -59,7 +59,7 @@
     .#{$prefix}--order-list {
       padding: 1.25rem 0;
       margin: 0 1.25rem;
-      border-bottom: 1px solid $ui-05;
+      border-bottom: 1px solid $ui-03;
     }
 
     .#{$prefix}--order-item {
diff --git a/src/components/overflow-menu/_overflow-menu.scss b/src/components/overflow-menu/_overflow-menu.scss
index 03cbc51c2424..cda162c3b7b8 100644
--- a/src/components/overflow-menu/_overflow-menu.scss
+++ b/src/components/overflow-menu/_overflow-menu.scss
@@ -34,7 +34,7 @@
 
     &:hover,
     &:focus {
-      fill: $brand-01;
+      fill: $hover-secondary;
     }
   }
 
@@ -47,7 +47,7 @@
     position: absolute;
     z-index: z('floating');
     background-color: $inverse-01;
-    border: 1px solid $ui-04;
+    border: 1px solid $ui-03;
     width: 11.25rem;
     list-style: none;
     margin-top: $spacing-2xs;
@@ -68,8 +68,8 @@
     z-index: -1;
     transform: rotate(45deg);
     background-color: $inverse-01;
-    border-top: 1px solid $ui-04;
-    border-left: 1px solid $ui-04;
+    border-top: 1px solid $ui-03;
+    border-left: 1px solid $ui-03;
     top: -5px;
     left: 24px;
   }
@@ -84,7 +84,7 @@
   }
 
   .#{$prefix}--overflow-menu--divider {
-    border-top: 1px solid $ui-04;
+    border-top: 1px solid $ui-03;
   }
 
   .#{$prefix}--overflow-menu-options__btn {
@@ -103,8 +103,7 @@
 
     &:focus {
       outline: 1px solid transparent;
-      background-color: $brand-01;
-      color: $inverse-01;
+      background-color: $hover-row;
     }
 
     .#{$prefix}--overflow-menu-options__option--danger & {
@@ -115,15 +114,15 @@
   }
 
   .#{$prefix}--overflow-menu-options__option:hover {
-    background-color: $brand-01;
+    background-color: $hover-row;
   }
 
   .#{$prefix}--overflow-menu-options__option:hover .#{$prefix}--overflow-menu-options__btn {
-    color: $inverse-01;
+    background-color: $hover-row;
   }
 
   .#{$prefix}--overflow-menu-options__option--danger {
-    border-top: 1px solid $ui-04;
+    border-top: 1px solid $ui-03;
   }
 
   .#{$prefix}--overflow-menu-options__option--danger:hover {
@@ -143,7 +142,7 @@
   .#{$prefix}--overflow-menu-options__option--disabled:hover .#{$prefix}--overflow-menu-options__btn {
     color: $text-01;
     opacity: 0.5;
-    
+
     &:active,
     &:focus {
       background-color: $ui-01;
diff --git a/src/components/pagination/_pagination.scss b/src/components/pagination/_pagination.scss
index 81a5bcdf5af7..438357cc3bd2 100644
--- a/src/components/pagination/_pagination.scss
+++ b/src/components/pagination/_pagination.scss
@@ -23,7 +23,7 @@ $css--helpers: true;
     padding: $spacing-xs $spacing-md;
     display: flex;
     align-items: center;
-    border: 1px solid $ui-04;
+    border: 1px solid $ui-03;
 
     .#{$prefix}--form-item {
       flex: auto;
@@ -54,7 +54,7 @@ $css--helpers: true;
   .#{$prefix}--pagination__button-icon {
     height: rem(12px);
     width: rem(12px);
-    fill: $ui-05;
+    fill: $hover-secondary;
     pointer-events: none;
     transition: $transition--base;
   }
@@ -111,10 +111,11 @@ $css--helpers: true;
     .#{$prefix}--select-input {
       height: rem(24px);
       width: auto;
-      padding: 0 $spacing-md;
+      padding: 0 1.25rem 0 0.5rem;
       margin: 0;
       font-weight: 600;
       text-align-last: center;
+      box-shadow: none;
 
       &:focus {
         @include focus-outline('border');
@@ -127,6 +128,7 @@ $css--helpers: true;
     }
 
     .#{$prefix}--text-input {
+      background-color: $field-01;
       height: rem(24px);
       min-width: rem(24px);
       width: rem(24px);
@@ -134,6 +136,7 @@ $css--helpers: true;
       margin: 0;
       font-weight: 600;
       text-align: center;
+      box-shadow: none;
 
       &:focus {
         @include focus-outline('border');
@@ -149,8 +152,8 @@ $css--helpers: true;
 
     .#{$prefix}--pagination__button {
       height: 100%;
-      border-left: 1px solid $ui-04;
-      border-right: 1px solid $ui-04;
+      border-left: 1px solid $ui-03;
+      border-right: 1px solid $ui-03;
       width: rem(42px);
       margin: 0;
     }
@@ -168,10 +171,6 @@ $css--helpers: true;
       top: -1.5px;
     }
 
-    .#{$prefix}--select-input {
-      padding-left: $spacing-md;
-    }
-
     .#{$prefix}--select__arrow {
       right: 0.3rem;
     }
diff --git a/src/components/pagination/pagination.html b/src/components/pagination/pagination.html
index 9da802f0bc0c..d42514694af4 100644
--- a/src/components/pagination/pagination.html
+++ b/src/components/pagination/pagination.html
@@ -14,10 +14,14 @@
       </svg>
     </div>
     <span class="bx--pagination__text">Items per page&nbsp;&nbsp;|&nbsp;&nbsp;</span>
-    <span class="bx--pagination__text"><span data-displayed-item-range>1-10</span> of <span data-total-items>40</span> items</span>
+    <span class="bx--pagination__text">
+      <span data-displayed-item-range>1-10</span> of
+      <span data-total-items>40</span> items</span>
   </div>
   <div class="bx--pagination__right">
-    <span class="bx--pagination__text"><span data-displayed-page-number>1</span> of <span data-total-pages>4</span> pages</span>
+    <span class="bx--pagination__text">
+      <span data-displayed-page-number>1</span> of
+      <span data-total-pages>4</span> pages</span>
     <button class="bx--pagination__button bx--pagination__button--backward" data-page-backward aria-label="Backward button">
       <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
         <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
diff --git a/src/components/progress-indicator/_progress-indicator.scss b/src/components/progress-indicator/_progress-indicator.scss
index 000202673f70..a16c9cfebe19 100644
--- a/src/components/progress-indicator/_progress-indicator.scss
+++ b/src/components/progress-indicator/_progress-indicator.scss
@@ -74,7 +74,7 @@
 
   .#{$prefix}--progress-step--incomplete {
     circle {
-      stroke: $ui-05;
+      stroke: $ui-04;
       stroke-width: $progress-indicator-stroke-width;
       fill: transparent;
     }
@@ -84,7 +84,7 @@
     }
 
     .#{$prefix}--progress-line {
-      background-color: $ui-05;
+      background-color: $ui-04;
     }
   }
 
diff --git a/src/components/radio-button/_radio-button.scss b/src/components/radio-button/_radio-button.scss
index 4e6b22399164..081fb4964a4b 100644
--- a/src/components/radio-button/_radio-button.scss
+++ b/src/components/radio-button/_radio-button.scss
@@ -35,7 +35,7 @@
     @include reset;
     background-color: $inverse-01;
     border-radius: 50%;
-    border: $radio-border-width solid $ui-05;
+    border: $radio-border-width solid $ui-04;
     flex-shrink: 0;
     height: rem(18px);
     width: rem(18px);
diff --git a/src/components/search/_search.scss b/src/components/search/_search.scss
index af21bbedb8f4..e7774551f9cb 100644
--- a/src/components/search/_search.scss
+++ b/src/components/search/_search.scss
@@ -34,13 +34,18 @@
     padding: 0 $spacing-2xl;
     text-overflow: ellipsis;
     width: 100%;
+    order: 1;
 
     &:focus {
-      @include focus-outline('border');
+      outline: none;
+    }
+
+    &:focus ~ .#{$prefix}--search-magnifier {
+      fill: $brand-01;
     }
 
     &::placeholder {
-      @include placeholder-colors;
+      color: $text-02;
       font-weight: 400;
     }
 
@@ -49,6 +54,10 @@
     }
   }
 
+  .#{$prefix}--search--light .#{$prefix}--search-input {
+    background: $field-02;
+  }
+
   .#{$prefix}--search--sm .#{$prefix}--search-input {
     @include typescale('zeta');
     height: rem(32px);
@@ -70,6 +79,7 @@
   .#{$prefix}--search-magnifier {
     left: 0.75rem;
     fill: $ui-05;
+    z-index: 2;
   }
 
   .#{$prefix}--search-close {
@@ -110,6 +120,8 @@
     background-color: $ui-01;
     position: relative;
     padding: 0;
+    outline: 1px solid transparent;
+    order: 2;
   }
 
   .#{$prefix}--search-button svg {
@@ -118,7 +130,7 @@
     box-sizing: border-box;
     vertical-align: middle;
     transition: $transition--base;
-    fill: $brand-01;
+    fill: $hover-primary;
     height: 1rem;
     width: 1rem;
   }
diff --git a/src/components/search/search-large-light.html b/src/components/search/search-large-light.html
new file mode 100644
index 000000000000..56f5d81a89e9
--- /dev/null
+++ b/src/components/search/search-large-light.html
@@ -0,0 +1,29 @@
+<div data-search class="bx--search bx--search--lg bx--search--light" role="search">
+  <input class="bx--search-input" type="text" role="search" id="search__input-1" placeholder="Search" aria-labelledby="search-input-label-2">
+  <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+    <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
+    <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
+  </svg>
+  <svg class="bx--search-close bx--search-close--hidden" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z"></path>
+  </svg>
+  <button class="bx--search-button" type="button" aria-label="Filter button">
+    <svg class="bx--search-filter" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+      <path d="M5 0C3.7 0 2.6.8 2.2 2H0v2h2.2C2.6 5.2 3.7 6 5 6c1.3 0 2.4-.8 2.8-2H16V2H7.8C7.4.8 6.3 0 5 0zm0 4c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zM5 10c-1.3 0-2.4.8-2.8 2H0v2h2.2c.4 1.2 1.5 2 2.8 2 1.3 0 2.4-.8 2.8-2H16v-2H7.8c-.4-1.2-1.5-2-2.8-2zm0 4c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"></path>
+      <path d="M11 5c-1.3 0-2.4.8-2.8 2H0v2h8.2c.4 1.2 1.5 2 2.8 2 1.3 0 2.4-.8 2.8-2H16V7h-2.2c-.4-1.2-1.5-2-2.8-2zm0 4c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"></path>
+    </svg>
+  </button>
+  <button class="bx--search-button" type="button" data-search-toggle aria-label="Grid and list toggle button">
+    <div data-search-view="grid">
+      <svg class="bx--search-view" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+        <path d="M0 0h7v7H0zM9 0h7v7H9zM0 9h7v7H0zM9 9h7v7H9z"></path>
+      </svg>
+    </div>
+    <div class="bx--search-view--hidden" data-search-view="list">
+      <svg class="bx--search-view" width="16" height="14" viewBox="0 0 16 14" fill-rule="evenodd">
+        <path d="M0 0h16v2H0zM0 4h16v2H0zM0 8h16v2H0zM0 12h16v2H0z"></path>
+      </svg>
+    </div>
+  </button>
+  <label class="bx--label" id="search-input-label-2" for="search__input-1">Search</label>
+</div>
diff --git a/src/components/search/search-large.html b/src/components/search/search-large.html
index 031ca0da261a..c3933262f44a 100644
--- a/src/components/search/search-large.html
+++ b/src/components/search/search-large.html
@@ -1,15 +1,12 @@
 <div data-search class="bx--search bx--search--lg" role="search">
+  <input class="bx--search-input" type="text" role="search" id="search__input-1" placeholder="Search" aria-labelledby="search-input-label-2">
   <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
     <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
     <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
   </svg>
-  <label class="bx--label" id="search-input-label-2" for="search__input-1">Search</label>
-  <input class="bx--search-input" type="text" role="search" id="search__input-1" placeholder="Search" aria-labelledby="search-input-label-2">
-  <button class="bx--search-close bx--search-close--hidden" title="Clear search input" aria-label="Clear search input">
-    <svg width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-      <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z"></path>
-    </svg>
-  </button>
+  <svg class="bx--search-close bx--search-close--hidden" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z"></path>
+  </svg>
   <button class="bx--search-button" type="button" aria-label="Filter button">
     <svg class="bx--search-filter" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
       <path d="M5 0C3.7 0 2.6.8 2.2 2H0v2h2.2C2.6 5.2 3.7 6 5 6c1.3 0 2.4-.8 2.8-2H16V2H7.8C7.4.8 6.3 0 5 0zm0 4c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zM5 10c-1.3 0-2.4.8-2.8 2H0v2h2.2c.4 1.2 1.5 2 2.8 2 1.3 0 2.4-.8 2.8-2H16v-2H7.8c-.4-1.2-1.5-2-2.8-2zm0 4c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"></path>
@@ -28,4 +25,5 @@
       </svg>
     </div>
   </button>
+  <label class="bx--label" id="search-input-label-2" for="search__input-1">Search</label>
 </div>
diff --git a/src/components/search/search-small-light.html b/src/components/search/search-small-light.html
new file mode 100644
index 000000000000..6140d0028b7c
--- /dev/null
+++ b/src/components/search/search-small-light.html
@@ -0,0 +1,13 @@
+<div class="bx--form-item">
+  <div data-search class="bx--search bx--search--sm bx--search--light" role="search">
+    <label id="search-input-label-1" class="bx--label" for="search__input-2">Search</label>
+    <input class="bx--search-input" type="text" id="search__input-2" role="search" placeholder="Search" aria-labelledby="search-input-label-1">
+    <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+      <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
+      <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
+    </svg>
+    <svg class="bx--search-close bx--search-close--hidden" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+      <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z"></path>
+    </svg>
+  </div>
+</div>
diff --git a/src/components/search/search-small.html b/src/components/search/search-small.html
index ea0e7f6e176a..8ccb5cd76187 100644
--- a/src/components/search/search-small.html
+++ b/src/components/search/search-small.html
@@ -1,14 +1,13 @@
-<div data-search class="bx--search bx--search--sm" role="search">
-  <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-    <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
-    <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
-  </svg>
-  <label id="search-input-label-1" class="bx--label" for="search__input-2">Search</label>
-  <input class="bx--search-input" type="text" id="search__input-2" role="search" placeholder="Search" aria-labelledby="search-input-label-1">
-  <button class="bx--search-close bx--search-close--hidden" title="Clear search
-  input" aria-label="Clear search input">
-    <svg width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+<div class="bx--form-item">
+  <div data-search class="bx--search bx--search--sm" role="search">
+    <label id="search-input-label-1" class="bx--label" for="search__input-2">Search</label>
+    <input class="bx--search-input" type="text" id="search__input-2" role="search" placeholder="Search" aria-labelledby="search-input-label-1">
+    <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+      <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
+      <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
+    </svg>
+    <svg class="bx--search-close bx--search-close--hidden" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
       <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z"></path>
     </svg>
-  </button>
+  </div>
 </div>
diff --git a/src/components/select/_select.scss b/src/components/select/_select.scss
index eb3598772fa7..92b5fc6cf1a1 100644
--- a/src/components/select/_select.scss
+++ b/src/components/select/_select.scss
@@ -15,7 +15,8 @@
   .#{$prefix}--select {
     @include reset;
     position: relative;
-    display: block;
+    display: flex;
+    flex-direction: column;
   }
 
   .#{$prefix}--select-input {
@@ -28,7 +29,9 @@
     padding: 0 $spacing-2xl 0 $spacing-md;
     color: $text-01;
     background-color: $field-01;
-    border: $input-border;
+    border: none;
+    box-shadow: 0 1px 0 0 $text-02;
+    order: 2;
     border-radius: 0;
     cursor: pointer;
 
@@ -37,21 +40,54 @@
       display: none;
     }
 
+    & ~ .#{$prefix}--label {
+      order: 1;
+    }
+
     &:focus {
-      @include focus-outline('border');
+      outline: none;
+      box-shadow: 0 2px 0 0 $brand-01;
+    }
+
+    &[data-invalid],
+    &[data-invalid]:focus {
+      box-shadow: 0 2px 0 0 $support-01;
+    }
+
+    &:focus ~ .#{$prefix}--label {
+      color: $brand-01;
+    }
+
+    &[data-invalid]:focus ~ .#{$prefix}--label {
+      color: $support-01;
     }
 
     &:disabled {
       opacity: 0.5;
       cursor: not-allowed;
     }
+
+    & ~ .#{$prefix}--form-requirement {
+      order: 3;
+      color: $support-01;
+      font-weight: 400;
+      margin-top: $spacing-2xs;
+
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  .#{$prefix}--select--light .#{$prefix}--select-input {
+    background: $field-02;
   }
 
   .#{$prefix}--select__arrow {
     fill: $brand-01;
     position: absolute;
     right: 1rem;
-    top: 1.175rem;
+    top: 2.625rem;
     width: rem(10px);
     height: rem(5px);
     pointer-events: none;
@@ -73,26 +109,36 @@
       color: $text-01;
     }
   }
-}
 
-.#{$prefix}--select--inline {
-  display: flex;
-  align-items: center;
+  .#{$prefix}--select--inline {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 
-  .#{$prefix}--label {
-    white-space: nowrap;
-    margin: 0 $spacing-xs 0 0;
-    font-weight: 400;
-  }
+    .#{$prefix}--label {
+      white-space: nowrap;
+      margin: 0 $spacing-xs 0 0;
+      font-weight: 400;
+    }
 
-  .#{$prefix}--select-input {
-    background-color: transparent;
-    color: $brand-01;
-    font-weight: 600;
+    .#{$prefix}--select-input {
+      background-color: transparent;
+      color: $brand-01;
+      font-weight: 600;
+      box-shadow: none;
 
-    &:disabled ~ * {
-      opacity: 0.5;
-      cursor: not-allowed;
+      &:focus {
+        @include focus-outline('border');
+      }
+
+      &:disabled ~ * {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+
+    .#{$prefix}--select__arrow {
+      top: auto;
     }
   }
 }
diff --git a/src/components/select/inline-select.html b/src/components/select/select--inline.html
similarity index 100%
rename from src/components/select/inline-select.html
rename to src/components/select/select--inline.html
diff --git a/src/components/select/select--light.html b/src/components/select/select--light.html
new file mode 100644
index 000000000000..24cabb7b04e5
--- /dev/null
+++ b/src/components/select/select--light.html
@@ -0,0 +1,44 @@
+<div class="bx--form-item">
+  <div class="bx--select bx--select--light">
+    <select id="select-id" class="bx--select-input">
+      <option class="bx--select-option" disabled selected hidden>Choose an option</option>
+      <option class="bx--select-option" value="solong">A much longer option that is worth having around to check how text flows</option>
+      <optgroup class="bx--select-optgroup" label="Category 1">
+        <option class="bx--select-option" value="option1">Option 1</option>
+        <option class="bx--select-option" value="option2">Option 2</option>
+      </optgroup>
+      <optgroup class="bx--select-optgroup" label="Category 2">
+        <option class="bx--select-option" value="option1">Option 1</option>
+        <option class="bx--select-option" value="option2">Option 2</option>
+      </optgroup>
+    </select>
+    <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+      <path d="M10 0L5 5 0 0z"></path>
+    </svg>
+    <label for="select-id" class="bx--label">Select label</label>
+  </div>
+</div>
+
+<div class="bx--form-item">
+  <div class="bx--select bx--select--light">
+    <select data-invalid id="select-id" class="bx--select-input">
+      <option class="bx--select-option" disabled selected hidden>Choose an option</option>
+      <option class="bx--select-option" value="solong">A much longer option that is worth having around to check how text flows</option>
+      <optgroup class="bx--select-optgroup" label="Category 1">
+        <option class="bx--select-option" value="option1">Option 1</option>
+        <option class="bx--select-option" value="option2">Option 2</option>
+      </optgroup>
+      <optgroup class="bx--select-optgroup" label="Category 2">
+        <option class="bx--select-option" value="option1">Option 1</option>
+        <option class="bx--select-option" value="option2">Option 2</option>
+      </optgroup>
+    </select>
+    <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+      <path d="M10 0L5 5 0 0z"></path>
+    </svg>
+    <label for="select-id" class="bx--label">Select label</label>
+    <div class="bx--form-requirement">
+      Validation message here
+    </div>
+  </div>
+</div>
diff --git a/src/components/select/select.html b/src/components/select/select.html
index d9bbccb86b2a..e2e1348528eb 100644
--- a/src/components/select/select.html
+++ b/src/components/select/select.html
@@ -1,5 +1,4 @@
 <div class="bx--form-item">
-  <label for="select-id" class="bx--label">Select label</label>
   <div class="bx--select">
     <select id="select-id" class="bx--select-input">
       <option class="bx--select-option" disabled selected hidden>Choose an option</option>
@@ -16,5 +15,30 @@
     <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
       <path d="M10 0L5 5 0 0z"></path>
     </svg>
+    <label for="select-id" class="bx--label">Select label</label>
+  </div>
+</div>
+
+<div class="bx--form-item">
+  <div class="bx--select">
+    <select data-invalid id="select-id" class="bx--select-input">
+      <option class="bx--select-option" disabled selected hidden>Choose an option</option>
+      <option class="bx--select-option" value="solong">A much longer option that is worth having around to check how text flows</option>
+      <optgroup class="bx--select-optgroup" label="Category 1">
+        <option class="bx--select-option" value="option1">Option 1</option>
+        <option class="bx--select-option" value="option2">Option 2</option>
+      </optgroup>
+      <optgroup class="bx--select-optgroup" label="Category 2">
+        <option class="bx--select-option" value="option1">Option 1</option>
+        <option class="bx--select-option" value="option2">Option 2</option>
+      </optgroup>
+    </select>
+    <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+      <path d="M10 0L5 5 0 0z"></path>
+    </svg>
+    <label for="select-id" class="bx--label">Select label</label>
+    <div class="bx--form-requirement">
+      Validation message here
+    </div>
   </div>
 </div>
diff --git a/src/components/slider/_slider.scss b/src/components/slider/_slider.scss
index dee04a43efc4..b3c0555f590f 100644
--- a/src/components/slider/_slider.scss
+++ b/src/components/slider/_slider.scss
@@ -45,7 +45,7 @@
       outline: none;
     }
     &:active {
-      background: $brand-01;
+      background: $hover-secondary;
       transform: translate(-50%, -50%);
     }
   }
@@ -63,7 +63,7 @@
     position: absolute;
     width: 100%;
     height: rem(4px);
-    background: $ui-05;
+    background: $ui-04;
     cursor: pointer;
     transform: translate(0%, -50%);
   }
diff --git a/src/components/structured-list/_structured-list.scss b/src/components/structured-list/_structured-list.scss
index 59fa54cc6de8..57a68296d247 100644
--- a/src/components/structured-list/_structured-list.scss
+++ b/src/components/structured-list/_structured-list.scss
@@ -37,7 +37,7 @@
     background-color: transparent;
 
     &.#{$prefix}--structured-list--border {
-      border: 1px solid $ui-04;
+      border: 1px solid $ui-03;
       background-color: $ui-01;
     }
 
@@ -49,22 +49,22 @@
 
   .#{$prefix}--structured-list-row {
     display: table-row;
-    border-bottom: 1px solid $ui-04;
+    border-bottom: 1px solid $ui-03;
     transition: $transition--base $carbon--standard-easing;
 
     .#{$prefix}--structured-list--selection &:hover:not(.#{$prefix}--structured-list-row--header-row) {
-      background-color: rgba($brand-02, 0.1);
+      background-color: $hover-row;
       cursor: pointer;
     }
 
     // Deprecated
     [data-structured-list] &:hover:not(.#{$prefix}--structured-list-row--header-row) {
-      background-color: rgba($brand-02, 0.1);
+      background-color: $hover-row;
       cursor: pointer;
     }
 
     &.#{$prefix}--structured-list-row--selected {
-      background-color: rgba($brand-02, 0.1);
+      background-color: $hover-row;
     }
 
     &.#{$prefix}--structured-list-row--header-row {
@@ -119,7 +119,7 @@
     transition: $transition--base $carbon--standard-easing;
 
     .#{$prefix}--structured-list-row:hover & {
-      fill: rgba($brand-02, 0.1);
+      fill: $hover-row;
     }
 
     .#{$prefix}--structured-list-input:checked + .#{$prefix}--structured-list-row &,
diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss
index 29862c4663a7..bb8ae340c8ca 100644
--- a/src/components/tabs/_tabs.scss
+++ b/src/components/tabs/_tabs.scss
@@ -36,7 +36,7 @@
     padding: 0 $spacing-md;
     height: rem(40px);
     cursor: pointer;
-    background-color: $field-01;
+    background-color: $field-02;
 
     svg {
       width: rem(12px);
@@ -73,7 +73,8 @@
     display: flex;
     flex-direction: column;
     z-index: z('dropdown');
-    
+    background: $ui-01;
+
     @include breakpoint(bp--sm--major) {
       @include typescale('epsilon');
       flex-direction: row;
@@ -105,7 +106,7 @@
 
     &:hover,
     &:focus {
-      background-color: $brand-01;
+      background-color: $hover-row;
 
       @include breakpoint(bp--sm--major) {
         outline: 1px solid transparent;
@@ -140,10 +141,10 @@
   }
 
   .#{$prefix}--tabs__nav-item:hover .#{$prefix}--tabs__nav-link {
-    color: $inverse-01;
+    color: $text-01;
 
     @include breakpoint(bp--sm--major) {
-      color: $brand-01;
+      color: $hover-secondary;
     }
   }
 
diff --git a/src/components/text-area/_text-area.scss b/src/components/text-area/_text-area.scss
index 78a80bb00202..894ee8bd6b27 100644
--- a/src/components/text-area/_text-area.scss
+++ b/src/components/text-area/_text-area.scss
@@ -21,11 +21,18 @@
     padding: $spacing-md;
     color: $text-01;
     background-color: $field-01;
-    border: $input-border;
+    border: none;
+    box-shadow: 0 1px 0 0 $text-02;
+    order: 2;
     resize: vertical;
 
+    & ~ .#{$prefix}--label {
+      order: 1;
+    }
+
     &:focus {
-      @include focus-outline('border');
+      outline: none;
+      box-shadow: 0 2px 0 0 $brand-01;
     }
 
     &::-webkit-input-placeholder {
@@ -40,5 +47,33 @@
     &:disabled:hover {
       border: $input-border;
     }
+
+    &[data-invalid],
+    &[data-invalid]:focus {
+      box-shadow: 0 2px 0 0 $support-01;
+    }
+
+    &:focus ~ .#{$prefix}--label {
+      color: $brand-01;
+    }
+
+    &[data-invalid]:focus + .#{$prefix}--label {
+      color: $support-01;
+    }
+
+    & ~ .#{$prefix}--form-requirement {
+      order: 3;
+      color: $support-01;
+      font-weight: 400;
+      margin-top: $spacing-2xs;
+
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  .#{$prefix}--text-area--light {
+    background: $field-02;
   }
 }
diff --git a/src/components/text-area/text-area--light.html b/src/components/text-area/text-area--light.html
new file mode 100644
index 000000000000..16d1814537f3
--- /dev/null
+++ b/src/components/text-area/text-area--light.html
@@ -0,0 +1,20 @@
+<div class="bx--form-item">
+  <textarea id="text-area-2" class="bx--text-area bx--text-area--v2 bx--text-area--light" rows="4" cols="50" placeholder="Placeholder text."></textarea>
+  <label for="text-area-2" class="bx--label">Text Area label</label>
+</div>
+
+<div class="bx--form-item">
+  <textarea data-invalid id="text-area-3" class="bx--text-area bx--text-area--v2 bx--text-area--light" rows="4" cols="50" placeholder="Placeholder text."></textarea>
+  <label for="text-area-3" class="bx--label">Text Area label</label>
+  <div class="bx--form-requirement">
+    Validation message here
+  </div>
+</div>
+
+<div class="bx--form-item">
+  <textarea id="text-area-4" class="bx--text-area bx--text-area--v2 bx--text-area--light" rows="4" cols="50" placeholder="Placeholder text."></textarea>
+  <label for="text-area-4" class="bx--label">Text Area label</label>
+  <div class="bx--form__helper-text">
+    Optional helper text goes here
+  </div>
+</div>
diff --git a/src/components/text-area/text-area.html b/src/components/text-area/text-area.html
index 40b3f9c72d6b..386452399e96 100644
--- a/src/components/text-area/text-area.html
+++ b/src/components/text-area/text-area.html
@@ -1,2 +1,20 @@
-<label for="text-area-1" class="bx--label">Text Area label</label>
-<textarea id="text-area-1" class="bx--text-area" rows="4" cols="50" placeholder="Placeholder text."></textarea>
+<div class="bx--form-item">
+  <textarea id="text-area-2" class="bx--text-area bx--text-area--v2" rows="4" cols="50" placeholder="Placeholder text."></textarea>
+  <label for="text-area-2" class="bx--label">Text Area label</label>
+</div>
+
+<div class="bx--form-item">
+  <textarea data-invalid id="text-area-3" class="bx--text-area bx--text-area--v2" rows="4" cols="50" placeholder="Placeholder text."></textarea>
+  <label for="text-area-3" class="bx--label">Text Area label</label>
+  <div class="bx--form-requirement">
+    Validation message here
+  </div>
+</div>
+
+<div class="bx--form-item">
+  <textarea id="text-area-4" class="bx--text-area bx--text-area--v2" rows="4" cols="50" placeholder="Placeholder text."></textarea>
+  <label for="text-area-4" class="bx--label">Text Area label</label>
+  <div class="bx--form__helper-text">
+    Optional helper text goes here
+  </div>
+</div>
diff --git a/src/components/text-input/_text-input.scss b/src/components/text-input/_text-input.scss
index 1b6aecc4d732..a8472e6a8e9c 100644
--- a/src/components/text-input/_text-input.scss
+++ b/src/components/text-input/_text-input.scss
@@ -19,11 +19,17 @@
     display: block;
     width: 100%;
     height: rem(40px);
-    min-width: 10rem;
+    min-width: rem(300px);
     padding: 0 $spacing-md;
     color: $text-01;
     background-color: $field-01;
-    border: $input-border;
+    border: none;
+    box-shadow: 0 1px 0 0 $text-02;
+    order: 2;
+
+    & ~ .#{$prefix}--label {
+      order: 1;
+    }
 
     &::-webkit-input-placeholder {
       @include placeholder-colors;
@@ -31,7 +37,20 @@
 
     &:focus {
       outline: none;
-      border: 1px solid $brand-01;
+      box-shadow: 0 2px 0 0 $brand-01;
+    }
+
+    &[data-invalid],
+    &[data-invalid]:focus {
+      box-shadow: 0 2px 0 0 $support-01;
+    }
+
+    &:focus ~ .#{$prefix}--label {
+      color: $brand-01;
+    }
+
+    &[data-invalid]:focus + .#{$prefix}--label {
+      color: $support-01;
     }
 
     &:disabled {
@@ -40,7 +59,22 @@
     }
 
     &:disabled:hover {
-      border: $input-border;
+      border: none;
+    }
+
+    & ~ .#{$prefix}--form-requirement {
+      order: 3;
+      color: $support-01;
+      font-weight: 400;
+      margin-top: $spacing-2xs;
+
+      &::before {
+        display: none;
+      }
     }
   }
+
+  .#{$prefix}--text-input--light {
+    background: $field-02;
+  }
 }
diff --git a/src/components/text-input/text-input--light.html b/src/components/text-input/text-input--light.html
new file mode 100644
index 000000000000..c6d5034b942f
--- /dev/null
+++ b/src/components/text-input/text-input--light.html
@@ -0,0 +1,34 @@
+<div class="bx--form-item">
+  <input id="text-input-3" type="text" class="bx--text-input bx--text-input--light" placeholder="Optional placeholder text">
+  <label for="text-input-3" class="bx--label">Text Input label</label>
+</div>
+
+<div class="bx--form-item">
+  <input data-invalid id="text-input-4" type="text" class="bx--text-input bx--text-input--light" placeholder="Optional placeholder text">
+  <label for="text-input-4" class="bx--label">Text Input label</label>
+  <div class="bx--form-requirement">
+    Validation message here
+  </div>
+</div>
+
+<div class="bx--form-item">
+  <input id="text-input-5" type="text" class="bx--text-input bx--text-input--light" placeholder="Optional placeholder text">
+  <label for="text-input-5" class="bx--label">Text Input label</label>
+  <div class="bx--form__helper-text">
+    Optional helper text goes here
+  </div>
+</div>
+
+<div class="bx--form-item" style="width: 300px">
+  <input id="text-input-5" type="text" class="bx--text-input bx--text-input--light" placeholder="Optional placeholder text">
+  <label for="text-input-5" class="bx--label">Text Input label</label>
+  <div class="bx--form__helper-text">
+    Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
+  </div>
+</div>
+
+<div class="bx--form-item">
+  <input id="text-input-6" type="text" class="bx--text-input bx--text-input--light" placeholder="Optional placeholder text"
+    disabled>
+  <label for="text-input-6" class="bx--label bx--label--disabled">Text Input label</label>
+</div>
diff --git a/src/components/text-input/text-input.html b/src/components/text-input/text-input.html
index 27b6437b518e..37badb6b8ff4 100644
--- a/src/components/text-input/text-input.html
+++ b/src/components/text-input/text-input.html
@@ -1,9 +1,33 @@
 <div class="bx--form-item">
-  <label for="text-input-1" class="bx--label">Text Input label</label>
-  <input id="text-input-1" type="text" class="bx--text-input" placeholder="Placeholder text">
+  <input id="text-input-3" type="text" class="bx--text-input" placeholder="Optional placeholder text">
+  <label for="text-input-3" class="bx--label">Text Input label</label>
 </div>
 
 <div class="bx--form-item">
-  <label for="text-input-2" class="bx--label bx--label--disabled">Text Input label</label>
-  <input id="text-input-2" type="text" class="bx--text-input" placeholder="Placeholder text" disabled>
+  <input data-invalid id="text-input-4" type="text" class="bx--text-input" placeholder="Optional placeholder text">
+  <label for="text-input-4" class="bx--label">Text Input label</label>
+  <div class="bx--form-requirement">
+    Validation message here
+  </div>
+</div>
+
+<div class="bx--form-item">
+  <input id="text-input-5" type="text" class="bx--text-input" placeholder="Optional placeholder text">
+  <label for="text-input-5" class="bx--label">Text Input label</label>
+  <div class="bx--form__helper-text">
+    Optional helper text goes here
+  </div>
+</div>
+
+<div class="bx--form-item" style="width: 300px">
+  <input id="text-input-5" type="text" class="bx--text-input" placeholder="Optional placeholder text">
+  <label for="text-input-5" class="bx--label">Text Input label</label>
+  <div class="bx--form__helper-text">
+    Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
+  </div>
+</div>
+
+<div class="bx--form-item">
+  <input id="text-input-6" type="text" class="bx--text-input" placeholder="Optional placeholder text" disabled>
+  <label for="text-input-6" class="bx--label bx--label--disabled">Text Input label</label>
 </div>
diff --git a/src/components/tile/_tile.scss b/src/components/tile/_tile.scss
index 1411b3b139ff..9e1dc21980ed 100644
--- a/src/components/tile/_tile.scss
+++ b/src/components/tile/_tile.scss
@@ -18,7 +18,7 @@
     min-width: 8rem;
     min-height: 4rem;
     background-color: $ui-01;
-    border: 1px solid $ui-03;
+    border: 1px solid $ui-02;
     position: relative;
     padding: $spacing-md;
 
@@ -34,7 +34,7 @@
     cursor: pointer;
 
     &:hover {
-      border: 1px solid $ui-04;
+      border: 1px solid $ui-03;
     }
 
     &:hover,
@@ -67,7 +67,7 @@
 
   .#{$prefix}--tile--is-clicked {
     @include layer('flat');
-    border: 1px solid $ui-04;
+    border: 1px solid $ui-03;
   }
 
   .#{$prefix}--tile__checkmark,
@@ -90,15 +90,15 @@
 
     svg {
       border-radius: 50%;
-      background-color: rgba($ui-01, .25);
-      fill: rgba($brand-01, .25);
+      background-color: rgba($ui-01, 0.25);
+      fill: rgba($brand-01, 0.25);
     }
   }
 
   .#{$prefix}--tile__chevron {
     position: absolute;
-    bottom: .5rem;
-    right: .5rem;
+    bottom: 0.5rem;
+    right: 0.5rem;
     height: 1rem;
 
     svg {
diff --git a/src/components/time-picker/_time-picker.scss b/src/components/time-picker/_time-picker.scss
index 8fd9e6f9fb62..110d0025ecad 100644
--- a/src/components/time-picker/_time-picker.scss
+++ b/src/components/time-picker/_time-picker.scss
@@ -12,7 +12,16 @@
 @include exports('time-picker') {
   .#{$prefix}--time-picker {
     display: flex;
-    align-items: flex-start;
+    align-items: flex-end;
+
+    .#{$prefix}--label {
+      order: 1;
+    }
+  }
+
+  .#{$prefix}--time-picker__input {
+    display: flex;
+    flex-direction: column;
   }
 
   .#{$prefix}--time-picker .#{$prefix}--select-input {
@@ -30,14 +39,48 @@
     display: flex;
     align-items: center;
     background-color: $field-01;
-    border: 1px solid transparent;
+    border: none;
     width: 4.875rem;
     color: $text-01;
     height: rem(40px);
     padding: 0 $spacing-md;
+    order: 2;
+    box-shadow: 0 1px 0 0 $text-02;
 
     &:focus {
-      @include focus-outline('border');
+      outline: none;
+      box-shadow: 0 2px 0 0 $brand-01;
+    }
+
+    &:focus ~ .#{$prefix}--label {
+      color: $brand-01;
+    }
+
+    &[data-invalid],
+    &[data-invalid]:focus {
+      box-shadow: 0 2px 0 0 $support-01;
+    }
+
+    &[data-invalid]:focus ~ .#{$prefix}--label {
+      color: $support-01;
+    }
+
+    & ~ .#{$prefix}--form-requirement {
+      order: 3;
+      color: $support-01;
+      font-weight: 400;
+      margin-top: 0;
+      max-height: 0;
+
+      &::before {
+        display: none;
+      }
+    }
+
+    &[data-invalid] ~ .#{$prefix}--form-requirement {
+      overflow: visible;
+      max-height: 0;
+      margin-top: $spacing-2xs;
     }
 
     &:disabled {
@@ -45,4 +88,8 @@
       cursor: not-allowed;
     }
   }
+
+  .#{$prefix}--time-picker--light .#{$prefix}--time-picker__input-field {
+    background: $field-02;
+  }
 }
diff --git a/src/components/time-picker/time-picker--light.html b/src/components/time-picker/time-picker--light.html
new file mode 100644
index 000000000000..ccbbb91f3792
--- /dev/null
+++ b/src/components/time-picker/time-picker--light.html
@@ -0,0 +1,33 @@
+<div class="bx--form-item">
+  <div class="bx--time-picker bx--time-picker--light">
+    <div class="bx--time-picker__input">
+      <input data-invalid id="time-picker-1" type="text" class="bx--time-picker__input-field" pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?(?i)"
+        placeholder="hh:mm" maxlength="5" />
+      <div class="bx--form-requirement">
+        Invalid time.
+      </div>
+      <label for="time-picker-1" class="bx--label">Select a time</label>
+    </div>
+    <div class="bx--time-picker__select bx--select bx--select--inline">
+      <label for="select-id-1" class="bx--label bx--visually-hidden">Select AM/PM</label>
+      <select id="select-id-1" class="bx--select-input">
+        <option class="bx--select-option" value="AM">AM</option>
+        <option class="bx--select-option" value="PM">PM</option>
+      </select>
+      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+        <path d="M10 0L5 5 0 0z"></path>
+      </svg>
+    </div>
+    <div class="bx--time-picker__select bx--select bx--select--inline">
+      <label for="select-id-2" class="bx--label bx--visually-hidden">Select timezone</label>
+      <select id="select-id-2" class="bx--select-input">
+        <option class="bx--select-option" value="option-1">Timezone 1</option>
+        <option class="bx--select-option" value="option-2">Timezone 2</option>
+        <option class="bx--select-option" value="option-3">Timezone 3</option>
+      </select>
+      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+        <path d="M10 0L5 5 0 0z"></path>
+      </svg>
+    </div>
+  </div>
+</div>
diff --git a/src/components/time-picker/time-picker.html b/src/components/time-picker/time-picker.html
index 39a555b9fafd..96bf430dd25c 100644
--- a/src/components/time-picker/time-picker.html
+++ b/src/components/time-picker/time-picker.html
@@ -1,9 +1,9 @@
 <div class="bx--form-item">
-  <label for="time-picker-1" class="bx--label">Select a time</label>
   <div class="bx--time-picker">
     <div class="bx--time-picker__input">
       <input id="time-picker-1" type="text" class="bx--time-picker__input-field" pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?(?i)"
         placeholder="hh:mm" maxlength="5" />
+      <label for="time-picker-1" class="bx--label">Select a time</label>
       <div class="bx--form-requirement">
         Invalid time.
       </div>
diff --git a/src/components/toggle/_toggle.scss b/src/components/toggle/_toggle.scss
index 8ec754f66301..c8ad3419fb0c 100644
--- a/src/components/toggle/_toggle.scss
+++ b/src/components/toggle/_toggle.scss
@@ -36,7 +36,7 @@
       width: 100%;
       height: rem(4px);
       top: -2px;
-      background-color: $ui-05;
+      background-color: $ui-04;
       transition: $transition--base $carbon--standard-easing;
       cursor: pointer;
     }
@@ -45,7 +45,7 @@
       box-sizing: border-box;
       position: absolute;
       display: block;
-      border: 2px solid $ui-05;
+      border: 2px solid $ui-04;
       cursor: pointer;
       top: -12px;
       width: rem(24px);
@@ -71,14 +71,14 @@
       width: rem(32px);
       border-radius: 0.9375rem;
       background-color: transparent;
-      border: 2px solid $ui-05;
+      border: 2px solid $ui-04;
       top: 0;
     }
 
     &:after {
       width: rem(10px);
       height: rem(10px);
-      background-color: $ui-05;
+      background-color: $ui-04;
       border: none;
       top: 3px;
       left: 3px;
diff --git a/src/components/toolbar/_toolbar.scss b/src/components/toolbar/_toolbar.scss
index 8c41bb5fffd3..14955fcc8581 100644
--- a/src/components/toolbar/_toolbar.scss
+++ b/src/components/toolbar/_toolbar.scss
@@ -62,7 +62,7 @@ $css--helpers: true;
       }
 
       .#{$prefix}--search-input {
-        background-color: $field-01;
+        background-color: $field-02;
       }
 
       .#{$prefix}--search-close {
@@ -117,7 +117,7 @@ $css--helpers: true;
   .#{$prefix}--toolbar-menu__divider {
     width: 100%;
     border: 0;
-    border-top: 1px solid $ui-04;
+    border-top: 1px solid $ui-03;
   }
 
   .#{$prefix}--radio-button-group {
diff --git a/src/components/tooltip/_tooltip.scss b/src/components/tooltip/_tooltip.scss
index f10b7c477cdb..5fbaee8c252e 100644
--- a/src/components/tooltip/_tooltip.scss
+++ b/src/components/tooltip/_tooltip.scss
@@ -36,7 +36,7 @@
     &:hover,
     &:focus {
       svg {
-        fill: $brand-02;
+        fill: $hover-primary;
       }
     }
   }
@@ -49,7 +49,7 @@
     max-width: rem(240px);
     background: $ui-01;
     padding: $spacing-lg;
-    border: 1px solid $ui-04;
+    border: 1px solid $ui-03;
     z-index: z('floating');
 
     p {
@@ -71,8 +71,8 @@
       transform: rotate(-135deg);
       width: 0.6rem;
       height: 0.6rem;
-      border-right: 1px solid $ui-04;
-      border-bottom: 1px solid $ui-04;
+      border-right: 1px solid $ui-03;
+      border-bottom: 1px solid $ui-03;
       margin: 0 auto;
       content: '';
     }
@@ -142,7 +142,7 @@
       @include layer('overlay');
       max-width: rem(240px);
       padding: $spacing-lg;
-      border: 1px solid $ui-04;
+      border: 1px solid $ui-03;
       margin-left: 50%;
       color: $text-01;
       content: attr(data-tooltip-text);
@@ -156,8 +156,8 @@
       left: 0;
       width: 0.6rem;
       height: 0.6rem;
-      border-right: 1px solid $ui-04;
-      border-bottom: 1px solid $ui-04;
+      border-right: 1px solid $ui-03;
+      border-bottom: 1px solid $ui-03;
       margin: 0 auto;
       content: '';
     }
@@ -165,7 +165,7 @@
     &:hover,
     &:focus {
       svg {
-        fill: $brand-02;
+        fill: $hover-primary;
       }
 
       &:before,
diff --git a/src/globals/scss/_colors.scss b/src/globals/scss/_colors.scss
index a1b952a475dd..bdf285562436 100644
--- a/src/globals/scss/_colors.scss
+++ b/src/globals/scss/_colors.scss
@@ -3,7 +3,7 @@ $color__blue-20: #7cc7ff !default;
 $color__blue-30: #5aaafa !default;
 $color__blue-40: #5596e6 !default;
 $color__blue-50: #4178be !default;
-$color__blue-90: #152935 !default;
+$color__blue-90: #152934 !default;
 $color__navy-gray-1: #0f212e !default;
 $color__navy-gray-2: #20343e !default;
 $color__navy-gray-3: #2d3f49 !default;
diff --git a/src/globals/scss/_vars.scss b/src/globals/scss/_vars.scss
index a3a19b4eb2c6..0187b5816ed4 100644
--- a/src/globals/scss/_vars.scss
+++ b/src/globals/scss/_vars.scss
@@ -25,16 +25,18 @@ $brand-01: $color__blue-51 !default;
 $brand-02: $color__blue-40 !default;
 $brand-03: $color__teal-20 !default;
 $inverse-01: $color__white !default;
+$inverse-02: #272d33 !default;
 $ui-01: $color__white !default;
-$ui-02: $color__gray-3 !default;
-$ui-03: $color__gray-2 !default;
-$ui-04: $color__gray-1 !default;
-$ui-05: $color__navy-gray-7 !default;
+$ui-02: #f4f7fb !default;
+$ui-03: $color__gray-1 !default;
+$ui-04: #8897a2 !default;
+$ui-05: $color__navy-gray-6 !default;
 $text-01: $color__blue-90 !default;
 $text-02: $color__navy-gray-6 !default;
-$text-03: $color__navy-gray-6 !default;
-$field-01: rgba($color__blue-51, 0.1) !default;
-$support-01: #E0182D !default;
+$text-03: #cdd1d4 !default;
+$field-01: #f4f7fb !default;
+$field-02: $color__white !default;
+$support-01: #e0182d !default;
 $support-02: $color__green-40 !default;
 $support-03: $color__yellow-30 !default;
 $support-04: $color__blue-30 !default;
@@ -47,6 +49,12 @@ $nav-06: $color__teal-50 !default;
 $nav-07: $color__blue-30 !default;
 $nav-08: $color__blue-51 !default;
 
+$hover-primary: darken($brand-01, 10%) !default;
+$hover-primary-text: darken($brand-01, 15%) !default;
+$hover-danger: darken($support-01, 10%) !default;
+$hover-secondary: $brand-01 !default;
+$hover-row: rgba($brand-02, 0.1) !default;
+
 // Global
 $input-border: 1px solid transparent !default;
 $input-label-weight: 600 !default;
@@ -65,7 +73,7 @@ $accordion-flex-direction: row !default;
 $accordion-justify-content: flex-start !default;
 $accordion-arrow-margin: 0 0 0 $spacing-2xs !default;
 $accordion-title-margin: 0 0 0 $spacing-md !default;
-$accordion-content-padding: 0 $spacing-md 0  $spacing-2xl !default;
+$accordion-content-padding: 0 $spacing-md 0 $spacing-2xl !default;
 
 // Card
 $card-text-align: center !default;
@@ -75,7 +83,7 @@ $card-flex-align: center !default;
 $checkbox-border-width: 2px !default;
 
 // Code Snippet
-$snippet-background-color: $field-01 !default;
+$snippet-background-color: rgba($color__blue-51, 0.1) !default;
 
 // Content Switcher
 $content-switcher-border-radius: 8px !default;
@@ -88,7 +96,7 @@ $data-table-row-height: 2rem !default;
 
 // Modal
 $modal-border-top: $brand-01 4px solid !default;
-$modal-footer-background-color: $ui-03 !default;
+$modal-footer-background-color: $ui-02 !default;
 
 // Progress Indicator
 $progress-indicator-bar-width: 1px inset transparent !default;