diff --git a/package.json b/package.json
index e192064b6..3896702d5 100644
--- a/package.json
+++ b/package.json
@@ -21,9 +21,9 @@
     "dependencies": {
         "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ac51fcb",
         "@appwrite.io/pink-icons": "0.25.0",
-        "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@dd94b87a ",
+        "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2d87f553 ",
         "@appwrite.io/pink-legacy": "^1.0.2",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@92f19f5",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@2d87f553",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a985a424b..4a5da7645 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,14 +15,14 @@ importers:
         specifier: 0.25.0
         version: 0.25.0
       '@appwrite.io/pink-icons-svelte':
-        specifier: 'https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@dd94b87a '
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@dd94b87a(svelte@4.2.19)
+        specifier: 'https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2d87f553 '
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2d87f553(svelte@4.2.19)
       '@appwrite.io/pink-legacy':
         specifier: ^1.0.2
         version: 1.0.2
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@92f19f5
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@92f19f5(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@2d87f553
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@2d87f553(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -215,14 +215,14 @@ packages:
     resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ac51fcb}
     version: 1.2.1
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@92f19f58b2d9458cb6eefc15e7085ae921e96286':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@92f19f58b2d9458cb6eefc15e7085ae921e96286}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2d87f553':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2d87f553}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@dd94b87a':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@dd94b87a}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2d87f553a5c2deececd363f3ed4b15ec69894b6a':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2d87f553a5c2deececd363f3ed4b15ec69894b6a}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
@@ -236,8 +236,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.2':
     resolution: {integrity: sha512-1AYNcfbV+x0Tyj56CoieSq5g7+u+7F5/LDVN/z+Hx1kp9gj7xc1eT39Dy832xxfihImF6ksjp0FXEMVSBR8cew==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@92f19f5':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@92f19f5}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@2d87f553':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@2d87f553}
     version: 1.0.0-next.85
     peerDependencies:
       react-dom: ^18.0.0
