diff --git a/src/Umbraco.Web.UI.Client/src/less/gridview.less b/src/Umbraco.Web.UI.Client/src/less/gridview.less
index 4696ff914d..a0f99b3cc2 100644
--- a/src/Umbraco.Web.UI.Client/src/less/gridview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/gridview.less
@@ -13,8 +13,8 @@
 
  .usky-grid .ui-sortable-helper  {
      position:absolute !important;
-     border: dashed 1px #000 !important;
-     background: #ccc;
+     border: dashed 1px @black !important;
+     background: @gray-7;
      opacity: 0.4;
      height: 80px !important;
      width: 160px !important;
@@ -29,7 +29,7 @@
  .usky-grid .ui-sortable-helper *{
      border: none !important;
      background: none !important;
-     color: #999 !important;
+     color: @gray-5 !important;
      padding: 0 !important;
      margin: 0 !important;
  }
@@ -39,19 +39,19 @@
  }
 
  .usky-grid .ui-sortable-placeholder{
-     border: 2px dashed @grayLight;
+     border: 2px dashed @gray-8;
      padding: 20px;
      font-family: icomoon;
      text-align: center;
      font-size: 85px;
      line-height: 65px;
-     color: @gray;
+     color: @gray-3;
      vertical-align: middle;
      background-color:@gray-10;
  }
 
  .usky-grid .ui-sortable-placeholder:hover{
-     border-color: @gray;
+     border-color: @gray-3;
  }
 
  .usky-grid .ui-sortable-placeholder:before{
@@ -86,7 +86,7 @@
  }
 
  .usky-grid .tb:hover .td{
-     border-right:1px dashed rgba(182, 182, 182, 0.3);
+     border-right:1px dashed @gray-9;
  }
  .usky-grid  .td.last {
      border-right:1px dashed rgba(182, 182, 182, 0.0) !important;
@@ -249,11 +249,11 @@
 }
 
 .usky-grid .infohighlight, .usky-grid  .td.last.infohighlight{
-     border: 1px dashed @blue !important;
+     border: 1px dashed @turquoise !important;
 }
 
 .usky-grid .warnhighlight > ins.item-label{border-color: @red; color: @red;}
-.usky-grid .infohighlight > ins.item-label{border-color: @blue; color: @blue;}
+.usky-grid .infohighlight > ins.item-label{border-color: @turquoise; color: @turquoise;}
 
 
 .usky-grid ins.item-label {
@@ -264,10 +264,10 @@
     padding: 0px 7px;
     display:none;
     font-size:0.8em;
-    background-color: white;
-    color: @grayLight;
-    border: 1px dashed @grayLight;
-    border-bottom: 1px solid white !important;
+    background-color: @white;
+    color: @gray-8;
+    border: 1px dashed @gray-8;
+    border-bottom: 1px solid @white !important;
     height: 20px;
     overflow: hidden;
 }
