diff --git a/packages/assets/scss/00-base/_color-tokens.scss b/packages/assets/scss/00-base/_color-tokens.scss
index cb2faa0b34..f00aeb442a 100644
--- a/packages/assets/scss/00-base/_color-tokens.scss
+++ b/packages/assets/scss/00-base/_color-tokens.scss
@@ -99,9 +99,9 @@ $c-platinum-gray:                   #F2F2F2 !default;
 $c-black:                           $c-revolution-gray !default;
 $c-gray-dark:                       $c-granite-gray !default;
 $c-gray:                            $c-atlantic-gray !default;
-$c-gray-light:                      $c-overcast-gray !default;
+$c-gray-light:                      $c-atlantic-gray !default;//$c-overcast-gray !default;
 $c-gray-lighter:                    #CCCCCC !default; // Followup needed: should be added as a base color or be replaced as a gradient color from granite gray
-$c-gray-lightest:                   $c-platinum-gray !default;
+$c-gray-lightest:                   #404040;// $c-platinum-gray !default;
 $c-white:                           white !default;
 
 // Error Red (#CD0D0D)
@@ -110,4 +110,4 @@ $c-error-red-lighter:               #EEACAC !default; //Commonly used in outline
 $c-error-red-lightest:              #FCF3F3 !default; //Commonly used in background
 
 // Focus Highlight (#3e94cf)
-$c-focus-hightlight:                #3e94cf !default;
+$c-focus-hightlight:                #1aeaff !default;//#3e94cf !default;
diff --git a/packages/assets/scss/00-base/_colors.scss b/packages/assets/scss/00-base/_colors.scss
index 9e39abb16a..e88e1f9931 100644
--- a/packages/assets/scss/00-base/_colors.scss
+++ b/packages/assets/scss/00-base/_colors.scss
@@ -7,9 +7,11 @@ $c-primary:              $c-bay-blue !default;
 $c-primary-light:        $c-bay-blue-light !default;
 $c-primary-lighter:      $c-bay-blue-lighter !default;
 $c-primary-lightest:     $c-bay-blue-lightest !default;
+$c-primary-bright:       #1aeaff;//  ADDED FOR HIGH CONTRAST LINK COLOR
 $c-primary-alt:          $c-berkshires-green !default;
 $c-primary-alt-lighter:  $c-berkshires-green-lighter !default;
 $c-primary-alt-lightest: $c-berkshires-green-lightest !default;
+$c-primary-alt-bright:   #2CD26E !default;//  ADDED FOR HIGH CONTRAST LINK COLOR
 $c-primary-alt-dark:     $c-berkshires-green-dark !default;
 $c-highlight:            $c-duckling-yellow !default;
 $c-highlight-lighter:    $c-duckling-yellow-lighter !default;
@@ -25,14 +27,15 @@ $c-focus:                $c-focus-hightlight !default;
 // Need to add these colors to this listing new to add
 // $c-visited
 
-$c-font-base:            $c-black !default;
+$c-font-base:            $c-platinum-gray;//$c-black !default;
 $c-font-detail:          $c-gray-dark !default;
 $c-font-dark:            $c-black !default;
 $c-font-medium:          $c-gray !default;
+$c-font-dark-hc:         $c-revolution-gray !default;//  TEST STYLE:  ADDED FOR HIGHT CONTRAST
 
-$c-font-heading:         $c-black !default;
+$c-font-heading:         #f2f2f2;//$c-black !default;
 $c-font-inverse:         $c-white !default;
-$c-font-link:            $c-bay-blue !default;
+$c-font-link:            #1aeaff !default;//$c-bay-blue !default;
 $c-font-error:           $c-error !default;
 
 $c-bg-comp-title:        $c-gray-dark !default;
