diff --git a/packages/node_modules/@node-red/editor-client/src/sass/base.scss b/packages/node_modules/@node-red/editor-client/src/sass/base.scss
index c5da76b1c..6a899260b 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/base.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/base.scss
@@ -19,8 +19,8 @@ body {
     font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
     padding: 0;
     margin: 0;
-    background: $background-color;
-    color: #333333;
+    background: $primary-background;
+    color: $primary-text-color;
     line-height: 20px;
 }
 
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
index ad9b438f7..5b8df81fa 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
@@ -14,10 +14,11 @@
  * limitations under the License.
  **/
 
-$background-color: #f3f3f3;
+$primary-background: #f3f3f3;
+$primary-text-color: #555;
 
 $form-placeholder-color: #bbbbbb;
-$form-text-color: #555;
+$form-text-color: $primary-text-color;
 $form-input-focus-color:  rgba(85,150,230,0.8);
 $form-input-border-color:  #ccc;
 $form-input-border-selected-color:  #aaa;
@@ -34,12 +35,22 @@ $list-item-border-selected: #999;
 $primary-border-color: #bbbbbb;
 $secondary-border-color: #dddddd;
 
+$tab-text-color-active: #555;
+$tab-text-color-inactive: #666;
+$tab-text-color-disabled-active: #999;
+$tab-text-color-disabled-inactive: #aaa;
+$tab-badge-color: #aaa;
+$tab-background: #fff;
 $tab-background-active: #fff;
 $tab-background-selected: #f9f9f9;
 $tab-background-inactive: #f0f0f0;
 $tab-background-hover: #ddd;
 
-$palette-header-background: $background-color;
+$palette-header-background: $primary-background;
+$palette-header-color: #444;
+
+$workspace-background: #fff;
+$workspace-grid-color: #eee;
 
 $workspace-button-background: #fff;
 $workspace-button-background-hover: #ddd;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
index 86a57b4cc..0379bf127 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
@@ -143,13 +143,13 @@
     bottom: 0px;
     width: 7px;
     left: -9px;
-    background: $background-color url(images/grip.png) no-repeat 50% 50%;
+    background: $primary-background url(images/grip.png) no-repeat 50% 50%;
     cursor: col-resize;
     border-left: 1px solid $primary-border-color;
     box-shadow: -1px 0 6px rgba(0,0,0,0.1);
 
     &.red-ui-tray-resize-maximised {
-        background: $background-color;
+        background: $primary-background;
         cursor: default;
     }
 }
@@ -161,7 +161,7 @@
     border: none;
     border-bottom: 1px solid $secondary-border-color;
     margin: 0;
-    background: $background-color;
+    background: $primary-background;
     color: $workspace-button-color;
 }
 
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss
index 5be07764a..eff404f24 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss
@@ -74,6 +74,7 @@
 .red-ui-palette-header {
     position: relative;
     background: $palette-header-background;
+    color: $palette-header-color;
     cursor: pointer;
     text-align: left;
     padding: 9px;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/panels.scss b/packages/node_modules/@node-red/editor-client/src/sass/panels.scss
index b6b98e6ac..9f99db5d4 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/panels.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/panels.scss
@@ -30,7 +30,7 @@
     height: 7px;
     box-sizing: border-box;
     cursor: ns-resize;
-    background: $background-color url(images/grip.png) no-repeat 50% 50%;
+    background: $primary-background url(images/grip.png) no-repeat 50% 50%;
 }
 
 
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/search.scss b/packages/node_modules/@node-red/editor-client/src/sass/search.scss
index fa846a3d6..02d9dbf7b 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/search.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/search.scss
@@ -105,13 +105,13 @@
     position:relative;
     height: 300px;
     padding: 5px;