@@ -278,7 +278,7 @@
 }
 
 .usky-grid .usky-control-inner.selectedControl , .usky-grid .usky-row-inner.selectedRow{
-    border: 1px dashed @grayLight;
+    border: 1px dashed @gray-8;
 
     > ins.item-label {
         display: block;
@@ -301,12 +301,12 @@
 .usky-grid  .usky-control-placeholder .placeholder{
     font-size: 14px; opacity: 0.7; text-align: left;
     padding: 5px;
-    border:1px solid rgba(182, 182, 182, 0.3);
+    border:1px solid @gray-8;
     height: 20px;
 }
 
 .usky-grid  .usky-control-placeholder:hover .placeholder{
-    border:1px solid rgba(182, 182, 182, 0.8);
+    border:1px solid @gray-7;
 }
 
 
@@ -321,7 +321,7 @@
     padding: 20px;
     padding-bottom: 30px;
     position: relative;
-    background-color: white;
+    background-color: @white;
     border: 4px dashed @gray-10;
     text-align: center;
     text-align: -moz-center;
@@ -342,10 +342,10 @@
      display: block;
      overflow: hidden;
      border: none;
-     background: #fff;
+     background: @white;
      outline: none;
      resize: none;
-     color: @gray;
+     color: @gray-3;
  }
 
 .usky-grid .usky-cell-rte textarea{
@@ -356,7 +356,7 @@
      display: block;
      overflow: hidden;
      border: none;
-     background: #fff;
+     background: @white;
      outline: none;
      width: 98%;
      resize: none;
@@ -378,8 +378,8 @@
      display: inline-block;
      cursor: pointer;
      border-radius: 200px;
-     background: rgba(255,255,255, 1);
-     border:1px solid rgb(182, 182, 182);
+     background: @white;
+     border:1px solid @gray-7;
      margin: 2px;
  }
 
@@ -395,15 +395,15 @@
   }
 
  .usky-grid .iconBox:hover, .usky-grid .iconBox:hover *{
-          background: @blue !important;
-          color: white !important;
-          border-color: @blue !important;
+          background: @turquoise !important;
+          color: @white !important;
+          border-color: @turquoise !important;
           text-decoration:none;
  }
 
  .usky-grid  .iconBox a:hover {
      text-decoration:none;
-     color: white !important;
+     color: @white !important;
  }
 
  .usky-grid  .iconBox.selected {
@@ -444,7 +444,7 @@
 
  .usky-grid  .help-text {
      background: @gray-10;
-     color: @gray;
+     color: @gray-3;
      font-size: 14px;
      padding: 10px 20px 10px 20px;
      border-radius: 15px;
@@ -474,8 +474,8 @@
  }
 
  .usky-grid .mce-toolbar {
-     border: 1px solid rgba(207, 207, 207, 0.7);
-     background-color: rgba(250, 250, 250, 1);
+     border: 1px solid @gray-8;
+     background-color: @gray-10;
      z-index: 100;
      display: inline-block;
      float: left;
@@ -496,7 +496,7 @@
      background: transparent !important;
  }
  .usky-grid  .mce-floatpanel {
-     background-color: #F7F7F7 !important;
+     background-color: @gray-10 !important;
  }
 
 .usky-cell-rte{
@@ -530,7 +530,7 @@
      font-size: 10px;
      padding: 0;
      margin: 5px 5px 0 0;
-     color: #808080;
+     color: @gray-5;
  }
 
 
@@ -589,7 +589,7 @@
  }
 
  .usky-grid .uSky-templates-template a.tb:hover {
-     border:5px solid @blue;
+     border:5px solid @turquoise;
  }
 
  .usky-grid .uSky-templates-template .tb {
@@ -597,7 +597,7 @@
      height:150px;
      padding:10px;
      background-color: @gray-10;
-     border: 5px solid @grayLight;
+     border: 5px solid @gray-8;
      cursor:pointer;
      position: relative;
  }
@@ -609,16 +609,16 @@
 
  .usky-grid .uSky-templates-template .tb .uSky-templates-column {
      height:100%;
-     border: 1px dashed @grayLight;
+     border: 1px dashed @gray-8;
      border-right: none;
  }
 
  .usky-grid .uSky-templates-template .tb .uSky-templates-column.last {
-     border-right: 1px dashed @grayLight !important;
+     border-right: 1px dashed @gray-8 !important;
  }
 
  .usky-grid a.uSky-templates-column:hover, .usky-grid a.uSky-templates-column.selected{
-    background-color: @blue;
+    background-color: @turquoise;
  }
 
 
@@ -656,7 +656,7 @@
 		box-sizing: border-box;
 		width: 125px;
 		margin: 35px 40px 15px 0;
-		border: 2px solid @grayLight; /* @grayLight */
+		border: 2px solid @gray-8; /* @grayLight */
 		transition: border 200ms linear;
 
         &.prevalues-rows {
@@ -672,7 +672,7 @@
         }
 
 		&:hover {
-			border-color: @blue;
+			border-color: @turquoise;
 			cursor: pointer;
 		}
 
@@ -692,7 +692,7 @@
 
 		.preview-col {
 			height: 180px;
-			border: dashed 1px @grayLight;
+			border: dashed 1px @gray-8;
 		}
 
 		.preview-cell {
@@ -731,7 +731,7 @@
 			    display: block;
 			    width: 100%;
 			    height: 100%;
-			    background-color: @grayLight; /* @grayLight */
+			    background-color: @gray-8; /* @grayLight */
 			    margin: 0 1px 1px 0;
 		    }
 	    }
@@ -752,7 +752,7 @@
         top: 0;
         box-sizing: border-box;
         left: 0;
-        border: 3px solid white;
+        border: 3px solid @white;
 	}
 }
 
