diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
index 649d53de1..061139c23 100644
--- a/client/app/styles/_base.scss
+++ b/client/app/styles/_base.scss
@@ -19,7 +19,7 @@ a {
 
 .browsehappy {
   margin: 0.2em 0;
-  background: $color-silver;
+  background: $color-gray-200;
   color: $color-black;
   padding: 0.2em 0;
 }
@@ -1171,7 +1171,7 @@ a {
   &-metric-box {
     @extend .palable;
     cursor: pointer;
-    fill: transparentize($color-dove-gray, 0.6);
+    fill: transparentize($color-gray-600, 0.6);
 
     &-info {
       background-color: transparentize($color-white, 0.4);
@@ -1189,8 +1189,8 @@ a {
   }
 
   &-layer-topology {
-    background-color: transparentize($color-gallery, 0.05);
-    border: 1px solid $color-silver;
+    background-color: transparentize($color-gray-50, 0.05);
+    border: 1px solid $color-gray-200;
     color: $text-tertiary-color;
     font-size: $font-size-normal;
     font-weight: bold;
@@ -1262,7 +1262,7 @@ a {
     width: 100%;
     height: 100%;
     border: 0px solid $color-black;
-    color: $color-gallery;
+    color: $color-gray-50;
   }
 
   &-header {
@@ -1356,7 +1356,7 @@ a {
 
   &-cursor {
     color: $color-black;
-    background: $color-gallery;
+    background: $color-gray-50;
   }
 }
 
@@ -1873,13 +1873,13 @@ a {
         padding: 3px 5px;
         font-size: $font-size-tiny;
         line-height: 10px;
-        color: $color-dove-gray;
+        color: $color-gray-600;
         vertical-align: middle;
         background-color: $color-white;
-        border: solid 1px $color-silver;
-        border-bottom-color: $color-dove-gray;
+        border: solid 1px $color-gray-200;
+        border-bottom-color: $color-gray-600;
         border-radius: $border-radius-soft;
-        box-shadow: inset 0 -1px 0 $color-dove-gray;
+        box-shadow: inset 0 -1px 0 $color-gray-600;
       }
       div.key {
         width: 60px;
@@ -2043,7 +2043,7 @@ a {
     }
 
     tr:nth-child(even) {
-      background: $background-darker-color;
+      background: $color-gray-100;
     }
 
     tbody tr {
@@ -2064,7 +2064,7 @@ a {
   .scroll-body {
 
     table {
-      border-bottom: 1px solid $color-silver;
+      border-bottom: 1px solid $color-gray-200;
     }
 
     thead, tbody tr {
@@ -2083,7 +2083,7 @@ a {
 
     thead {
       box-shadow: 0 4px 2px -2px transparentize($color-black, 0.84);
-      border-bottom: 1px solid $color-dove-gray;
+      border-bottom: 1px solid $color-gray-600;
     }
 
     tbody {
diff --git a/client/app/styles/_contrast-overrides.scss b/client/app/styles/_contrast-overrides.scss
index 0001b7283..e724e0035 100644
--- a/client/app/styles/_contrast-overrides.scss
+++ b/client/app/styles/_contrast-overrides.scss
@@ -8,7 +8,7 @@ $background-dark-color: $color-purple-900;
 $text-color: $color-black;
 $text-secondary-color: $color-black;
 $text-tertiary-color: $color-black;
-$border-light-color: $color-dove-gray;
+$border-light-color: $color-gray-600;
 $text-darker-color: $color-black;
 $edge-color: $color-black;
 
diff --git a/client/app/styles/_variables.scss b/client/app/styles/_variables.scss
index 647a8fc0d..9ec1efc26 100644
--- a/client/app/styles/_variables.scss
+++ b/client/app/styles/_variables.scss
@@ -2,10 +2,10 @@ $fa-font-path: "~font-awesome/fonts";
 
 $base-ease: ease-in-out;
 
-$background-color: $color-gallery;
+$background-color: $color-gray-50;
 $background-lighter-color: $color-white;
-$background-darker-color: transparentize($color-silver, 0.5);
-$background-darker-secondary-color: $color-gallery;
+$background-darker-color: transparentize($color-gray-200, 0.5);
+$background-darker-secondary-color: $color-gray-50;
 $background-dark-color: $color-purple-900;
 $text-color: $color-purple-800;
 $text-secondary-color: $color-purple-600;
diff --git a/client/package.json b/client/package.json
index 7cb71540d..f4bd81d7a 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.5.3",
+    "weaveworks-ui-components": "0.7.0",
     "whatwg-fetch": "2.0.3",
     "xterm": "3.3.0"
   },
diff --git a/client/yarn.lock b/client/yarn.lock
index 18054adae..088811863 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.5.3:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/weaveworks-ui-components/-/weaveworks-ui-components-0.5.3.tgz#0230265d87e41bdd9483986714c80b644c0d4bfb"
+weaveworks-ui-components@0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/weaveworks-ui-components/-/weaveworks-ui-components-0.7.0.tgz#721f886c2dd6e93250afc446873f77f33f130cb0"
   dependencies:
     classnames "2.2.5"
     d3-drag "1.2.1"