diff --git a/client/src/components/Explorer/Explorer.scss b/client/src/components/Explorer/Explorer.scss
index 67dc89db6..57a331a7a 100644
--- a/client/src/components/Explorer/Explorer.scss
+++ b/client/src/components/Explorer/Explorer.scss
@@ -1,5 +1,5 @@
 $c-explorer-bg: #4c4e4d;
-$c-explorer-bg-dark: $color-grey-1;
+$c-explorer-bg-dark: $nav-grey-1;
 $c-explorer-bg-active: rgba(0, 0, 0, 0.425);
 $c-explorer-secondary: #a5a5a5;
 $c-explorer-easing: cubic-bezier(0.075, 0.82, 0.165, 1);
diff --git a/wagtail/admin/static_src/wagtailadmin/scss/_variables.scss b/wagtail/admin/static_src/wagtailadmin/scss/_variables.scss
index 72f4c763c..3d936ce17 100644
--- a/wagtail/admin/static_src/wagtailadmin/scss/_variables.scss
+++ b/wagtail/admin/static_src/wagtailadmin/scss/_variables.scss
@@ -25,9 +25,9 @@ $breakpoint-desktop-large: 75em; // 1200px
 $breakpoint-desktop-larger: 100em; // 1600px
 
 // colours
-$color-teal: #43b1b0;
-$color-teal-darker: darken($color-teal, 10);
-$color-teal-dark: darken($color-teal, 22);
+$color-teal: #007d7e;
+$color-teal-darker: darken(adjust-hue($color-teal, 1), 3);
+$color-teal-dark: darken(adjust-hue($color-teal, 1), 6);
 
 $color-blue: #71b2d4;
 $color-red: #cd3238;
@@ -89,3 +89,12 @@ $mobile-nav-indent: 50px;
 
 $nav-wrapper-inner-z-index: 26;
 $draftail-editor-z-index: $nav-wrapper-inner-z-index + 1;
+
+// Nav
+$nav-grey-1: darken($color-white, 80);
+$nav-grey-2: darken($color-white, 60);
+$nav-item-hover-bg: rgba(100, 100, 100, 0.15);
+$nav-item-active-bg: darken($color-white, 90);
+$submenu-bg: darken($color-white, 85);
+$footer-account: $nav-item-active-bg;
+$footer-submenu: $submenu-bg;
diff --git a/wagtail/admin/static_src/wagtailadmin/scss/components/_main-nav.scss b/wagtail/admin/static_src/wagtailadmin/scss/components/_main-nav.scss
index a09f98888..c54741e4a 100644
--- a/wagtail/admin/static_src/wagtailadmin/scss/components/_main-nav.scss
+++ b/wagtail/admin/static_src/wagtailadmin/scss/components/_main-nav.scss
@@ -1,8 +1,3 @@
-$selected-highlight: darken($color-grey-1, 10%);
-$submenu-color: darken($color-grey-1, 5%);
-$footer-account: $selected-highlight;
-$footer-submenu: $submenu-color;
-
 .nav-wrapper {
     position: relative;
     margin-left: -$menu-width;
@@ -11,10 +6,10 @@ $footer-submenu: $submenu-color;
     display: flex;
     flex-direction: column;
     height: 100%;
-    background: $color-grey-1;
+    background: $nav-grey-1;
 
     .inner {
-        background: $color-grey-1;
+        background: $nav-grey-1;
     }
 }
 
@@ -62,7 +57,7 @@ $footer-submenu: $submenu-color;
         &:hover,
         &:focus {
             outline: none;
-            background-color: rgba(100, 100, 100, 0.15);
+            background-color: $nav-item-hover-bg;
             color: $color-white;
             text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
         }
@@ -92,7 +87,7 @@ $footer-submenu: $submenu-color;
     }
 
     .menu-active {
-        background: $selected-highlight;
+        background: $nav-item-active-bg;
         text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
 
         > a {
@@ -136,7 +131,7 @@ $footer-submenu: $submenu-color;
 }
 
 .nav-submenu {
-    background: $submenu-color;
+    background: $submenu-bg;
 
     h2 {
         display: none;
@@ -395,7 +390,7 @@ body.explorer-open {
     }
 
     li.submenu-active {
-        background: $submenu-color;
+        background: $submenu-bg;
 
         > a {
             text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);