diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index 3d3eb87de..e203323f1 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -94,7 +94,7 @@
             &::after {
                 content: ' ';
                 position: absolute;
-                border: 1px solid #000;     // need variable in colors table
+                border: 1px solid @icon-notification-badge;
                 border-left: 0 none;
                 border-right: 0 none;
                 width: 6px;
@@ -109,7 +109,7 @@
                 width: 10px;
                 height: 7px;
                 bottom: 2px;
-                background-color: #ffd112;      // need variable in colors table
+                background-color: @background-notification-badge;
                 border-radius: 2px;
                 right: 0;
             }
diff --git a/apps/common/main/resources/less/checkbox.less b/apps/common/main/resources/less/checkbox.less
index f5e9b218a..9d4fc470f 100644
--- a/apps/common/main/resources/less/checkbox.less
+++ b/apps/common/main/resources/less/checkbox.less
@@ -12,7 +12,7 @@
         + label {
             width: 14px;
             height: 14px;
-            background: #fff;
+            background: @background-normal;
             border: 1px solid @border-regular-control;
             border-radius: 2px;
             position: absolute;
diff --git a/apps/common/main/resources/less/combo-border-size.less b/apps/common/main/resources/less/combo-border-size.less
index 51df24ed9..26046d8c8 100644
--- a/apps/common/main/resources/less/combo-border-size.less
+++ b/apps/common/main/resources/less/combo-border-size.less
@@ -23,7 +23,7 @@
     }
 
     img, .image {
-        background: ~"url(@{common-image-const-path}/combo-border-size/BorderSize.png) no-repeat 0 0 #fff";
+        background: ~"url(@{common-image-const-path}/combo-border-size/BorderSize.png) no-repeat 0 0 @background-normal";
 
         @media only screen {
             //@media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),
diff --git a/apps/common/main/resources/less/common.less b/apps/common/main/resources/less/common.less
index 462ec1082..b27dd6a5f 100644
--- a/apps/common/main/resources/less/common.less
+++ b/apps/common/main/resources/less/common.less
@@ -1,6 +1,6 @@
 label {
     &.link {
-        border-bottom: 1px dotted #aaa;
+        border-bottom: 1px dotted @text-secondary;
         cursor: pointer;
 
         &.disabled {
@@ -9,7 +9,7 @@ label {
     }
 
     &.link-solid {
-        border-bottom: 1px solid #aaa;
+        border-bottom: 1px solid @text-secondary;
         cursor: pointer;
 
         &.disabled {
diff --git a/apps/common/main/resources/less/dataview.less b/apps/common/main/resources/less/dataview.less
index 77cfe145b..d016d75ac 100644
--- a/apps/common/main/resources/less/dataview.less
+++ b/apps/common/main/resources/less/dataview.less
@@ -9,7 +9,7 @@
             text-align: center;
             height: 100%;
             width: 100%;
-            color: #b2b2b2;
+            color: @text-tertiary;
             td {
                 padding: 5px;
             }
diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less
index 2cd2fcc6c..d955cb1b0 100644
--- a/apps/common/main/resources/less/header.less
+++ b/apps/common/main/resources/less/header.less
@@ -29,7 +29,7 @@
 .toolbar {
     .extra {
         svg.icon {
-            fill: #fff;
+            fill: @icon-toolbar-header;
         }
 
         .btn-slot {
@@ -57,7 +57,7 @@
     }
 
     label {
-        color: #fff;
+        color: @text-toolbar-header;
     }
 
     .dropdown-menu {
@@ -98,7 +98,7 @@
         min-width: 50px;
         text-align: center;
 
-        color: #fff;
+        color: @text-toolbar-header;
         background-color: transparent;
         border: 0 none;
         cursor: default;
@@ -344,7 +344,7 @@
     background-color: @tabs-bg-color;
     display: flex;
     height: 100%;
-    color:#fff;
+    color: @text-toolbar-header;
     position: relative;
 
     .btn-slot {
@@ -352,7 +352,7 @@
     }
 
     svg.icon {
-        fill: #fff;
+        fill: @icon-toolbar-header;
 
         &.icon-save {
             &.btn-save-coauth, &.btn-synch {
diff --git a/apps/common/main/resources/less/history.less b/apps/common/main/resources/less/history.less
index 8108d7ac2..e144e055c 100644
--- a/apps/common/main/resources/less/history.less
+++ b/apps/common/main/resources/less/history.less
@@ -1,6 +1,6 @@
 #history-box {
     position: relative;
-    border-right: 1px solid #cbcbcb;
+    border-right: 1px solid @border-toolbar;
 }
 
 #history-header {
@@ -65,11 +65,6 @@
         &:hover:not(.selected),
         &.over {
             background-color: @highlight-button-hover;
-
-            .user-version {
-                color: #fff;
-                background-color: #ababab;
-            }
         }
 
         &.selected {
@@ -77,7 +72,7 @@
 
             .user-name,
             .user-date {
-                color: #fff;
+                color: @text-inverse;
             }
 
             .revision-expand {
@@ -108,7 +103,8 @@
             font-size: 10px;
             white-space: nowrap;
             overflow: hidden;
-            background-color: #e6e6e6;
+            color: @text-tertiary;
+            background-color: @background-normal;
             text-align: center;
             padding: 1px 5px;
             border-radius: 2px;
@@ -148,8 +144,8 @@
         }
 
         .revision-restore {
-            color: #fff;
-            border-bottom: 1px dotted #fff;
+            color: @text-normal;
+            border-bottom: 1px dotted @text-normal;
             height: 16px;
             margin-top: 5px;
             white-space: pre-wrap;
diff --git a/apps/common/main/resources/less/input.less b/apps/common/main/resources/less/input.less
index e4766f6ca..c1056f4b9 100644
--- a/apps/common/main/resources/less/input.less
+++ b/apps/common/main/resources/less/input.less
@@ -87,8 +87,8 @@ input[type="password"] {
 }
 
 input[type="text"]::selection, textarea::selection {
-    background: #3494fb;
-    color: white;
+    background: @highlight-text-select;
+    color: @text-inverse;
 }
 
 textarea.form-control:focus {
diff --git a/apps/common/main/resources/less/listview.less b/apps/common/main/resources/less/listview.less
index fd29b5d21..9f053048b 100644
--- a/apps/common/main/resources/less/listview.less
+++ b/apps/common/main/resources/less/listview.less
@@ -1,5 +1,5 @@
 .listview {
-  border: 1px solid @input-border;
+  border: 1px solid @border-regular-control;
   .border-radius(@border-radius-small);
   line-height: 15px;
 
@@ -14,7 +14,7 @@
         text-align: center;
         width: 100%;
         height: 100%;
-        color: #b2b2b2;
+        color: @text-tertiary;
         td {
           padding: 5px;
         }
@@ -32,11 +32,11 @@
     cursor: pointer;
     white-space: pre-wrap;
 
-    background-color: @list-group-bg;
-    border-color: @list-group-border;
+    background-color: @background-normal;
+    border-color: @border-regular-control;
     border-style: solid;
     border-width: 1px 0;
-    border-top-color: #fafafa;
+    border-top-color: transparent;
   }
 
   &:not(.disabled) > .item {
@@ -49,7 +49,7 @@
 
     &.selected {
       background-color: @highlight-button-pressed;
-      color: #fff;
+      color: @text-inverse;
       border-color: @highlight-button-pressed;
       border-style: solid;
       border-width: 1px 0;
diff --git a/apps/common/main/resources/less/multislider-gradient.less b/apps/common/main/resources/less/multislider-gradient.less
index 77ced8657..ab06f5021 100644
--- a/apps/common/main/resources/less/multislider-gradient.less
+++ b/apps/common/main/resources/less/multislider-gradient.less
@@ -12,19 +12,19 @@
             left: 2px;
             width: 9px;
             height: 9px;
-            background-color: #ffffff;
+            background-color: @background-normal;
             -moz-transform: rotate(45deg);
             -ms-transform: rotate(45deg);
             -webkit-transform: rotate(45deg);
             -o-transform: rotate(45deg);
             transform: rotate(45deg);
-            border-top: solid 1px @border-preview-select;
-            border-left: solid 1px @border-preview-select;
+            border-top: solid 1px @border-regular-control;
+            border-left: solid 1px @border-regular-control;
             border-radius: 0 3px;
             box-sizing: content-box;
             .thumb-top-inner {
-                border-top: solid 1px #fff;
-                border-left: solid 1px #fff;
+                border-top: solid 1px @background-normal;
+                border-left: solid 1px @background-normal;
                 height: 100%;
             }
         }
@@ -35,13 +35,13 @@
             left: 1px;
             width: 10px;
             height: 9px;
-            background-color: #ffffff;
-            border: solid 1px @border-preview-select;
+            background-color: @background-normal;
+            border: solid 1px @border-regular-control;
             border-top: none;
             border-radius: 2px;
             box-sizing: content-box;
             .thumb-bottom-inner {
-                border: solid 1px #fff;
+                border: solid 1px @border-regular-control;
                 border-top: none;
                 height: 100%;
             }
@@ -49,11 +49,11 @@
 
         &.active {
             .thumb-top {
-                border-top: solid 1px #000;
-                border-left: solid 1px #000;
+                border-top: solid 1px @border-control-focus;
+                border-left: solid 1px @border-control-focus;
             }
             .thumb-bottom {
-                border: solid 1px #000;
+                border: solid 1px @border-control-focus;
                 border-top: none;
             }
         }
@@ -81,7 +81,7 @@
 
         background-position: 0 0;
         outline: 1px solid rgba(162, 162, 162, 1);
-        border: 1px solid #FFFFFF;
+        border: 1px solid @border-regular-control;
         cursor: copy;
     }
 }
diff --git a/apps/common/main/resources/less/radiobox.less b/apps/common/main/resources/less/radiobox.less
index 487d54086..c9abcc4e5 100644
--- a/apps/common/main/resources/less/radiobox.less
+++ b/apps/common/main/resources/less/radiobox.less
@@ -18,7 +18,7 @@
             width: 14px;
             height: 14px;
 
-            background: #fff;
+            background: @background-normal;
             border: 1px solid @border-regular-control;
             border-radius: 50%;
         }
diff --git a/apps/common/main/resources/less/switcher.less b/apps/common/main/resources/less/switcher.less
index cbfcd3091..0fbe00a0b 100644
--- a/apps/common/main/resources/less/switcher.less
+++ b/apps/common/main/resources/less/switcher.less
@@ -27,7 +27,7 @@
         right: auto;
         top: 0;
         height: 100%;
-        background-color: #ffffff;
+        background-color: @background-normal;
         border: 1px solid @highlight-button-pressed;
         border-radius: 3px;
     }
diff --git a/apps/common/main/resources/less/symboltable.less b/apps/common/main/resources/less/symboltable.less
index 48afaa22c..37f0294d0 100644
--- a/apps/common/main/resources/less/symboltable.less
+++ b/apps/common/main/resources/less/symboltable.less
@@ -9,7 +9,7 @@
     height: 33px;
     border-right: 1px solid @border-regular-control;
     border-bottom: 1px solid @border-regular-control;
-    background: #ffffff;
+    background: @background-normal;
     align-content: center;
     vertical-align: middle;
     text-align: center;
diff --git a/apps/common/main/resources/less/synchronize-tip.less b/apps/common/main/resources/less/synchronize-tip.less
index 205c3595e..f6fe3829b 100644
--- a/apps/common/main/resources/less/synchronize-tip.less
+++ b/apps/common/main/resources/less/synchronize-tip.less
@@ -99,7 +99,7 @@
 .asc-synchronizetip {
     padding: 15px 8px 15px 15px;
     border-radius: 5px;
-    background-color: #fcfed7;
+    background-color: @background-notification-popover;
     overflow: visible;
 
     .right & {
@@ -123,7 +123,7 @@
     position: absolute;
     top: 5px;
     left: 8px;
-    background-color: #fcfed7;
+    background-color: @background-notification-popover;
     width: 15px;
     height: 15px;
 
@@ -141,8 +141,8 @@
 }
 
 .show-link label {
-    border-bottom: 1px dotted #445799;
-    color: #445799;
+    border-bottom: 1px dotted @text-link;
+    color: @text-link;
     cursor: pointer;
 }
 
diff --git a/apps/common/main/resources/less/theme-colorpalette.less b/apps/common/main/resources/less/theme-colorpalette.less
index c712f0594..23783c1ee 100644
--- a/apps/common/main/resources/less/theme-colorpalette.less
+++ b/apps/common/main/resources/less/theme-colorpalette.less
@@ -16,7 +16,7 @@
 
     a {
         padding: 0;
-        border: 1px solid #fff;
+        border: 1px solid @background-normal;
         float: left;
         text-decoration: none;
         -moz-outline: 0 none;
@@ -24,25 +24,25 @@
         cursor: pointer;
 
         em span {
-            border: 1px solid rgba(0, 0, 0, 0.2);
+            border: 1px solid @border-color-shading;
         }
 
         &:hover, &.selected {
-            border-color: #000;
+            border-color: @icon-normal;
             em span {
-                border-color: #fff;
+                border-color: @background-normal;
             }
         }
     }
 
     .dynamic-empty-color em span {
-        border:solid 1px #C0C0C0;
-        background:#ffffff
+        border:solid 1px @border-color-shading;
+        background: @background-normal;
     }
 
     .color-transparent {
         em span {
-            border:solid 1px #C0C0C0;
+            border:solid 1px @border-color-shading;
         }
     }
 }
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index 1c7e3435e..00201680c 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -89,12 +89,12 @@
                 cursor: default;
                 font-size: 12px;
                 text-align: center;
-                color: #fff;
+                color: @text-toolbar-header;
             }
 
             &.active {
                 > a {
-                    color: #444;
+                    color: @text-normal;
                 }
             }
         }
@@ -387,7 +387,7 @@
             }
 
             svg.icon {
-                fill: @text-normal;
+                fill: @icon-toolbar-header;
             }
 
             .caption {
@@ -403,11 +403,11 @@
                     background-color: @highlight-button-pressed;
 
                     svg.icon {
-                        fill: #fff;
+                        fill: @icon-toolbar-header;
                     }
 
                     .caption {
-                        color: #fff;
+                        color: @text-inverse;
                     }
                 }
             }
@@ -453,22 +453,22 @@
 .btn-toolbar {
     &:active {
         svg.icon {
-            fill: #fff;
+            fill: @icon-toolbar-header;
         }
     }
 
     svg.icon {
         background-image: none;
 
-        fill: @text-normal;
+        fill: @icon-normal;
     }
 
     &.borders--small {
         border-radius: 2px;
-        background-color: #fff;
+        background-color: @background-normal;
 
         &:not(:active) {
-            box-shadow: inset 0 0 0 1px #cbcbcb;
+            box-shadow: inset 0 0 0 1px @border-regular-control;
         }
 
         &, .icon {
@@ -494,7 +494,7 @@
     svg.icon {
         display: inline-block;
         vertical-align: middle;
-        fill: #444444;
+        fill: @icon-normal;
     }
 
     width: 20px;
@@ -524,7 +524,7 @@
     svg.icon {
         display: inline-block;
         vertical-align: middle;
-        fill: #444444;
+        fill: @icon-normal;
     }
 }
 
diff --git a/apps/common/main/resources/less/tooltip.less b/apps/common/main/resources/less/tooltip.less
index 5201a320d..2277d9783 100644
--- a/apps/common/main/resources/less/tooltip.less
+++ b/apps/common/main/resources/less/tooltip.less
@@ -15,7 +15,7 @@
     &.top-right .tooltip-arrow {
         bottom: 1px;
         border-width: 5px 5px 0;
-        border-top-color: @body-bg;
+        border-top-color: @background-normal;
     }
 
     &.top-left .tooltip-arrow,
@@ -32,13 +32,13 @@
     &.bottom-right .tooltip-arrow {
         top: 1px;
         border-width: 0 5px 5px;
-        border-bottom-color: @body-bg;
+        border-bottom-color: @background-normal;
     }
 }
 
 .tooltip-inner {
     font-size: 11px;
-    background-color: @body-bg;
+    background-color: @background-normal;
     color: @text-normal;
     padding: 5px 12px;
     border: 1px solid rgba(0, 0, 0, 0.15);
diff --git a/apps/common/main/resources/less/treeview.less b/apps/common/main/resources/less/treeview.less
index 9193ab972..f27e0539d 100644
--- a/apps/common/main/resources/less/treeview.less
+++ b/apps/common/main/resources/less/treeview.less
@@ -12,7 +12,7 @@
       text-align: center;
       height: 100%;
       width: 100%;
-      color: #b2b2b2;
+      color: @text-tertiary;
       td {
         padding: 5px;
       }
@@ -35,7 +35,7 @@
     }
 
     &.selected {
-      background-color: #cbcdcf;
+      background-color: @highlight-button-pressed;
     }
 
     &.selected .empty {
@@ -58,7 +58,7 @@
     text-overflow: ellipsis;
 
     &.empty {
-      color: #999;
+      color: @text-tertiary;
       font-style: italic;
     }
   }
diff --git a/apps/common/main/resources/less/window.less b/apps/common/main/resources/less/window.less
index 2c0a6f05b..a0ceedbad 100644
--- a/apps/common/main/resources/less/window.less
+++ b/apps/common/main/resources/less/window.less
@@ -50,7 +50,6 @@
         text-align: center;
         font-size: 12px;
         font-weight: 700;
-        text-shadow: 1px 1px #f8f8f8;
         vertical-align: bottom;
         line-height: 26px;
 
@@ -93,7 +92,7 @@
                 line-height: 14px;
                 font-size: 14px;
                 font-weight: bold;
-                color: #444;
+                color: @text-normal;
                 opacity: 0.7;
 
                 &:hover {