diff --git a/static/main/css/index.css b/static/main/css/index.css
index 92371d2..f3a9598 100644
--- a/static/main/css/index.css
+++ b/static/main/css/index.css
@@ -1,8 +1,8 @@
 :root {
-    --clr-purple: hsl(251, 91%, 63%);
-    --clr-blue: hsl(201, 85%, 55%);
-    --clr-dark-blue: hsl(201, 100%, 35%);
-    --clr-black: hsl(248, 16%, 10%);
+    --color-mail: #7e63f8;
+    --color-telegram: #2baaee;
+    --color-linkedin: #0074b3;
+    --color-github: #0d1117;
 }
 
 #landing {
@@ -45,7 +45,7 @@ img {
 .social-link > i {
     display: grid;
     place-items: center;
-    color: var(--clr-secondary);
+    color: var(--color-fg-default);
     background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23EEF5FCFF' stroke-width='4' stroke-dasharray='24' stroke-dashoffset='8' stroke-linecap='square'/%3e%3c/svg%3e");
     border-radius: 100px;
     margin: auto 0.5rem 1rem 0.5rem;
@@ -55,33 +55,33 @@ img {
 }
 
 .social-link:hover > i {
-    background-color: var(--clr-secondary);
+    background-color: var(--color-fg-default);
 }
 
 .email:hover > i {
-    color: var(--clr-purple);
-    border: 2px solid var(--clr-purple);
+    color: var(--color-mail);
+    border: 2px solid var(--color-mail);
     background-image: none;
 }
 .telegram:hover > i {
-    color: var(--clr-blue);
-    border: 2px solid var(--clr-blue);
+    color: var(--color-telegram);
+    border: 2px solid var(--color-telegram);
     background-image: none;
 }
 .linkedin:hover > i {
-    color: var(--clr-dark-blue);
-    border: 2px solid var(--clr-dark-blue);
+    color: var(--color-linkedin);
+    border: 2px solid var(--color-linkedin);
     background-image: none;
 }
 .github:hover > i {
-    color: var(--clr-black);
-    border: 2px solid var(--clr-black);
+    color: var(--color-github);
+    border: 2px solid var(--color-github);
     background-image: none;
 }
 
 .social-link .label {
     display: none;
-    color: var(--clr-secondary);
+    color: var(--color-fg-default);
 }
 
 .social-link:hover .label {
diff --git a/static/main/css/layout.css b/static/main/css/layout.css
index 80f244c..2c8837f 100644
--- a/static/main/css/layout.css
+++ b/static/main/css/layout.css
@@ -1,23 +1,72 @@
 :root {
+    --color-scale-black: #010409;
+    --color-scale-white: #ffffff;
+
+    --color-scale-white-transparent-7: #ffffffbc;
+
+    --color-scale-gray-0: #f0f6fc;
+    --color-scale-gray-1: #c9d1d9;
+    --color-scale-gray-2: #b1bac4;
+    --color-scale-gray-3: #8b949e;
+    --color-scale-gray-4: #6e7681;
+    --color-scale-gray-5: #484f58;
+    --color-scale-gray-6: #30363d;
+    --color-scale-gray-7: #21262d;
+    --color-scale-gray-8: #161b22;
+    --color-scale-gray-9: #0d1117;
+
+    --color-scale-gray-0-transparent-10: #f0f6fc1a;
+    --color-scale-gray-8-transparent-50: #161b2280;
+    --color-scale-gray-9-transparent-0: #0d111700;
+
+    --color-scale-purple-0: #eddeff;
+    --color-scale-purple-1: #e2c5ff;
+    --color-scale-purple-2: #d2a8ff;
+    --color-scale-purple-3: #bc8cff;
+    --color-scale-purple-4: #a371f7;
+    --color-scale-purple-5: #8957e5;
+    --color-scale-purple-6: #6e40c9;
+    --color-scale-purple-7: #553098;
+    --color-scale-purple-8: #3c1e70;
+    --color-scale-purple-9: #271052;
+
+    --color-scale-purple-4-transparent-06: #a371f70f;
+
+    --color-canvas-default: var(--color-scale-gray-9);
+    --color-canvas-default-transparent: var(--color-scale-gray-9-transparent-0);
+    --color-canvas-subtle: var(--color-scale-gray-8);
+
+    --color-border-default: var(--color-scale-gray-6);
+
+    --color-header-bg-default: var(--color-scale-gray-8);
+    --color-header-bg-transparent: var(--color-scale-gray-8-transparent-5);
+    --color-header-text: var(--color-scale-white-transparent-7);
+
+    --color-btn-text: var(--color-scale-gray-1);
+    --color-btn-bg: var(--color-scale-gray-7);
+    --color-btn-border: var(--color-scale-gray-0-transparent-1);
+    --color-btn-hover-bg: var(--color-scale-gray-6);
+    --color-btn-hover-border: var(--color-scale-gray-3);
+    --color-btn-active-border: var(--color-scale-gray-5);
+
+    --color-fg-default: var(--color-scale-gray-1);
+    --color-fg-muted: var(--color-scale-gray-3);
+    --color-fg-subtle: var(--color-scale-gray-4);
+    --color-fg-on-emphasis: var(--color-scale-white);
+    --color-text-hover: var(--color-fg-muted);
+
+    --color-accent-fg: var(--color-scale-purple-4);
+
+    --color-text-link: var(--color-accent-fg);
+
     font-size: 16px;
-    --clr-primary: hsl(216, 28%, 7%);
-    --clr-primary-100: hsla(215, 21%, 11%, 0.9);
-    --clr-primary-200: hsla(215, 21%, 11%, 0.5);
-    --clr-primary-300: hsl(218, 17%, 12%);
-    --clr-primary-400: hsl(212, 12%, 21%);
-    --clr-primary-500: hsl(216, 12%, 25%);
-
-    --clr-secondary: hsl(210, 67%, 96%);
-    --clr-secondary-hover: hsl(210, 3%, 73%);
-    --clr-secondary-link: hsl(212, 100%, 67%);
-
     font-family: "Roboto", arial, sans-serif;
 }
 
 html,
 body {
-    color: var(--clr-secondary);
-    background-color: var(--clr-primary);
+    color: var(--color-fg-default);
+    background-color: var(--color-canvas-default);
     line-height: 1.5;
     min-height: 100vh;
     min-width: 300px;
@@ -73,22 +122,22 @@ body {
 }
 
 .primary-navigation {
-    background-color: var(--clr-primary-100);
+    background-color: var(--color-header-bg-default);
 }
 
 @supports (backdrop-filter: blur(2rem)) {
     .primary-navigation {
-        background-color: var(--clr-primary-200);
+        background-color: var(--color-header-bg-transparent);
         backdrop-filter: blur(2rem);
     }
 }
 
 .primary-navigation a {
-    color: var(--clr-secondary);
+    color: var(--color-fg-default);
     text-decoration: none;
 }
 .primary-navigation a:hover {
-    color: var(--clr-secondary-hover);
+    color: var(--color-fg-muted);
 }
 
 .primary-navigation a > [aria-hidden="true"] {
@@ -136,16 +185,11 @@ body {
     }
 }
 
-@media (min-width: 35em) and (max-width: 55em) {
-    .primary-navigation a > [aria-hidden="true"] {
-        display: none;
-    }
-}
-
 @media (min-width: 35em) {
     .primary-navigation {
         --gap: clamp(1.5rem, 5vw, 3rem);
         padding-block: 16px;
         padding-inline: clamp(3rem, 8vw, 10rem);
+        background-color: var(--color-header-bg-default);
     }
 }
diff --git a/static/main/css/projects.css b/static/main/css/projects.css
index 321e0aa..f3dfc0b 100644
--- a/static/main/css/projects.css
+++ b/static/main/css/projects.css
@@ -1,9 +1,8 @@
 :root {
-    --clr-card: hsl(218, 17%, 12%);
-    --clr-card-060: hsla(0, 0%, 100%, 0.06);
-    --clr-card-100: hsla(0, 0%, 100%, 0.1);
-    --clr-card-400: hsla(0, 0%, 100%, 0.4);
-    --clr-card-500: hsla(0, 0%, 100%, 0.5);
+    --color-card-default: var(--color-scale-gray-8);
+    --color-card-border: var(--color-scale-gray-0-transparent-10);
+    --color-card-bg-hover: var(--color-scale-purple-4-transparent-06);
+    --color-card-accent: var(--color-accent-fg);
 }
 
 .body {
@@ -25,7 +24,7 @@
 }
 
 .card {
-    background-color: var(--clr-card-100);
+    background-color: var(--color-card-border);
     border-radius: 10px;
     cursor: pointer;
     display: flex;
@@ -55,7 +54,7 @@
 .card::before {
     background: radial-gradient(
         800px circle at var(--mouse-x) var(--mouse-y),
-        var(--clr-card-060),
+        var(--color-card-bg-hover),
         transparent 40%
     );
     z-index: 3;
@@ -64,14 +63,14 @@
 .card::after {
     background: radial-gradient(
         600px circle at var(--mouse-x) var(--mouse-y),
-        var(--clr-card-400),
+        var(--color-card-accent),
         transparent 40%
     );
     z-index: 1;
 }
 
 .card > .card-content {
-    background-color: var(--clr-card);
+    background-color: var(--color-card-default);
     border-radius: inherit;
     display: flex;
     flex-direction: column;
@@ -89,7 +88,7 @@ h2,
 h3,
 h4,
 span {
-    color: rgb(240, 240, 240);
+    color: var(--color-fg-default);
     font-weight: 400;
     margin: 0px;
 }
@@ -113,12 +112,6 @@ span {
     line-height: 20px;
 }
 
-.card-info-title > h4 {
-    color: var(--clr-card-500);
-    font-size: 0.85em;
-    margin-top: 8px;
-}
-
 /* -- ↓ ↓ ↓ some responsiveness ↓ ↓ ↓ -- */
 
 @media (max-width: 1000px) {