diff --git a/src/app/app.component.less b/src/app/app.component.less
index adc68fa..9a2c695 100644
--- a/src/app/app.component.less
+++ b/src/app/app.component.less
@@ -1,3 +1,3 @@
 h1 {
-  color: red;
+  color: var(--text);
 }
diff --git a/src/app/modules/guest/guest.component.less b/src/app/modules/guest/guest.component.less
index 385226c..f326d99 100644
--- a/src/app/modules/guest/guest.component.less
+++ b/src/app/modules/guest/guest.component.less
@@ -1,5 +1,5 @@
 .page {
-  background: #0009;
+  background: var(--overlay);
   position: fixed;
   top: 0;
   bottom: 0;
@@ -7,15 +7,15 @@
   right: 0;
   backdrop-filter: blur(8px);
 
-  --swiper-scrollbar-bg-color: #fff3;
-  --swiper-scrollbar-drag-bg-color: #fff9;
+  --swiper-scrollbar-bg-color: rgba(247, 251, 255, 0.2);
+  --swiper-scrollbar-drag-bg-color: rgba(247, 251, 255, 0.6);
   --swiper-scrollbar-sides-offset: 20px;
   --swiper-scrollbar-top: 100px;
   --swiper-scrollbar-bottom: auto;
 }
 
 .title {
-  color: white;
+  color: var(--text-inverse);
   padding: 70px 20px 0;
   display: flex;
   justify-content: space-between;
@@ -23,7 +23,7 @@
 
   .left {
     font-size: 1.8em;
-    color: #fff;
+    color: var(--text-inverse);
   }
 }
 
@@ -35,7 +35,7 @@
 .legal {
   padding: 0 20px;
   font-size: 0.6em;
-  color: #fff9;
+  color: rgba(247, 251, 255, 0.72);
 }
 
 .view {
@@ -44,7 +44,7 @@
   bottom: 0;
   left: 0;
   right: 0;
-  color: white;
+  color: var(--text-inverse);
 }
 
 app-song-text {
diff --git a/src/app/modules/presentation/remote/remote.component.less b/src/app/modules/presentation/remote/remote.component.less
index 62a73d9..2221556 100644
--- a/src/app/modules/presentation/remote/remote.component.less
+++ b/src/app/modules/presentation/remote/remote.component.less
@@ -1,12 +1,14 @@
 @import "../../../../styles/shadow";
 
 .song {
-  background: #fff;
+  background: var(--surface-strong);
   width: 100%;
   padding: 10px;
   border-radius: 8px;
   margin-bottom: 10px;
   box-sizing: border-box;
+  color: var(--text);
+  border: 1px solid var(--surface-border);
 
   @media screen and (max-width: 860px) {
     width: 100vw;
@@ -14,7 +16,7 @@
     border-radius: 0;
     box-sizing: border-box;
     margin: -11px -20px 10px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--surface-border);
   }
 }
 
@@ -39,31 +41,31 @@
 }
 
 .song-part {
-  background: #fff;
+  background: var(--surface-strong);
   border-radius: 8px;
   overflow: hidden;
-  transition: 300ms all ease-in-out;
+  transition: var(--transition);
   cursor: pointer;
-  outline: 0.5px solid #eee;
+  outline: 1px solid var(--divider);
 
   &:hover {
-    outline: 0.5px solid var(--color-primary-light);
+    outline: 1px solid var(--primary-hover);
   }
 
   &.active {
-    outline: 0.5px solid var(--color-primary);
+    outline: 1px solid var(--primary-color);
 
     .head {
-      background-color: var(--color-primary);
-      color: white;
+      background-color: var(--primary-color);
+      color: var(--text-inverse);
     }
 
   }
 }
 
 .head {
-  transition: 300ms all ease-in-out;
-  background: #eee;
+  transition: var(--transition);
+  background: var(--surface-muted);
   padding: 10px;
   font-weight: bold;
 }
@@ -100,9 +102,9 @@
 a {
   font-size: 30px;
   padding: 10px;
-  transition: all 300ms ease-in-out;
+  transition: var(--transition);
 
   &:hover {
-    color: #4286f4;
+    color: var(--link-color);
   }
 }
diff --git a/src/app/modules/shows/show/show.component.less b/src/app/modules/shows/show/show.component.less
index 442d76d..f1f53e2 100644
--- a/src/app/modules/shows/show/show.component.less
+++ b/src/app/modules/shows/show/show.component.less
@@ -5,7 +5,7 @@
 
 .song-row:not(:last-child) {
   display: block;
-  border-bottom: 1px solid #0002;
+  border-bottom: 1px solid var(--divider);
 }
 
 .song-swipe {
@@ -21,9 +21,10 @@
 }
 
 .cdk-drag-preview {
-  background-color: white;
+  background-color: var(--surface-strong);
   box-sizing: border-box;
   border-radius: 4px;
+  border: 1px solid var(--surface-border);
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
@@ -51,7 +52,7 @@
 }
 
 .next-song {
-  color: #0008;
+  color: var(--text-muted);
   position: fixed;
   bottom: 0;
   right: 10px;
@@ -62,7 +63,7 @@
 }
 
 .time {
-  color: #0008;
+  color: var(--text-muted);
   position: fixed;
   bottom: 0;
   left: 10px;
diff --git a/src/app/modules/shows/show/song/song.component.less b/src/app/modules/shows/show/song/song.component.less
index 70ddbac..3f45323 100644
--- a/src/app/modules/shows/show/song/song.component.less
+++ b/src/app/modules/shows/show/song/song.component.less
@@ -49,8 +49,8 @@
     grid-template-columns: 1em auto;
 
     .key {
-      color: #00b;
-      text-shadow: 0 0 1px #00b;
+      color: var(--primary-active);
+      text-shadow: 0 0 1px var(--primary-hover);
     }
   }
 }