@@ -764,10 +764,10 @@
      width: 360px;
      height: 380px;
      overflow: auto;
-     border: 1px solid #ccc;
+     border: 1px solid @gray-8;
      margin-top: -270px;
      margin-left: -150px;
-     background: white;
+     background: @white;
      padding: 7px;
      top: 0;
      left: 50%;
@@ -779,8 +779,8 @@
 
 
  .usky-grid .cell-tools-menu h5{
-     border-bottom: 1px solid #d9d9d9;
-     color: #999;
+     border-bottom: 1px solid @gray-8;
+     color: @gray-6;
      padding: 10px;
      margin-top: 0;
  }
@@ -802,19 +802,19 @@
  }
 
  .usky-grid .elements li:hover, .usky-grid .elements li:hover *{
-     background: #2e8aea;
-     color: white;
+     background: @turquoise;
+     color: @white;
  }
 
  .usky-grid .elements a{
-     color: #222;
+     color: @gray-2;
      text-decoration: none;
  }
 
  .usky-grid .elements i{
      font-size: 30px;
      line-height: 50px;
-     color: #999;
+     color: @gray-5;
      display: block
  }
 
@@ -845,7 +845,7 @@
 }
 
 .usky-grid-configuration .uSky-templates .uSky-templates-template span{
-    background: @grayLight;
+    background: @gray-8;
     display: inline-block;
 }
 
@@ -857,8 +857,8 @@
     display: block;
     float: left;
     margin-left: -1px;