diff --git a/packages/assets/scss/00-base/_elements.scss b/packages/assets/scss/00-base/_elements.scss
index 924190328e..a19848f82b 100644
--- a/packages/assets/scss/00-base/_elements.scss
+++ b/packages/assets/scss/00-base/_elements.scss
@@ -42,6 +42,9 @@ body {
   color: $c-font-base;
   font-family: $fonts;
   font-weight: $fonts-light;
+
+  // TEST BACKGROUND
+  background-color: #121212;
 }
 
 a {
diff --git a/packages/assets/scss/00-base/mixins/_ma-accordion-icon.scss b/packages/assets/scss/00-base/mixins/_ma-accordion-icon.scss
index 60a3e8b1fc..f63646c8c2 100644
--- a/packages/assets/scss/00-base/mixins/_ma-accordion-icon.scss
+++ b/packages/assets/scss/00-base/mixins/_ma-accordion-icon.scss
@@ -4,7 +4,7 @@
 
     &:after {
         content: "+";
-        color: $c-primary-alt;
+        color: $c-primary-alt-bright;//$c-primary-alt;
         display: block;
         font-size: 1.6em;
         font-weight: 500;
diff --git a/packages/assets/scss/00-base/mixins/_ma-border-decorative.scss b/packages/assets/scss/00-base/mixins/_ma-border-decorative.scss
index 48adca0527..ad135baf77 100644
--- a/packages/assets/scss/00-base/mixins/_ma-border-decorative.scss
+++ b/packages/assets/scss/00-base/mixins/_ma-border-decorative.scss
@@ -5,7 +5,8 @@
 
 @use "00-base/colors" as *;
 
-@mixin ma-border-decorative($fg: transparent, $opacity: .5) {
+@mixin ma-border-decorative($fg: transparent, $opacity: .8) {
+// @mixin ma-border-decorative($fg: transparent, $opacity: .5) {
 
   @if ($fg == transparent) {
     position: relative;
diff --git a/packages/assets/scss/00-base/mixins/_ma-heading-colored.scss b/packages/assets/scss/00-base/mixins/_ma-heading-colored.scss
index fd42f65bac..93288650c1 100644
--- a/packages/assets/scss/00-base/mixins/_ma-heading-colored.scss
+++ b/packages/assets/scss/00-base/mixins/_ma-heading-colored.scss
@@ -10,9 +10,10 @@
 
 @use "00-base/breakpoints" as *;
 
-@mixin ma-heading-colored($c-bg:transparent,$direction:right,$c-page:white) {
+// @mixin ma-heading-colored($c-bg:transparent,$direction:right,$c-page:white) {
+@mixin ma-heading-colored($c-bg:transparent,$direction:right,$c-page:#121212) {
   $offset: 55px;
-  
+
   @if ($c-bg == transparent) {
     font-size: $fonts-medium;
     letter-spacing: $letter-spacing-large;
diff --git a/packages/assets/scss/01-atoms/_comp-heading.scss b/packages/assets/scss/01-atoms/_comp-heading.scss
index 6d7b77e421..fa4073c636 100644
--- a/packages/assets/scss/01-atoms/_comp-heading.scss
+++ b/packages/assets/scss/01-atoms/_comp-heading.scss
@@ -5,6 +5,8 @@
   &:not(&--sidebar) {
 
     @include ma-comp-heading;
+
+    color: #f2f2f2;// OVERRIDE INCLUDE
   }
 
   &--sidebar,
@@ -55,6 +57,9 @@
   &--sidebar {
 
     @include ma-sidebar-heading($c-bd-divider,$c-font-base);
+
+    border-color: #707070; // OVERRIDE INCLUDE
+    color: #f2f2f2;// OVERRIDE INCLUDE
   }
 
   .sidebar--colored & {
diff --git a/packages/assets/scss/01-atoms/_decorative-link.scss b/packages/assets/scss/01-atoms/_decorative-link.scss
index b05e3c2fb6..d76b8063a9 100644
--- a/packages/assets/scss/01-atoms/_decorative-link.scss
+++ b/packages/assets/scss/01-atoms/_decorative-link.scss
@@ -8,16 +8,16 @@
   width: 100%;
 
   a:hover {
-    border-bottom-color: rgba($c-font-link,.5);
+    border-bottom-color: rgba($c-font-link,.6);//.5);
   }
 
   a:focus {
     // important needed to overwrite the focus border color
-    border-bottom-color: rgba($c-font-link,.5) !important;
+    border-bottom-color: rgba($c-font-link,.6);//.5) !important;
   }
 
   svg {
-    fill: rgba($c-font-link,.5);
+    fill: rgba($c-font-link,.7);//5);
   }
 
   &.button-link {
diff --git a/packages/assets/scss/01-atoms/_site-logo.scss b/packages/assets/scss/01-atoms/_site-logo.scss
index fc183b0790..272c79b726 100644
--- a/packages/assets/scss/01-atoms/_site-logo.scss
+++ b/packages/assets/scss/01-atoms/_site-logo.scss
@@ -16,6 +16,9 @@
       line-height: 1;
       letter-spacing: $letter-spacing-small;
 
+      // TEST STYLE
+       -webkit-text-stroke: 0.5px #777;
+
       @media ($bp-small-max) {
         width: 102px;// 108px - margin-left(6)
         margin-left: 0.3rem;
diff --git a/packages/assets/scss/01-atoms/_table.scss b/packages/assets/scss/01-atoms/_table.scss
index f29bd1c1e1..86742f7b89 100644
--- a/packages/assets/scss/01-atoms/_table.scss
+++ b/packages/assets/scss/01-atoms/_table.scss
@@ -6,7 +6,7 @@
   width: 100%;
 
   thead {
-    background-color: $c-bg-subtle;
+    background-color: #404040;//$c-bg-subtle;
 
     th {
       color: $c-font-heading;
diff --git a/packages/assets/scss/01-atoms/_video.scss b/packages/assets/scss/01-atoms/_video.scss
index 2c33b8270c..8ed933e8c7 100644
--- a/packages/assets/scss/01-atoms/_video.scss
+++ b/packages/assets/scss/01-atoms/_video.scss
@@ -12,7 +12,7 @@
     padding: 13px;
     position: relative;
     padding-bottom: 12px + 29px + 13px;// 12px + 1.5rem + 13px
-    background-color: rgba($c-primary,.1);
+    background-color: rgba(26,234,255,.2);//$c-primary,.1);
 
     @media ($bp-large-min) {
       padding-bottom: 12px + 32px + 13px;
diff --git a/packages/assets/scss/02-molecules/_action-step.scss b/packages/assets/scss/02-molecules/_action-step.scss
index 91726a1651..ad725c0ebb 100644
--- a/packages/assets/scss/02-molecules/_action-step.scss
+++ b/packages/assets/scss/02-molecules/_action-step.scss
@@ -28,6 +28,7 @@
     position: relative;
     font-weight: $fonts-bold;
     min-height: 32px;
+    color: $c-font-base; // Added for high contrast theme.
   }
 
   &--accordion &__header {
@@ -126,7 +127,7 @@
   }
 
   &--accordion &__header__toggle {
-    color: $c-primary-alt;
+    color: $c-primary-alt-bright;
   }
 
   &__icon {
diff --git a/packages/assets/scss/02-molecules/_brand-banner.scss b/packages/assets/scss/02-molecules/_brand-banner.scss
index d05b0bbf70..4d730ec20e 100644
--- a/packages/assets/scss/02-molecules/_brand-banner.scss
+++ b/packages/assets/scss/02-molecules/_brand-banner.scss
@@ -4,7 +4,8 @@
 
     width: 100%;
     background-color: $c-primary-lightest;
-    font-size: $fonts-xsmall;
+    font-size: 16px;//$fonts-xsmall;
+    font-weight: 400;
 
     @include background-colors(
         $lightTheme: (
@@ -30,8 +31,8 @@
         @include ma-container;
         display: flex;
         width: 100%;
-        padding-top: 5px;
-        padding-bottom: 5px;
+        padding-top: 8px;//5px;
+        padding-bottom: 8px;//5px;
         text-align: left;
 
         @media ($bp-x-small-min) {
@@ -40,9 +41,9 @@
     }
 
     &-logo {
-        height: 20px;
-        width: 20px;
-        margin-right: 5px;
+        height: 25px;//20px;
+        width: 25px;//20px;
+        margin-right: 10px;//5px;
 
         &--dark {
             // Filter is not supported in IE. When use the dark theme, you should use the white version of seal instead.
@@ -123,4 +124,17 @@
         }
     }
 
-}
\ No newline at end of file
+    // TEST STYLE
+    button {
+        font-weight: 400;
+
+        .ma__button-icon--quaternary.ma__button-icon--c-white {
+            font-size: 16px;
+            border-bottom: 2px solid rgba(255,255,255,.8);
+
+            svg {
+                fill: rgba(255,255,255,.8);
+            }
+        }
+    }
+}
diff --git a/packages/assets/scss/02-molecules/_callout-link.scss b/packages/assets/scss/02-molecules/_callout-link.scss
index 5ab891c50e..ccc89bc850 100644
--- a/packages/assets/scss/02-molecules/_callout-link.scss
+++ b/packages/assets/scss/02-molecules/_callout-link.scss
@@ -9,8 +9,8 @@
   flex-flow: column wrap;
   justify-content: center;
   padding: 15px 20px;
-  background-color: mix(#fff, $c-font-link,90%);
-  border-color: mix(#fff, $c-font-link,50%);
+  background-color: mix(#121212, $c-font-link,90%);//mix(#fff, $c-font-link,90%);
+  border-color: mix(#121212, $c-font-link,50%);//mix(#fff, $c-font-link,50%);
   box-shadow: 0 0.25rem 0.5rem rgba(#000, 0.25);
   text-decoration: none;
 
diff --git a/packages/assets/scss/02-molecules/_contact-group.scss b/packages/assets/scss/02-molecules/_contact-group.scss
index 7f23e85c81..86f0e1992e 100644
--- a/packages/assets/scss/02-molecules/_contact-group.scss
+++ b/packages/assets/scss/02-molecules/_contact-group.scss
@@ -91,7 +91,7 @@
   &__name {
 
     svg {
-      fill: $c-primary-alt;
+      fill: #609D79;//$c-primary-alt;
     }
 
     span {
diff --git a/packages/assets/scss/02-molecules/_contact-us.scss b/packages/assets/scss/02-molecules/_contact-us.scss
index 68b2d184d0..3e9ed1426e 100644
--- a/packages/assets/scss/02-molecules/_contact-us.scss
+++ b/packages/assets/scss/02-molecules/_contact-us.scss
@@ -273,7 +273,7 @@
 
   &--accordion &__header:after,
   &--accordion &__header &--accordion__status {
-    color: $c-primary-alt;
+    color: $c-primary-alt-bright;
   }
 
   &__expand {
diff --git a/packages/assets/scss/02-molecules/_emergency-alert.scss b/packages/assets/scss/02-molecules/_emergency-alert.scss
index e14c468b9b..a0c0fe8bc8 100644
--- a/packages/assets/scss/02-molecules/_emergency-alert.scss
+++ b/packages/assets/scss/02-molecules/_emergency-alert.scss
@@ -3,7 +3,7 @@
 @use "sass:color" as *;
 
 .ma__emergency-alert {
-  background-color: mix(#fff, $c-warning,90%);
+  background-color: mix(#121212, $c-warning,90%);
   font-size: $fonts-small;
   padding-top: 10px;
   padding-bottom: 10px;
@@ -89,7 +89,7 @@
           width: .5em;
           border-right: 3px solid;
           border-bottom: 3px solid;
-          border-color: $c-black;
+          border-color: $c-font-base;//$c-black;
         }
       }
     }
diff --git a/packages/assets/scss/02-molecules/_emergency-header.scss b/packages/assets/scss/02-molecules/_emergency-header.scss
index 989e8c87d5..7056c1cbd4 100644
--- a/packages/assets/scss/02-molecules/_emergency-header.scss
+++ b/packages/assets/scss/02-molecules/_emergency-header.scss
@@ -33,11 +33,11 @@
     flex-basis: auto;
     letter-spacing: $letter-spacing-large;
     white-space: nowrap;
-    color: rgba($c-font-base,.8);
+    color: rgba($c-font-dark-hc,.8);//$c-font-base,.8);
     font-weight: $fonts-bold;
     border-right-width: 1px;
     border-right-style: solid;
-    border-right-color: rgba($c-font-base,.3);
+    border-right-color: rgba($c-font-dark-hc,.3);//$c-font-base,.3);
     padding-right: .5rem;
     margin-right: .5rem;
 
@@ -82,7 +82,7 @@
     @media ($bp-small-max) {
       font-size: 1.2rem;
     }
-    
+
     @include ma-button-reset;
 
     @include ma-chevron;
@@ -149,9 +149,9 @@
   &__title {
 
     .ma__content-link {
-      text-decoration: none;  
+      text-decoration: none;
     }
-    
+
 
     .ma__decorative-link {
       display: inline;
diff --git a/packages/assets/scss/02-molecules/_header-search.scss b/packages/assets/scss/02-molecules/_header-search.scss
index e33da915ef..6fdde8f167 100644
--- a/packages/assets/scss/02-molecules/_header-search.scss
+++ b/packages/assets/scss/02-molecules/_header-search.scss
@@ -20,6 +20,11 @@ $bp-header-search-reduce-button: "max-width: 700px";
     padding-right: 128px;
     padding-left: 17px;
     width: 100%;
+    // TEST STYLE
+    background: rgba(225,225,225,.1);
+    color: #d4d4d4;
+    font-weight: 400;
+    border: 2px solid #777;
 
     &::-ms-clear {
       display: none;
@@ -43,6 +48,17 @@ $bp-header-search-reduce-button: "max-width: 700px";
         right: 0;
         top: 0;
 
+      // TEST STYLE
+      background: rgba(225,225,225,.1);
+      color: #d4d4d4;
+      font-size: 15px;//16px;
+      font-weight: 500;
+      border-color: #777 !important;
+
+      & > svg {
+        fill: #D7E7DD;
+      }
+
       @media ($bp-header-search-reduce-button) {
 
         span {
diff --git a/packages/assets/scss/02-molecules/_illustrated-link.scss b/packages/assets/scss/02-molecules/_illustrated-link.scss
index 469e182ed8..da26798292 100644
--- a/packages/assets/scss/02-molecules/_illustrated-link.scss
+++ b/packages/assets/scss/02-molecules/_illustrated-link.scss
@@ -79,14 +79,14 @@ $illustrated-link-image-width: 130px;
 //theme
 
 .ma__illustrated-link {
-  border-color: mix(#fff, $c-primary,50%);
+  border-color: mix(#121212, #1aeaff,50%);
   box-shadow: 0 0.25rem 0.5rem rgba(#000, 0.25);
 
   &__content {
-    background-color: mix(#fff, $c-primary,89%);
+    background-color: mix(#121212, #1aeaff,89%);
 
     &:after {
-      background-color: mix(#fff, $c-primary,89%);
+      background-color: mix(#121212, #1aeaff,89%);
     }
   }
 
diff --git a/packages/assets/scss/02-molecules/_location-icons.scss b/packages/assets/scss/02-molecules/_location-icons.scss
index 42f34b34fb..12c3a375e7 100644
--- a/packages/assets/scss/02-molecules/_location-icons.scss
+++ b/packages/assets/scss/02-molecules/_location-icons.scss
@@ -51,7 +51,7 @@
   }
 
   &__name {
-    color: $c-font-medium;
+    color: $c-font-base;//$c-font-medium;
     font-weight: $fonts-bold;
   }
 }
diff --git a/packages/assets/scss/02-molecules/_main-nav-hamburger.scss b/packages/assets/scss/02-molecules/_main-nav-hamburger.scss
index cee8f4f68f..5b69aa32e9 100644
--- a/packages/assets/scss/02-molecules/_main-nav-hamburger.scss
+++ b/packages/assets/scss/02-molecules/_main-nav-hamburger.scss
@@ -31,9 +31,9 @@
     text-transform: uppercase;
     transition: all 0.4s ease;
     text-align: left;
-    background-color: $c-gray-lightest;
+    background-color: #141414;//$c-gray-lightest;
     width: 100%;
-    color: inherit;
+    color: $c-font-base;// inherit;
 
     .toggle-indicator {
 
@@ -47,13 +47,14 @@
       }
     }
 
-    &:focus {
-      background-color: $c-bd-divider;
-      outline: 2px solid $c-black;
+    &:focus, &:hover {// hover is added
+      background-color: #515151;//$c-bd-divider;
+      outline: 2px solid $c-font-base;
     }
 
     &.cv-alternate-style {
       background-color: #f7c600;
+      color: #141414;// keep the original font color for this
 
       // Adding chevron for direct link.
 
@@ -72,7 +73,7 @@
   &__subitems {
     text-align: left;
     z-index: $z-dropdown;
-    background-color: $c-bg-section;
+    background-color: #141414;//$c-bg-section;
     transition: height 0.4s;
 
     &.is-closed {
@@ -113,10 +114,11 @@
     font-weight: 400;
     line-height: 1.33;
     padding: 10px 20px 10px 30px;
-    color: $c-black;
+    color: $c-font-base;//$c-black;
 
     &:hover {
-      text-decoration: underline;
+      // text-decoration: underline;  It already has underline at normal state.
+      background-color: #515151;
     }
 
     &>svg,
@@ -146,7 +148,7 @@
       text-decoration: none;
 
       &>span {
-          border-bottom: 2px solid $c-black;
+          border-bottom: 2px solid $c-font-base;//$c-black;
       }
     }
   }
diff --git a/packages/assets/scss/02-molecules/_main-nav.scss b/packages/assets/scss/02-molecules/_main-nav.scss
index 932eb0ae6c..9e167ca968 100644
--- a/packages/assets/scss/02-molecules/_main-nav.scss
+++ b/packages/assets/scss/02-molecules/_main-nav.scss
@@ -82,6 +82,9 @@
     transition: all 0.4s ease;
     width: 100%;
 
+    // TEST STYLE
+    color: #cacaca;
+
     @media ($bp-header-toggle-max) {
       padding-right: 20px;
       padding-left: 20px;
@@ -261,6 +264,10 @@
     &.has-focus {
       background-color: $c-white;
       box-shadow: 0 0.25rem 0.5rem rgba(#000, 0.25);
+
+      // TEST STYLE
+      background-color: #cacaca;
+      box-shadow: 0 0.25rem 0.5rem rgba(#efefef, 0.4);
     }
 
     &.is-active {
@@ -269,12 +276,21 @@
     }
   }
 
+  // TEST STYLE
+  .is-open > &__top-link {
+    color: #202020;
+
+    &:hover {
+      color: #202020;
+    }
+}
+
   &__subitems {
     background-color: $c-bg-section;
 
     @media ($bp-header-toggle-min) {
-      background-color: $c-white;
-      box-shadow: 0 0.25em 0.5rem rgba(#000, 0.25);
+      background-color: #cacaca;//$c-white;
+      box-shadow: 0 0.25em 0.5rem rgba(#efefef, 0.4);
     }
   }
 
@@ -286,7 +302,7 @@
   }
 
   &__subitem {
-    border-bottom-color: $c-bd-divider;
+    border-bottom-color: #cacaca;//$c-bd-divider;
   }
 
   &__link {
@@ -295,7 +311,8 @@
 
     &:hover,
     &:focus {
-      background-color: $c-bg-subtle;
+      background-color: #202020;//$c-bg-subtle;
+      color: #cacaca;
     }
   }
 
diff --git a/packages/assets/scss/02-molecules/_relationship-indicators.scss b/packages/assets/scss/02-molecules/_relationship-indicators.scss
index 8f7090b1e9..4aebf98863 100644
--- a/packages/assets/scss/02-molecules/_relationship-indicators.scss
+++ b/packages/assets/scss/02-molecules/_relationship-indicators.scss
@@ -55,13 +55,13 @@
       height: 14px;
 
       path, use {
-        fill: $c-font-detail;
+        fill: #bababa;//$c-font-detail;
       }
     }
   }
 
   &--label {
-    color: $c-font-detail;
+    color: #bababa;//$c-font-detail;
     text-transform: uppercase;
     letter-spacing: $letter-spacing-large;
     margin-right: 10px;
@@ -246,8 +246,9 @@
     &.single [aria-labelledby="secondary"] {
 
       a {
-        color: $c-primary-alt;
-        box-shadow: inset 0 0 white, inset 0px -1px rgba($c-primary-alt, 0.4);
+        color: $c-primary;
+        color: $c-primary-alt-bright;
+        box-shadow: inset 0 0 white, inset 0px -1px rgba($c-primary-alt-bright, 0.4);
 
         &:hover {
           box-shadow: inset 0 0 white, inset 0px -2px rgba($c-primary-alt, 0.7);
@@ -263,7 +264,7 @@
       }
 
       button {
-        color: $c-primary-alt;
+        color: $c-primary-alt-bright;
       }
 
       .ma__relationship-indicators {
@@ -282,15 +283,15 @@
         &--term {
           margin: 0 5px 0 0;
           padding-right: 0;
-  
+
           @media ($bp-medium-min) {
             margin: 0 5px;
           }
-  
+
           a {
             margin-right: 10px;
             position: relative;
-  
+
             &:before {
               content: "";
               width: 10px;
@@ -298,7 +299,7 @@
               height: $fonts-smaller;
               right: -10px;
               bottom: 1px;
-              border-right: 1px solid $c-gray-light;
+              border-right: 1px solid #bababa;//$c-gray-light;
             }
           }
 
@@ -309,7 +310,7 @@
 
         &__expand-indicators {
           margin: 0 5px 0 0;
-  
+
           @media ($bp-medium-min) {
             margin: 0 5px;
           }
@@ -353,4 +354,4 @@
       padding-left: 10px;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/assets/scss/02-molecules/_sticky-nav.scss b/packages/assets/scss/02-molecules/_sticky-nav.scss
index de2deb82a5..df3841e791 100644
--- a/packages/assets/scss/02-molecules/_sticky-nav.scss
+++ b/packages/assets/scss/02-molecules/_sticky-nav.scss
@@ -7,7 +7,7 @@
 .ma__sticky-nav {
 
   @include clearfix;
-  
+
   @media ($bp-medium-min) {
     position: absolute;
   }
@@ -98,7 +98,7 @@
     &.is-title {
 
       span {
-        color: $c-gray-dark;
+        color: $c-font-base;//$c-gray-dark;
         border-bottom: 3px solid transparent;
         padding-top: 3px;
         padding-bottom: 1px;
@@ -168,7 +168,7 @@
     }
 
     & + & {
-      border-top-color: $c-gray-light;
+      border-top-color: #878787;//$c-gray-light;
 
       @media ($bp-medium-min) {
         border-top-width: 1px;
@@ -200,7 +200,7 @@
   &__toggle-link {
 
     @include ma-button-reset;
-    color: $c-primary-alt;
+    color: $c-primary-alt-bright;//$c-primary-alt;
     font-size: $fonts-6xlarge;
     line-height: .65em;
     overflow: hidden;
diff --git a/packages/assets/scss/03-organisms/_action-finder.scss b/packages/assets/scss/03-organisms/_action-finder.scss
index 8bc51ac8bb..9720eae2db 100644
--- a/packages/assets/scss/03-organisms/_action-finder.scss
+++ b/packages/assets/scss/03-organisms/_action-finder.scss
@@ -172,17 +172,17 @@ $action-finder-bp: 900px;
 }
 
 //theme
-$action-finder-bg-color: mix(#fff, $c-primary,89%);
-$action-finder-border-color: mix(#fff, $c-primary,50%);
+$action-finder-bg-color: mix(#121212, $c-primary,89%);//mix(#fff, $c-primary,89%);
+$action-finder-border-color: mix(#121212, $c-primary,50%);//mix(#fff, $c-primary,50%);
 
 .ma__action-finder {
 
   &:after {
-    background-image: linear-gradient(180deg, rgba(#000,.6), transparent 90%, transparent);
+    background-image: linear-gradient(180deg, rgba(#000,.6), transparent 90%, transparent);//linear-gradient(180deg, rgba(#000,.6), transparent 90%, transparent);
   }
 
   &--no-background {
-    background-image: linear-gradient(180deg, $c-white 50px, $c-bg-section 51px);
+    background-image: linear-gradient(180deg, #121212 50px, #303030 51px);//linear-gradient(180deg, $c-white 50px, $c-bg-section 51px);
   }
 
   &__category {
@@ -208,7 +208,7 @@ $action-finder-border-color: mix(#fff, $c-primary,50%);
   &__items--all {
 
     .ma__callout-link {
-      background-color: $c-white;
+      background-color: #121212;//$c-white;
       box-shadow: none;
     }
 
@@ -216,10 +216,10 @@ $action-finder-border-color: mix(#fff, $c-primary,50%);
       box-shadow: none;
 
       &__content {
-        background-color: $c-white;
+        background-color: #121212;//$c-white;
 
         &:after {
-          background-color: $c-white;
+          background-color: #121212;//$c-white;
         }
       }
     }
@@ -245,7 +245,7 @@ $action-finder-border-color: mix(#fff, $c-primary,50%);
   }
 
   &--no-background &__see-all {
-    background-color: $c-bg-section;
+    background-color: #303030;//$c-bg-section;
 
     .ma__decorative-link {
 
diff --git a/packages/assets/scss/03-organisms/_breadcrumbs.scss b/packages/assets/scss/03-organisms/_breadcrumbs.scss
index f64af9464d..3dbe565ff2 100644
--- a/packages/assets/scss/03-organisms/_breadcrumbs.scss
+++ b/packages/assets/scss/03-organisms/_breadcrumbs.scss
@@ -87,7 +87,7 @@ $breadcrumbs-scrollbar-height: 12px;
       margin-left: 0;
       margin-right: 3px;
       width: 7px;
-      border-color: $c-gray-dark;
+      border-color: #989898;//$c-gray-dark;
     }
 
     &:first-child {
@@ -120,7 +120,7 @@ $breadcrumbs-scrollbar-height: 12px;
     }
 
     button {
-      border: 2px solid $c-bay-blue-50-tint;
+      border: 2px solid rgba(26,234,255, .5);//$c-bay-blue-50-tint;
       background: transparent;
       width: 27px;
       height: 25px;
@@ -135,7 +135,7 @@ $breadcrumbs-scrollbar-height: 12px;
     }
 
     a, button {
-      color: $c-primary;
+      color: $c-primary-alt-bright;// $c-primary;
       display: inline-block;
       font-size: $fonts-xsmall;
       line-height: 1;
@@ -144,7 +144,7 @@ $breadcrumbs-scrollbar-height: 12px;
       text-decoration: none;
 
       &:hover {
-        text-shadow: 0px 0px 0px $c-primary ;
+        text-shadow: 0px 0px 0px $c-primary-alt-bright;// $c-primary ;
       }
     }
 
@@ -154,26 +154,26 @@ $breadcrumbs-scrollbar-height: 12px;
       transition: border 0.4s;
 
       &:hover {
-        border: 2px solid $c-primary;
+        border: 2px solid $c-primary-alt-bright;// $c-primary;
       }
     }
 
     a {
-      box-shadow: inset 0 0 white, inset 0px -1px rgba($c-primary, 0.4);
+      box-shadow: inset 0 0 white, inset 0px -1px rgba($c-primary-alt-bright, .6);//($c-primary, 0.4);
 
       svg {
-        fill: $c-primary;
-        stroke: $c-primary;
+        fill: #1aeaff;// $c-primary;
+        stroke: #1aeaff;// $c-primary;
         transition: fill 0.4s, stroke 0.4s;
         will-change: fill, stroke;
       }
 
       &:hover {
-        box-shadow: inset 0 0 white, inset 0px -2px rgba($c-primary, 0.7);
+        box-shadow: inset 0 0 white, inset 0px -2px rgba($c-primary-alt-bright, .7);//$c-primary, 0.7);
 
         svg {
-          fill: $c-bay-blue-50-tint;
-          stroke: $c-bay-blue-50-tint;
+          fill: rgba(26,234,255, .5);//$c-bay-blue-50-tint;
+          stroke: rgba(26,234,255, .5);//$c-bay-blue-50-tint;
         }
       }
 
@@ -276,10 +276,10 @@ $breadcrumbs-scrollbar-height: 12px;
 .ma__breadcrumbs {
 
   @media ($bp-medium-min) {
-    background-color: $c-bg-section;
+    background-color: #121212;//$c-bg-section;
 
     &__items {
-      border-top-color: $c-bd-divider;
+      border-top-color: #707070;//$c-bd-divider;
     }
   }
 
@@ -293,20 +293,20 @@ $breadcrumbs-scrollbar-height: 12px;
   }
 
   &--light {
-    background-color: $c-white;
+    background-color: #121212;//$c-white;
   }
 
   &--light &__items {
 
     @media ($bp-medium-min) {
-      border-bottom-color: $c-bd-divider;
+      border-bottom-color: #707070;//$c-bd-divider;
     }
   }
 
   &--light &__container {
 
     @media ($bp-medium-max) {
-      border-bottom-color: $c-bd-divider;
+      border-bottom-color: #707070;//$c-bd-divider;
     }
   }
 }
diff --git a/packages/assets/scss/03-organisms/_callout-alert.scss b/packages/assets/scss/03-organisms/_callout-alert.scss
index 78b68cbe24..19aed2a7fa 100644
--- a/packages/assets/scss/03-organisms/_callout-alert.scss
+++ b/packages/assets/scss/03-organisms/_callout-alert.scss
@@ -94,7 +94,7 @@
   }
 
   &__link {
-    color: $c-font-base;
+    color: #141414;//$c-font-base;
     font-weight: bold;
 
     svg {
diff --git a/packages/assets/scss/03-organisms/_callout-time.scss b/packages/assets/scss/03-organisms/_callout-time.scss
index 25bb0a0fd6..d568fc428a 100644
--- a/packages/assets/scss/03-organisms/_callout-time.scss
+++ b/packages/assets/scss/03-organisms/_callout-time.scss
@@ -57,7 +57,7 @@
   }
 
   &__text {
-    color: $c-font-detail;
+    color: #c0c0c0;//$c-font-detail;
     font-weight: $fonts-normal;
   }
 }
diff --git a/packages/assets/scss/03-organisms/_emergency-alerts.scss b/packages/assets/scss/03-organisms/_emergency-alerts.scss
index 358fca663f..d4ec1351af 100644
--- a/packages/assets/scss/03-organisms/_emergency-alerts.scss
+++ b/packages/assets/scss/03-organisms/_emergency-alerts.scss
@@ -63,7 +63,7 @@ $colors: (
   }
 
   &__content {
-    background-color: mix(#fff, $c-warning, 90%);
+    background-color: mix(#121212, $c-warning, 90%);//mix(#fff, $c-warning, 90%);
 
     .js & {
       display: none;
diff --git a/packages/assets/scss/03-organisms/_error-page.scss b/packages/assets/scss/03-organisms/_error-page.scss
index e7940fdcdc..030d7f6d29 100644
--- a/packages/assets/scss/03-organisms/_error-page.scss
+++ b/packages/assets/scss/03-organisms/_error-page.scss
@@ -45,17 +45,22 @@
 
 .ma__error-page {
 
-  &:before {
-    background-color: rgba($c-warning, .15);
+  // &:before {
+  //   background-color: rgba($c-warning, .15);
+  // }
+
+  h1 {
+    color: #fff;
   }
 
   &__label {
     color: $c-warning;
     font-weight: 900;
+    opacity: .9;
   }
 
   &__type {
-    color: $c-font-detail;
+    color: #A1A1A1;//$c-font-detail;
     font-weight: $fonts-bold;
   }
 
@@ -64,7 +69,14 @@
   }
 
   &__message {
-    color: $c-font-base;
-    font-weight: $fonts-lighter;
+    color: #fff;//$c-font-base;
+    font-weight: 400;//$fonts-lighter;
+  }
+}
+
+.ma__narrow-template--yellow {
+
+  .ma__link-list .ma__comp-heading  {
+    color: #fff;
   }
 }
diff --git a/packages/assets/scss/03-organisms/_footer-new.scss b/packages/assets/scss/03-organisms/_footer-new.scss
index 02cd28f5b4..b5eb309e20 100644
--- a/packages/assets/scss/03-organisms/_footer-new.scss
+++ b/packages/assets/scss/03-organisms/_footer-new.scss
@@ -4,11 +4,11 @@
 
   // height: 100px;
   background-color: $c-bg-section;
-  
+
   &__container {
 
     @include ma-container;
-    
+
     @include clearfix;
 
     display: flex;
@@ -17,7 +17,7 @@
 
     @media ($bp-medium-max) {
       flex-direction: column;
-    } 
+    }
   }
 
   &__logo {
@@ -40,7 +40,7 @@
     @media ($bp-small-max) {
       flex-direction: column;
     }
-    
+
     & > div {
 
 
@@ -56,14 +56,14 @@
       }
 
       & > a {
-      
+
         @include ma-link-underline;
         padding-bottom: 3px;
-        color: $c-font-base;
+        color: #cacaca;//$c-font-base;
         font-weight: $fonts-normal;
-    
+
         &:hover {
-          border-bottom-color: rgba($c-font-dark,.5);
+          border-bottom-color: rgba(#cacaca,.5);//rgba($c-font-dark,.5);
         }
       }
     }
@@ -72,7 +72,7 @@
 
   &__copyright {
     font-size: $fonts-xsmall;
-    color: $c-gray-dark;
+    color: #ababab;//$c-gray-dark;
     font-weight: $fonts-lighter;
 
     &--bold {
diff --git a/packages/assets/scss/03-organisms/_header-alerts.scss b/packages/assets/scss/03-organisms/_header-alerts.scss
index f7ae8cef4a..dcb53d05bd 100644
--- a/packages/assets/scss/03-organisms/_header-alerts.scss
+++ b/packages/assets/scss/03-organisms/_header-alerts.scss
@@ -7,29 +7,29 @@
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-  
+
     color: $c-black;
     margin-bottom: 0;
-  
+
     &__button {
       color: $c-black;
       background-color: $c-warning;
       padding: 12px 24px;
       display: inline-flex;
-  
+
       align-items: center;
       font-weight: $fonts-bold;
       font-size: $fonts-medium;
       line-height: 1.2;
       margin-bottom: 0;
       width: 100%;
-  
+
       border: 0;
-  
+
       @media ($bp-x-small-max) {
         flex-direction: column;
       }
-  
+
       div {
         display: inline-flex;
         align-items: center;
@@ -88,7 +88,7 @@
     border-style: solid;
 
     &__header {
-      color: $c-black;
+      color: $c-font-heading;//$c-black;
       border: none;
       display: block;
       padding: 20px 40px 20px 60px;
diff --git a/packages/assets/scss/03-organisms/_header-hamburger.scss b/packages/assets/scss/03-organisms/_header-hamburger.scss
index c760f7558b..9da6ec5bf2 100644
--- a/packages/assets/scss/03-organisms/_header-hamburger.scss
+++ b/packages/assets/scss/03-organisms/_header-hamburger.scss
@@ -258,7 +258,7 @@ body.show-menu {
   }
 
   &__nav-container {
-    background-color: $c-gray-lightest;
+    background-color: #141414;//$c-gray-lightest;
     height: calc(100vh - 44px);
     top: 44px;
     overflow-y: auto;
@@ -517,11 +517,22 @@ body.show-menu {
             padding: 0;
 
             &:hover {
-              background-color: $c-gray-lightest;
+              background-color: #515151;//$c-gray-lightest;
               box-shadow: none;
             }
           }
 
+          .ma__utility-nav__translate {
+
+            svg {
+              fill: #A1BBD2;
+            }
+
+            a {
+              color: #f2f2f2;
+            }
+          }
+
           &__link, a.direct-link {
 
             @include ma-button-reset;
@@ -535,12 +546,13 @@ body.show-menu {
             text-transform: uppercase;
             transition: all 0.4s ease;
             text-align: left;
-            background-color: $c-gray-lightest;
+            background-color: #141414;//$c-gray-lightest;
             width: 100%;
+            color: #f2f2f2;
 
-            &:focus {
-              background-color: $c-bd-divider;
-              outline: 2px solid $c-black;
+            &:focus, &:hover {
+              background-color: #515151;//$c-bd-divider;
+              // outline: 2px solid $c-black;
             }
 
             .toggle-indicator {
@@ -559,6 +571,7 @@ body.show-menu {
               top: auto;
               left: auto;
               transform: none;
+              fill: #A1BBD2;
             }
 
             & > span {
@@ -590,7 +603,7 @@ body.show-menu {
             position: relative;
             top: auto;
             right: auto;
-            color: $c-black;
+            color: #f2f2f2;//$c-black;
             z-index: $z-overlay;
 
             transition: max-height 0.6s ease-in-out;
@@ -613,7 +626,7 @@ body.show-menu {
 
             & .ma__utility-nav__container {
               padding: 0;
-              background-color: $c-gray-lightest;
+              background-color: #141414;//$c-gray-lightest;
               overflow-y: visible;
               max-height: auto;
 
@@ -637,7 +650,7 @@ body.show-menu {
             }
 
             & .ma__utility-panel {
-              background-color: $c-gray-lightest;
+              background-color: #141414;//$c-gray-lightest;
               color: $c-black;
 
               @include ma-reset-list;
@@ -652,7 +665,7 @@ body.show-menu {
 
               & .ma__rich-text {
                 padding-top: 0.8em;
-                border-top: 2px solid $c-bd-divider;
+                border-top: 2px solid #707070;//$c-bd-divider;
               }
             }
 
@@ -663,7 +676,7 @@ body.show-menu {
               position: relative;
               line-height: 1.33;
               padding: 0 20px 10px 20px;
-              color: $c-black;
+              color: #f2f2f2;//$c-black;
               margin-bottom: 0;
             }
 
@@ -672,8 +685,8 @@ body.show-menu {
             }
 
             & .ma__utility-panel__item {
-              background-color: $c-gray-lightest;
-              color: $c-black;
+              background-color: #141414;//$c-gray-lightest;
+              color: #f2f2f2;//$c-black;
               margin: 0;
               display: block;
             }
@@ -694,7 +707,7 @@ body.show-menu {
               font-weight: 400;
               line-height: 1.33;
               padding: 10px 20px 10px 30px;
-              color: $c-black;
+              color: #f2f2f2;//$c-black;
 
               &:hover {
                 text-decoration: underline;
diff --git a/packages/assets/scss/03-organisms/_illustrated-header.scss b/packages/assets/scss/03-organisms/_illustrated-header.scss
index e75d3563d2..9e252535d4 100644
--- a/packages/assets/scss/03-organisms/_illustrated-header.scss
+++ b/packages/assets/scss/03-organisms/_illustrated-header.scss
@@ -165,10 +165,10 @@ $bp-illustrated-header-image-width: 360px;
   }
 
   &__content {
-    background-color: $c-white;
+    background-color: #121212;//$c-white;
 
     &:after {
-      background-color: $c-white;
+      background-color: #121212;//$c-white;
     }
   }
 
diff --git a/packages/assets/scss/03-organisms/_image-credit.scss b/packages/assets/scss/03-organisms/_image-credit.scss
index c46f51886d..99920278f0 100644
--- a/packages/assets/scss/03-organisms/_image-credit.scss
+++ b/packages/assets/scss/03-organisms/_image-credit.scss
@@ -28,7 +28,7 @@
 .ma__image-credit {
 
   &__container {
-    
+
     &:before {
       border-color: $c-bd-divider;
     }
diff --git a/packages/assets/scss/03-organisms/_link-list.scss b/packages/assets/scss/03-organisms/_link-list.scss
index 8660c23c71..a4fe0405b0 100644
--- a/packages/assets/scss/03-organisms/_link-list.scss
+++ b/packages/assets/scss/03-organisms/_link-list.scss
@@ -61,7 +61,7 @@
 
   &__item {
     padding: 5px 0;
-    color: $c-font-detail;
+    color: #dcdcdc;//$c-font-detail;
 
     .ma__decorative-link {
       display: block;
diff --git a/packages/assets/scss/03-organisms/_page-banner.scss b/packages/assets/scss/03-organisms/_page-banner.scss
index 16e222fbd1..34301aae22 100644
--- a/packages/assets/scss/03-organisms/_page-banner.scss
+++ b/packages/assets/scss/03-organisms/_page-banner.scss
@@ -504,7 +504,7 @@ $text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     // white background
 
     &--white {
-      background-color: white;
+      background-color: #121212;//white;
       color: $c-font-base;
 
       &:before {
diff --git a/packages/assets/scss/03-organisms/_pullquote.scss b/packages/assets/scss/03-organisms/_pullquote.scss
index b2bf9c075c..860101db0f 100644
--- a/packages/assets/scss/03-organisms/_pullquote.scss
+++ b/packages/assets/scss/03-organisms/_pullquote.scss
@@ -16,7 +16,7 @@
     font-size: $fonts-xlarge;
     font-weight: $fonts-bold;
     line-height: 1.285;
-    color: $c-gray-dark;
+    color: #dcdcdc;//$c-gray-dark;
 
     &::before {
       content: '';
@@ -25,7 +25,8 @@
       /* background fallback */
       background-color: $c-primary-alt;
       /* will be on top of fallback, if browser supports it */
-      background-image: linear-gradient(120deg, $c-primary-alt 65px, $c-white 0);
+      background-image: linear-gradient(120deg, #2D6A46 65px, #121212 0);
+      // background-image: linear-gradient(120deg, $c-primary-alt 65px, $c-white 0);
       position: absolute;
       top: 0;
     }
diff --git a/packages/assets/scss/03-organisms/_related-orgs-and-topics.scss b/packages/assets/scss/03-organisms/_related-orgs-and-topics.scss
index 6eb5396818..476a0a00eb 100644
--- a/packages/assets/scss/03-organisms/_related-orgs-and-topics.scss
+++ b/packages/assets/scss/03-organisms/_related-orgs-and-topics.scss
@@ -4,7 +4,7 @@
 
   @include ma-container();
 
-  
+
   &__columns {
     margin-top: 45px;
 
@@ -18,7 +18,7 @@
   &__column {
 
     @media ($bp-medium-min) {
-      flex: 1; 
+      flex: 1;
     }
 
     &:first-child {
@@ -91,7 +91,7 @@
 
   .ma__related-orgs-and-topics--toggle {
     position: relative;
-    color: $c-primary;
+    color: $c-font-link;//$c-primary;
     font-weight: $fonts-bold;
     background-color: transparent;
     border: none;
@@ -108,8 +108,8 @@
       transform: translateY(-50%) rotate(45deg);
       right: 0;
       display: inline-block;
-      border-right: 4px solid rgba($c-primary, 0.3);
-      border-bottom: 4px solid rgba($c-primary, 0.3);
+      border-right: 4px solid rgba($c-font-link, 0.6);//$c-primary, 0.3);
+      border-bottom: 4px solid rgba($c-font-link, 0.6);//$c-primary, 0.3);
       height: 10px;
       width: 10px;
       transition: all .2s;
@@ -125,7 +125,7 @@
     }
 
     &.open {
-      
+
       &::after {
         transform: translateY(-50%) rotate(225deg);
       }
diff --git a/packages/assets/scss/03-organisms/_search-banner.scss b/packages/assets/scss/03-organisms/_search-banner.scss
index f7927c1968..b20ef6462f 100644
--- a/packages/assets/scss/03-organisms/_search-banner.scss
+++ b/packages/assets/scss/03-organisms/_search-banner.scss
@@ -89,7 +89,7 @@
   &__form {
     display: flex;
     margin: 0 auto 30px;
-    
+
     @media ($bp-medium-min) {
       margin: 0 auto 60px;
     }
@@ -183,7 +183,7 @@
     margin-right: auto;
     background-color: rgba(0, 0, 0, 0.5);
     padding: 10px 20px;
-    
+
     @media ($bp-medium-min) {
       padding: 30px 60px;
     }
@@ -224,6 +224,9 @@
     @include ma-container;
     z-index: 3;
     width: 100%;
+
+    // TEST STYLE
+    display: none;
   }
 
   // Start backward compatible with v5.7 - converted image-credit to new Banner Credit molecule
@@ -283,6 +286,10 @@
   background-size: cover;
   position: relative;
 
+  // TEST STYLE
+  background-color: #505050;
+  background-image: none;
+
   &:after {
     background-color: rgba($c-black, .6);
   }
@@ -324,6 +331,7 @@
     input {
       background-color: rgba(255, 255, 255, 0.75);
       font-weight: $fonts-lighter;
+      color: $c-black;// ADDED FOR HIGHT CONTRAST STYLE
     }
 
     &::-webkit-input-placeholder {
@@ -353,7 +361,7 @@
 
   &__button {
     background-color: rgba(255, 255, 255, 0.75);
-    color: $c-font-base;
+    color: $c-black;//$c-font-base;
     font-weight: $fonts-bold;
 
     & > svg {
diff --git a/packages/assets/scss/03-organisms/_sticky-toc.scss b/packages/assets/scss/03-organisms/_sticky-toc.scss
index f0e692ea1a..520ad76a33 100644
--- a/packages/assets/scss/03-organisms/_sticky-toc.scss
+++ b/packages/assets/scss/03-organisms/_sticky-toc.scss
@@ -181,7 +181,7 @@
   &__inner {
 
     @media ($bp-x-small-min) {
-      background-color: $c-bg-section;
+      background-color: #303030;//$c-bg-section;
     }
   }
 
@@ -312,7 +312,7 @@
     left: 0;
     transition: height 0.1s ease-out;
     width: 100%;
-    background-color: $c-bg-subtle;
+    background-color: #404040;//$c-bg-subtle;
     z-index: $z-sticky-content;
 
     @media ($bp-header-toggle-max) {
@@ -364,6 +364,8 @@
       height: 47px;
       position: relative;
 
+      background: #dfdfdf;// TEST STYLE
+
       svg {
         fill: rgba($c-primary, 0.5);
         transform: rotate(-90deg);
@@ -379,9 +381,9 @@
       span {
         display: block;
         text-transform: uppercase;
-        font-size: $fonts-3xsmall;
+        font-size: 1.2rem;//$fonts-3xsmall;
         font-weight: $fonts-bold;
-        color: $c-primary;
+        color: #104472;//$c-primary;
         letter-spacing: $letter-spacing-large;
         margin-top: -4px;
       }
@@ -426,7 +428,7 @@
     position: relative;
     width: 35px;
     height: 35px;
-    background-color: $c-primary;
+    background-color: #14558f;//$c-primary;
     color: $c-white;
 
     .sticky-nav-open & {
@@ -436,12 +438,13 @@
     span {
       display: block;
       font-size: $fonts-2xlarge;
-      font-weight: 200;
+      font-weight: 400;//200;
       left: 50%;
       line-height: 0;
       position: absolute;
       top: 45%;
       transform: translate(-50%, -50%);
+
     }
   }
 }
@@ -471,7 +474,7 @@
   max-width: 550px;
   top: 0;
   z-index: 99;
-  background-color: $c-white;
+  background-color: #121212;//$c-white;
   transition: right 0.3s ease-out;
 
   overflow: auto;
@@ -497,8 +500,8 @@
     font-weight: $fonts-normal;
     letter-spacing: $letter-spacing-large;
     text-transform: uppercase;
-    color: $c-gray-dark;
-    background-color: $c-white;
+    color: #dcdcdc;//$c-gray-dark;
+    background-color: #121212;//$c-white;
     height: 65px;
     padding: 10px 20px;
     width: 100%;
diff --git a/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss b/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss
index eb1102609c..9ec026247b 100644
--- a/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss
+++ b/packages/assets/scss/03-organisms/_table-of-contents-hierarchy.scss
@@ -44,7 +44,7 @@
     border: 2px solid $c-gray-light;
 
     > * + * {
-      border-top: 1px solid $c-gray-light;
+      border-top: 1px solid #707070;//$c-gray-light;
     }
 
     // Visual cue for the clickable area.
@@ -55,7 +55,7 @@
       a {
         border-bottom-width: 3px;
         border-bottom-style: solid;
-        border-bottom-color: rgba(20, 85, 143, 0.5);
+        border-bottom-color: rgba($c-font-link,.6);//20, 85, 143, 0.5);
       }
     }
 
@@ -77,8 +77,8 @@
       margin-bottom: 0;
       display: none;
       padding: 20px 0 10px 20px;
-      background: $c-white;
-      border-top: 2px solid $c-gray-light;
+      background: #121212;//$c-white;
+      border-top: 2px solid #707070;//$c-gray-light;
 
       // Visual cue for the clickable area.
 
@@ -89,7 +89,7 @@
       a:hover {
         border-bottom-width: 3px;
         border-bottom-style: solid;
-        border-bottom-color: rgba(20, 85, 143, 0.5);
+        border-bottom-color: rgba($c-font-link,.6);//20, 85, 143, 0.5);
       }
 
       li {
@@ -126,12 +126,12 @@
       text-align: left;
       width: 100%;
       font-weight: $fonts-bolder;
-      color: $c-primary;
+      color: #1aeaff;//$c-primary;
 
       &:after {
         font-size: $fonts-4xlarge;
         content: "+";
-        color: $c-primary-alt;
+        color: $c-primary-alt-bright;//$c-primary-alt;
         line-height: .65em;
         overflow: hidden;
         position: absolute;
@@ -151,7 +151,7 @@
   }
 
   &--no-background {
-    border-bottom: 1px solid $c-gray-light;
+    border-bottom: 1px solid #707070;//$c-gray-light;
     margin-top: 4rem;
 
     .ma__toc--hierarchy {
@@ -237,4 +237,4 @@
       padding: unset;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/assets/scss/03-organisms/_utility-panel.scss b/packages/assets/scss/03-organisms/_utility-panel.scss
index 6a7c37c850..d121e2c001 100644
--- a/packages/assets/scss/03-organisms/_utility-panel.scss
+++ b/packages/assets/scss/03-organisms/_utility-panel.scss
@@ -4,7 +4,7 @@ $bp-utility-panel-reduce-links-max: "max-width:1120px";
 @use "00-base/configure" as *;
 
 .ma__utility-panel {
-  background-color: $c-primary; 
+  background-color: $c-primary;
   color: $c-font-inverse;
 
   @media ($bp-header-toggle-min) {
@@ -56,7 +56,7 @@ $bp-utility-panel-reduce-links-max: "max-width:1120px";
       width: 23%;
       margin-right: 2.5%;
       min-height: 70px;
-      
+
       .no-flex & {
         display: table-cell;
       }
diff --git a/packages/assets/scss/04-templates/_narrow-template.scss b/packages/assets/scss/04-templates/_narrow-template.scss
index 207fab9e1d..978b3ecb08 100644
--- a/packages/assets/scss/04-templates/_narrow-template.scss
+++ b/packages/assets/scss/04-templates/_narrow-template.scss
@@ -165,7 +165,7 @@ $narrow-template-header-height: 170px;
     background-color: rgba($c-primary-alt, .15);
   }
 
-  &--yellow:before {
-    background-color: rgba($c-highlight, .15);
-  }
+  // &--yellow:before {
+  //   background-color: rgba($c-highlight, .15);
+  // }
 }
diff --git a/packages/patternlab/styleguide/source/_patterns/05-pages/Homepage.json b/packages/patternlab/styleguide/source/_patterns/05-pages/Homepage.json
index 035ba78d91..3bf04396bd 100644
--- a/packages/patternlab/styleguide/source/_patterns/05-pages/Homepage.json
+++ b/packages/patternlab/styleguide/source/_patterns/05-pages/Homepage.json
@@ -3,8 +3,8 @@
   "hideBackTo": true,
   "floatingAction": null,
   "searchBanner": {
-    "bgWide": "../../assets/images/placeholder/1600x800.png",
-    "bgNarrow": "../../assets/images/placeholder/800x800.png",
+    "bgWide": "",
+    "bgNarrow": "",
     "id": "GUID935283478A",
     "searchBannerForm": {
       "action": "",
diff --git a/packages/patternlab/styleguide/source/_patterns/05-pages/topic-new.json b/packages/patternlab/styleguide/source/_patterns/05-pages/topic-new.json
new file mode 100644
index 0000000000..c19dd0b8c7
--- /dev/null
+++ b/packages/patternlab/styleguide/source/_patterns/05-pages/topic-new.json
@@ -0,0 +1,196 @@
+{
+  "pageBanner": {
+    "size": "full",
+    "icon": "",
+    "color": "white",
+    "underline": true,
+    "title": "New Topics",
+    "description": ""
+  },
+  "stackedRowSection": {
+    "pageContent": [
+      {
+        "path": "@organisms/by-template/table-of-contents-hierarchy.twig",
+        "data": {
+          "tableOfContentsHierarchy": {
+            "title": {
+              "id": "State Parks & Recreation",
+              "text": "For Workers",
+              "colored": false
+            },
+            "background": "none",
+            "sections": [
+              {
+                "text": "Unemproyment",
+                "linkItems": [
+                  {
+                    "text": "Unemployment Insurance (UI) for Workers ",
+                    "href": "#"
+                  },
+                  {
+                    "text": "Pandemic Unemployment Assistance (PUA) ",
+                    "href": "#"
+                  },
+                  {
+                    "text": "DUA Multilingual Services",
+                    "href": "#"
+                  },
+                  {
+                    "text": "WorkShare for Workers",
+                    "href": "#"
+                  }
+                ]
+              },
+              {
+                "text": "Training & Assistance",
+                "linkItems": [
+                  {
+                    "text": "Unemployment Insurance (UI) for Employers",
+                    "href": "#"
+                  },
+                  {
+                    "text": "WorkShare for Employers",
+                    "href": "#"
+                  },
+                  {
+                    "title": "For Workers",
+                    "subItems": [
+                      {
+                        "text": "Training Opportunities Program (TOP)",
+                        "href": "#"
+                      },
+                      {
+                        "text": "MassHire Career Centers",
+                        "href": "#"
+                      },
+                      {
+                        "text": "Vocational Rehabilitation",
+                        "href": "#"
+                      }
+                    ]
+                  },
+                  {
+                    "title": "For Employers",
+                    "subItems": [
+                      {
+                        "text": "Prevent layoffs with Rapid Response",
+                        "href": "#"
+                      },
+                      {
+                        "text": "Another sub item",
+                        "href": "#"
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                "text": "Executive Summary",
+                "href": "#"
+              }
+            ]
+          }
+        }
+      },
+      {
+        "path": "@organisms/by-author/related-orgs-and-topics.twig",
+        "data": {
+          "relatedOrgsAndTopics": {
+            "header": {
+              "title": "Related Information",
+              "level": "2"
+            },
+            "columns": [
+              {
+                "column_title": "Organizations",
+                "linkList": {
+                  "compHeading": {
+                    "title": "Organizations",
+                    "sidebar": true,
+                    "level": "3"
+                  },
+                  "stacked": true,
+                  "links": [
+                    {
+                      "href": "#",
+                      "text": "Related Organization #1"
+                    },
+                    {
+                      "href": "#",
+                      "text": "Related Organization #2"
+                    },
+                    {
+                      "href": "#",
+                      "text": "Related Organization #3"
+                    },
+                    {
+                      "href": "#",
+                      "text": "Executive Office of Health and Human Services"
+                    },
+                    {
+                      "href": "#",
+                      "text": "Related Organization #5"
+                    },
+                    {
+                      "href": "#",
+                      "text": "Related Organization #6"
+                    },
+                    {
+                      "href": "#",
+                      "text": "Related Organization #7"
+                    },
+                    {
+                      "href": "#",
+                      "text": "Board of Registration in Allied Mental Health and Human Services Professions"
+                    },
+                    {
+                      "href": "#",
+                      "text": "Related Organization #9"
+                    },
+                    {
+                      "href": "#",
+                      "text": "Board of Registration of Professional Engineers and Professional Land Surveyors "
+                    },
+                    {
+                      "href": "#",
+                      "text": "Massachusetts Commission on Lesbian, Gay, Bisexual, Transgender, Queer and Questioning Youth"
+                    },
+                    {
+                      "href": "#",
+                      "text": "Related Organization #12"
+                    }
+                  ]
+                }
+              },
+              {
+                "column_title": "Topics",
+                "linkList": {
+                  "compHeading": {
+                    "title": "Topics",
+                    "sidebar": true,
+                    "level": "3"
+                  },
+                  "stacked": true,
+                  "links": [
+                    {
+                      "href": "#",
+                      "text": "Related Topic #1"
+                    },
+                    {
+                      "href": "#",
+                      "text": "Related Topic #2"
+                    },
+                    {
+                      "href": "#",
+                      "text": "Related Topic #3"
+                    }
+                  ]
+                }
+              }
+            ]
+          }
+        }
+      }
+    ]
+  }
+}
diff --git a/packages/patternlab/styleguide/source/_patterns/05-pages/topic-new.twig b/packages/patternlab/styleguide/source/_patterns/05-pages/topic-new.twig
new file mode 100644
index 0000000000..cb214dbef6
--- /dev/null
+++ b/packages/patternlab/styleguide/source/_patterns/05-pages/topic-new.twig
@@ -0,0 +1,11 @@
+{% extends '@templates/single-column.twig' %}
+
+{% block preContent %}
+	{% include "@organisms/page-banner/page-banner.twig" %}
+{% endblock %}
+
+{% block pageContent %}
+	{% include "@organisms/by-author/stacked-row-section.twig" %}
+{% endblock %}
+
+{% block postContent %}{% endblock %}