diff --git a/_scss/_landing.scss b/_scss/_landing.scss
index 34a3958e6c..0bc66aa284 100644
--- a/_scss/_landing.scss
+++ b/_scss/_landing.scss
@@ -210,7 +210,7 @@ body.landing {
   }
 
   .cardlet {
-    background-color: #F2F3F5;
+    background-color: $white-25;
     padding: 24px 36px;
 
     .title {
diff --git a/_scss/_notes.scss b/_scss/_notes.scss
index defc78c9e5..be6eaf7405 100644
--- a/_scss/_notes.scss
+++ b/_scss/_notes.scss
@@ -109,7 +109,7 @@ blockquote {
 
     &.warning {
       @include notification(
-        $bg-color: $red-10,
+        $bg-color: #FEEFEF, // Hardcoding this variable temporary till we migrate to the new color pallette
         $header-color: $red-50,
         $body-text-color: inherit,
         $icon: "\f06a"
diff --git a/_scss/_variables.scss b/_scss/_variables.scss
index 5b6594114f..98e6166712 100755
--- a/_scss/_variables.scss
+++ b/_scss/_variables.scss
@@ -1,4 +1,7 @@
 
+@import "color-palette";
+
+
 /*
  * global
  */
@@ -14,30 +17,28 @@ $top-navigation-height: 92px; // top navigation height is: nav (55px) + breadcru
 /*
  * standard mode
  */
-$body-text:               hsl(199,  20%,  25%);
-$primary-links:           hsl(206,  85%,  54%);
+$body-text:              $black-0;
+$primary-links:          $blue-70;
+//
+$bg-body:                $white-0;
+$bg-body-landing:        $white-10;
+$bg-header:              $blue-60;
+$bg-secondary:           $blue-60;
+$bg-sidebar:             $white-10;
+$bg-sidebar-active:      $white-15;
+$bg-footer:              $white-0;
+$bg-footer-landing:      $marine-90;
+$bg-component:           $white-5;
+$bg-card:                $white-0;
 
-$bg-body:                 hsl(206,   0%, 100%);
-$bg-body-landing:         hsl(206,  14%,  99%);
-$bg-header:               hsl(206,  85%,  54%);
-$bg-secondary:            hsl(206,  85%,  54%);
-$bg-sidebar:              hsl(206,  14%,  99%);
-$bg-sidebar-active:       hsl(206,  33%,  97%);
-$bg-footer:               hsl(206,   0%, 100%);
-$bg-footer-landing:       hsl(214, 100%,  20%);
+// notes, warnings//
+$note-color:             $blue-80;
+$important-color:        $orange-90;
+$warning-color:          $red-90;
 
-$bg-component:            hsl(240,  14%,  99%);
-$bg-card:                 hsl(  0,   0%, 100%);
-
-// notes, warnings
-$note-color:              hsl(206,  82%,  43%);
-$important-color:         hsl( 35,  91%,  35%);
-$warning-color:           hsl(  2,  58%,  54%);
-
-$slider-bg:               hsl(206,  76%,  87%);
-$slider-btn:              hsl(206,  85%,  54%);
-
-$table-head:              hsl(206,   5%,  82%);
+$slider-bg:              $marine-10;
+$slider-btn:             $blue-60;
+$table-head:             $grey-10;
 
 /*
  * night mode
@@ -55,7 +56,7 @@ $bg-footer-night:         hsl(203,   0%,   0%);
 $bg-footer-landing-night: hsl(214, 100%,  20%);
 
 $bg-component-night:      hsl(203,  44%,  10%);
-$bg-card-night:           hsl(203,  33%,   8%);
+$bg-card-night:           #0e161b;
 
 $active-sidebar-night:    hsl(203,  85%,   79%);