diff --git a/apps/app/styles/globals.css b/apps/app/styles/globals.css
index 65cc9aef4..d255c796f 100644
--- a/apps/app/styles/globals.css
+++ b/apps/app/styles/globals.css
@@ -17,60 +17,142 @@
   }
 
   :root {
-    --color-bg-base: 255, 255, 255;
-    --color-bg-surface-1: 249, 250, 251;
-    --color-bg-surface-2: 243, 244, 246;
+    --color-primary-10: 236, 241, 255;
+    --color-primary-20: 217, 228, 255;
+    --color-primary-30: 197, 214, 255;
+    --color-primary-40: 178, 200, 255;
+    --color-primary-50: 159, 187, 255;
+    --color-primary-60: 140, 173, 255;
+    --color-primary-70: 121, 159, 255;
+    --color-primary-80: 101, 145, 255;
+    --color-primary-90: 82, 132, 255;
+    --color-primary-100: 63, 118, 255;
+    --color-primary-200: 57, 106, 230;
+    --color-primary-300: 50, 94, 204;
+    --color-primary-400: 44, 83, 179;
+    --color-primary-500: 38, 71, 153;
+    --color-primary-600: 32, 59, 128;
+    --color-primary-700: 25, 47, 102;
+    --color-primary-800: 19, 35, 76;
+    --color-primary-900: 13, 24, 51;
 
-    --color-border: 229, 231, 235;
-    --color-bg-sidebar: 255, 255, 255;
-    --color-accent-50: 236, 241, 255;
-    --color-accent-100: 217, 228, 255;
-    --color-accent-200: 178, 200, 255;
-    --color-accent-300: 140, 173, 255;
-    --color-accent-400: 101, 145, 255;
-    --color-accent-500: 63, 118, 255;
-    --color-accent-600: 57, 106, 230;
-    --color-accent-700: 50, 94, 204;
-    --color-accent-800: 44, 83, 179;
-    --color-accent-900: 38, 71, 153;
+    --color-background-10: 250, 250, 250;
+    --color-background-20: 245, 245, 245;
+    --color-background-30: 241, 241, 241;
+    --color-background-40: 229, 229, 229;
+    --color-background-50: 212, 212, 212;
+    --color-background-60: 185, 185, 185;
+    --color-background-70: 163, 163, 163;
+    --color-background-80: 157, 157, 157;
+    --color-background-90: 129, 129, 129;
+    --color-background-100: 115, 115, 115;
+    --color-background-200: 104, 104, 104;
+    --color-background-300: 82, 82, 82;
+    --color-background-400: 64, 64, 64;
+    --color-background-500: 58, 58, 58;
+    --color-background-600: 46, 46, 46;
+    --color-background-700: 38, 38, 38;
+    --color-background-800: 34, 34, 34;
+    --color-background-900: 23, 23, 23;
 
-    --color-text-base: 3, 7, 18;
-    --color-text-secondary: 55, 65, 81;
+    --color-text-10: 250, 250, 250;
+    --color-text-20: 245, 245, 245;
+    --color-text-30: 241, 241, 241;
+    --color-text-40: 229, 229, 229;
+    --color-text-50: 212, 212, 212;
+    --color-text-60: 185, 185, 185;
+    --color-text-70: 163, 163, 163;
+    --color-text-80: 157, 157, 157;
+    --color-text-90: 129, 129, 129;
+    --color-text-100: 115, 115, 115;
+    --color-text-200: 104, 104, 104;
+    --color-text-300: 82, 82, 82;
+    --color-text-400: 64, 64, 64;
+    --color-text-500: 58, 58, 58;
+    --color-text-600: 46, 46, 46;
+    --color-text-700: 38, 38, 38;
+    --color-text-800: 34, 34, 34;
+    --color-text-900: 23, 23, 23;
+
+    --color-sidebar-background-10: 250, 250, 250;
+    --color-sidebar-background-20: 245, 245, 245;
+    --color-sidebar-background-30: 241, 241, 241;
+    --color-sidebar-background-40: 229, 229, 229;
+    --color-sidebar-background-50: 212, 212, 212;
+    --color-sidebar-background-60: 185, 185, 185;
+    --color-sidebar-background-70: 163, 163, 163;
+    --color-sidebar-background-80: 157, 157, 157;
+    --color-sidebar-background-90: 129, 129, 129;
+    --color-sidebar-background-100: 115, 115, 115;
+    --color-sidebar-background-200: 104, 104, 104;
+    --color-sidebar-background-300: 82, 82, 82;
+    --color-sidebar-background-400: 64, 64, 64;
+    --color-sidebar-background-500: 58, 58, 58;
+    --color-sidebar-background-600: 46, 46, 46;
+    --color-sidebar-background-700: 38, 38, 38;
+    --color-sidebar-background-800: 34, 34, 34;
+    --color-sidebar-background-900: 23, 23, 23;
+
+    --color-sidebar-text-10: 250, 250, 250;
+    --color-sidebar-text-20: 245, 245, 245;
+    --color-sidebar-text-30: 241, 241, 241;
+    --color-sidebar-text-40: 229, 229, 229;
+    --color-sidebar-text-50: 212, 212, 212;
+    --color-sidebar-text-60: 185, 185, 185;
+    --color-sidebar-text-70: 163, 163, 163;
+    --color-sidebar-text-80: 157, 157, 157;
+    --color-sidebar-text-90: 129, 129, 129;
+    --color-sidebar-text-100: 115, 115, 115;
+    --color-sidebar-text-200: 104, 104, 104;
+    --color-sidebar-text-300: 82, 82, 82;
+    --color-sidebar-text-400: 64, 64, 64;
+    --color-sidebar-text-500: 58, 58, 58;
+    --color-sidebar-text-600: 46, 46, 46;
+    --color-sidebar-text-700: 38, 38, 38;
+    --color-sidebar-text-800: 34, 34, 34;
+    --color-sidebar-text-900: 23, 23, 23;
   }
 
   [data-theme="light"] {
-    --color-bg-50: 250, 250, 250;
-    --color-bg-100: 250, 250, 250;
-    --color-bg-200: 250, 250, 250;
-    --color-bg-300: 250, 250, 250;
-    --color-bg-400: 250, 250, 250;
-    --color-bg-500: 250, 250, 250;
-    --color-bg-600: 250, 250, 250;
-    --color-bg-700: 250, 250, 250;
-    --color-bg-800: 250, 250, 250;
-    --color-bg-900: 250, 250, 250;
-
-    --color-border: 229, 231, 235;
-    --color-bg-sidebar: 255, 255, 255;
+    --color-background-10: 250, 250, 250;
+    --color-background-20: 245, 245, 245;
+    --color-background-30: 241, 241, 241;
+    --color-background-40: 229, 229, 229;
+    --color-background-50: 212, 212, 212;
+    --color-background-60: 185, 185, 185;
+    --color-background-70: 163, 163, 163;
+    --color-background-80: 157, 157, 157;
+    --color-background-90: 129, 129, 129;
+    --color-background-100: 255, 255, 255;
+    --color-background-200: 104, 104, 104;
+    --color-background-300: 82, 82, 82;
+    --color-background-400: 64, 64, 64;
+    --color-background-500: 58, 58, 58;
+    --color-background-600: 46, 46, 46;
+    --color-background-700: 38, 38, 38;
+    --color-background-800: 34, 34, 34;
+    --color-background-900: 23, 23, 23;
   }
 
   [data-theme="dark"] {
-    --color-bg-50: 250, 250, 250;
-    --color-bg-100: 245, 245, 245;
-    --color-bg-200: 229, 229, 229;
-    --color-bg-300: 212, 212, 212;
-    --color-bg-400: 163, 163, 163;
-    --color-bg-500: 115, 115, 115;
-    --color-bg-600: 82, 82, 82;
-    --color-bg-700: 64, 64, 64;
-    --color-bg-800: 38, 38, 38;
-    --color-bg-900: 23, 23, 23;
-
-    --color-border: 46, 50, 52;
-    --color-bg-sidebar: 19, 20, 22;
-
-    --color-text-base: 233, 244, 252;
-    --color-text-secondary: 142, 148, 146;
+    --color-background-10: 250, 250, 250;
+    --color-background-20: 245, 245, 245;
+    --color-background-30: 241, 241, 241;
+    --color-background-40: 229, 229, 229;
+    --color-background-50: 212, 212, 212;
+    --color-background-60: 185, 185, 185;
+    --color-background-70: 163, 163, 163;
+    --color-background-80: 157, 157, 157;
+    --color-background-90: 129, 129, 129;
+    --color-background-100: 115, 115, 115;
+    --color-background-200: 104, 104, 104;
+    --color-background-300: 82, 82, 82;
+    --color-background-400: 64, 64, 64;
+    --color-background-500: 58, 58, 58;
+    --color-background-600: 46, 46, 46;
+    --color-background-700: 38, 38, 38;
+    --color-background-800: 34, 34, 34;
+    --color-background-900: 23, 23, 23;
   }
 
   [data-theme="light-contrast"] {
@@ -115,7 +197,7 @@
 }
 
 body {
-  color: rgba(var(--color-text-base));
+  color: rgba(var(--color-text-100));
 }
 
 /* scrollbar style */
