diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
index d06c15cd30..839e61c5f9 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
@@ -256,7 +256,7 @@ body.touch .umb-tree {
     }
 
     &.current > .umb-tree-item__inner > .umb-tree-item__annotation {
-        background-color: @pinkLight;
+        background-color: @ui-active;
     }
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less
index 6a6a8f9f5b..2cca776614 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less
@@ -115,7 +115,7 @@
 
         li {
             &.is-active a {
-                border-left-color: @ui-active;
+                border-left-color: @ui-active-border;
             }
             
             a {
diff --git a/src/Umbraco.Web.UI.Client/src/less/sections.less b/src/Umbraco.Web.UI.Client/src/less/sections.less
index 40921c5b76..e1ccfeb092 100644
--- a/src/Umbraco.Web.UI.Client/src/less/sections.less
+++ b/src/Umbraco.Web.UI.Client/src/less/sections.less
@@ -31,7 +31,7 @@ ul.sections {
                 height: 4px;
                 bottom: 0;
                 transform: translateY(4px);
-                background-color: @ui-active;
+                background-color: @pinkLight;
                 position: absolute;
                 border-radius: 3px 3px 0 0;
                 opacity: 0;
@@ -56,7 +56,7 @@ ul.sections {
         }
 
         &.current a {
-            color: @ui-active;
+            color: @pinkLight;
 
             &::after {
                 opacity: 1;
@@ -104,7 +104,7 @@ ul.sections-tray {
     li {
 
         &.current a {
-            color: @ui-active;
+            color: @ui-active-border;
             opacity: 1;
 
             &::after {
@@ -124,7 +124,7 @@ ul.sections-tray {
                 content: "";
                 width: 4px;
                 height: 100%;
-                background-color: @ui-active;
+                background-color: @ui-active-border;
                 position: absolute;
                 border-radius: 0 3px 3px 0;
                 opacity: 0;
diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less
index a906bc0eed..674c8d08e9 100644
--- a/src/Umbraco.Web.UI.Client/src/less/variables.less
+++ b/src/Umbraco.Web.UI.Client/src/less/variables.less
@@ -75,6 +75,8 @@
 @gray-9:                #E9E9EB;
 @gray-10:               #F3F3F5;
 @gray-11:               #F6F6F7;
+@gray-12:               #F9F9FA;
+@gray-13:               #FBFBFD;
 
 @sand-1:                #DED4CF;// added 2019
 @sand-2:                #EBDED6;// added 2019
@@ -108,7 +110,7 @@
 //@blueLight:               #4f89de;
 @blue:                  #2E8AEA;
 @blueMid:               #2152A3;// updated 2019
-@blueMidLight:          rgb(99, 174, 236);
+@blueMidLight:          #6ab4f0;
 @blueDark:              #3544b1;// updated 2019
 @blueExtraDark:         #1b264f;// added 2019
 @blueLight:             #ADD8E6;
@@ -116,6 +118,7 @@
 //@orange:              #f79c37;// updated 2019
 @pink:                  #D93F4C;// #C3325F;// update 2019
 @pinkLight:             #f5c1bc;// added 2019
+@pinkExtraLight:        hsl(5, 84%, 94%);// added 2019
 @pinkRedLight:          #ff8a89;// added 2019
 @brown:                 #9d8057;// added 2019
 @brownLight:            #e4e0dd;// added 2019
@@ -134,17 +137,18 @@
 @ui-option-type:        @blueExtraDark;
 @ui-option-type-hover:  @blueMid;
 @ui-option:             @white;
-@ui-option-hover:       @sand-7;
+@ui-option-hover:       @gray-12;
 
 @ui-option-disabled-type:        @gray-6;
 @ui-option-disabled-type-hover:  @gray-5;
-@ui-option-disabled-hover:       @sand-7;
+@ui-option-disabled-hover:       @gray-12;
 
 @ui-disabled-type:        @gray-6;
 @ui-disabled-border:        @gray-6;
 
 //@ui-active:           #346ab3;
-@ui-active:             @pinkLight;
+@ui-active:             @pinkExtraLight;
+@ui-active-border:      @pinkLight;
 @ui-active-blur:        @brownLight;
 @ui-active-type:        @blueExtraDark;
 @ui-active-type-hover:  @blueMid;
@@ -161,19 +165,19 @@
 @ui-light-type-hover:       @blueMid;
 
 @ui-light-active-border:      @pinkLight;
-@ui-light-active-type:        @blueExtraDark;
-@ui-light-active-type-hover:  @blueMid;
+@ui-light-active-type:        @blueMid;
+@ui-light-active-type-hover:  @blueMidLight;
 
 
 @ui-action:             @white;
-@ui-action-hover:       @sand-7;
+@ui-action-hover:       @gray-12;
 @ui-action-type:             @blueExtraDark;
 @ui-action-type-hover:       @blueMid;
 @ui-action-border:             @blueExtraDark;
 @ui-action-border-hover:       @blueMid;
 
 @ui-action-discreet:              @white;
-@ui-action-discreet-hover:        @sand-7;
+@ui-action-discreet-hover:        @gray-12;
 @ui-action-discreet-type:         @blueExtraDark;
 @ui-action-discreet-type-hover:   @blueMid;
 @ui-action-discreet-border:         @gray-7;