diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
index d6abd8f7f..44945e245 100644
--- a/client/app/styles/_base.scss
+++ b/client/app/styles/_base.scss
@@ -96,7 +96,7 @@ a {
 
 .overlay-wrapper {
   align-items: center;
-  background-color: fade-out($background-color, 0.1);
+  background-color: transparentize($background-color, 0.1);
   border-radius: 4px;
   color: $text-tertiary-color;
   display: flex;
@@ -527,7 +527,7 @@ a {
     }
 
     .match {
-      background-color: lighten(transparentize($color-weaveblue, 0.5), 30%);
+      background-color: transparentize($color-anakiwa, 0.5);
       border: 1px solid $color-weaveblue;
     }
   }
@@ -639,7 +639,7 @@ a {
       display: inline-block;
       margin: 1px;
       padding: 2px 4px;
-      background-color: fade-out($color-weaveblue, .9);
+      background-color: transparentize($color-weaveblue, 0.9);
     }
 
     &-label {
@@ -651,7 +651,7 @@ a {
   &-more {
     text-transform: uppercase;
     font-size: 0.7em;
-    color: darken($color-weaveblue, 10%);
+    color: $color-cerulean;
     margin-top: -2px;
   }
 }
@@ -1058,7 +1058,7 @@ a {
       line-height: 1.5;
 
       &:hover, &.selected {
-        background-color: lighten($background-color, 5%);
+        background-color: $color-white;
       }
 
       > * {
@@ -1207,7 +1207,7 @@ a {
 .details-wrapper .node-details-table {
   &-node {
     &:hover, &.selected {
-      background-color: lighten($background-color, 5%);
+      background-color: $color-white;
     }
   }
 }
@@ -1748,7 +1748,7 @@ a {
 }
 
 .search-item {
-  background-color: fade-out($color-weaveblue, .2);
+  background-color: transparentize($color-weaveblue, 0.2);
   border-radius: $border-radius / 2;
   margin: 1px 0 1px 1.5em;
   display: inline-block;
diff --git a/client/app/styles/_colors.scss b/client/app/styles/_colors.scss
index 9a562922b..377311694 100644
--- a/client/app/styles/_colors.scss
+++ b/client/app/styles/_colors.scss
@@ -13,9 +13,19 @@ $color-gallery: #eee;
 $color-athens-gray: #eeeef4;
 $color-alabaster: #fcfcfc;
 $color-dim-gray: #666;
+$color-mercury: #e8e8e8;
+$color-mischka: #dfdfea;
+$color-comet: #5b5b88;
+$color-gunpowder: #3c3c5a;
+$color-blue-haze: #c0c0d5;
+$color-neutral-black: #1a1a1a;
+$color-tundora: #444;
+$color-cerulean: #00a8cc;
 /* New theme colors */
 $color-athens-gray-dark: #e9e9f1;
 $color-red-berry: #8b0000;
 $color-olivine: #a0be7e;
 $color-link-water: #d7ecf5;
 $color-dusty-gray: #969696;
+$color-solid-gray: #808080;
+$color-anakiwa: #99edff;
diff --git a/client/app/styles/_contrast-overrides.scss b/client/app/styles/_contrast-overrides.scss
index d92335d18..29ceccdbc 100644
--- a/client/app/styles/_contrast-overrides.scss
+++ b/client/app/styles/_contrast-overrides.scss
@@ -1,15 +1,15 @@
 @import "variables";
 
-$background-color: lighten($color-primary-charcoal, 75%);
-$background-lighter-color: lighten($color-primary-charcoal, 85%);
-$background-darker-color: lighten($color-primary-charcoal, 55%);
-$background-darker-secondary-color: lighten($color-primary-charcoal, 60%);
+$background-color: $color-white;
+$background-lighter-color: $color-white;
+$background-darker-color: $color-blue-haze;
+$background-darker-secondary-color: $color-blue-haze;
 $background-dark-color: $color-primary-charcoal;
 $text-color: $color-black;
-$text-secondary-color: lighten($color-black, 10%);
-$text-tertiary-color: lighten($color-black, 20%);
-$border-light-color: lighten($color-black, 50%);
-$text-darker-color: darken($text-color, 20%);
+$text-secondary-color: $color-neutral-black;
+$text-tertiary-color: $color-tundora;
+$border-light-color: $color-solid-gray;
+$text-darker-color: $color-black;
 $edge-color: $color-black;
 
 $node-elements-in-background-opacity: 0.4;
@@ -30,7 +30,7 @@ $btn-opacity-disabled: 0.4;
 
 $link-opacity-default: 1;
 
-$search-border-color: lighten($color-primary-charcoal, 55%);
+$search-border-color: $color-blue-haze;
 $search-border-width: 2px;
 
 /* specific elements */
diff --git a/client/app/styles/_variables.scss b/client/app/styles/_variables.scss
index a4f90c7f5..bdfccf5f0 100644
--- a/client/app/styles/_variables.scss
+++ b/client/app/styles/_variables.scss
@@ -7,14 +7,14 @@ $mono-font: "Menlo", "DejaVu Sans Mono", "Liberation Mono", monospace;
 $base-ease: ease-in-out;
 
 $background-color: $color-lightgray;
-$background-lighter-color: lighten($color-lightgray, 8%);
-$background-darker-color: darken($color-lightgray, 16%);
-$background-darker-secondary-color: darken($color-lightgray, 8%);
+$background-lighter-color: $color-white;
+$background-darker-color: $color-silver;
+$background-darker-secondary-color: $color-mercury;
 $background-dark-color: $color-primary-charcoal;
-$text-color: lighten($color-primary-charcoal, 5%);
-$text-secondary-color: lighten($color-primary-charcoal, 20%);
-$text-tertiary-color: lighten($color-primary-charcoal, 35%);
-$border-light-color: lighten($color-primary-charcoal, 65%);
+$text-color: $color-gunpowder;
+$text-secondary-color: $color-comet;
+$text-tertiary-color: $color-lavender;
+$border-light-color: $color-mischka;
 $text-darker-color: $color-primary-charcoal;
 
 $details-window-width: 420px;
@@ -51,4 +51,4 @@ $timeline-height: 55px;
 
 /* specific elements */
 $body-background-color: $color-lightgray;
-$label-background-color: fade-out($color-lightgray, .3);
+$label-background-color: transparentize($color-lightgray, 0.3);