-    background: $background-color;
+    background: $primary-background;
     .red-ui-search-results-list {
 
     }
     .red-ui-editableList-container {
         padding: 0;
-        background: $background-color;
+        background: $primary-background;
         li {
             padding: 0;
             &.selected {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss
index f7b92eecb..4589afb7f 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss
@@ -48,7 +48,7 @@
     bottom:10px;
     width: 7px;
     z-index: 11;
-    background: $background-color url(images/grip.png) no-repeat 50% 50%;
+    background: $primary-background url(images/grip.png) no-repeat 50% 50%;
     cursor: col-resize;
 }
 
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss b/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss
index 6770baf24..87bd76357 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss
@@ -16,7 +16,7 @@
 
 .red-ui-tabs {
     position: relative;
-    background: #fff;
+    background: $tab-background;
     overflow: hidden;
     height: 35px;
     box-sizing: border-box;
@@ -71,7 +71,7 @@
                 padding-left: 12px;
                 width: 100%;
                 height: 100%;
-                color: #666;
+                color: $tab-text-color-inactive;
             }
             a:hover {
                 text-decoration: none;
@@ -86,14 +86,14 @@
             &.active {
                 background: $tab-background-active;
                 font-weight: bold;
-                border-bottom: 1px solid #fff;
+                border-bottom: 1px solid $tab-background-active;
                 z-index: 2;
 
                 a {
-                    color: #333;
+                    color: $tab-text-color-active;
                 }
                 a.red-ui-tab-close {
-                    color: #aaa;
+                    color: $workspace-button-color;
                     background: $tab-background-active;
                     &:hover {
                         background: $workspace-button-background-hover !important;
@@ -111,7 +111,7 @@
                 font-weight: bold;
                 .red-ui-tabs-badge-selected {
                     display: inline;
-                    background: white;
+                    background: $tab-background;
                 }
                 .red-ui-tabs-badge-changed {
                     display: none;
@@ -159,7 +159,7 @@
         height: 100%;
         border-right: 1px solid $primary-border-color;
         margin: 0;
-        background: #f3f3f3;
+        background: $primary-background;
         overflow: visible;
 
         .red-ui-tabs-scroll-container {
@@ -181,10 +181,10 @@
                 border-right: 1px solid $primary-border-color;
                 height: auto;
                 &:not(:first-child) {
-                    border-top: 1px solid  $secondary-border-color;
+                    border-top: 1px solid $secondary-border-color;
                 }
                 &:last-child {
-                    border-bottom: 1px solid  $secondary-border-color;
+                    border-bottom: 1px solid $secondary-border-color;
                 }
 
                 a.red-ui-tab-label {
@@ -192,7 +192,7 @@
                 }
 
                 &.active {
-                    border-right: 1px solid #fff;
+                    border-right: 1px solid $tab-background-active;
                 }
             }
         }
@@ -213,7 +213,7 @@
     top: 0;
     right: 0;
     height: 35px;
-    background: #fff;
+    background: $tab-background;
     border-bottom: 1px solid $primary-border-color;
     z-index: 2;
 
@@ -235,7 +235,7 @@
     top: 0;
     right: 0;
     height: 35px;
-    background: #fff;
+    background: $tab-background;
     border-bottom: 1px solid $primary-border-color;
     z-index: 2;
     a {
@@ -251,7 +251,7 @@
             }
         }
         &.red-ui-tab-link-button-menu {
-            border-color: white;
+            border-color: $tab-background;
         }
     }
 }
@@ -262,7 +262,7 @@
         height: 35px;
         width: 21px;
         display: block;
-        color: $link-color;
+        color: $workspace-button-color;
         font-size: 22px;
         text-align: center;
         margin:0;
@@ -275,14 +275,12 @@
     left:0;
     a {
         border-right: 1px solid $primary-border-color;
-        // box-shadow: 8px 0px 5px -2px rgba(0,0,0,0.1);
     }
 }
 .red-ui-tab-scroll-right {
     right: 0px;
     a {
         border-left: 1px solid $primary-border-color;
-        // box-shadow: -8px 0px 5px -2px rgba(0,0,0,0.1);
     }
 
 }
@@ -324,7 +322,7 @@ i.red-ui-tab-icon {
     line-height: 28px;
     text-align: center;
     padding:0px;
-    color: #aaa;
+    color: $tab-badge-color;
 }
 
 .red-ui-tabs-badges i {
@@ -358,9 +356,10 @@ i.red-ui-tab-icon {
     line-height: 28px;
     text-align: center;
     padding: 0px;
-    color: #aaa;
+    color: $workspace-button-color;
     &:hover {
         background: $workspace-button-background-hover !important;
+        color: $workspace-button-color-hover;
         opacity: 1;
     }
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss
index 6fac448d0..26217381d 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss
@@ -14,22 +14,6 @@
  * limitations under the License.
  **/
 
-
-#red-ui-workspace-chart {
-   overflow: auto;
-   background: #e3e3e3;
-   position: absolute;
-   bottom:25px;
-   top: 35px;
-   left:0px;
-   right:0px;
-   box-sizing:border-box;
-   transition: right 0.2s ease;
-   &:focus {
-       outline: none;
-   }
-}
-
 #red-ui-workspace {
     position: absolute;
     margin: 0;
@@ -42,13 +26,27 @@
     transition: left 0.1s ease-in-out;
 }
 
+#red-ui-workspace-chart {
+   overflow: auto;
+   position: absolute;
+   bottom:25px;
+   top: 35px;
+   left:0px;
+   right:0px;
+   box-sizing:border-box;
+   transition: right 0.2s ease;
+   &:focus {
+       outline: none;
+   }
+}
+
 .red-ui-workspace-chart-background {
-    fill: #fff;
+    fill: $workspace-background;
 }
 .red-ui-workspace-chart-grid line {
     fill: none;
     shape-rendering: crispEdges;
-    stroke: #eee;
+    stroke: $workspace-grid-color;
     stroke-width: 1px;
 }
 
@@ -70,9 +68,6 @@
 
 #red-ui-workspace-tabs:not(.red-ui-workspace-focussed) {
     opacity:0.8;
-    li.red-ui-tab.active a {
-        color:#666;
-    }
 }
 .red-ui-workspace-disabled-icon {
     display: none;
@@ -85,11 +80,11 @@
 
         a {
             font-style: italic;
-            color: #aaa !important;
+            color: $tab-text-color-disabled-inactive !important;
         }
         &.active a {
             font-weight: normal;
-            color: #999 !important;
+            color: $tab-text-color-disabled-active !important;
         }
         .red-ui-workspace-disabled-icon {
             display: inline;
@@ -110,7 +105,7 @@
 .red-ui-navigator-border {
     stroke-dasharray: 5,5;
     pointer-events: none;
-    stroke: #999;
+    stroke: $secondary-border-color;
     strokeWidth: 1;
     fill: white;
 }