diff --git a/src/app/modules/user/info/info.component.less b/src/app/modules/user/info/info.component.less
index 3c7372a..dc4911d 100644
--- a/src/app/modules/user/info/info.component.less
+++ b/src/app/modules/user/info/info.component.less
@@ -1,5 +1,5 @@
 .warn {
-  color: #621700;
+  color: var(--danger);
 }
 
 p {
diff --git a/src/app/modules/user/login/login.component.less b/src/app/modules/user/login/login.component.less
index 206e3c4..685403c 100644
--- a/src/app/modules/user/login/login.component.less
+++ b/src/app/modules/user/login/login.component.less
@@ -4,7 +4,7 @@
 
 p.error {
   margin: 8px 10px;
-  color: darkred;
+  color: var(--danger);
 }
 
 .login {
@@ -12,9 +12,11 @@ p.error {
   padding: 20px;
   width: 400px;
   margin: 100px 0;
-  background: #fffa;
+  background: var(--surface);
+  border: 1px solid var(--surface-border);
   border-radius: 8px;
   font-size: 18px;
+  color: var(--text);
   position: relative;
   @media screen and (max-width: 860px) {
     margin: 20px;
@@ -33,11 +35,11 @@ button {
 
 .btn-password {
   margin-bottom: 20px;
-  color: #888;
+  color: var(--text-soft);
 }
 
 .btn-user {
-  color: #888;
+  color: var(--text-soft);
 }
 
 .frame {
diff --git a/src/app/modules/user/password/password.component.less b/src/app/modules/user/password/password.component.less
index 54bc57f..6fcd30e 100644
--- a/src/app/modules/user/password/password.component.less
+++ b/src/app/modules/user/password/password.component.less
@@ -4,5 +4,5 @@
 
 p.error {
   margin: 8px 10px;
-  color: darkred;
+  color: var(--danger);
 }
diff --git a/src/app/widget-modules/components/list-header/list-header.component.less b/src/app/widget-modules/components/list-header/list-header.component.less
index 4f5fa99..0a35883 100644
--- a/src/app/widget-modules/components/list-header/list-header.component.less
+++ b/src/app/widget-modules/components/list-header/list-header.component.less
@@ -10,11 +10,11 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  color: #A6C4F5;
+  color: var(--primary-hover);
 
 }
 
 .filter-active {
-  color: #a21;
+  color: var(--danger);
   cursor: not-allowed;
 }
diff --git a/src/app/widget-modules/components/song-text/song-text.component.less b/src/app/widget-modules/components/song-text/song-text.component.less
index 993a656..b8aaaae 100644
--- a/src/app/widget-modules/components/song-text/song-text.component.less
+++ b/src/app/widget-modules/components/song-text/song-text.component.less
@@ -54,8 +54,8 @@
 }
 
 .chord {
-  color: #00b;
-  text-shadow: 0 0 1px #00b;
+  color: var(--primary-active);
+  text-shadow: 0 0 1px var(--primary-hover);
 }
 
 .offset {
@@ -68,14 +68,14 @@
 }
 
 .error {
-  color: red;
+  color: var(--danger);
   font-size: 1.2em;
   font-weight: bold;
 }
 
 .comment {
-  color: #00b;
-  border-left: 2px solid #00b;
+  color: var(--primary-active);
+  border-left: 2px solid var(--primary-hover);
   padding-left: 6px;
   font-style: italic;
 }
diff --git a/src/styles/styles.less b/src/styles/styles.less
index 274e35d..3d1d8ce 100644
--- a/src/styles/styles.less
+++ b/src/styles/styles.less
@@ -7,6 +7,8 @@
   --surface-strong: rgba(255, 255, 255, 0.96);
   --surface-dark: rgba(30, 36, 52, 0.72);
   --surface-border: rgba(41, 46, 73, 0.16);
+  --surface-subtle: rgba(255, 255, 255, 0.38);
+  --surface-muted: rgba(41, 46, 73, 0.06);
 
   --text: #1f2433;
   --text-muted: #5f6b73;
@@ -26,6 +28,11 @@
 
   --navigation-background: rgba(30, 36, 52, 0.72);
   --hover-background: rgba(111, 143, 149, 0.16);
+  --overlay: rgba(18, 24, 37, 0.62);
+  --overlay-strong: rgba(18, 24, 37, 0.88);
+  --divider: rgba(31, 36, 51, 0.12);
+  --link-color: var(--primary-active);
+  --focus-ring: 0 0 0 2px rgba(111, 143, 149, 0.28);
   --transition: all 300ms ease-in-out;
 }