-    border: 1px white solid !important;
-    background: @grayLight;
+    border: 1px @white solid !important;
+    background: @gray-8;
 }
 
 .usky-grid-configuration .uSky-templates-column.last{
@@ -869,9 +869,9 @@
     text-align: center;
     font-size: 20px;
     line-height: 70px;
-    color: #ccc;
+    color: @gray-8;
     text-decoration: none;
-    background: white;
+    background: @white;
 }
 
 .usky-grid-configuration .mainTdpt{
diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less
index c7fe0c1576..8a439b215e 100644
--- a/src/Umbraco.Web.UI.Client/src/less/variables.less
+++ b/src/Umbraco.Web.UI.Client/src/less/variables.less
@@ -149,9 +149,9 @@
 // Tables
 // -------------------------
 @tableBackground:                   transparent; // overall background-color
-@tableBackgroundAccent:             #f9f9f9; // for striping
-@tableBackgroundHover:              #f5f5f5; // for hover
-@tableBorder:                       #dbdbdb; // table and cell border
+@tableBackgroundAccent:             @gray-10; // for striping
+@tableBackgroundHover:              @gray-9; // for hover
+@tableBorder:                       @gray-8; // table and cell border
 
 // Buttons
 // -------------------------
@@ -171,8 +171,8 @@
 @btnWarningBackground:              @orange;
 @btnWarningBackgroundHighlight:     @orange;
 
-@btnDangerBackground:               @red;
-@btnDangerBackgroundHighlight:      @red;
+@btnDangerBackground:               @red-l1;
+@btnDangerBackgroundHighlight:      @red-l1;
 
 @btnInverseBackground:              @gray-2;
 @btnInverseBackgroundHighlight:     @gray-2;
@@ -200,11 +200,11 @@
 // Dropdowns
 // -------------------------
 @dropdownBackground:            @white;
-@dropdownBorder:                rgba(0,0,0,.2);
-@dropdownDividerTop:            #e5e5e5;
+@dropdownBorder:                @gray-8;
+@dropdownDividerTop:            @gray-8;
 @dropdownDividerBottom:         @white;
 
-@dropdownLinkColor:             @grayDark;
+@dropdownLinkColor:             @gray-2;
 @dropdownLinkColorHover:        @white;
 @dropdownLinkColorActive:       @white;
 
@@ -237,7 +237,7 @@
 
 // Input placeholder text color
 // -------------------------
-@placeholderText:         @grayLight;
+@placeholderText:         @gray-8;
 
 
 // Hr border color
@@ -252,7 +252,7 @@
 
 // Wells
 // -------------------------
-@wellBackground:                  #f5f5f5;
+@wellBackground:                  @gray-10;
 
 
 // Navbar
@@ -261,26 +261,26 @@
 @navbarCollapseDesktopWidth:      @navbarCollapseWidth + 1;
 
 @navbarHeight:                    40px;
-@navbarBackgroundHighlight:       #ffffff;
+@navbarBackgroundHighlight:       @white;
 @navbarBackground:                darken(@navbarBackgroundHighlight, 5%);
 @navbarBorder:                    darken(@navbarBackground, 12%);
 
-@navbarText:                      #777;
-@navbarLinkColor:                 #777;
-@navbarLinkColorHover:            @grayDark;
-@navbarLinkColorActive:           @gray;
+@navbarText:                      @gray-4;
+@navbarLinkColor:                 @gray-4;
+@navbarLinkColorHover:            @gray-2;
+@navbarLinkColorActive:           @gray-3;
 @navbarLinkBackgroundHover:       transparent;
 @navbarLinkBackgroundActive:      darken(@navbarBackground, 5%);
 
 @navbarBrandColor:                @navbarLinkColor;
 
 // Inverted navbar
-@navbarInverseBackground:                #111111;
-@navbarInverseBackgroundHighlight:       #222222;
-@navbarInverseBorder:                    #252525;
+@navbarInverseBackground:                @gray-1;
+@navbarInverseBackgroundHighlight:       @gray-2;
+@navbarInverseBorder:                    @gray-2;
 
-@navbarInverseText:                      @grayLight;
-@navbarInverseLinkColor:                 @grayLight;
+@navbarInverseText:                      @gray-8;
+@navbarInverseLinkColor:                 @gray-8;
 @navbarInverseLinkColorHover:            @white;
 @navbarInverseLinkColorActive:           @navbarInverseLinkColorHover;
 @navbarInverseLinkBackgroundHover:       transparent;
@@ -289,16 +289,16 @@
 @navbarInverseSearchBackground:          lighten(@navbarInverseBackground, 25%);
 @navbarInverseSearchBackgroundFocus:     @white;
 @navbarInverseSearchBorder:              @navbarInverseBackground;
-@navbarInverseSearchPlaceholderColor:    #ccc;
+@navbarInverseSearchPlaceholderColor:    @gray-7;
 
 @navbarInverseBrandColor:                @navbarInverseLinkColor;
 
 
 // Pagination
 // -------------------------
-@paginationBackground:                #fff;
-@paginationBorder:                    #ddd;
-@paginationActiveBackground:          #f5f5f5;
+@paginationBackground:                @white;
+@paginationBorder:                    @gray-8;
+@paginationActiveBackground:          @gray-10;
 
 
 // Hero unit
@@ -315,15 +315,15 @@
 @warningBorder:           transparent;
 
 @errorText:               @white;
-@errorBackground:         @red;
+@errorBackground:         @red-d1;
 @errorBorder:             transparent;
 
 @successText:             @white;
-@successBackground:       @green;
+@successBackground:       @green-d1;
 @successBorder:           transparent;
 
 @infoText:                @white;
-@infoBackground:          @blue;
+@infoBackground:          @turquoise-d1;
 @infoBorder:              transparent;
 
 // SD: Had to duplicate the above but prefix with 'form' inversed colors
@@ -351,19 +351,19 @@
 
 // Tooltips and popovers
 // -------------------------
-@tooltipColor:            #fff;
-@tooltipBackground:       #000;
+@tooltipColor:            @white;
+@tooltipBackground:       @black;
 @tooltipArrowWidth:       5px;
 @tooltipArrowColor:       @tooltipBackground;
 
-@popoverBackground:       #fff;
+@popoverBackground:       @white;
 @popoverArrowWidth:       10px;
-@popoverArrowColor:       #fff;
+@popoverArrowColor:       @white;
 @popoverTitleBackground:  darken(@popoverBackground, 3%);
 
 // Special enhancement for popovers
 @popoverArrowOuterWidth:  @popoverArrowWidth + 1;
-@popoverArrowOuterColor:  rgba(0,0,0,.25);
+@popoverArrowOuterColor:  @gray-7;
 
 
 
@@ -404,5 +404,5 @@
 
 // SORTABLE
 // --------------------------------------------------
-@sortableHelperBg: rgba(4, 156, 219, 0.5);
-@sortablePlaceholderBg : @blue;
+@sortableHelperBg: @turquoise-l2;
+@sortablePlaceholderBg : @turquoise;