diff --git a/aio/src/styles/1-layouts/_sidenav.scss b/aio/src/styles/1-layouts/_sidenav.scss
index 9fb9d2edf8..8887af1df9 100644
--- a/aio/src/styles/1-layouts/_sidenav.scss
+++ b/aio/src/styles/1-layouts/_sidenav.scss
@@ -29,8 +29,8 @@ mat-sidenav.mat-sidenav.sidenav {
   left: 0;
   padding: 0;
   min-width: 260px;
-  background-color: $white;
-  box-shadow: 6px 0 6px rgba(0,0,0,0.10);
+  background-color: $superlightgray;
+  border-right: 1px solid $lightgray;
 
   &.collapsed {
     top: 56px;
@@ -83,7 +83,7 @@ mat-sidenav-container div.mat-sidenav-content {
   }
 
   &.selected {
-    color: $blue;
+    color: $darkblue;
   }
 
   &.level-2 {
@@ -168,7 +168,6 @@ button.vertical-menu-item {
 }
 
 .level-2 {
-  color: $mediumgray;
   font-family: $main-font;
   @include font-size(14);
   font-weight: 400;
@@ -188,7 +187,6 @@ button.vertical-menu-item {
 }
 
 .level-3 {
-  color: $mediumgray;
   font-family: $main-font;
   @include font-size(14);
   margin: 0;
@@ -197,7 +195,6 @@ button.vertical-menu-item {
 }
 
 .level-4 {
-  color: $mediumgray;
   font-family: $main-font;
   @include font-size(14);
   margin: 0;
diff --git a/aio/src/styles/_constants.scss b/aio/src/styles/_constants.scss
index 07affee69b..b74cdb2f92 100755
--- a/aio/src/styles/_constants.scss
+++ b/aio/src/styles/_constants.scss
@@ -11,12 +11,14 @@ $layer-5: 5;
 
 // COLOR PALETTE
 $blue: #1976D2;
+$darkblue: #1669bb;
 $accentblue: #1E88E5;
 $brightred: #DD0031;
 $darkred: #C3002F;
 $white: #FFFFFF;
 $offwhite: #FAFAFA;
 $backgroundgray: #F1F1F1;
+$superlightgray: #F2F2F2;
 $lightgray: #DBDBDB;
 $lightboxgray: #EBEBEB;
 $mist: #ECEFF1;