diff --git a/apps/app/tailwind.config.js b/apps/app/tailwind.config.js
index 749ba9f12..b4123adad 100644
--- a/apps/app/tailwind.config.js
+++ b/apps/app/tailwind.config.js
@@ -5,7 +5,32 @@ module.exports = {
   content: ["./pages/**/*.tsx", "./components/**/*.tsx", "./layouts/**/*.tsx", "./ui/**/*.tsx"],
   theme: {
     extend: {
+      borderColor: {
+        brand: {
+          base: convertToRGB("--color-background-80"),
+        },
+      },
+      backgroundColor: {
+        brand: {
+          base: convertToRGB("--color-background-100"),
+          "surface-1": convertToRGB("--color-background-90"),
+          "surface-2": convertToRGB("--color-background-80"),
+          sidebar: convertToRGB("--color-sidebar-background-100"),
+          backdrop: "#131313",
+        },
+      },
+      textColor: {
+        brand: {
+          base: convertToRGB("--color-text-100"),
+          secondary: convertToRGB("--color-text-200"),
+        },
+      },
       colors: {
+        brand: {
+          base: convertToRGB("--color-background-100"),
+          accent: convertToRGB("--color-primary-100"),
+          backdrop: "#131313",
+        },
         custom: {
           primary: {
             0: "rgb(255, 255, 255)",