diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
index 48c7b604cf..6d742c2e89 100644
--- a/client/app/styles/_base.scss
+++ b/client/app/styles/_base.scss
@@ -100,7 +100,7 @@ a {
 
 .overlay-wrapper {
   align-items: center;
-  background-color: transparentize($color-white-smoke, 0.1);
+  background-color: transparentize($color-purple-25, 0.1);
   border-radius: $border-radius-soft;
   color: $text-tertiary-color;
   display: flex;
@@ -1140,7 +1140,7 @@ a {
 
     a {
       &:hover {
-        background-color: $color-athens-gray;
+        background-color: $color-purple-50;
         cursor: pointer;
       }
     }
@@ -1622,7 +1622,7 @@ a {
 }
 
 .sidebar-gridmode {
-  background-color: $color-athens-gray;
+  background-color: $color-purple-50;
   border-color: $background-darker-color;
   opacity: 0.9;
 }
@@ -1827,13 +1827,13 @@ a {
       padding: 4px 5px;
       margin-left: 2px;
       font-size: $font-size-normal;
-      color: $color-primary-lavender;
+      color: $color-purple-400;
       cursor: pointer;
       border: 1px solid transparent;
       border-radius: $border-radius-soft;
 
       &:hover {
-        border-color: transparentize($color-primary-lavender, 0.4);
+        border-color: transparentize($color-purple-400, 0.4);
       }
     }
 
@@ -1848,14 +1848,14 @@ a {
     h2 {
       line-height: 150%;
       font-size: $font-size-large;
-      color: $color-primary-lavender;
+      color: $color-purple-400;
       padding: 4px 0;
-      border-bottom: 1px solid transparentize($color-primary-lavender, 0.9);
+      border-bottom: 1px solid transparentize($color-purple-400, 0.9);
     }
 
     h3 {
       font-size: $font-size-normal;
-      color: $color-primary-lavender;
+      color: $color-purple-400;
       padding: 4px 0;
     }
 
@@ -1917,7 +1917,7 @@ a {
     flex-direction: column;
 
     &-current-topology {
-      color: $color-primary-lavender;
+      color: $color-purple-400;
     }
 
     &-fields {
@@ -2127,7 +2127,7 @@ a {
   }
 
   button, a {
-    color: $color-primary-charcoal;
+    color: $color-purple-900;
 
     &:hover {
       color: $text-color;
diff --git a/client/app/styles/_contrast-overrides.scss b/client/app/styles/_contrast-overrides.scss
index f2e5800a9d..0001b72830 100644
--- a/client/app/styles/_contrast-overrides.scss
+++ b/client/app/styles/_contrast-overrides.scss
@@ -2,9 +2,9 @@
 
 $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;
+$background-darker-color: $color-purple-200;
+$background-darker-secondary-color: $color-purple-200;
+$background-dark-color: $color-purple-900;
 $text-color: $color-black;
 $text-secondary-color: $color-black;
 $text-tertiary-color: $color-black;
@@ -30,7 +30,7 @@ $btn-opacity-disabled: 0.4;
 
 $link-opacity-default: 1;
 
-$search-border-color: $color-blue-haze;
+$search-border-color: $color-purple-200;
 $search-border-width: 2px;
 
 /* specific elements */
diff --git a/client/app/styles/_variables.scss b/client/app/styles/_variables.scss
index 1f29902a20..647a8fc0de 100644
--- a/client/app/styles/_variables.scss
+++ b/client/app/styles/_variables.scss
@@ -6,12 +6,12 @@ $background-color: $color-gallery;
 $background-lighter-color: $color-white;
 $background-darker-color: transparentize($color-silver, 0.5);
 $background-darker-secondary-color: $color-gallery;
-$background-dark-color: $color-primary-charcoal;
-$text-color: $color-gunpowder;
-$text-secondary-color: $color-comet;
-$text-tertiary-color: $color-primary-lavender;
-$border-light-color: $color-mischka;
-$text-darker-color: $color-primary-charcoal;
+$background-dark-color: $color-purple-900;
+$text-color: $color-purple-800;
+$text-secondary-color: $color-purple-600;
+$text-tertiary-color: $color-purple-400;
+$border-light-color: $color-purple-100;
+$text-darker-color: $color-purple-900;
 
 $details-window-width: 420px;
 $details-window-padding-left: 30px;
@@ -30,7 +30,7 @@ $node-text-scale: 2;
 $edge-highlight-opacity: 0.1;
 $edge-opacity-blurred: 0.2;
 $edge-opacity: 0.5;
-$edge-color: $color-kimberly-dark;
+$edge-color: $color-purple-500;
 
 $btn-opacity-default: 0.7;
 $btn-opacity-hover: 1;
@@ -45,5 +45,5 @@ $search-border-width: 1px;
 $timeline-height: 55px;
 
 /* specific elements */
-$body-background-color: $color-white-smoke;
-$label-background-color: transparentize($color-white-smoke, 0.3);
+$body-background-color: $color-purple-25;
+$label-background-color: transparentize($color-purple-25, 0.3);
diff --git a/client/package.json b/client/package.json
index 194d8364ca..bc62cc7786 100644
--- a/client/package.json
+++ b/client/package.json
@@ -44,7 +44,7 @@
     "reselect": "3.0.1",
     "reselect-map": "1.0.3",
     "styled-components": "2.2.4",
-    "weaveworks-ui-components": "0.4.97",
+    "weaveworks-ui-components": "0.5.1",
     "whatwg-fetch": "2.0.3",
     "xterm": "3.3.0"
   },
diff --git a/client/yarn.lock b/client/yarn.lock
index b939e10aa0..583423a5b8 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -8345,9 +8345,9 @@ wd@^0.4.0:
     underscore.string "~3.0.3"
     vargs "~0.1.0"
 
-weaveworks-ui-components@0.4.97:
-  version "0.4.97"
-  resolved "https://registry.yarnpkg.com/weaveworks-ui-components/-/weaveworks-ui-components-0.4.97.tgz#eaf4e68ca380d074d389bc11deee263944f02a94"
+weaveworks-ui-components@0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/weaveworks-ui-components/-/weaveworks-ui-components-0.5.1.tgz#dbb8f73ab28161a2e2f0c5b164fb952a0be35b10"
   dependencies:
     classnames "2.2.5"
     d3-drag "1.2.1"