@@ -4099,11 +4099,11 @@ snapshots:
 
   '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ac51fcb': {}
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@92f19f58b2d9458cb6eefc15e7085ae921e96286(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2d87f553(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@dd94b87a(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2d87f553a5c2deececd363f3ed4b15ec69894b6a(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
@@ -4116,9 +4116,9 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@92f19f5(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@2d87f553(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@92f19f58b2d9458cb6eefc15e7085ae921e96286(svelte@4.2.19)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@2d87f553a5c2deececd363f3ed4b15ec69894b6a(svelte@4.2.19)
       '@floating-ui/dom': 1.6.13
       '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.3(svelte@4.2.19))(svelte@4.2.19)
       '@melt-ui/svelte': 0.86.3(svelte@4.2.19)
diff --git a/src/lib/charts/base.json b/src/lib/charts/base.json
index ff3d8fbcc..3d0545ded 100644
--- a/src/lib/charts/base.json
+++ b/src/lib/charts/base.json
@@ -1,20 +1,20 @@
 {
-    "backgroundColor": "var(--color-bgcolor-neutral-primary)",
+    "backgroundColor": "var(--bgcolor-neutral-primary)",
     "categoryAxis": {
         "axisLine": {
             "lineStyle": {
-                "color": "var(--color-fgcolor-neutral-tertiary)"
+                "color": "var(--fgcolor-neutral-tertiary)"
             },
             "show": true
         },
         "axisTick": {
             "lineStyle": {
-                "color": "var(--color-fgcolor-neutral-tertiary)"
+                "color": "var(--fgcolor-neutral-tertiary)"
             },
             "show": true
         },
         "axisLabel": {
-            "color": "var(--color-fgcolor-neutral-tertiary)",
+            "color": "var(--fgcolor-neutral-tertiary)",
             "show": true
         },
         "splitLine": {
@@ -26,12 +26,12 @@
     },
     "valueAxis": {
         "axisLabel": {
-            "color": "var(--color-fgcolor-neutral-tertiary)",
+            "color": "var(--fgcolor-neutral-tertiary)",
             "show": true
         },
         "splitLine": {
             "lineStyle": {
-                "color": ["var(--color-border-neutral)"]
+                "color": ["var(--border-neutral)"]
             },
             "show": true
         },
@@ -48,23 +48,23 @@
     "logAxis": {
         "axisLine": {
             "lineStyle": {
-                "color": "var(--color-fgcolor-neutral-tertiary)"
+                "color": "var(--fgcolor-neutral-tertiary)"
             },
             "show": true
         },
         "axisTick": {
             "lineStyle": {
-                "color": "var(--color-fgcolor-neutral-tertiary)"
+                "color": "var(--fgcolor-neutral-tertiary)"
             },
             "show": true
         },
         "axisLabel": {
-            "color": "var(--color-fgcolor-neutral-tertiary)",
+            "color": "var(--fgcolor-neutral-tertiary)",
             "show": true
         },
         "splitLine": {
             "lineStyle": {
-                "color": ["var(--color-border-neutral)"]
+                "color": ["var(--border-neutral)"]
             },
             "show": true
         },
@@ -75,23 +75,23 @@
     "timeAxis": {
         "axisLine": {
             "lineStyle": {
-                "color": "var(--color-fgcolor-neutral-tertiary)"
+                "color": "var(--fgcolor-neutral-tertiary)"
             },
             "show": true
         },
         "axisTick": {
             "lineStyle": {
-                "color": "var(--color-fgcolor-neutral-tertiary)"
+                "color": "var(--fgcolor-neutral-tertiary)"
             },
             "show": true
         },
         "axisLabel": {
-            "color": "var(--color-fgcolor-neutral-tertiary)",
+            "color": "var(--fgcolor-neutral-tertiary)",
             "show": true
         },
         "splitLine": {
             "lineStyle": {
-                "color": ["var(--color-border-neutral)"]
+                "color": ["var(--border-neutral)"]
             },
             "show": true
         },
@@ -100,18 +100,18 @@
         }
     },
     "tooltip": {
-        "backgroundColor": "var(--color-bgcolor-neutral-primary)",
-        "borderColor": "var(--color-border-neutral)",
+        "backgroundColor": "var(--bgcolor-neutral-primary)",
+        "borderColor": "var(--border-neutral)",
         "textStyle": {
-            "color": "var(--color-fgcolor-neutral-secondary)"
+            "color": "var(--fgcolor-neutral-secondary)"
         },
         "axisPointer": {
             "lineStyle": {
-                "color": "var(--color-border-neutral-strong)",
+                "color": "var(--border-neutral-strong)",
                 "width": 1
             },
             "crossStyle": {
-                "color": "var(--color-border-neutral-strong)",
+                "color": "var(--border-neutral-strong)",
                 "width": 1
             }
         }
diff --git a/src/lib/charts/dark.json b/src/lib/charts/dark.json
index 9d09ce2ef..0845bf4ab 100644
--- a/src/lib/charts/dark.json
+++ b/src/lib/charts/dark.json
@@ -120,10 +120,10 @@
                 "color": "#444444"
             }
         },
-        "backgroundColor": "var(--color-bgcolor-neutral-primary)",
-        "borderColor": "var(--color-border-neutral)",
+        "backgroundColor": "var(--bgcolor-neutral-primary)",
+        "borderColor": "var(--border-neutral)",
         "textStyle": {
-            "color": "var(--color-fgcolor-neutral-secondary)"
+            "color": "var(--fgcolor-neutral-secondary)"
         }
     },
     "timeline": {
diff --git a/src/lib/charts/light.json b/src/lib/charts/light.json
index d81dd9f85..1e6d3faae 100644
--- a/src/lib/charts/light.json
+++ b/src/lib/charts/light.json
@@ -1,82 +1,82 @@
 {
-    "backgroundColor": "var(--color-bgcolor-neutral-primary)",
+    "backgroundColor": "var(--bgcolor-neutral-primary)",
     "categoryAxis": {
         "axisLine": {
             "lineStyle": {
-                "color": "var(--color-fgcolor-neutral-tertiary)"
+                "color": "var(--fgcolor-neutral-tertiary)"
             }
         },
         "axisTick": {
             "lineStyle": {
-                "color": "var(--color-fgcolor-neutral-tertiary)"
+                "color": "var(--fgcolor-neutral-tertiary)"
             }
         },
         "axisLabel": {
-            "color": "var(--color-fgcolor-neutral-tertiary)"
+            "color": "var(--fgcolor-neutral-tertiary)"
         }
     },
     "valueAxis": {
         "axisLabel": {
-            "color": "var(--color-fgcolor-neutral-tertiary)"
+            "color": "var(--fgcolor-neutral-tertiary)"
         },
         "splitLine": {
             "lineStyle": {
-                "color": ["var(--color-border-neutral)"]
+                "color": ["var(--border-neutral)"]
             }
         }
     },
     "logAxis": {
         "axisLine": {
             "lineStyle": {
-                "color": "var(--color-fgcolor-neutral-tertiary)"
+                "color": "var(--fgcolor-neutral-tertiary)"
             }
         },
         "axisTick": {
             "lineStyle": {
-                "color": "var(--color-fgcolor-neutral-tertiary)"
+                "color": "var(--fgcolor-neutral-tertiary)"
             }
         },
         "axisLabel": {
-            "color": "var(--color-fgcolor-neutral-tertiary)"
+            "color": "var(--fgcolor-neutral-tertiary)"
         },
         "splitLine": {
             "lineStyle": {
-                "color": ["var(--color-border-neutral)"]
+                "color": ["var(--border-neutral)"]
             }
         }
     },
     "timeAxis": {
         "axisLine": {
             "lineStyle": {
-                "color": "var(--color-fgcolor-neutral-tertiary)"
+                "color": "var(--fgcolor-neutral-tertiary)"
             }
         },
         "axisTick": {
             "lineStyle": {
-                "color": "var(--color-fgcolor-neutral-tertiary)"
+                "color": "var(--fgcolor-neutral-tertiary)"
             }
         },
         "axisLabel": {
-            "color": "var(--color-fgcolor-neutral-tertiary)"
+            "color": "var(--fgcolor-neutral-tertiary)"
         },
         "splitLine": {
             "lineStyle": {
-                "color": ["var(--color-border-neutral)"]
+                "color": ["var(--border-neutral)"]
             }
         }
     },
     "tooltip": {
-        "backgroundColor": "var(--color-bgcolor-neutral-primary)",
-        "borderColor": "var(--color-border-neutral)",
+        "backgroundColor": "var(--bgcolor-neutral-primary)",
+        "borderColor": "var(--border-neutral)",
         "textStyle": {
-            "color": "var(--color-fgcolor-neutral-secondary)"
+            "color": "var(--fgcolor-neutral-secondary)"
         },
         "axisPointer": {
             "lineStyle": {
-                "color": "var(--color-border-neutral-strong)"
+                "color": "var(--border-neutral-strong)"
             },
             "crossStyle": {
-                "color": "var(--color-border-neutral-strong)"
+                "color": "var(--border-neutral-strong)"
             }
         }
     }
diff --git a/src/lib/commandCenter/panels/root.svelte b/src/lib/commandCenter/panels/root.svelte
index 5a1230618..79ab6e7cb 100644
--- a/src/lib/commandCenter/panels/root.svelte
+++ b/src/lib/commandCenter/panels/root.svelte
@@ -68,9 +68,9 @@
                     src={`${base}/icons/${$app.themeInUse}/color/${command.image}.svg`}
                     alt={command.label} />
             {:else if command.icon}
-                <Icon icon={command.icon} size="s" color="--color-fgcolor-neutral-tertiary" />
+                <Icon icon={command.icon} size="s" color="--fgcolor-neutral-tertiary" />
             {:else}
-                <Icon icon={IconArrowSmRight} size="s" color="--color-fgcolor-neutral-tertiary" />
+                <Icon icon={IconArrowSmRight} size="s" color="--fgcolor-neutral-tertiary" />
             {/if}
             <span>
                 {command.label}
@@ -103,7 +103,7 @@
 
 <style>
     .then {
-        color: var(--color-fgcolor-neutral-tertiary, #97979b);
+        color: var(--fgcolor-neutral-tertiary, #97979b);
         font-size: var(--font-size-s, 14px);
         font-weight: 400;
     }
diff --git a/src/lib/commandCenter/panels/template.svelte b/src/lib/commandCenter/panels/template.svelte
index a39946a7c..d23c1f405 100644
--- a/src/lib/commandCenter/panels/template.svelte
+++ b/src/lib/commandCenter/panels/template.svelte
@@ -300,12 +300,12 @@
                                             <Icon
                                                 icon={item.icon}
                                                 size="s"
-                                                color="--color-fgcolor-neutral-tertiary" />
+                                                color="--fgcolor-neutral-tertiary" />
                                         {:else}
                                             <Icon
                                                 icon={IconArrowSmRight}
                                                 size="s"
-                                                color="--color-fgcolor-neutral-tertiary" />
+                                                color="--fgcolor-neutral-tertiary" />
                                         {/if}
                                         <span>
                                             {item.label}
@@ -378,15 +378,15 @@
     }
 
     .card {
-        --cmd-center-bg: var(--color-bgcolor-neutral-primary, #fff);
-        --footer-bg: var(--color-bgcolor-neutral-primary, #fff);
-        --cmd-center-border: var(--color-border-neutral, #ededf0);
-        --result-bg: var(--color-overlay-neutral-hover, rgba(25, 25, 28, 0.03));
-        --kbd-bg: var(--color-overlay-on-neutral, rgba(0, 0, 0, 0.06));
-        --kbd-color: var(--color-fgcolor-neutral-secondary, #56565c);
-        --icon-color: var(--color-fgcolor-neutral-tertiary, #97979b);
-        --label-color: var(--color-fgColor-neutral-secondary, #56565c);
-        --crumb-color: var(--color-fgColor-neutral-secondary, #56565c);
+        --cmd-center-bg: var(--bgcolor-neutral-primary);
+        --footer-bg: var(--bgcolor-neutral-primary);
+        --cmd-center-border: var(--border-neutral);
+        --result-bg: var(--color-overlay-neutral-hover);
+        --kbd-bg: var(--color-overlay-on-neutral);
+        --kbd-color: var(--fgcolor-neutral-secondary);
+        --icon-color: var(--fgcolor-neutral-tertiary);
+        --label-color: var(--fgcolor-neutral-secondary);
+        --crumb-color: var(--fgcolor-neutral-secondary);
     }
 
     // Elements
@@ -432,7 +432,7 @@
         align-items: center;
         width: 100%;
 
-        border-bottom: 1px solid var(--color-border-neutral, #ededf0);
+        border-bottom: 1px solid var(--border-neutral, #ededf0);
         font-size: 16px;
         padding: 1rem;
 
@@ -480,7 +480,7 @@
             padding: 1rem;
 
             .group {
-                color: var(--color-fgcolor-neutral-secondary, #56565c);
+                color: var(--fgcolor-neutral-secondary, #56565c);
                 margin-inline-start: 0.25rem;
                 margin-block-end: 0.25rem;
                 position: relative;
@@ -548,7 +548,7 @@
                         content: '';
                         position: absolute;
                         left: -8px;
-                        border-left: 1px solid var(--color-border-neutral, #ededf0);
+                        border-left: 1px solid var(--border-neutral, #ededf0);
                         height: 100%;
                     }
                 }
@@ -558,7 +558,7 @@
 
     .footer {
         background: var(--footer-bg);
-        border-top: 1px solid var(--color-border-neutral, #ededf0);
+        border-top: 1px solid var(--border-neutral, #ededf0);
 
         padding: 0.75rem 1rem;
     }
diff --git a/src/lib/components/breadcrumbs.svelte b/src/lib/components/breadcrumbs.svelte
index 43f469bd7..a0cb4468e 100644
--- a/src/lib/components/breadcrumbs.svelte
+++ b/src/lib/components/breadcrumbs.svelte
@@ -194,7 +194,7 @@
                 >{#if selectedOrg?.tierName}<Badge
                         variant="secondary"
                         content={selectedOrg?.tierName} />{/if}</span>
-            <Icon icon={IconChevronDown} size="s" color="--color-fgcolor-neutral-secondary" />
+            <Icon icon={IconChevronDown} size="s" color="--fgcolor-neutral-secondary" />
         </button>
     {:else}
         <button
@@ -208,7 +208,7 @@
                 >{selectedOrg?.name ?? 'Organization'}</span>
             <span class="not-mobile"
                 ><Badge variant="secondary" content={selectedOrg?.tierName ?? ''} /></span>
-            <Icon icon={IconChevronDown} size="s" color="--color-fgcolor-neutral-secondary" />
+            <Icon icon={IconChevronDown} size="s" color="--fgcolor-neutral-secondary" />
         </button>
     {/if}
 
@@ -372,7 +372,7 @@
         overflow: hidden;
         text-overflow: ellipsis;
         max-width: 60px;
-        color: var(--color-fgcolor-neutral-secondary);
+        color: var(--fgcolor-neutral-secondary);
 
         @media (min-width: 390px) {
             max-width: 95px;
@@ -409,7 +409,7 @@
 
         transition: color 0.2s ease;
 
-        color: var(--color-fgcolor-neutral-primary, #2d2d31);
+        color: var(--fgcolor-neutral-primary, #2d2d31);
         border-radius: var(--corner-radius-medium, 8px);
 
         cursor: default;
@@ -427,29 +427,29 @@
 
     :global(.trigger[data-highlighted]) {
         outline: none;
-        background: var(--color-bgcolor-neutral-secondary, #f4f4f7);
+        background: var(--bgcolor-neutral-secondary, #f4f4f7);
     }
 
     :global(.trigger[data-highlighted]:focus) {
         outline: none;
-        box-shadow: 0 0 0 2px var(--color-bgcolor-neutral-secondary, #f4f4f7);
+        box-shadow: 0 0 0 2px var(--bgcolor-neutral-secondary, #f4f4f7);
     }
 
     .trigger:focus {
         z-index: 30;
         box-shadow:
             var(--shadow-offsetx-0, 0px) var(--shadow-offsety-0, 0px) 0 2px
-                var(--color-bgcolor-neutral-default, #fafafb),
-            0 0 0 4px var(--color-border-focus, #818186);
+                var(--bgcolor-neutral-default, #fafafb),
+            0 0 0 4px var(--border-focus, #818186);
     }
     .separator {
         height: 1px;
         margin-block: 2px;
         margin-inline-start: calc(var(--base-4) * -1);
         width: calc(100% + var(--base-8));
-        background-color: var(--color-border-neutral);
+        background-color: var(--border-neutral);
     }
     .breadcrumb-separator {
-        color: var(--color-fgcolor-neutral-tertiary, #97979b);
+        color: var(--fgcolor-neutral-tertiary, #97979b);
     }
 </style>
diff --git a/src/lib/components/customId.svelte b/src/lib/components/customId.svelte
index 6059c0c3c..9301b04a1 100644
--- a/src/lib/components/customId.svelte
+++ b/src/lib/components/customId.svelte
@@ -28,7 +28,7 @@
     <Card.Base
         variant="secondary"
         padding="s"
-        --input-background-color="var(--color-bgcolor-neutral-primary)">
+        --input-background-color="var(--bgcolor-neutral-primary)">
         <Layout.Stack gap="xl">
             <Layout.Stack gap="s">
                 <Layout.Stack direction="row" justifyContent="space-between" alignContent="center">
diff --git a/src/lib/components/filePicker.svelte b/src/lib/components/filePicker.svelte
index d885b1384..2ed2c0048 100644
--- a/src/lib/components/filePicker.svelte
+++ b/src/lib/components/filePicker.svelte
@@ -446,7 +446,7 @@
                                                 <article
                                                     style:--card-bg-color="transparent"
                                                     style:--shadow-small="none"
-                                                    style:--color-border="var(--color-neutral-15)"
+                                                    style:--border="var(--color-neutral-15)"
                                                     class="card u-grid u-cross-center u-width-full-line common-section is-border-dashed">
                                                     <div
                                                         class="u-flex u-flex-vertical u-cross-center u-gap-24 u-overflow-hidden">
@@ -476,7 +476,7 @@
                                                     noMedia
                                                     --card-bg-color="transparent"
                                                     --shadow-small="none"
-                                                    --color-border="var(--color-neutral-15)">
+                                                    --border="var(--color-neutral-15)">
                                                     <div class="common-section">
                                                         <div class="u-text-center common-section">
                                                             <Typography.Title size="s">
@@ -505,7 +505,7 @@
                                 noMedia
                                 --card-bg-color="transparent"
                                 --shadow-small="none"
-                                --color-border="var(--color-neutral-15)">
+                                --border="var(--color-neutral-15)">
                                 <div class="u-text-center u-flex-vertical u-cross-center u-gap-24">
                                     <Typography.Title size="s">No buckets found</Typography.Title>
                                     <Button
diff --git a/src/lib/components/filters/filters.svelte b/src/lib/components/filters/filters.svelte
index 5f67ee624..1a05210a0 100644
--- a/src/lib/components/filters/filters.svelte
+++ b/src/lib/components/filters/filters.svelte
@@ -239,7 +239,7 @@
         hr {
             height: 1px;
             width: calc(100% + 2rem);
-            background-color: hsl(var(--color-border));
+            background-color: hsl(var(--border));
 
             margin-block-start: 1rem;
             margin-inline: -1rem;
diff --git a/src/lib/components/git/repositories.svelte b/src/lib/components/git/repositories.svelte
index 34e963ca8..993040b9c 100644
--- a/src/lib/components/git/repositories.svelte
+++ b/src/lib/components/git/repositories.svelte
@@ -183,20 +183,20 @@
                                         <Layout.Stack gap="s" direction="row" alignItems="center">
                                             <Typography.Text
                                                 truncate
-                                                color="--color-fgcolor-neutral-secondary">
+                                                color="--fgcolor-neutral-secondary">
                                                 {repo.name}
                                             </Typography.Text>
                                             {#if repo.private}
                                                 <Icon
                                                     size="s"
                                                     icon={IconLockClosed}
-                                                    color="--color-fgcolor-neutral-tertiary" />
+                                                    color="--fgcolor-neutral-tertiary" />
                                             {/if}
                                             <time datetime={repo.pushedAt}>
                                                 <Typography.Caption
                                                     variant="400"
                                                     truncate
-                                                    color="--color-fgcolor-neutral-tertiary">
+                                                    color="--fgcolor-neutral-tertiary">
                                                     {timeFromNow(repo.pushedAt)}
                                                 </Typography.Caption>
                                             </time>
diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index 2ab656133..87a1ef2c2 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -374,8 +374,8 @@
         align-items: center;
         gap: var(--space-4, 8px);
         border-radius: var(--border-radius-xs, 6px);
-        border: var(--border-width-s, 1px) solid var(--color-border-neutral-strong, #d8d8db);
-        background: var(--color-bgcolor-neutral-primary, #fff);
+        border: var(--border-width-s, 1px) solid var(--border-neutral-strong, #d8d8db);
+        background: var(--bgcolor-neutral-primary, #fff);
         cursor: pointer;
     }
 
diff --git a/src/lib/components/paginator.svelte b/src/lib/components/paginator.svelte
index 983b49580..ef951d58e 100644
--- a/src/lib/components/paginator.svelte
+++ b/src/lib/components/paginator.svelte
@@ -17,7 +17,7 @@
 
     {#if !hideFooter}
         <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
-            <Typography.Text variant="m-400" color="--color-fgcolor-neutral-secondary">
+            <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
                 Total results: {total}
             </Typography.Text>
             <div>
diff --git a/src/lib/components/permissions/team.svelte b/src/lib/components/permissions/team.svelte
index c1a39f9ba..b2efaf4d0 100644
--- a/src/lib/components/permissions/team.svelte
+++ b/src/lib/components/permissions/team.svelte
@@ -96,7 +96,7 @@
                                 <Typography.Caption variant="400">Text</Typography.Caption>
                                 <Typography.Caption
                                     variant="400"
-                                    color="--color-fgcolor-neutral-tertiary">
+                                    color="--fgcolor-neutral-tertiary">
                                     Secondary Text
                                 </Typography.Caption>
                             </Layout.Stack>
diff --git a/src/lib/components/permissions/user.svelte b/src/lib/components/permissions/user.svelte
index 4f2407cba..12410e455 100644
--- a/src/lib/components/permissions/user.svelte
+++ b/src/lib/components/permissions/user.svelte
@@ -105,7 +105,7 @@
                                             >{user.name}</Typography.Caption>
                                         <Typography.Caption
                                             variant="400"
-                                            color="--color-fgcolor-neutral-tertiary">
+                                            color="--fgcolor-neutral-tertiary">
                                             {user.$id}
                                         </Typography.Caption>
                                     </Layout.Stack>
@@ -120,7 +120,7 @@
                                                 : user.phone}</Typography.Caption>
                                         <Typography.Caption
                                             variant="400"
-                                            color="--color-fgcolor-neutral-tertiary">
+                                            color="--fgcolor-neutral-tertiary">
                                             {user.$id}
                                         </Typography.Caption>
                                     </Layout.Stack>
@@ -134,7 +134,7 @@
                                         >{user.name ? user.name : '-'}</Typography.Caption>
                                     <Typography.Caption
                                         variant="400"
-                                        color="--color-fgcolor-neutral-tertiary">
+                                        color="--fgcolor-neutral-tertiary">
                                         {user.$id}
                                     </Typography.Caption>
                                 </Layout.Stack>
diff --git a/src/lib/components/searchQuery.svelte b/src/lib/components/searchQuery.svelte
index 82cbfa861..360d11da0 100644
--- a/src/lib/components/searchQuery.svelte
+++ b/src/lib/components/searchQuery.svelte
@@ -64,7 +64,7 @@
         {disabled}
         {required}
         bind:value={search}
-        --color-bgcolor-neutral-default="var(--color-bgcolor-neutral-primary)">
+        --bgcolor-neutral-default="var(--bgcolor-neutral-primary)">
         <svelte:fragment slot="start">
             <Icon icon={IconSearch} />
         </svelte:fragment>
diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index c2d80809e..bfebc14ca 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -95,7 +95,7 @@
                             state = 'closed';
                             sideBarIsOpen = false;
                         }}>
-                        <Icon icon={IconSearch} color="--color-fgcolor-neutral-tertiary" />
+                        <Icon icon={IconSearch} color="--fgcolor-neutral-tertiary" />
                     </Button.Button>
                 </div>
                 <Link.Button
@@ -121,11 +121,9 @@
                         </div>
                         {#if state !== 'icons'}
                             <div class="info" in:fade={{ delay: 200, duration: 200 }}>
-                                <Typography.Text
-                                    variant="m-500"
-                                    color="--color-fgcolor-neutral-secondary"
+                                <Typography.Text variant="m-500" color="--fgcolor-neutral-secondary"
                                     >{progressCard.title}</Typography.Text>
-                                <Typography.Text color="--color-fgcolor-neutral-secondary"
+                                <Typography.Text color="--fgcolor-neutral-secondary"
                                     >{progressCard.percentage}% complete</Typography.Text>
                             </div>
                         {/if}
@@ -358,47 +356,47 @@
 
         .link-icon {
             height: 16px;
-            color: var(--color-fgcolor-neutral-weak);
+            color: var(--fgcolor-neutral-weak);
             transition: color 0.2s ease-in-out;
         }
 
         &:hover {
-            background: var(--color-bgcolor-neutral-secondary, #f4f4f7);
+            background: var(--bgcolor-neutral-secondary);
 
             .link-icon {
-                color: var(--color-fgcolor-neutral-tertiary);
+                color: var(--fgcolor-neutral-tertiary);
             }
         }
 
         &:focus-visible {
-            background: var(--color-bgcolor-neutral-secondary, #f4f4f7);
+            background: var(--bgcolor-neutral-secondary);
 
             /* box-shadow/state/focus */
             box-shadow:
                 var(--shadow-offsetx-0, 0px) var(--shadow-offsety-0, 0px) 0 2px
-                    var(--color-bgcolor-neutral-default, #fafafb),
-                0px 0px 0px 4px var(--color-border-focus, #818186);
+                    var(--bgcolor-neutral-default, #fafafb),
+                0px 0px 0px 4px var(--border-focus, #818186);
         }
 
         &:active {
-            background: var(--color-bgcolor-neutral-secondary, #f4f4f7);
+            background: var(--bgcolor-neutral-secondary, #f4f4f7);
 
             .link-text {
-                color: var(--color-fgcolor-neutral-primary);
+                color: var(--fgcolor-neutral-primary);
             }
 
             .link-icon {
-                color: var(--color-fgcolor-neutral-tertiary);
+                color: var(--fgcolor-neutral-tertiary);
             }
         }
     }
     .active {
-        background: var(--color-bgcolor-neutral-secondary, #f4f4f7);
+        background: var(--bgcolor-neutral-secondary, #f4f4f7);
         .link-text {
-            color: var(--color-fgcolor-neutral-primary);
+            color: var(--fgcolor-neutral-primary);
         }
         .link-icon {
-            color: var(--color-fgcolor-neutral-tertiary);
+            color: var(--fgcolor-neutral-tertiary);
         }
     }
 
@@ -417,7 +415,7 @@
         transition-behavior: allow-discrete;
         opacity: 1;
         visibility: visible;
-        color: var(--color-fgcolor-neutral-secondary, #56565c);
+        color: var(--fgcolor-neutral-secondary, #56565c);
         filter: blur(0);
 
         &.has-text {
@@ -457,8 +455,8 @@
         align-items: center;
         margin-bottom: var(--gap-s, 8px);
 
-        border-bottom: var(--border-width-s, 1px) solid var(--color-border-neutral, #ededf0);
-        background: var(--color-bgcolor-neutral-primary, #fff);
+        border-bottom: var(--border-width-s, 1px) solid var(--border-neutral, #ededf0);
+        background: var(--bgcolor-neutral-primary, #fff);
     }
 
     .products-label-container {
@@ -477,11 +475,11 @@
 
     .products-label {
         font-size: var(--font-size-xs);
-        color: var(--color-fgcolor-neutral-tertiary);
+        color: var(--fgcolor-neutral-tertiary);
     }
 
     .products-label-indicator {
-        border-bottom: 1px solid var(--color-border-neutral);
+        border-bottom: 1px solid var(--border-neutral);
         height: 1px;
         width: 18px;
         align-self: center;
@@ -526,8 +524,8 @@
         margin-block-end: var(--space-6, 12px);
         align-self: stretch;
         border-radius: var(--border-radius-s, 8px);
-        border: 1px solid var(--color-border-neutral, #ededf0);
-        background: var(--color-bgcolor-neutral-default, #fafafb);
+        border: 1px solid var(--border-neutral, #ededf0);
+        background: var(--bgcolor-neutral-default, #fafafb);
         transition: all 0.2s ease-in-out;
 
         @media (min-width: 1024px) {
@@ -582,7 +580,7 @@
             height: calc(100vh - 48px);
             display: flex;
             justify-content: flex-end;
-            background-color: var(--color-bgcolor-neutral-primary, #fff);
+            background-color: var(--bgcolor-neutral-primary, #fff);
             z-index: 14;
             position: fixed;
             top: 48px;
diff --git a/src/lib/components/support.svelte b/src/lib/components/support.svelte
index 3211caf5f..adbb0486b 100644
--- a/src/lib/components/support.svelte
+++ b/src/lib/components/support.svelte
@@ -175,12 +175,12 @@
 
     :global(.theme-dark .support-option-card) {
         /* override required due to the card's background color */
-        background: var(--color-bgcolor-neutral-default, #19191c) !important;
+        background: var(--bgcolor-neutral-default, #19191c) !important;
     }
 
     :global(.theme-light .support-option-card) {
-        border: 1px solid var(--color-border-neutral, #ededf0);
+        border: 1px solid var(--border-neutral, #ededf0);
         /* override required due to the card's background color */
-        background: var(--color-bgcolor-neutral-default, #fafafb) !important;
+        background: var(--bgcolor-neutral-default, #fafafb) !important;
     }
 </style>
diff --git a/src/lib/components/usageCard.svelte b/src/lib/components/usageCard.svelte
index fc4888741..1fd9a03aa 100644
--- a/src/lib/components/usageCard.svelte
+++ b/src/lib/components/usageCard.svelte
@@ -8,12 +8,12 @@
 
 <Card radius="s" padding="xs" isTile>
     <Layout.Stack gap="xxxs">
-        <Typography.Caption variant="400" color="--color-fgcolor-neutral-tertiary">
+        <Typography.Caption variant="400" color="--fgcolor-neutral-tertiary">
             {description}
         </Typography.Caption>
         <slot>
             {#if value !== null && value !== undefined}
-                <Typography.Text size="s" truncate color="--color-fgcolor-neutral-primary"
+                <Typography.Text size="s" truncate color="--fgcolor-neutral-primary"
                     >{value}</Typography.Text>
             {:else}
                 <Skeleton variant="line" width={100} height={19.5} />
diff --git a/src/lib/components/viewSelector.svelte b/src/lib/components/viewSelector.svelte
index 2caa5f545..7a4727d56 100644
--- a/src/lib/components/viewSelector.svelte
+++ b/src/lib/components/viewSelector.svelte
@@ -115,7 +115,7 @@
 
 {#if !hideView}
     <ToggleButton
-        --color-bgcolor-neutral-default="var(--color-bgcolor-neutral-primary)"
+        --bgcolor-neutral-default="var(--bgcolor-neutral-primary)"
         on:change={onViewChange}
         active={view}
         buttons={[
diff --git a/src/lib/layout/cover.svelte b/src/lib/layout/cover.svelte
index f920c6281..a3b4f2fad 100644
--- a/src/lib/layout/cover.svelte
+++ b/src/lib/layout/cover.svelte
@@ -23,8 +23,8 @@
         container-type: inline-size;
         padding-block-start: var(--base-32);
         padding-block-end: var(--base-16);
-        border-bottom: 1px solid var(--color-border-neutral, #2d2d31);
-        background: var(--color-bgcolor-neutral-primary, #1d1d21);
+        border-bottom: 1px solid var(--border-neutral, #2d2d31);
+        background: var(--bgcolor-neutral-primary, #1d1d21);
         margin-left: -190px;
         padding-left: 190px;
     }
diff --git a/src/lib/layout/coverTitle.svelte b/src/lib/layout/coverTitle.svelte
index ae1e2a7b7..eb3a43fa1 100644
--- a/src/lib/layout/coverTitle.svelte
+++ b/src/lib/layout/coverTitle.svelte
@@ -13,9 +13,6 @@
         </Button.Anchor>
     </span>
 {/if}
-<Typography.Title
-    truncate
-    color="--color-fgcolor-neutral-primary"
-    size={$isSmallViewport ? 'm' : 'l'}>
+<Typography.Title truncate color="--fgcolor-neutral-primary" size={$isSmallViewport ? 'm' : 'l'}>
     <slot />
 </Typography.Title>
diff --git a/src/lib/layout/usage.svelte b/src/lib/layout/usage.svelte
index d6b71fc91..71d376898 100644
--- a/src/lib/layout/usage.svelte
+++ b/src/lib/layout/usage.svelte
@@ -84,7 +84,7 @@
     <Layout.Stack gap="s">
         <div
             style:max-width="250px"
-            style:--input-background-color="var(--color-bgcolor-neutral-primary)">
+            style:--input-background-color="var(--bgcolor-neutral-primary)">
             <InputSelect
                 on:change={(e) => goto(`${path}/${e.detail}`)}
                 id="period"
diff --git a/src/lib/layout/wizardCover.svelte b/src/lib/layout/wizardCover.svelte
index 4e40a3b7b..ee6ccd7f9 100644
--- a/src/lib/layout/wizardCover.svelte
+++ b/src/lib/layout/wizardCover.svelte
@@ -60,6 +60,6 @@
         height: 100%;
         max-height: 100vh;
         overflow-y: auto;
-        background: var(--color-bgcolor-neutral-primary);
+        background: var(--bgcolor-neutral-primary);
     }
 </style>
diff --git a/src/routes/(console)/(migration-wizard)/resource-form.svelte b/src/routes/(console)/(migration-wizard)/resource-form.svelte
index 5ddae52fa..ac2327914 100644
--- a/src/routes/(console)/(migration-wizard)/resource-form.svelte
+++ b/src/routes/(console)/(migration-wizard)/resource-form.svelte
@@ -418,7 +418,7 @@
         height: 1.5rem;
         flex-shrink: 0;
         border-radius: 100%;
-        border: 1px solid hsl(var(--color-border));
+        border: 1px solid hsl(var(--border));
         position: relative;
 
         i {
@@ -431,7 +431,7 @@
     }
 
     .buttons-list {
-        border-block-end: 1px solid hsl(var(--color-border));
+        border-block-end: 1px solid hsl(var(--border));
         padding-block-end: 0.625rem;
     }
 
diff --git a/src/routes/(console)/onboarding/create-project/+page.svelte b/src/routes/(console)/onboarding/create-project/+page.svelte
index 981fc348d..3490f6d65 100644
--- a/src/routes/(console)/onboarding/create-project/+page.svelte
+++ b/src/routes/(console)/onboarding/create-project/+page.svelte
@@ -202,13 +202,13 @@
     @use '@appwrite.io/pink-legacy/src/abstract/variables/devices';
 
     :global(body) {
-        background: var(--color-bgcolor-neutral-default, #19191c);
+        background: var(--bgcolor-neutral-default, #19191c);
     }
     .page-container {
         width: calc(100% - 2rem);
         margin: 0 1rem;
         gap: 4.5rem;
-        background: var(--color-bgcolor-neutral-default, #19191c);
+        background: var(--bgcolor-neutral-default, #19191c);
 
         @media #{devices.$break2open} {
             width: 700px;
diff --git a/src/routes/(console)/onboarding/create-project/loading.svelte b/src/routes/(console)/onboarding/create-project/loading.svelte
index 4d6cc09a3..6d817bde4 100644
--- a/src/routes/(console)/onboarding/create-project/loading.svelte
+++ b/src/routes/(console)/onboarding/create-project/loading.svelte
@@ -196,7 +196,7 @@
 
 <style lang="scss">
     :global(.theme-dark) {
-        --icon-content-background-color: var(--color-bgcolor-neutral-primary, #1d1d21);
+        --icon-content-background-color: var(--bgcolor-neutral-primary, #1d1d21);
         --icon-content-border-color: var(--color-overlay-skeleton);
         --icon-container-background-color: #242427;
         --icon-container-border-color: rgba(255, 255, 255, 0.02);
@@ -216,7 +216,7 @@
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        color: var(--color-fgcolor-neutral-primary, #2d2d31);
+        color: var(--fgcolor-neutral-primary, #2d2d31);
 
         --animation-type: cubic-bezier(0.77, 0, 0.175, 1);
         --icon-colorize-animation-duration: 0.3s; // duration of icons going from gray to colorized
@@ -393,10 +393,10 @@
     }
 
     .border-right {
-        border-right: 1px solid var(--color-border-neutral);
+        border-right: 1px solid var(--border-neutral);
     }
     .border-bottom {
-        border-bottom: 1px solid var(--color-border-neutral);
+        border-bottom: 1px solid var(--border-neutral);
         grid-column: 1/8;
         @media (min-width: 768px) {
             grid-column: 1/10;
@@ -406,7 +406,7 @@
     .vertical-fade-top {
         background: linear-gradient(
             to bottom,
-            var(--color-bgcolor-neutral-default, #19191c) 0%,
+            var(--bgcolor-neutral-default, #19191c) 0%,
             transparent 100%
         );
         grid-column: 1/8;
@@ -417,7 +417,7 @@
     .vertical-fade-bottom {
         background: linear-gradient(
             to top,
-            var(--color-bgcolor-neutral-default, #19191c) 0%,
+            var(--bgcolor-neutral-default, #19191c) 0%,
             transparent 100%
         );
         grid-column: 1/8;
@@ -428,14 +428,14 @@
     .horizontal-fade-left {
         background: linear-gradient(
             to right,
-            var(--color-bgcolor-neutral-default, #19191c) 0%,
+            var(--bgcolor-neutral-default, #19191c) 0%,
             transparent 100%
         );
     }
     .horizontal-fade-right {
         background: linear-gradient(
             to left,
-            var(--color-bgcolor-neutral-default, #19191c) 0%,
+            var(--bgcolor-neutral-default, #19191c) 0%,
             transparent 100%
         );
         grid-column-start: 7;
diff --git a/src/routes/(console)/organization-[organization]/domains/recordsCard.svelte b/src/routes/(console)/organization-[organization]/domains/recordsCard.svelte
index bb716f304..35b67787a 100644
--- a/src/routes/(console)/organization-[organization]/domains/recordsCard.svelte
+++ b/src/routes/(console)/organization-[organization]/domains/recordsCard.svelte
@@ -94,8 +94,8 @@
                 {/each}
             </Table.Root>
             <Layout.Stack gap="s" direction="row" alignItems="center">
-                <Icon icon={IconInfo} size="s" color="--color-fgcolor-neutral-secondary" />
-                <Typography.Text variant="m-400" color="--color-fgcolor-neutral-secondary">
+                <Icon icon={IconInfo} size="s" color="--fgcolor-neutral-secondary" />
+                <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
                     A list of all domain providers and their DNS setting is available <Link
                         variant="muted"
                         href="#">here</Link
diff --git a/src/routes/(console)/organization-[organization]/header.svelte b/src/routes/(console)/organization-[organization]/header.svelte
index 0c1fa061d..a1483936e 100644
--- a/src/routes/(console)/organization-[organization]/header.svelte
+++ b/src/routes/(console)/organization-[organization]/header.svelte
@@ -92,7 +92,7 @@
         <svelte:fragment slot="header">
             <span class="u-flex u-cross-center u-gap-8 u-min-width-0">
                 <span class="u-trim">
-                    <Typography.Title color="--color-fgcolor-neutral-primary" size="xl"
+                    <Typography.Title color="--fgcolor-neutral-primary" size="xl"
                         >{$organization.name}</Typography.Title>
                 </span>
                 {#if isCloud && $organization?.billingPlan === BillingPlan.GITHUB_EDUCATION}
diff --git a/src/routes/(console)/project-[project]/auth/header.svelte b/src/routes/(console)/project-[project]/auth/header.svelte
index e7bd226b3..160cb3ed6 100644
--- a/src/routes/(console)/project-[project]/auth/header.svelte
+++ b/src/routes/(console)/project-[project]/auth/header.svelte
@@ -52,7 +52,7 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <Typography.Title color="--color-fgcolor-neutral-primary" size="xl">Auth</Typography.Title>
+        <Typography.Title color="--fgcolor-neutral-primary" size="xl">Auth</Typography.Title>
     </svelte:fragment>
     <Tabs>
         {#each tabs as tab}
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/backups/policy.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/backups/policy.svelte
index 083880370..ad7224c2c 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/backups/policy.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/backups/policy.svelte
@@ -323,7 +323,7 @@
     .u-border-vertical {
         width: 1px;
         height: 34px;
-        background-color: hsl(var(--color-border));
+        background-color: hsl(var(--border));
     }
 
     :global(.small-ellipse) {
@@ -349,7 +349,7 @@
 
     .policy-card-item-padding {
         padding: var(--space-3, 6px) var(--space-4, 8px);
-        border-block-end: solid 0.0625rem hsl(var(--color-border));
+        border-block-end: solid 0.0625rem hsl(var(--border));
     }
 
     .policy-card-item-padding:last-child {
@@ -377,7 +377,7 @@
     }
 
     :global(.theme-light .policy-item-subtitles) {
-        color: var(--color-fgColor-neutral-secondary, #56565c);
+        color: var(--fgcolor-neutral-secondary, #56565c);
     }
 
     :global(.theme-light .policy-item-caption) {
@@ -435,7 +435,7 @@
         .policy-card-item-padding[data-visible='true'][data-show-every='true']:nth-child(3):not(
                 :last-child
             ) {
-            border-block-end: solid 0.0625rem hsl(var(--color-border));
+            border-block-end: solid 0.0625rem hsl(var(--border));
         }
 
         .policy-card-item-padding[data-visible='true'][data-show-every='true']:nth-child(3)
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributeItem.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributeItem.svelte
index b5943db85..9a9daa8ac 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributeItem.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributeItem.svelte
@@ -50,7 +50,7 @@
         <Layout.Stack direction="row" alignContent="space-between">
             <Layout.Stack gap="xxs" direction="row" alignItems="center">
                 <Typography.Text variant="m-500">{label}</Typography.Text>
-                <Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
+                <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
                     {getAttributeType(attribute)}
                 </Typography.Text>
             </Layout.Stack>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte
index f287f072f..18064d142 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte
@@ -101,7 +101,7 @@
         <Layout.Stack direction="row" alignContent="space-between">
             <Layout.Stack gap="xxs" direction="row" alignItems="center">
                 <Typography.Text variant="m-500">{label}</Typography.Text>
-                <Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
+                <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
                     {optionalText}
                 </Typography.Text>
             </Layout.Stack>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
index e9eb8f5ef..66b5fc058 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
@@ -38,7 +38,7 @@
             <a
                 href={`${base}/project-${project}/databases/database-${databaseId}`}
                 class="database-name u-flex u-cross-center body-text-2 u-gap-8 is-not-mobile is-selected">
-                <Icon icon={IconDatabase} size="s" color="--color-fgcolor-neutral-weak" />
+                <Icon icon={IconDatabase} size="s" color="--fgcolor-neutral-weak" />
                 {data.database.name}
             </a>
             <div class="collection-content">
@@ -54,7 +54,7 @@
                                     <Icon
                                         icon={IconTable}
                                         size="s"
-                                        color="--color-fgcolor-neutral-weak" />
+                                        color="--fgcolor-neutral-weak" />
                                     <span class="text collection-name" data-private
                                         >{collection.name}</span>
                                 </a>
@@ -136,7 +136,7 @@
     .database-name {
         font-size: var(--font-size-sm);
         font-weight: 500;
-        color: var(--color-fgcolor-neutral-secondary);
+        color: var(--fgcolor-neutral-secondary);
     }
 
     .collection-content {
@@ -146,8 +146,8 @@
         margin-bottom: auto;
         padding-bottom: 16px;
         scrollbar-width: thin;
-        scrollbar-color: var(--color-border-neutral, #ededf0) transparent;
-        color: var(--color-fgcolor-neutral-secondary, #56565c);
+        scrollbar-color: var(--border-neutral, #ededf0) transparent;
+        color: var(--fgcolor-neutral-secondary, #56565c);
 
         &::-webkit-scrollbar {
             width: 4px;
@@ -160,28 +160,28 @@
         }
 
         &::-webkit-scrollbar-thumb {
-            background: var(--color-border-neutral, #ededf0);
+            background: var(--border-neutral, #ededf0);
             border-radius: 2px;
 
             &:hover {
-                background: var(--color-border-neutral-emphasis, #dbdbdf);
+                background: var(--border-neutral-emphasis, #dbdbdf);
             }
         }
     }
 
     .drop-list {
-        border-left: 1px solid var(--color-border-neutral, #ededf0);
+        border-left: 1px solid var(--border-neutral, #ededf0);
         flex: 1;
         padding-left: 4px;
         font-size: var(--font-size-sm);
         font-weight: 500;
-        color: var(--color-fgcolor-neutral-secondary);
+        color: var(--fgcolor-neutral-secondary);
 
         .is-selected,
         li:hover {
-            color: var(--color-fgcolor-neutral-primary);
+            color: var(--fgcolor-neutral-primary);
             border-radius: var(--border-radius-xs, 4px);
-            background: var(--color-bgcolor-neutral-tertiary, #fafafb);
+            background: var(--bgcolor-neutral-tertiary, #fafafb);
         }
 
         .collection-name {
@@ -189,7 +189,7 @@
             overflow: hidden;
             text-overflow: ellipsis;
             line-clamp: 1;
-            color: var(--color-fgcolor-neutral-secondary, #56565c);
+            color: var(--fgcolor-neutral-secondary, #56565c);
         }
     }
 
@@ -208,7 +208,7 @@
         gap: var(--space-2, 4px);
         transition: color 0.2s ease;
 
-        color: var(--color-fgcolor-neutral-secondary);
+        color: var(--fgcolor-neutral-secondary);
         border-radius: var(--corner-radius-medium, 8px);
 
         cursor: default;
diff --git a/src/routes/(console)/project-[project]/databases/header.svelte b/src/routes/(console)/project-[project]/databases/header.svelte
index 5e15e3591..7b6d102b9 100644
--- a/src/routes/(console)/project-[project]/databases/header.svelte
+++ b/src/routes/(console)/project-[project]/databases/header.svelte
@@ -26,8 +26,7 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <Typography.Title color="--color-fgcolor-neutral-primary" size="xl"
-            >Databases</Typography.Title>
+        <Typography.Title color="--fgcolor-neutral-primary" size="xl">Databases</Typography.Title>
     </svelte:fragment>
     <Tabs>
         {#each tabs as tab}
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/+page.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/+page.svelte
index b8c087333..4721a139f 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/+page.svelte
@@ -256,7 +256,7 @@
                             </Button>
                             {#if $tags?.length}
                                 <div
-                                    style="flex-basis:1px; background-color:hsl(var(--color-border)); width: 1px">
+                                    style="flex-basis:1px; background-color:hsl(var(--border)); width: 1px">
                                 </div>
                                 <Button text on:click={clearAll}>Clear all</Button>
                             {/if}
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/executions/+page.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/executions/+page.svelte
index 60f69a4fb..453702517 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/executions/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/executions/+page.svelte
@@ -205,7 +205,7 @@
                     </Button>
                     {#if $tags?.length}
                         <div
-                            style="flex-basis: 1px; background-color: hsl(var(--color-border)); width: 1px;">
+                            style="flex-basis: 1px; background-color: hsl(var(--border)); width: 1px;">
                         </div>
                         <Button text on:click={clearAll}>Clear All</Button>
                     {/if}
diff --git a/src/routes/(console)/project-[project]/functions/header.svelte b/src/routes/(console)/project-[project]/functions/header.svelte
index 8f512d2fd..6f49fd464 100644
--- a/src/routes/(console)/project-[project]/functions/header.svelte
+++ b/src/routes/(console)/project-[project]/functions/header.svelte
@@ -25,8 +25,7 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <Typography.Title color="--color-fgcolor-neutral-primary" size="xl"
-            >Functions</Typography.Title>
+        <Typography.Title color="--fgcolor-neutral-primary" size="xl">Functions</Typography.Title>
     </svelte:fragment>
 
     <Tabs>
diff --git a/src/routes/(console)/project-[project]/messaging/header.svelte b/src/routes/(console)/project-[project]/messaging/header.svelte
index 61b594c3b..bf13a85da 100644
--- a/src/routes/(console)/project-[project]/messaging/header.svelte
+++ b/src/routes/(console)/project-[project]/messaging/header.svelte
@@ -31,8 +31,7 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <Typography.Title color="--color-fgcolor-neutral-primary" size="xl"
-            >Messaging</Typography.Title>
+        <Typography.Title color="--fgcolor-neutral-primary" size="xl">Messaging</Typography.Title>
     </svelte:fragment>
     <Tabs>
         {#each tabs as tab}
diff --git a/src/routes/(console)/project-[project]/messaging/providers/wizard/settings.svelte b/src/routes/(console)/project-[project]/messaging/providers/wizard/settings.svelte
index 00a930445..8ae5676cc 100644
--- a/src/routes/(console)/project-[project]/messaging/providers/wizard/settings.svelte
+++ b/src/routes/(console)/project-[project]/messaging/providers/wizard/settings.svelte
@@ -158,11 +158,11 @@
         }
 
         :global(.clickable-list) {
-            --color-border: var(--color-neutral-5);
-            --p-clickable-button-bg-color-hover: var(--color-border);
+            --border: var(--color-neutral-5);
+            --p-clickable-button-bg-color-hover: var(--border);
 
             :global(.theme-dark) & {
-                --color-border: var(--color-neutral-85);
+                --border: var(--color-neutral-85);
             }
         }
 
diff --git a/src/routes/(console)/project-[project]/overview/header.svelte b/src/routes/(console)/project-[project]/overview/header.svelte
index 89110e70c..f7dbfaea2 100644
--- a/src/routes/(console)/project-[project]/overview/header.svelte
+++ b/src/routes/(console)/project-[project]/overview/header.svelte
@@ -16,7 +16,7 @@
 {#if !$page.url.pathname.includes('get-started')}
     <Cover>
         <svelte:fragment slot="header">
-            <Typography.Title color="--color-fgcolor-neutral-primary" size="xl">
+            <Typography.Title color="--fgcolor-neutral-primary" size="xl">
                 {$project?.name}
             </Typography.Title>
             <Id value={$project.$id}>{$project.$id}</Id>
@@ -31,13 +31,13 @@
                 alignItems={$isSmallViewport ? 'flex-start' : 'center'}
                 gap="xl">
                 <Layout.Stack direction="column" gap={$isSmallViewport ? 's' : 'xs'}>
-                    <Typography.Title color="--color-fgcolor-neutral-primary" size="xl"
+                    <Typography.Title color="--fgcolor-neutral-primary" size="xl"
                         >{#if $user.name === $user.email}
                             Welcome to Appwrite
                         {:else}
                             Welcome, {$user.name}
                         {/if}</Typography.Title>
-                    <Typography.Text size="m" color="--color-fgcolor-neutral-secondary"
+                    <Typography.Text size="m" color="--fgcolor-neutral-secondary"
                         >Follow a few quick steps to get started with Appwrite</Typography.Text>
                 </Layout.Stack>
                 <div class="dashboard-header-button">
diff --git a/src/routes/(console)/project-[project]/overview/onboard.svelte b/src/routes/(console)/project-[project]/overview/onboard.svelte
index 01c7f36a6..106aad1a6 100644
--- a/src/routes/(console)/project-[project]/overview/onboard.svelte
+++ b/src/routes/(console)/project-[project]/overview/onboard.svelte
@@ -79,7 +79,7 @@
                 <Step.List>
                     <Step.Item state="previous"
                         ><div>
-                            <Typography.Title color="--color-fgcolor-neutral-tertiary" size="s"
+                            <Typography.Title color="--fgcolor-neutral-tertiary" size="s"
                                 >Create project</Typography.Title>
                         </div></Step.Item>
                     <Step.Item state="current">
@@ -88,9 +88,8 @@
                             gap={$isSmallViewport ? 'xl' : 'xxl'}>
                             <div class="step-info">
                                 <Layout.Stack gap="m">
-                                    <Typography.Title
-                                        color="--color-fgcolor-neutral-primary"
-                                        size="s">Connect your platform</Typography.Title>
+                                    <Typography.Title color="--fgcolor-neutral-primary" size="s"
+                                        >Connect your platform</Typography.Title>
                                     <div class="build-info">
                                         <span>
                                             Start building with your preferred web, mobile, and
@@ -355,7 +354,7 @@
                         </Layout.Stack></Step.Item>
                     <Step.Item state="next"
                         ><div>
-                            <Typography.Title color="--color-fgcolor-neutral-tertiary" size="s"
+                            <Typography.Title color="--fgcolor-neutral-tertiary" size="s"
                                 >Build your app</Typography.Title>
                         </div></Step.Item>
                 </Step.List>
@@ -363,12 +362,12 @@
                 <Step.List>
                     <Step.Item state="previous"
                         ><div>
-                            <Typography.Title color="--color-fgcolor-neutral-tertiary" size="s"
+                            <Typography.Title color="--fgcolor-neutral-tertiary" size="s"
                                 >Create project</Typography.Title>
                         </div></Step.Item>
                     <Step.Item state="previous"
                         ><div>
-                            <Typography.Title color="--color-fgcolor-neutral-tertiary" size="s"
+                            <Typography.Title color="--fgcolor-neutral-tertiary" size="s"
                                 >Connect your platform</Typography.Title>
                         </div></Step.Item>
                     <Step.Item state="current">
@@ -377,9 +376,8 @@
                             gap={$isSmallViewport ? 'xl' : 'xxl'}>
                             <div class="step-info">
                                 <Layout.Stack gap="m">
-                                    <Typography.Title
-                                        color="--color-fgcolor-neutral-primary"
-                                        size="s">Build your app</Typography.Title>
+                                    <Typography.Title color="--fgcolor-neutral-primary" size="s"
+                                        >Build your app</Typography.Title>
                                     <div class="build-info">
                                         <span>
                                             Continue building your app by setting up services such
@@ -547,7 +545,7 @@
                                                     justifyContent="space-between">
                                                     <Typography.Text
                                                         size="m"
-                                                        color="--color-fgcolor-neutral-secondary">
+                                                        color="--fgcolor-neutral-secondary">
                                                         Join our Discord for support, tips and
                                                         product updates</Typography.Text>
                                                     <div class="arrow-icon arrow-icon-discord">
@@ -643,7 +641,7 @@
         }
 
         .arrow-icon {
-            color: var(--color-border-neutral-strong);
+            color: var(--border-neutral-strong);
             display: none;
             @media (min-width: 768px) {
                 display: flex;
diff --git a/src/routes/(console)/project-[project]/overview/platforms/components/OnboardingPlatformCard.svelte b/src/routes/(console)/project-[project]/overview/platforms/components/OnboardingPlatformCard.svelte
index 126a08b6e..2252c4c33 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/components/OnboardingPlatformCard.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/components/OnboardingPlatformCard.svelte
@@ -57,7 +57,7 @@
 
         & .inner-card {
             border: 0.54px solid rgba(237, 237, 240, 0.08);
-            background: var(--color-bgColor-neutral-primary, #1d1d21);
+            background: var(--bgcolor-neutral-primary, #1d1d21);
         }
     }
 </style>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte b/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
index 99bde4591..1539fd4fa 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
@@ -133,9 +133,7 @@ const val APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
                             gap="xs">
                             <Layout.Stack direction="row" alignItems="center" gap="s">
                                 <Icon size="m" icon={IconAndroid} />
-                                <Typography.Text
-                                    variant="m-400"
-                                    color="--color-fgcolor-neutral-primary">
+                                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
                                     {$createPlatform.name} ({$createPlatform.key})
                                 </Typography.Text>
                             </Layout.Stack>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte b/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte
index 2370f0c52..111f9d167 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte
@@ -161,9 +161,7 @@ APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject.client.config.endpoint}"
                             gap="xs">
                             <Layout.Stack direction="row" alignItems="center" gap="s">
                                 <Icon size="m" icon={IconApple} />
-                                <Typography.Text
-                                    variant="m-400"
-                                    color="--color-fgcolor-neutral-primary">
+                                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
                                     {$createPlatform.name} ({$createPlatform.key})
                                 </Typography.Text>
                             </Layout.Stack>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte b/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
index 5180b6adc..70e949d8c 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
@@ -217,9 +217,7 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.e
                             gap="xs">
                             <Layout.Stack direction="row" alignItems="center" gap="s">
                                 <Icon size="m" icon={IconFlutter} />
-                                <Typography.Text
-                                    variant="m-400"
-                                    color="--color-fgcolor-neutral-primary">
+                                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
                                     {$createPlatform.name} ({$createPlatform.key})
                                 </Typography.Text>
                             </Layout.Stack>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte b/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte
index 46f273c89..1f4031806 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte
@@ -187,9 +187,7 @@ const APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}";
                             gap="xs">
                             <Layout.Stack direction="row" alignItems="center" gap="s">
                                 <Icon size="m" icon={IconReact} />
-                                <Typography.Text
-                                    variant="m-400"
-                                    color="--color-fgcolor-neutral-primary">
+                                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
                                     {$createPlatform.name} ({$createPlatform.key})
                                 </Typography.Text>
                             </Layout.Stack>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte b/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
index 5acb0e972..bba4cecc2 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
@@ -271,9 +271,9 @@ APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
                         ><Layout.Stack direction="row" alignItems="center">
                             <Icon
                                 icon={IconInfo}
-                                color="--color-fgcolor-neutral-tertiary" /><Typography.Text
+                                color="--fgcolor-neutral-tertiary" /><Typography.Text
                                 variant="m-500"
-                                color="--color-fgcolor-neutral-primary">
+                                color="--fgcolor-neutral-primary">
                                 Demo app runs on http://localhost:{selectedFramework.portNumber}</Typography.Text
                             ></Layout.Stack>
                         <Button.Anchor
@@ -283,7 +283,7 @@ APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
                             ><Layout.Stack direction="row" gap="xs"
                                 >Open <Icon
                                     icon={IconExternalLink}
-                                    color="--color-fgcolor-neutral-tertiary" /></Layout.Stack
+                                    color="--fgcolor-neutral-tertiary" /></Layout.Stack
                             ></Button.Anchor
                         ></Layout.Stack
                     ></Card.Base>
diff --git a/src/routes/(console)/project-[project]/settings/header.svelte b/src/routes/(console)/project-[project]/settings/header.svelte
index afa356752..8b69304d6 100644
--- a/src/routes/(console)/project-[project]/settings/header.svelte
+++ b/src/routes/(console)/project-[project]/settings/header.svelte
@@ -51,8 +51,7 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <Typography.Title color="--color-fgcolor-neutral-primary" size="xl"
-            >Settings</Typography.Title>
+        <Typography.Title color="--fgcolor-neutral-primary" size="xl">Settings</Typography.Title>
     </svelte:fragment>
 
     <Tabs>
diff --git a/src/routes/(console)/project-[project]/settings/migrations/+page.svelte b/src/routes/(console)/project-[project]/settings/migrations/+page.svelte
index ba27abdee..46566c1e6 100644
--- a/src/routes/(console)/project-[project]/settings/migrations/+page.svelte
+++ b/src/routes/(console)/project-[project]/settings/migrations/+page.svelte
@@ -183,15 +183,12 @@
                 <Layout.Stack alignItems="center" gap="xl">
                     <Layout.Stack alignItems="center">
                         <AvatarGroup
-                            --icon-fill="var(--color-fgcolor-neutral-tertiary)"
+                            --icon-fill="var(--fgcolor-neutral-tertiary)"
                             icons={[IconUserGroup, IconDatabase, IconLightningBolt, IconFolder]}
                             size="s" />
                         <Arrow direction="down" />
                         <Avatar alt="appwrite" size="s">
-                            <Icon
-                                icon={IconCloud}
-                                size="s"
-                                color="--color-fgcolor-neutral-tertiary" />
+                            <Icon icon={IconCloud} size="s" color="--fgcolor-neutral-tertiary" />
                         </Avatar>
                     </Layout.Stack>
                     <Button
@@ -217,17 +214,11 @@
                 <Layout.Stack alignItems="center" gap="xl">
                     <Layout.Stack direction="row" justifyContent="center" alignItems="center">
                         <Avatar alt="appwrite" size="s">
-                            <Icon
-                                icon={IconServer}
-                                size="s"
-                                color="--color-fgcolor-neutral-tertiary" />
+                            <Icon icon={IconServer} size="s" color="--fgcolor-neutral-tertiary" />
                         </Avatar>
                         <Arrow direction="right" />
                         <Avatar alt="appwrite" size="s">
-                            <Icon
-                                icon={IconCloud}
-                                size="s"
-                                color="--color-fgcolor-neutral-tertiary" />
+                            <Icon icon={IconCloud} size="s" color="--fgcolor-neutral-tertiary" />
                         </Avatar>
                     </Layout.Stack>
                     <div>
@@ -250,17 +241,11 @@
                 <Layout.Stack alignItems="center" gap="xl">
                     <Layout.Stack direction="row" justifyContent="center" alignItems="center">
                         <Avatar alt="appwrite" size="s">
-                            <Icon
-                                icon={IconCloud}
-                                size="s"
-                                color="--color-fgcolor-neutral-tertiary" />
+                            <Icon icon={IconCloud} size="s" color="--fgcolor-neutral-tertiary" />
                         </Avatar>
                         <Arrow direction="right" />
                         <Avatar alt="appwrite" size="s">
-                            <Icon
-                                icon={IconServer}
-                                size="s"
-                                color="--color-fgcolor-neutral-tertiary" />
+                            <Icon icon={IconServer} size="s" color="--fgcolor-neutral-tertiary" />
                         </Avatar>
                     </Layout.Stack>
                     <div>
diff --git a/src/routes/(console)/project-[project]/settings/migrations/details.svelte b/src/routes/(console)/project-[project]/settings/migrations/details.svelte
index 182b7a1e7..1219e2963 100644
--- a/src/routes/(console)/project-[project]/settings/migrations/details.svelte
+++ b/src/routes/(console)/project-[project]/settings/migrations/details.svelte
@@ -131,7 +131,7 @@
             padding: 1.25rem;
 
             &:not(:last-child) {
-                border-bottom: 1px solid hsl(var(--color-border));
+                border-bottom: 1px solid hsl(var(--border));
             }
         }
     }
diff --git a/src/routes/(console)/project-[project]/sites/(components)/deploymentDomains.svelte b/src/routes/(console)/project-[project]/sites/(components)/deploymentDomains.svelte
index 378a6ed3a..164739bce 100644
--- a/src/routes/(console)/project-[project]/sites/(components)/deploymentDomains.svelte
+++ b/src/routes/(console)/project-[project]/sites/(components)/deploymentDomains.svelte
@@ -14,7 +14,7 @@
         <Link external href={`${$protocol}${domains.rules[0]?.domain}`} variant="muted">
             <Layout.Stack gap="xxs" direction="row" alignItems="center">
                 <Trim alternativeTrim>
-                    <Typography.Text variant="m-400" color="--color-fgcolor-neutral-primary">
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
                         {domains.rules[0]?.domain}
                     </Typography.Text>
                 </Trim>
@@ -45,7 +45,7 @@
             </Popover>
         {/if}
     {:else}
-        <Typography.Text variant="m-400" color="--color-fgcolor-neutral-primary">
+        <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
             No domains available
         </Typography.Text>
     {/if}
diff --git a/src/routes/(console)/project-[project]/sites/(components)/logs.svelte b/src/routes/(console)/project-[project]/sites/(components)/logs.svelte
index 71fc61bf2..5129ed64b 100644
--- a/src/routes/(console)/project-[project]/sites/(components)/logs.svelte
+++ b/src/routes/(console)/project-[project]/sites/(components)/logs.svelte
@@ -81,7 +81,7 @@
     {#if !hideTitle}
         <Layout.Stack direction="row" justifyContent="space-between">
             <Layout.Stack direction="row" alignItems="center" gap="s" inline>
-                <Typography.Text variant="m-500" color="--color-fgcolor-neutral-primary">
+                <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
                     Deployment logs
                 </Typography.Text>
                 <Badge
diff --git a/src/routes/(console)/project-[project]/sites/(components)/logsTimer.svelte b/src/routes/(console)/project-[project]/sites/(components)/logsTimer.svelte
index e8f2c25b8..927dd70da 100644
--- a/src/routes/(console)/project-[project]/sites/(components)/logsTimer.svelte
+++ b/src/routes/(console)/project-[project]/sites/(components)/logsTimer.svelte
@@ -11,14 +11,14 @@
 
 <Layout.Stack direction="row" alignItems="center" inline>
     {#if ['processing', 'building'].includes(status)}
-        <Typography.Code color="--color-fgcolor-neutral-secondary">
+        <Typography.Code color="--fgcolor-neutral-secondary">
             <Layout.Stack direction="row" alignItems="center" inline>
                 <p use:timer={{ start: deployment.$createdAt }} />
                 <Spinner size="s" />
             </Layout.Stack>
         </Typography.Code>
     {:else}
-        <Typography.Code color="--color-fgcolor-neutral-secondary">
+        <Typography.Code color="--fgcolor-neutral-secondary">
             {formatTimeDetailed(deployment.buildTime)}
         </Typography.Code>
     {/if}
diff --git a/src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte b/src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte
index a6ef905d9..6cd457643 100644
--- a/src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte
+++ b/src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte
@@ -70,7 +70,7 @@
             <Layout.Stack gap="xl">
                 <Layout.Stack direction="row" alignItems="flex-start">
                     <Layout.Stack gap="xxs">
-                        <Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
+                        <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
                             Domains
                         </Typography.Text>
                         <DeploymentDomains domains={proxyRuleList} />
@@ -85,27 +85,19 @@
                 <Layout.Stack direction="row" gap="xl">
                     {#if deployment.status === 'failed'}
                         <Layout.Stack gap="xxs" inline>
-                            <Typography.Text
-                                variant="m-400"
-                                color="--color-fgcolor-neutral-tertiary">
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
                                 Status
                             </Typography.Text>
-                            <Typography.Text
-                                variant="m-400"
-                                color="--color-fgcolor-neutral-primary">
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
                                 <Status status={deployment.status} label={deployment.status} />
                             </Typography.Text>
                         </Layout.Stack>
                     {:else}
                         <Layout.Stack gap="xxs" inline>
-                            <Typography.Text
-                                variant="m-400"
-                                color="--color-fgcolor-neutral-tertiary">
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
                                 Deployed
                             </Typography.Text>
-                            <Typography.Text
-                                variant="m-400"
-                                color="--color-fgcolor-neutral-primary">
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
                                 <DeploymentCreatedBy {deployment} />
                             </Typography.Text>
                         </Layout.Stack>
@@ -116,36 +108,26 @@
                     <Layout.Stack gap="xxl" direction="row" wrap="wrap" inline>
                         {#if deployment?.buildTime}
                             <Layout.Stack gap="xxs" inline>
-                                <Typography.Text
-                                    variant="m-400"
-                                    color="--color-fgcolor-neutral-tertiary">
+                                <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
                                     Build time
                                 </Typography.Text>
-                                <Typography.Text
-                                    variant="m-400"
-                                    color="--color-fgcolor-neutral-primary">
+                                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
                                     {formatTimeDetailed(deployment.buildTime)}
                                 </Typography.Text>
                             </Layout.Stack>
                         {/if}
                         <Layout.Stack gap="xxs" inline>
-                            <Typography.Text
-                                variant="m-400"
-                                color="--color-fgcolor-neutral-tertiary">
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
                                 Total size
                             </Typography.Text>
-                            <Typography.Text
-                                variant="m-400"
-                                color="--color-fgcolor-neutral-primary">
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
                                 {totalSize.value}{totalSize.unit}
                             </Typography.Text>
                         </Layout.Stack>
                     </Layout.Stack>
                     <Layout.Stack gap="xxl" direction="row" wrap="wrap" inline>
                         <Layout.Stack gap="xxs" inline>
-                            <Typography.Text
-                                variant="m-400"
-                                color="--color-fgcolor-neutral-tertiary">
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
                                 <Layout.Stack direction="row" gap="xxs" alignItems="center">
                                     Global CDN <Tooltip>
                                         <Icon icon={IconInfo} size="s" />
@@ -165,9 +147,7 @@
                             </Layout.Stack>
                         </Layout.Stack>
                         <Layout.Stack gap="xxs" inline>
-                            <Typography.Text
-                                variant="m-400"
-                                color="--color-fgcolor-neutral-tertiary">
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
                                 <Layout.Stack direction="row" gap="xxs" alignItems="center">
                                     DDoS protection <Tooltip>
                                         <Icon icon={IconInfo} size="s" />
@@ -189,10 +169,10 @@
                     </Layout.Stack>
                 </Layout.Stack>
                 <Layout.Stack gap="xxs">
-                    <Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
                         Source
                     </Typography.Text>
-                    <Typography.Text variant="m-400" color="--color-fgcolor-neutral-primary">
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
                         <DeploymentSource {deployment} />
                     </Typography.Text>
                 </Layout.Stack>
diff --git a/src/routes/(console)/project-[project]/sites/create-site/aside.svelte b/src/routes/(console)/project-[project]/sites/create-site/aside.svelte
index 0029ab4e5..4a5316147 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/aside.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/aside.svelte
@@ -22,8 +22,8 @@
                 <Layout.Stack gap="xxxs">
                     <Typography.Caption variant="400">Git repository</Typography.Caption>
                     <Layout.Stack gap="xxs" alignItems="center" direction="row">
-                        <Icon size="s" icon={IconGithub} color="--color-fgcolor-neutral-primary" />
-                        <Typography.Text variant="m-500" color="--color-fgcolor-neutral-primary">
+                        <Icon size="s" icon={IconGithub} color="--fgcolor-neutral-primary" />
+                        <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
                             {repositoryName}
                         </Typography.Text>
                     </Layout.Stack>
@@ -33,11 +33,8 @@
                 <Layout.Stack gap="xxxs">
                     <Typography.Caption variant="400">Branch</Typography.Caption>
                     <Layout.Stack gap="xxs" alignItems="center" direction="row">
-                        <Icon
-                            size="s"
-                            icon={IconGitBranch}
-                            color="--color-fgcolor-neutral-primary" />
-                        <Typography.Text variant="m-500" color="--color-fgcolor-neutral-primary">
+                        <Icon size="s" icon={IconGitBranch} color="--fgcolor-neutral-primary" />
+                        <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
                             {branch}
                         </Typography.Text>
                     </Layout.Stack>
@@ -47,7 +44,7 @@
             {#if rootDir && showAfter}
                 <Layout.Stack gap="xxxs">
                     <Typography.Caption variant="400">Root directory</Typography.Caption>
-                    <Typography.Text variant="m-500" color="--color-fgcolor-neutral-primary">
+                    <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
                         {rootDir}
                     </Typography.Text>
                 </Layout.Stack>
@@ -60,7 +57,7 @@
                         {#if frameworkIcon}
                             <SvgIcon iconSize="small" size={16} name={frameworkIcon} />
                         {/if}
-                        <Typography.Text variant="m-500" color="--color-fgcolor-neutral-primary">
+                        <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
                             {framework.name}
                         </Typography.Text>
                     </Layout.Stack>
@@ -71,7 +68,7 @@
                 <Layout.Stack gap="xxxs">
                     <Typography.Caption variant="400">Domain</Typography.Caption>
 
-                    <Typography.Text variant="m-500" color="--color-fgcolor-neutral-primary">
+                    <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
                         {#key domain}
                             <Trim alternativeTrim>
                                 {$consoleVariables._APP_OPTIONS_FORCE_HTTPS
diff --git a/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.svelte
index ce2f40f81..4a21cd5b0 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.svelte
@@ -25,7 +25,7 @@
                         iconSize="small"
                         size={16}
                         name={getFrameworkIcon(data.site.framework)} />
-                    <Typography.Text variant="m-500" color="--color-fgcolor-neutral-primary">
+                    <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
                         {data.site.name}
                     </Typography.Text>
                     <Tag variant="code" size="xs">{data.site.$id}</Tag>
@@ -47,7 +47,7 @@
     <svelte:fragment slot="footer">
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
             {#if ['processing', 'building'].includes(data.deployment.status)}
-                <Typography.Text variant="m-400" color="--color-fgColor-neutral-tertiary">
+                <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
                     Deployment will continue in the background
                 </Typography.Text>
             {/if}
diff --git a/src/routes/(console)/project-[project]/sites/create-site/domain.svelte b/src/routes/(console)/project-[project]/sites/create-site/domain.svelte
index 412083359..cb4adc489 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/domain.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/domain.svelte
@@ -36,7 +36,7 @@
             <Layout.Stack gap="s">
                 <InputText id="domain" placeholder="my-domain" bind:value={domain}>
                     <svelte:fragment slot="end">
-                        <Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
+                        <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
                             .{$consoleVariables._APP_DOMAIN_SITES}
                         </Typography.Text>
                     </svelte:fragment>
@@ -64,7 +64,7 @@
 {:else}
     <Card isTile padding="s" radius="s">
         <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
-            <Typography.Text variant="m-400" color="--color-fgcolor-neutral-primary">
+            <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
                 <Layout.Stack direction="row" gap="s" alignItems="center">
                     <span class="icon-globe-alt"></span>
                     {domain}.{$consoleVariables._APP_DOMAIN_SITES}
diff --git a/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/check.svelte b/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/check.svelte
index 2eedee9f1..437f76cab 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/check.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/check.svelte
@@ -15,7 +15,7 @@
                 cx="10"
                 cy="10"
                 r="8"
-                fill="var(--color-bgcolor-accent)"
+                fill="var(--bgcolor-accent)"
                 fill-opacity=".08"
                 in:fade={{ duration: 250, delay: 1000 }} />
             <circle
@@ -25,7 +25,7 @@
                 cx="10"
                 cy="10"
                 r="8"
-                stroke="var(--color-bgcolor-accent)"
+                stroke="var(--bgcolor-accent)"
                 stroke-linecap="round"
                 stroke-linejoin="round"
                 stroke-opacity=".32"
@@ -33,7 +33,7 @@
         </g>
         <path
             in:draw={{ duration: 1000 }}
-            stroke="var(--color-fgcolor-accent)"
+            stroke="var(--fgcolor-accent)"
             stroke-linecap="round"
             stroke-linejoin="round"
             stroke-width="1.2"
diff --git a/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte
index 467f73c8c..1b76cda09 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte
@@ -80,7 +80,7 @@
                                             <Icon
                                                 icon={IconArrowSmRight}
                                                 size="l"
-                                                color="--color-fgcolor-neutral-weak" />
+                                                color="--fgcolor-neutral-weak" />
                                         </Layout.Stack>
                                         <Typography.Text variant="m-400">
                                             Connect to a new repository or an existing one.
@@ -101,7 +101,7 @@
                                         <Icon
                                             icon={IconArrowSmRight}
                                             size="l"
-                                            color="--color-fgcolor-neutral-weak" />
+                                            color="--fgcolor-neutral-weak" />
                                     </Layout.Stack>
                                     <Typography.Text variant="m-400">
                                         Connect to an existing domain or add a new one.
@@ -121,7 +121,7 @@
                                         <Icon
                                             icon={IconArrowSmRight}
                                             size="l"
-                                            color="--color-fgcolor-neutral-weak" />
+                                            color="--fgcolor-neutral-weak" />
                                     </Layout.Stack>
                                     <Typography.Text variant="m-400">
                                         Share your progress and start collaborating with your team.
@@ -141,7 +141,7 @@
                                         <Icon
                                             icon={IconArrowSmRight}
                                             size="l"
-                                            color="--color-fgcolor-neutral-weak" />
+                                            color="--fgcolor-neutral-weak" />
                                     </Layout.Stack>
                                     <Typography.Text variant="m-400">
                                         Open the preview of your site on any mobile or tablet
diff --git a/src/routes/(console)/project-[project]/sites/create-site/repositories/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/repositories/+page.svelte
index b3c069239..0f0c93336 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/repositories/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/repositories/+page.svelte
@@ -59,7 +59,7 @@
                         secondary>View templates</Button>
                 {:else}
                     <Layout.Stack gap="s">
-                        <Typography.Text variation="m-500" color="--color-fgcolor-neutral-primary">
+                        <Typography.Text variation="m-500" color="--fgcolor-neutral-primary">
                             Missing a repository?
                         </Typography.Text>
                         <Typography.Text variation="m-400">
diff --git a/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte
index 6bb5ff475..8a5751361 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte
@@ -164,8 +164,8 @@
                     alignItems="center"
                     gap="xs">
                     <Layout.Stack direction="row" alignItems="center" gap="xs">
-                        <Icon icon={IconGithub} color="--color-fgcolor-neutral-primary" />
-                        <Typography.Text variation="m-500" color="--color-fgcolor-neutral-primary">
+                        <Icon icon={IconGithub} color="--fgcolor-neutral-primary" />
+                        <Typography.Text variation="m-500" color="--fgcolor-neutral-primary">
                             {data.repository?.organization}/{data.repository?.name}
                         </Typography.Text>
                     </Layout.Stack>
diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte
index 562ac8d49..3106756fc 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte
@@ -228,9 +228,7 @@
                             gap="xs">
                             <Layout.Stack direction="row" alignItems="center" gap="s">
                                 <Icon size="s" icon={IconGithub} />
-                                <Typography.Text
-                                    variant="m-400"
-                                    color="--color-fgcolor-neutral-primary">
+                                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
                                     {$repository.name}
                                 </Typography.Text>
                             </Layout.Stack>
@@ -339,10 +337,7 @@
         <Aside {framework} {repositoryName} {branch} {rootDir} showAfter={showSiteConfig}>
             <Layout.Stack>
                 <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
-                    <Typography.Text
-                        variant="m-500"
-                        truncate
-                        color="--color-fgcolor-neutral-primary">
+                    <Typography.Text variant="m-500" truncate color="--fgcolor-neutral-primary">
                         {name || data.template.name}
                     </Typography.Text>
                     {#if data?.template?.demoUrl}
diff --git a/src/routes/(console)/project-[project]/sites/createSiteModal.svelte b/src/routes/(console)/project-[project]/sites/createSiteModal.svelte
index 56d81324c..91f82f9f4 100644
--- a/src/routes/(console)/project-[project]/sites/createSiteModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/createSiteModal.svelte
@@ -28,7 +28,7 @@
                     src={$app?.themeInUse === 'dark' ? TemplateDark : TemplateLight} />
                 <Layout.Stack gap="s">
                     <Typography.Text variant="m-600">Clone a template</Typography.Text>
-                    <Typography.Text variant="m-400" color="--color-fgcolor-neutral-secondary">
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
                         Clone a pre-built template to quickly set up your site
                     </Typography.Text>
                 </Layout.Stack>
@@ -48,14 +48,14 @@
 
                 <Layout.Stack gap="s">
                     <Typography.Text variant="m-600">Connect a repository</Typography.Text>
-                    <Typography.Text variant="m-400" color="--color-fgcolor-neutral-secondary">
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
                         Connect to one of your existing Git repositories
                     </Typography.Text>
                 </Layout.Stack>
             </Card>
         </div>
     </Layout.Stack>
-    <Typography.Text variant="m-400" color="--color-fgcolor-neutral-secondary">
+    <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
         Or simply drag and drop your files to create a site <Link
             variant="muted"
             href={`${base}/project-${$page.params.project}/sites/create-site/manual`}>
diff --git a/src/routes/(console)/project-[project]/sites/header.svelte b/src/routes/(console)/project-[project]/sites/header.svelte
index bc19b783c..cceb09953 100644
--- a/src/routes/(console)/project-[project]/sites/header.svelte
+++ b/src/routes/(console)/project-[project]/sites/header.svelte
@@ -25,7 +25,7 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <Typography.Title color="--color-fgcolor-neutral-primary" size="xl">Sites</Typography.Title>
+        <Typography.Title color="--fgcolor-neutral-primary" size="xl">Sites</Typography.Title>
     </svelte:fragment>
 
     <Tabs variant="primary" let:root>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte
index 8317d6906..35a10ebb7 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte
@@ -76,7 +76,7 @@
                                     {#if $tags?.length}
                                         <!-- TODO: add vertical divider to pink 2 -->
                                         <div
-                                            style="flex-basis:1px; background-color:hsl(var(--color-border)); width: 1px">
+                                            style="flex-basis:1px; background-color:hsl(var(--border)); width: 1px">
                                         </div>
                                         <Button text on:click={clearAll} size="s">Clear all</Button>
                                     {/if}
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte
index 223784b0b..d65935c77 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte
@@ -137,7 +137,7 @@
                             </Layout.Stack>
                         </Link>
                     </Layout.Stack>
-                    <Typography.Caption variant="400" color="--color-fgcolor-neutral-tertiary">
+                    <Typography.Caption variant="400" color="--fgcolor-neutral-tertiary">
                         Last updated {timeFromNow($repository?.pushedAt)}
                     </Typography.Caption>
                 </Layout.Stack>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte
index cba71c916..b7f41fc18 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte
@@ -77,7 +77,7 @@
 
 <Layout.Stack gap="xl">
     <Layout.Stack direction="row" justifyContent="space-between" alignItems="flex-end" wrap="wrap">
-        <Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
+        <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
             Metrics for {range !== SiteUsageRange.TwentyFourHours
                 ? `${toLocaleDate(
                       new Date(
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deploymentsOverview.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deploymentsOverview.svelte
index d1b1b9330..38451a9f6 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deploymentsOverview.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deploymentsOverview.svelte
@@ -31,7 +31,7 @@
 <Layout.Stack style="overflow-x: auto;">
     <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
         <Layout.Stack gap="xs" direction="row" alignItems="center" inline>
-            <Typography.Text variant="l-500" color="--color-fgcolor-neutral-primary">
+            <Typography.Text variant="l-500" color="--fgcolor-neutral-primary">
                 Deployments
             </Typography.Text><Badge
                 variant="secondary"
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/domains/recordsCard.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/domains/recordsCard.svelte
index 1831e9cc3..b26bbf8b9 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/domains/recordsCard.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/domains/recordsCard.svelte
@@ -38,8 +38,8 @@
                 </Table.Row>
             </Table.Root>
             <Layout.Stack gap="s" direction="row" alignItems="center">
-                <Icon icon={IconInfo} size="s" color="--color-fgcolor-neutral-secondary" />
-                <Typography.Text variant="m-400" color="--color-fgcolor-neutral-secondary">
+                <Icon icon={IconInfo} size="s" color="--fgcolor-neutral-secondary" />
+                <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
                     A list of all domain providers and their DNS setting is available <Link
                         variant="muted"
                         href="#">here</Link
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/domainsOverview.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/domainsOverview.svelte
index e9db49008..a71794617 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/domainsOverview.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/domainsOverview.svelte
@@ -26,7 +26,7 @@
 <Layout.Stack>
     <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
         <Layout.Stack gap="xs" direction="row" alignItems="center" inline>
-            <Typography.Text variant="l-500" color="--color-fgcolor-neutral-primary">
+            <Typography.Text variant="l-500" color="--fgcolor-neutral-primary">
                 Domains
             </Typography.Text>
             <Badge variant="secondary" content={proxyRuleList?.total.toString()} size="s" />
@@ -45,7 +45,7 @@
                         <Typography.Text variant="m-500">
                             Add your first custom domain
                         </Typography.Text>
-                        <Typography.Caption variant="500" color="--color-fgcolor-neutral-tertiary">
+                        <Typography.Caption variant="500" color="--fgcolor-neutral-tertiary">
                             Personalize your site and enhance its accessibility and branding with a
                             unique domain.
                         </Typography.Caption>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/instantRollbackModal.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/instantRollbackModal.svelte
index c2ee374a1..4389c04d0 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/instantRollbackModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/instantRollbackModal.svelte
@@ -86,7 +86,7 @@
                     </Layout.Stack>
 
                     <Layout.Stack direction="row" alignItems="center" gap="s">
-                        <Typography.Caption variant="400" color="--color-fgcolor-neutral-secondary">
+                        <Typography.Caption variant="400" color="--fgcolor-neutral-secondary">
                             <Status status="ready">{capitalize(deployment.status)}</Status>
                         </Typography.Caption>
                         <svg
@@ -97,7 +97,7 @@
                             fill="none">
                             <circle cx="1" cy="1.5" r="1" fill="currentColor" />
                         </svg>
-                        <Typography.Caption variant="400" color="--color-fgcolor-neutral-secondary">
+                        <Typography.Caption variant="400" color="--fgcolor-neutral-secondary">
                             {calculateSize(deployment.size)}
                         </Typography.Caption>
                         <svg
@@ -108,7 +108,7 @@
                             fill="none">
                             <circle cx="1" cy="1.5" r="1" fill="currentColor" />
                         </svg>
-                        <Typography.Caption variant="400" color="--color-fgcolor-neutral-secondary">
+                        <Typography.Caption variant="400" color="--fgcolor-neutral-secondary">
                             Created {timeFromNow(deployment.$createdAt)}
                             {#if deployment?.providerCommitAuthorUrl && deployment?.providerCommitAuthor}
                                 by <Link href={deployment.providerCommitAuthorUrl} external
@@ -130,9 +130,7 @@
                         bind:group={selectedDeploymentId}
                         value={prodDeployment.$id}>
                         <Layout.Stack gap="s">
-                            <Typography.Caption
-                                variant="400"
-                                color="--color-fgcolor-neutral-secondary">
+                            <Typography.Caption variant="400" color="--fgcolor-neutral-secondary">
                                 Created {timeFromNow(prodDeployment.$createdAt)}
                                 {#if prodDeployment?.providerCommitAuthorUrl && prodDeployment?.providerCommitAuthor}
                                     by <Link href={prodDeployment.providerCommitAuthorUrl} external
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/logs/(components)/LogsRequest.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/logs/(components)/LogsRequest.svelte
index 33167671b..316a3aea9 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/logs/(components)/LogsRequest.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/logs/(components)/LogsRequest.svelte
@@ -84,8 +84,8 @@
             </Table.Root>
             <p>
                 <Layout.Stack direction="row" gap="xs" alignItems="center">
-                    <Icon icon={IconInfo} size="s" color="--color-fgcolor-neutral-secondary" /> Missing
-                    headers? Check our docs to see the supported data and how to log it.
+                    <Icon icon={IconInfo} size="s" color="--fgcolor-neutral-secondary" /> Missing headers?
+                    Check our docs to see the supported data and how to log it.
                 </Layout.Stack>
             </p>
         {:else}
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/logs/(components)/LogsResponse.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/logs/(components)/LogsResponse.svelte
index 8a5ddbd60..a1f199a81 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/logs/(components)/LogsResponse.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/logs/(components)/LogsResponse.svelte
@@ -66,8 +66,8 @@
             </Table.Root>
             <p>
                 <Layout.Stack direction="row" gap="xs" alignItems="center">
-                    <Icon icon={IconInfo} size="s" color="--color-fgcolor-neutral-secondary" /> Missing
-                    headers? Check our docs to see the supported data and how to log it.
+                    <Icon icon={IconInfo} size="s" color="--fgcolor-neutral-secondary" /> Missing headers?
+                    Check our docs to see the supported data and how to log it.
                 </Layout.Stack>
             </p>
         {:else}
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/logs/sheet.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/logs/sheet.svelte
index fe0ecdf5b..6bc7648dd 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/logs/sheet.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/logs/sheet.svelte
@@ -67,9 +67,7 @@
                 <Layout.Stack gap="xl">
                     <Layout.Stack direction="row" gap="xxxl">
                         <Layout.Stack gap="xs" inline>
-                            <Typography.Text
-                                variant="m-400"
-                                color="--color-fgcolor-neutral-tertiary">
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
                                 Method
                             </Typography.Text>
                             <Typography.Text variant="m-400">
@@ -77,9 +75,7 @@
                             </Typography.Text>
                         </Layout.Stack>
                         <Layout.Stack gap="xs" inline>
-                            <Typography.Text
-                                variant="m-400"
-                                color="--color-fgcolor-neutral-tertiary">
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
                                 Status code
                             </Typography.Text>
                             <span>
@@ -92,9 +88,7 @@
                             </span>
                         </Layout.Stack>
                         <Layout.Stack gap="xs" inline>
-                            <Typography.Text
-                                variant="m-400"
-                                color="--color-fgcolor-neutral-tertiary">
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
                                 Duration
                             </Typography.Text>
                             <Typography.Text variant="m-400">
@@ -102,9 +96,7 @@
                             </Typography.Text>
                         </Layout.Stack>
                         <Layout.Stack gap="xs" inline>
-                            <Typography.Text
-                                variant="m-400"
-                                color="--color-fgcolor-neutral-tertiary">
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
                                 Created
                             </Typography.Text>
                             <Typography.Text variant="m-400">
@@ -113,7 +105,7 @@
                         </Layout.Stack>
                     </Layout.Stack>
                     <Layout.Stack gap="xs" inline alignItems="flex-start">
-                        <Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
+                        <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
                             Path
                         </Typography.Text>
                         <div>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateRepository.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateRepository.svelte
index b2741acba..c34c73434 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateRepository.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateRepository.svelte
@@ -129,7 +129,7 @@
                             alignItems="center"
                             gap="xs">
                             <Layout.Stack direction="row" gap="s">
-                                <Icon icon={IconGithub} color="--color-fgcolor-neutral-primary" />
+                                <Icon icon={IconGithub} color="--fgcolor-neutral-primary" />
                                 <Layout.Stack gap="xxxs">
                                     <Skeleton variant="line" width={100} height={20} />
                                     <Skeleton variant="line" width={200} height={15} />
@@ -161,16 +161,16 @@
                     <Card isTile padding="xs" radius="s" variant="secondary">
                         <Layout.Stack direction="row" gap="s">
                             <Layout.Stack direction="row" gap="s">
-                                <Icon icon={IconGithub} color="--color-fgcolor-neutral-primary" />
+                                <Icon icon={IconGithub} color="--fgcolor-neutral-primary" />
                                 <Layout.Stack gap="xxxs">
                                     <Typography.Text
                                         variant="m-400"
-                                        color="--color-fgcolor-neutral-primary">
+                                        color="--fgcolor-neutral-primary">
                                         {repository.name}
                                     </Typography.Text>
                                     <Typography.Caption
                                         variant="400"
-                                        color="--color-fgcolor-neutral-tertiary">
+                                        color="--fgcolor-neutral-tertiary">
                                         Last updated: {toLocaleDateTime(repository.pushedAt)}
                                     </Typography.Caption>
                                 </Layout.Stack>
diff --git a/src/routes/(console)/project-[project]/storage/header.svelte b/src/routes/(console)/project-[project]/storage/header.svelte
index efd52a26e..60ce41019 100644
--- a/src/routes/(console)/project-[project]/storage/header.svelte
+++ b/src/routes/(console)/project-[project]/storage/header.svelte
@@ -26,8 +26,7 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <Typography.Title color="--color-fgcolor-neutral-primary" size="xl"
-            >Storage</Typography.Title>
+        <Typography.Title color="--fgcolor-neutral-primary" size="xl">Storage</Typography.Title>
     </svelte:fragment>
     <Tabs>
         {#each tabs as tab}
diff --git a/src/routes/(public)/auth/+layout.svelte b/src/routes/(public)/auth/+layout.svelte
index 9bedea49e..7fa83f589 100644
--- a/src/routes/(public)/auth/+layout.svelte
+++ b/src/routes/(public)/auth/+layout.svelte
@@ -15,9 +15,7 @@
     </div>
     <footer>
         <!-- TODO: change text style to eyebrow -->
-        <Typography.Text size="s" color="--color-fgColor-neutral-secondary">
-            POWERED BY
-        </Typography.Text>
+        <Typography.Text size="s" color="--fgcolor-neutral-secondary">POWERED BY</Typography.Text>
         {#if $app.themeInUse === 'dark'}
             <img
                 src="/console/images/appwrite-logo-dark.svg"
@@ -37,7 +35,7 @@
 <style lang="scss">
     .auth-bg {
         position: fixed;
-        background: var(--color-bgcolor-neutral-primary, #fff);
+        background: var(--bgcolor-neutral-primary, #fff);
         background-size: cover;
         top: 0;
         left: 0;
diff --git a/src/themes/dark-cloud.json b/src/themes/dark-cloud.json
index 3cf55bc71..84e37ca38 100644
--- a/src/themes/dark-cloud.json
+++ b/src/themes/dark-cloud.json
@@ -49,70 +49,75 @@
     "web-green-700": "rgba(10, 113, 79, 100%)",
     "web-orange-500": "rgba(254, 124, 67, 100%)",
     "web-orange-700": "rgba(97, 37, 10, 100%)",
-    "color-fgcolor-neutral-primary": "var(--neutral-50)",
-    "color-fgcolor-neutral-secondary": "var(--neutral-250)",
-    "color-fgcolor-neutral-tertiary": "var(--neutral-500)",
-    "color-bgcolor-neutral-default": "var(--neutral-900)",
-    "color-fgcolor-neutral-weak": "var(--neutral-600)",
-    "color-fgcolor-accent": "var(--neutral-0)",
-    "color-fgcolor-accent-neutral": "var(--neutral-0)",
-    "color-fgcolor-on-accent": "var(--neutral-0)",
-    "color-bgcolor-neutral-primary": "var(--neutral-850)",
-    "color-bgcolor-neutral-secondary": "var(--neutral-800)",
-    "color-fgcolor-success": "var(--web-green-500)",
-    "color-bgcolor-neutral-tertiary": "var(--neutral-800)",
-    "color-bgcolor-neutral-invert": "var(--neutral-25)",
-    "color-bgcolor-neutral-invert-weak": "var(--neutral-300)",
-    "color-bgcolor-neutral-invert-weaker": "var(--neutral-400)",
-    "color-bgcolor-accent": "var(--brand-pink-500)",
-    "color-bgcolor-accent-weak": "rgba(253, 54, 110, 24%)",
-    "color-bgcolor-accent-secondary": "var(--brand-pink-600)",
-    "color-bgcolor-accent-tertiary": "var(--brand-pink-700)",
-    "color-bgcolor-success-weaker": "rgba(16, 185, 129, 16%)",
-    "color-bgcolor-success-weak": "rgba(16, 185, 129, 24%)",
-    "color-bgcolor-success": "var(--web-green-500)",
-    "color-bgcolor-success-strong": "var(--web-green-700)",
-    "color-bgcolor-error-weaker": "rgba(255, 69, 58, 16%)",
-    "color-bgcolor-error-weak": "rgba(255, 69, 58, 28%)",
-    "color-bgcolor-error": "var(--web-red-500)",
-    "color-bgcolor-error-strong": "var(--web-red-700)",
-    "color-bgcolor-warning": "var(--web-orange-500)",
-    "color-bgcolor-warning-weak": "rgba(254, 124, 67, 24%)",
-    "color-bgcolor-warning-weaker": "rgba(254, 124, 67, 16%)",
-    "color-bgcolor-warning-strong": "var(--web-orange-700)",
-    "color-fgcolor-on-success": "var(--neutral-0)",
-    "color-fgcolor-on-success-weak": "var(--web-green-200)",
-    "color-fgcolor-error": "var(--web-red-500)",
-    "color-fgcolor-on-error": "var(--neutral-0)",
-    "color-fgcolor-on-error-weak": "var(--web-red-200)",
-    "color-border-neutral": "var(--neutral-800)",
-    "color-fgcolor-warning": "var(--web-orange-500)",
-    "color-border-neutral-strong": "var(--neutral-750)",
-    "color-fgcolor-on-warning": "var(--neutral-0)",
-    "color-border-neutral-stronger": "var(--neutral-600)",
-    "color-fgcolor-on-warning-weak": "var(--web-orange-200)",
-    "color-border-neutral-strongest": "var(--neutral-0)",
-    "color-border-focus": "var(--neutral-600)",
-    "color-border-accent": "var(--neutral-0)",
-    "color-border-accent-secondary": "var(--neutral-0)",
-    "color-border-success": "var(--web-green-500)",
-    "color-border-success-weak": "rgba(16, 185, 129, 32%)",
-    "color-border-warning": "var(--web-orange-500)",
-    "color-border-warning-weak": "rgba(254, 124, 67, 32%)",
-    "color-border-error": "var(--web-red-500)",
-    "color-border-error-weak": "rgba(255, 69, 58, 32%)",
-    "color-overlay-on-accent": "rgba(255, 255, 255, 32%)",
-    "color-overlay-accent-hover": "rgba(0, 0, 0, 20%)",
-    "color-overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
-    "color-overlay-on-neutral": "rgba(255, 255, 255, 20%)",
-    "color-overlay-neutral-hover": "rgba(255, 255, 255, 4%)",
-    "color-overlay-neutral-pressed": "rgba(255, 255, 255, 8%)",
-    "color-overlay-neutral-selected": "rgba(255, 255, 255, 8%)",
-    "color-overlay-scrim": "rgba(0, 0, 0, 48%)",
-    "color-overlay-skeleton": "rgba(255, 255, 255, 8%)",
-    "gradient-border-button-secondary-bottom": "var(--color-border-neutral-strong)",
-    "gradient-border-button-secondary-top": "var(--color-border-neutral)",
-    "color-fgcolor-on-invert": "var(--neutral-800)",
+    "web-red-800": "rgba(143, 14, 14, 100%)",
+    "web-red-900": "rgba(107, 11, 11, 100%)",
+    "bgcolor-neutral-default": "var(--neutral-900)",
+    "bgcolor-neutral-primary": "var(--neutral-850)",
+    "bgcolor-neutral-secondary": "var(--neutral-800)",
+    "bgcolor-neutral-tertiary": "var(--neutral-800)",
+    "bgcolor-neutral-invert": "var(--neutral-25)",
+    "bgcolor-neutral-invert-weak": "var(--neutral-300)",
+    "bgcolor-neutral-invert-weaker": "var(--neutral-400)",
+    "bgcolor-neutral-invert-weakest": "var(--neutral-750)",
+    "bgcolor-accent": "var(--brand-pink-500)",
+    "bgcolor-accent-weak": "rgba(253, 54, 110, 24%)",
+    "bgcolor-accent-secondary": "var(--brand-pink-600)",
+    "bgcolor-accent-tertiary": "var(--brand-pink-700)",
+    "bgcolor-success-weaker": "rgba(16, 185, 129, 16%)",
+    "bgcolor-success-weak": "rgba(16, 185, 129, 24%)",
+    "bgcolor-success": "var(--web-green-500)",
+    "bgcolor-success-strong": "var(--web-green-700)",
+    "bgcolor-error-weaker": "rgba(255, 69, 58, 16%)",
+    "bgcolor-error-weak": "rgba(255, 69, 58, 28%)",
+    "bgcolor-error": "var(--web-red-500)",
+    "bgcolor-error-strong": "var(--web-red-700)",
+    "bgcolor-warning": "var(--web-orange-500)",
+    "bgcolor-warning-weak": "rgba(254, 124, 67, 24%)",
+    "bgcolor-warning-weaker": "rgba(254, 124, 67, 16%)",
+    "bgcolor-warning-strong": "var(--web-orange-700)",
+    "bgcolor-error-strong-secondary": "var(--web-red-800)",
+    "bgcolor-error-strong-tertiary": "var(--web-red-900)",
+    "fgcolor-neutral-primary": "var(--neutral-50)",
+    "fgcolor-neutral-secondary": "var(--neutral-250)",
+    "fgcolor-neutral-tertiary": "var(--neutral-500)",
+    "fgcolor-neutral-weak": "var(--neutral-600)",
+    "fgcolor-accent": "var(--neutral-0)",
+    "fgcolor-accent-neutral": "var(--neutral-0)",
+    "fgcolor-on-accent": "var(--neutral-0)",
+    "fgcolor-success": "var(--web-green-500)",
+    "fgcolor-on-success": "var(--neutral-0)",
+    "fgcolor-on-success-weak": "var(--web-green-200)",
+    "fgcolor-error": "var(--web-red-500)",
+    "fgcolor-on-error": "var(--neutral-0)",
+    "fgcolor-on-error-weak": "var(--web-red-200)",
+    "fgcolor-warning": "var(--web-orange-500)",
+    "fgcolor-on-warning": "var(--neutral-0)",
+    "fgcolor-on-warning-weak": "var(--web-orange-200)",
+    "fgcolor-on-invert": "var(--neutral-1000)",
+    "border-neutral": "var(--neutral-800)",
+    "border-neutral-strong": "var(--neutral-750)",
+    "border-neutral-stronger": "var(--neutral-600)",
+    "border-neutral-strongest": "var(--neutral-0)",
+    "border-focus": "var(--neutral-600)",
+    "border-accent": "var(--neutral-0)",
+    "border-accent-secondary": "var(--neutral-0)",
+    "border-success": "var(--web-green-500)",
+    "border-success-weak": "rgba(16, 185, 129, 32%)",
+    "border-warning": "var(--web-orange-500)",
+    "border-warning-weak": "rgba(254, 124, 67, 32%)",
+    "border-error": "var(--web-red-500)",
+    "border-error-weak": "rgba(255, 69, 58, 32%)",
+    "overlay-on-accent": "rgba(255, 255, 255, 32%)",
+    "overlay-accent-hover": "rgba(0, 0, 0, 20%)",
+    "overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
+    "overlay-on-neutral": "rgba(255, 255, 255, 20%)",
+    "overlay-neutral-hover": "rgba(255, 255, 255, 4%)",
+    "overlay-neutral-pressed": "rgba(255, 255, 255, 8%)",
+    "overlay-neutral-selected": "rgba(255, 255, 255, 8%)",
+    "overlay-scrim": "rgba(0, 0, 0, 48%)",
+    "overlay-skeleton": "rgba(255, 255, 255, 8%)",
+    "gradient-border-button-secondary-bottom": "var(--border-neutral-strong)",
+    "gradient-border-button-secondary-top": "var(--border-neutral)",
     "font-family-brand": "Aeonik Pro",
     "font-family-sansserif": "Inter",
     "font-family-monospace": "Aeonik Fono",
diff --git a/src/themes/dark.json b/src/themes/dark.json
index 589c49c29..26acb26e1 100644
--- a/src/themes/dark.json
+++ b/src/themes/dark.json
@@ -49,71 +49,75 @@
     "web-green-700": "rgba(10, 113, 79, 100%)",
     "web-orange-500": "rgba(254, 124, 67, 100%)",
     "web-orange-700": "rgba(97, 37, 10, 100%)",
-    "color-fgcolor-neutral-primary": "var(--neutral-50)",
-    "color-fgcolor-neutral-secondary": "var(--neutral-250)",
-    "color-fgcolor-neutral-tertiary": "var(--neutral-500)",
-    "color-bgcolor-neutral-default": "var(--neutral-900)",
-    "color-fgcolor-neutral-weak": "var(--neutral-600)",
-    "color-fgcolor-accent": "var(--neutral-0)",
-    "color-fgcolor-accent-neutral": "var(--neutral-0)",
-    "color-fgcolor-on-accent": "var(--neutral-0)",
-    "color-bgcolor-neutral-primary": "var(--neutral-850)",
-    "color-bgcolor-neutral-secondary": "var(--neutral-800)",
-    "color-fgcolor-success": "var(--web-green-500)",
-    "color-bgcolor-neutral-tertiary": "var(--neutral-800)",
-    "color-bgcolor-neutral-invert": "var(--neutral-25)",
-    "color-bgcolor-neutral-invert-weak": "var(--neutral-300)",
-    "color-bgcolor-neutral-invert-weaker": "var(--neutral-400)",
-    "color-bgcolor-accent": "var(--brand-pink-500)",
-    "color-bgcolor-accent-weak": "rgba(253, 54, 110, 24%)",
-    "color-bgcolor-accent-secondary": "var(--brand-pink-600)",
-    "color-bgcolor-accent-tertiary": "var(--brand-pink-700)",
-    "color-bgcolor-success-weaker": "rgba(16, 185, 129, 16%)",
-    "color-bgcolor-success-weak": "rgba(16, 185, 129, 24%)",
-    "color-bgcolor-success": "var(--web-green-500)",
-    "color-bgcolor-success-strong": "var(--web-green-700)",
-    "color-bgcolor-error-weaker": "rgba(255, 69, 58, 16%)",
-    "color-bgcolor-error-weak": "rgba(255, 69, 58, 28%)",
-    "color-bgcolor-error": "var(--web-red-500)",
-    "color-bgcolor-error-strong": "var(--web-red-700)",
-    "color-bgcolor-warning": "var(--web-orange-500)",
-    "color-bgcolor-warning-weak": "rgba(254, 124, 67, 24%)",
-    "color-bgcolor-warning-weaker": "rgba(254, 124, 67, 16%)",
-    "color-bgcolor-warning-strong": "var(--web-orange-700)",
-    "color-fgcolor-on-success": "var(--neutral-0)",
-    "color-fgcolor-on-success-weak": "var(--web-green-200)",
-    "color-fgcolor-error": "var(--web-red-500)",
-    "color-fgcolor-on-error": "var(--neutral-0)",
-    "color-fgcolor-on-error-weak": "var(--web-red-200)",
-    "color-border-neutral": "var(--neutral-800)",
-    "color-fgcolor-warning": "var(--web-orange-500)",
-    "color-fgcolor-on-warning": "var(--neutral-0)",
-    "color-border-neutral-strong": "var(--neutral-750)",
-    "color-border-neutral-stronger": "var(--neutral-600)",
-    "color-fgcolor-on-warning-weak": "var(--web-orange-200)",
-    "color-border-neutral-strongest": "var(--neutral-0)",
-    "color-border-focus": "var(--neutral-600)",
-    "color-border-accent": "var(--neutral-0)",
-    "color-border-accent-secondary": "var(--neutral-0)",
-    "color-border-success": "var(--web-green-500)",
-    "color-border-success-weak": "rgba(16, 185, 129, 32%)",
-    "color-border-warning": "var(--web-orange-500)",
-    "color-border-warning-weak": "rgba(254, 124, 67, 32%)",
-    "color-border-error": "var(--web-red-500)",
-    "color-border-error-weak": "rgba(255, 69, 58, 32%)",
-    "color-overlay-on-accent": "rgba(255, 255, 255, 32%)",
-    "color-overlay-accent-hover": "rgba(0, 0, 0, 20%)",
-    "color-overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
-    "color-overlay-on-neutral": "rgba(255, 255, 255, 20%)",
-    "color-overlay-neutral-hover": "rgba(255, 255, 255, 4%)",
-    "color-overlay-neutral-pressed": "rgba(255, 255, 255, 8%)",
-    "color-overlay-neutral-selected": "rgba(255, 255, 255, 8%)",
-    "color-overlay-skeleton": "rgba(255, 255, 255, 8%)",
-    "color-overlay-scrim": "rgba(0, 0, 0, 48%)",
-    "color-overlay-scrim-weak": "rgba(25, 25, 28, 40%)",
-    "gradient-border-button-secondary-bottom": "var(--color-border-neutral-strong)",
-    "gradient-border-button-secondary-top": "var(--color-border-neutral)",
-    "color-fgcolor-on-invert": "var(--neutral-800)",
+    "web-red-800": "rgba(143, 14, 14, 100%)",
+    "web-red-900": "rgba(107, 11, 11, 100%)",
+    "bgcolor-neutral-default": "var(--neutral-900)",
+    "bgcolor-neutral-primary": "var(--neutral-850)",
+    "bgcolor-neutral-secondary": "var(--neutral-800)",
+    "bgcolor-neutral-tertiary": "var(--neutral-800)",
+    "bgcolor-neutral-invert": "var(--neutral-25)",
+    "bgcolor-neutral-invert-weak": "var(--neutral-300)",
+    "bgcolor-neutral-invert-weaker": "var(--neutral-400)",
+    "bgcolor-neutral-invert-weakest": "var(--neutral-750)",
+    "bgcolor-accent": "var(--brand-pink-500)",
+    "bgcolor-accent-weak": "rgba(253, 54, 110, 24%)",
+    "bgcolor-accent-secondary": "var(--brand-pink-600)",
+    "bgcolor-accent-tertiary": "var(--brand-pink-700)",
+    "bgcolor-success-weaker": "rgba(16, 185, 129, 16%)",
+    "bgcolor-success-weak": "rgba(16, 185, 129, 24%)",
+    "bgcolor-success": "var(--web-green-500)",
+    "bgcolor-success-strong": "var(--web-green-700)",
+    "bgcolor-error-weaker": "rgba(255, 69, 58, 16%)",
+    "bgcolor-error-weak": "rgba(255, 69, 58, 28%)",
+    "bgcolor-error": "var(--web-red-500)",
+    "bgcolor-error-strong": "var(--web-red-700)",
+    "bgcolor-warning": "var(--web-orange-500)",
+    "bgcolor-warning-weak": "rgba(254, 124, 67, 24%)",
+    "bgcolor-warning-weaker": "rgba(254, 124, 67, 16%)",
+    "bgcolor-warning-strong": "var(--web-orange-700)",
+    "bgcolor-error-strong-secondary": "var(--web-red-800)",
+    "bgcolor-error-strong-tertiary": "var(--web-red-900)",
+    "fgcolor-neutral-primary": "var(--neutral-50)",
+    "fgcolor-neutral-secondary": "var(--neutral-250)",
+    "fgcolor-neutral-tertiary": "var(--neutral-500)",
+    "fgcolor-neutral-weak": "var(--neutral-600)",
+    "fgcolor-accent": "var(--neutral-0)",
+    "fgcolor-accent-neutral": "var(--neutral-0)",
+    "fgcolor-on-accent": "var(--neutral-0)",
+    "fgcolor-success": "var(--web-green-500)",
+    "fgcolor-on-success": "var(--neutral-0)",
+    "fgcolor-on-success-weak": "var(--web-green-200)",
+    "fgcolor-error": "var(--web-red-500)",
+    "fgcolor-on-error": "var(--neutral-0)",
+    "fgcolor-on-error-weak": "var(--web-red-200)",
+    "fgcolor-warning": "var(--web-orange-500)",
+    "fgcolor-on-warning": "var(--neutral-0)",
+    "fgcolor-on-warning-weak": "var(--web-orange-200)",
+    "fgcolor-on-invert": "var(--neutral-1000)",
+    "border-neutral": "var(--neutral-800)",
+    "border-neutral-strong": "var(--neutral-750)",
+    "border-neutral-stronger": "var(--neutral-600)",
+    "border-neutral-strongest": "var(--neutral-0)",
+    "border-focus": "var(--neutral-600)",
+    "border-accent": "var(--neutral-0)",
+    "border-accent-secondary": "var(--neutral-0)",
+    "border-success": "var(--web-green-500)",
+    "border-success-weak": "rgba(16, 185, 129, 32%)",
+    "border-warning": "var(--web-orange-500)",
+    "border-warning-weak": "rgba(254, 124, 67, 32%)",
+    "border-error": "var(--web-red-500)",
+    "border-error-weak": "rgba(255, 69, 58, 32%)",
+    "overlay-on-accent": "rgba(255, 255, 255, 32%)",
+    "overlay-accent-hover": "rgba(0, 0, 0, 20%)",
+    "overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
+    "overlay-on-neutral": "rgba(255, 255, 255, 20%)",
+    "overlay-neutral-hover": "rgba(255, 255, 255, 4%)",
+    "overlay-neutral-pressed": "rgba(255, 255, 255, 8%)",
+    "overlay-neutral-selected": "rgba(255, 255, 255, 8%)",
+    "overlay-scrim": "rgba(0, 0, 0, 48%)",
+    "overlay-skeleton": "rgba(255, 255, 255, 8%)",
+    "gradient-border-button-secondary-bottom": "var(--border-neutral-strong)",
+    "gradient-border-button-secondary-top": "var(--border-neutral)",
     "font-family-brand": "Inter",
     "font-family-sansserif": "Inter",
     "font-family-monospace": "Fira Code",
diff --git a/src/themes/light-cloud.json b/src/themes/light-cloud.json
index 00f48ae17..a2ab55069 100644
--- a/src/themes/light-cloud.json
+++ b/src/themes/light-cloud.json
@@ -49,70 +49,75 @@
     "web-green-700": "rgba(10, 113, 79, 100%)",
     "web-orange-500": "rgba(254, 124, 67, 100%)",
     "web-orange-700": "rgba(97, 37, 10, 100%)",
-    "color-fgcolor-neutral-primary": "var(--neutral-800)",
-    "color-fgcolor-neutral-secondary": "var(--neutral-700)",
-    "color-fgcolor-neutral-tertiary": "var(--neutral-400)",
-    "color-bgcolor-neutral-default": "var(--neutral-25)",
-    "color-fgcolor-neutral-weak": "var(--neutral-200)",
-    "color-fgcolor-accent": "var(--brand-pink-500)",
-    "color-fgcolor-accent-neutral": "var(--neutral-900)",
-    "color-fgcolor-on-accent": "var(--neutral-0)",
-    "color-bgcolor-neutral-primary": "var(--neutral-0)",
-    "color-bgcolor-neutral-secondary": "var(--neutral-40)",
-    "color-fgcolor-success": "var(--web-green-700)",
-    "color-bgcolor-neutral-tertiary": "var(--neutral-50)",
-    "color-bgcolor-neutral-invert": "var(--neutral-900)",
-    "color-bgcolor-neutral-invert-weak": "var(--neutral-700)",
-    "color-bgcolor-neutral-invert-weaker": "var(--neutral-500)",
-    "color-bgcolor-accent": "var(--brand-pink-500)",
-    "color-bgcolor-accent-weak": "rgba(252, 53, 110, 12%)",
-    "color-bgcolor-accent-secondary": "var(--brand-pink-600)",
-    "color-bgcolor-accent-tertiary": "var(--brand-pink-700)",
-    "color-bgcolor-success-weaker": "rgba(16, 185, 129, 4%)",
-    "color-bgcolor-success-weak": "rgba(16, 185, 129, 16%)",
-    "color-bgcolor-success": "var(--web-green-500)",
-    "color-bgcolor-success-strong": "var(--web-green-700)",
-    "color-bgcolor-error-weaker": "rgba(255, 69, 58, 4%)",
-    "color-bgcolor-error-weak": "rgba(255, 69, 58, 16%)",
-    "color-bgcolor-error": "var(--web-red-500)",
-    "color-bgcolor-error-strong": "var(--web-red-700)",
-    "color-bgcolor-warning": "var(--web-orange-500)",
-    "color-bgcolor-warning-weak": "rgba(254, 124, 67, 16%)",
-    "color-bgcolor-warning-weaker": "rgba(254, 124, 67, 4%)",
-    "color-bgcolor-warning-strong": "var(--web-orange-700)",
-    "color-fgcolor-on-success": "var(--neutral-0)",
-    "color-fgcolor-on-success-weak": "var(--web-green-700)",
-    "color-fgcolor-error": "var(--web-red-700)",
-    "color-fgcolor-on-error": "var(--neutral-0)",
-    "color-fgcolor-on-error-weak": "var(--web-red-700)",
-    "color-border-neutral": "var(--neutral-50)",
-    "color-fgcolor-warning": "var(--web-orange-700)",
-    "color-border-neutral-strong": "var(--neutral-200)",
-    "color-fgcolor-on-warning": "var(--neutral-0)",
-    "color-border-neutral-stronger": "var(--neutral-500)",
-    "color-fgcolor-on-warning-weak": "var(--web-orange-700)",
-    "color-border-neutral-strongest": "var(--neutral-900)",
-    "color-border-focus": "var(--neutral-300)",
-    "color-border-accent": "var(--brand-pink-500)",
-    "color-border-accent-secondary": "var(--brand-pink-600)",
-    "color-border-success": "var(--web-green-500)",
-    "color-border-success-weak": "rgba(16, 185, 129, 32%)",
-    "color-border-warning": "var(--web-orange-500)",
-    "color-border-warning-weak": "rgba(254, 124, 67, 32%)",
-    "color-border-error": "var(--web-red-500)",
-    "color-border-error-weak": "rgba(255, 69, 58, 32%)",
-    "color-overlay-on-accent": "rgba(255, 255, 255, 32%)",
-    "color-overlay-accent-hover": "rgba(0, 0, 0, 20%)",
-    "color-overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
-    "color-overlay-on-neutral": "rgba(0, 0, 0, 6%)",
-    "color-overlay-neutral-hover": "rgba(25, 25, 28, 3%)",
-    "color-overlay-neutral-pressed": "rgba(25, 25, 28, 4%)",
-    "color-overlay-neutral-selected": "rgba(25, 25, 28, 4%)",
-    "color-overlay-scrim": "rgba(25, 25, 28, 80%)",
-    "color-overlay-skeleton": "rgba(25, 25, 28, 4%)",
-    "gradient-border-button-secondary-bottom": "var(--color-border-neutral)",
-    "gradient-border-button-secondary-top": "var(--color-border-neutral-strong)",
-    "color-fgcolor-on-invert": "var(--neutral-25)",
+    "web-red-800": "rgba(143, 14, 14, 100%)",
+    "web-red-900": "rgba(107, 11, 11, 100%)",
+    "bgcolor-neutral-default": "var(--neutral-25)",
+    "bgcolor-neutral-primary": "var(--neutral-0)",
+    "bgcolor-neutral-secondary": "var(--neutral-40)",
+    "bgcolor-neutral-tertiary": "var(--neutral-50)",
+    "bgcolor-neutral-invert": "var(--neutral-900)",
+    "bgcolor-neutral-invert-weak": "var(--neutral-700)",
+    "bgcolor-neutral-invert-weaker": "var(--neutral-500)",
+    "bgcolor-neutral-invert-weakest": "var(--neutral-100)",
+    "bgcolor-accent": "var(--brand-pink-500)",
+    "bgcolor-accent-weak": "rgba(252, 53, 110, 12%)",
+    "bgcolor-accent-secondary": "var(--brand-pink-600)",
+    "bgcolor-accent-tertiary": "var(--brand-pink-700)",
+    "bgcolor-success-weaker": "rgba(16, 185, 129, 4%)",
+    "bgcolor-success-weak": "rgba(16, 185, 129, 16%)",
+    "bgcolor-success": "var(--web-green-500)",
+    "bgcolor-success-strong": "var(--web-green-700)",
+    "bgcolor-error-weaker": "rgba(255, 69, 58, 4%)",
+    "bgcolor-error-weak": "rgba(255, 69, 58, 16%)",
+    "bgcolor-error": "var(--web-red-500)",
+    "bgcolor-error-strong": "var(--web-red-700)",
+    "bgcolor-warning": "var(--web-orange-500)",
+    "bgcolor-warning-weak": "rgba(254, 124, 67, 16%)",
+    "bgcolor-warning-weaker": "rgba(254, 124, 67, 4%)",
+    "bgcolor-warning-strong": "var(--web-orange-700)",
+    "bgcolor-error-strong-secondary": "var(--web-red-800)",
+    "bgcolor-error-strong-tertiary": "var(--web-red-900)",
+    "fgcolor-neutral-primary": "var(--neutral-800)",
+    "fgcolor-neutral-secondary": "var(--neutral-700)",
+    "fgcolor-neutral-tertiary": "var(--neutral-400)",
+    "fgcolor-neutral-weak": "var(--neutral-200)",
+    "fgcolor-accent": "var(--brand-pink-500)",
+    "fgcolor-accent-neutral": "var(--neutral-900)",
+    "fgcolor-on-accent": "var(--neutral-0)",
+    "fgcolor-success": "var(--web-green-700)",
+    "fgcolor-on-success": "var(--neutral-0)",
+    "fgcolor-on-success-weak": "var(--web-green-700)",
+    "fgcolor-error": "var(--web-red-700)",
+    "fgcolor-on-error": "var(--neutral-0)",
+    "fgcolor-on-error-weak": "var(--web-red-700)",
+    "fgcolor-warning": "var(--web-orange-700)",
+    "fgcolor-on-warning": "var(--neutral-0)",
+    "fgcolor-on-warning-weak": "var(--web-orange-700)",
+    "fgcolor-on-invert": "var(--neutral-25)",
+    "border-neutral": "var(--neutral-50)",
+    "border-neutral-strong": "var(--neutral-200)",
+    "border-neutral-stronger": "var(--neutral-500)",
+    "border-neutral-strongest": "var(--neutral-900)",
+    "border-focus": "var(--neutral-300)",
+    "border-accent": "var(--brand-pink-500)",
+    "border-accent-secondary": "var(--brand-pink-600)",
+    "border-success": "var(--web-green-500)",
+    "border-success-weak": "rgba(16, 185, 129, 32%)",
+    "border-warning": "var(--web-orange-500)",
+    "border-warning-weak": "rgba(254, 124, 67, 32%)",
+    "border-error": "var(--web-red-500)",
+    "border-error-weak": "rgba(255, 69, 58, 32%)",
+    "overlay-on-accent": "rgba(255, 255, 255, 32%)",
+    "overlay-accent-hover": "rgba(0, 0, 0, 20%)",
+    "overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
+    "overlay-on-neutral": "rgba(0, 0, 0, 6%)",
+    "overlay-neutral-hover": "rgba(25, 25, 28, 3%)",
+    "overlay-neutral-pressed": "rgba(25, 25, 28, 4%)",
+    "overlay-neutral-selected": "rgba(25, 25, 28, 4%)",
+    "overlay-scrim": "rgba(25, 25, 28, 80%)",
+    "overlay-skeleton": "rgba(25, 25, 28, 4%)",
+    "gradient-border-button-secondary-bottom": "var(--border-neutral)",
+    "gradient-border-button-secondary-top": "var(--border-neutral-strong)",
     "font-family-brand": "Aeonik Pro",
     "font-family-sansserif": "Inter",
     "font-family-monospace": "Aeonik Fono",
diff --git a/src/themes/light.json b/src/themes/light.json
index 9a68a639a..a2ab55069 100644
--- a/src/themes/light.json
+++ b/src/themes/light.json
@@ -49,74 +49,78 @@
     "web-green-700": "rgba(10, 113, 79, 100%)",
     "web-orange-500": "rgba(254, 124, 67, 100%)",
     "web-orange-700": "rgba(97, 37, 10, 100%)",
-    "color-fgcolor-neutral-primary": "var(--neutral-800)",
-    "color-fgcolor-neutral-secondary": "var(--neutral-700)",
-    "color-fgcolor-neutral-tertiary": "var(--neutral-400)",
-    "color-bgcolor-neutral-default": "var(--neutral-25)",
-    "color-fgcolor-neutral-weak": "var(--neutral-200)",
-    "color-fgcolor-accent": "var(--brand-pink-500)",
-    "color-fgcolor-accent-neutral": "var(--neutral-900)",
-    "color-fgcolor-on-accent": "var(--neutral-0)",
-    "color-bgcolor-neutral-primary": "var(--neutral-0)",
-    "color-bgcolor-neutral-secondary": "var(--neutral-40)",
-    "color-fgcolor-success": "var(--web-green-700)",
-    "color-bgcolor-neutral-tertiary": "var(--neutral-50)",
-    "color-bgcolor-neutral-invert": "var(--neutral-900)",
-    "color-bgcolor-neutral-invert-weak": "var(--neutral-700)",
-    "color-bgcolor-neutral-invert-weaker": "var(--neutral-500)",
-    "color-bgcolor-accent": "var(--brand-pink-500)",
-    "color-bgcolor-accent-weak": "rgba(252, 53, 110, 12%)",
-    "color-bgcolor-accent-secondary": "var(--brand-pink-600)",
-    "color-bgcolor-accent-tertiary": "var(--brand-pink-700)",
-    "color-bgcolor-success-weaker": "rgba(16, 185, 129, 4%)",
-    "color-bgcolor-success-weak": "rgba(16, 185, 129, 16%)",
-    "color-bgcolor-success": "var(--web-green-500)",
-    "color-bgcolor-success-strong": "var(--web-green-700)",
-    "color-bgcolor-error-weaker": "rgba(255, 69, 58, 4%)",
-    "color-bgcolor-error-weak": "rgba(255, 69, 58, 16%)",
-    "color-bgcolor-error": "var(--web-red-500)",
-    "color-bgcolor-error-strong": "var(--web-red-700)",
-    "color-bgcolor-warning": "var(--web-orange-500)",
-    "color-bgcolor-warning-weak": "rgba(254, 124, 67, 16%)",
-    "color-bgcolor-warning-weaker": "rgba(254, 124, 67, 4%)",
-    "color-bgcolor-warning-strong": "var(--web-orange-700)",
-    "color-fgcolor-on-success": "var(--neutral-0)",
-    "color-fgcolor-on-success-weak": "var(--web-green-700)",
-    "color-fgcolor-error": "var(--web-red-700)",
-    "color-fgcolor-on-error": "var(--neutral-0)",
-    "color-fgcolor-on-error-weak": "var(--web-red-700)",
-    "color-border-neutral": "var(--neutral-50)",
-    "color-fgcolor-warning": "var(--web-orange-700)",
-    "color-border-neutral-strong": "var(--neutral-200)",
-    "color-fgcolor-on-warning": "var(--neutral-0)",
-    "color-border-neutral-stronger": "var(--neutral-500)",
-    "color-fgcolor-on-warning-weak": "var(--web-orange-700)",
-    "color-border-neutral-strongest": "var(--neutral-900)",
-    "color-border-focus": "var(--neutral-300)",
-    "color-border-accent": "var(--brand-pink-500)",
-    "color-border-accent-secondary": "var(--brand-pink-600)",
-    "color-border-success": "var(--web-green-500)",
-    "color-border-success-weak": "rgba(16, 185, 129, 32%)",
-    "color-border-warning": "var(--web-orange-500)",
-    "color-border-warning-weak": "rgba(254, 124, 67, 32%)",
-    "color-border-error": "var(--web-red-500)",
-    "color-border-error-weak": "rgba(255, 69, 58, 32%)",
-    "color-overlay-on-accent": "rgba(255, 255, 255, 32%)",
-    "color-overlay-accent-hover": "rgba(0, 0, 0, 20%)",
-    "color-overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
-    "color-overlay-on-neutral": "rgba(0, 0, 0, 6%)",
-    "color-overlay-neutral-hover": "rgba(25, 25, 28, 3%)",
-    "color-overlay-neutral-pressed": "rgba(25, 25, 28, 4%)",
-    "color-overlay-neutral-selected": "rgba(25, 25, 28, 4%)",
-    "color-overlay-skeleton": "rgba(25, 25, 28, 4%)",
-    "color-overlay-scrim-weak": "rgba(25, 25, 28, 40%)",
-    "color-overlay-scrim": "rgba(25, 25, 28, 80%)",
-    "gradient-border-button-secondary-bottom": "var(--color-border-neutral)",
-    "gradient-border-button-secondary-top": "var(--color-border-neutral-strong)",
-    "color-fgcolor-on-invert": "var(--neutral-25)",
-    "font-family-brand": "Inter",
+    "web-red-800": "rgba(143, 14, 14, 100%)",
+    "web-red-900": "rgba(107, 11, 11, 100%)",
+    "bgcolor-neutral-default": "var(--neutral-25)",
+    "bgcolor-neutral-primary": "var(--neutral-0)",
+    "bgcolor-neutral-secondary": "var(--neutral-40)",
+    "bgcolor-neutral-tertiary": "var(--neutral-50)",
+    "bgcolor-neutral-invert": "var(--neutral-900)",
+    "bgcolor-neutral-invert-weak": "var(--neutral-700)",
+    "bgcolor-neutral-invert-weaker": "var(--neutral-500)",
+    "bgcolor-neutral-invert-weakest": "var(--neutral-100)",
+    "bgcolor-accent": "var(--brand-pink-500)",
+    "bgcolor-accent-weak": "rgba(252, 53, 110, 12%)",
+    "bgcolor-accent-secondary": "var(--brand-pink-600)",
+    "bgcolor-accent-tertiary": "var(--brand-pink-700)",
+    "bgcolor-success-weaker": "rgba(16, 185, 129, 4%)",
+    "bgcolor-success-weak": "rgba(16, 185, 129, 16%)",
+    "bgcolor-success": "var(--web-green-500)",
+    "bgcolor-success-strong": "var(--web-green-700)",
+    "bgcolor-error-weaker": "rgba(255, 69, 58, 4%)",
+    "bgcolor-error-weak": "rgba(255, 69, 58, 16%)",
+    "bgcolor-error": "var(--web-red-500)",
+    "bgcolor-error-strong": "var(--web-red-700)",
+    "bgcolor-warning": "var(--web-orange-500)",
+    "bgcolor-warning-weak": "rgba(254, 124, 67, 16%)",
+    "bgcolor-warning-weaker": "rgba(254, 124, 67, 4%)",
+    "bgcolor-warning-strong": "var(--web-orange-700)",
+    "bgcolor-error-strong-secondary": "var(--web-red-800)",
+    "bgcolor-error-strong-tertiary": "var(--web-red-900)",
+    "fgcolor-neutral-primary": "var(--neutral-800)",
+    "fgcolor-neutral-secondary": "var(--neutral-700)",
+    "fgcolor-neutral-tertiary": "var(--neutral-400)",
+    "fgcolor-neutral-weak": "var(--neutral-200)",
+    "fgcolor-accent": "var(--brand-pink-500)",
+    "fgcolor-accent-neutral": "var(--neutral-900)",
+    "fgcolor-on-accent": "var(--neutral-0)",
+    "fgcolor-success": "var(--web-green-700)",
+    "fgcolor-on-success": "var(--neutral-0)",
+    "fgcolor-on-success-weak": "var(--web-green-700)",
+    "fgcolor-error": "var(--web-red-700)",
+    "fgcolor-on-error": "var(--neutral-0)",
+    "fgcolor-on-error-weak": "var(--web-red-700)",
+    "fgcolor-warning": "var(--web-orange-700)",
+    "fgcolor-on-warning": "var(--neutral-0)",
+    "fgcolor-on-warning-weak": "var(--web-orange-700)",
+    "fgcolor-on-invert": "var(--neutral-25)",
+    "border-neutral": "var(--neutral-50)",
+    "border-neutral-strong": "var(--neutral-200)",
+    "border-neutral-stronger": "var(--neutral-500)",
+    "border-neutral-strongest": "var(--neutral-900)",
+    "border-focus": "var(--neutral-300)",
+    "border-accent": "var(--brand-pink-500)",
+    "border-accent-secondary": "var(--brand-pink-600)",
+    "border-success": "var(--web-green-500)",
+    "border-success-weak": "rgba(16, 185, 129, 32%)",
+    "border-warning": "var(--web-orange-500)",
+    "border-warning-weak": "rgba(254, 124, 67, 32%)",
+    "border-error": "var(--web-red-500)",
+    "border-error-weak": "rgba(255, 69, 58, 32%)",
+    "overlay-on-accent": "rgba(255, 255, 255, 32%)",
+    "overlay-accent-hover": "rgba(0, 0, 0, 20%)",
+    "overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
+    "overlay-on-neutral": "rgba(0, 0, 0, 6%)",
+    "overlay-neutral-hover": "rgba(25, 25, 28, 3%)",
+    "overlay-neutral-pressed": "rgba(25, 25, 28, 4%)",
+    "overlay-neutral-selected": "rgba(25, 25, 28, 4%)",
+    "overlay-scrim": "rgba(25, 25, 28, 80%)",
+    "overlay-skeleton": "rgba(25, 25, 28, 4%)",
+    "gradient-border-button-secondary-bottom": "var(--border-neutral)",
+    "gradient-border-button-secondary-top": "var(--border-neutral-strong)",
+    "font-family-brand": "Aeonik Pro",
     "font-family-sansserif": "Inter",
-    "font-family-monospace": "Fira Code",
+    "font-family-monospace": "Aeonik Fono",
     "font-family-code": "Fira Code",
     "font-weight-regular": "Regular",
     "font-weight-medium": "Medium",