diff --git a/bun.lockb b/bun.lockb
index 0e8c94e1f..1c054be6f 100644
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/packages/website/package.json b/packages/website/package.json
index 20c5f059b..faf5dc8e6 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -14,6 +14,7 @@
     "@nanostores/persistent": "^0.10.2",
     "@nanostores/react": "^0.7.3",
     "@nivo/core": "^0.87.0",
+    "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^3.1.3",
     "@react-three/drei": "^9.111.5",
diff --git a/packages/website/src/core/radix/var.ts b/packages/website/src/core/radix/var.ts
index b2acb3999..57ac36f64 100644
--- a/packages/website/src/core/radix/var.ts
+++ b/packages/website/src/core/radix/var.ts
@@ -1,7 +1,14 @@
+import * as ColorsRaw from '@radix-ui/colors';
+
+type ExcludeSuffix<T> =
+  T extends `${string}${'A' | `${'P3' | 'Dark'}${'' | 'A'}`}` ? never : T;
+type RadixColor = ExcludeSuffix<keyof typeof ColorsRaw>;
+
 type Name =
   | `color-${'background' | `panel-${'solid' | 'translucent'}` | 'surface' | 'overlay'}`
   | `radius-${1 | 2 | 3 | 4 | 5 | 6 | 'full'}`
   | `space-${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`
+  | `${RadixColor}-${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}`;
 
 export function Var(name: Name) {
   return `var(--${name})`;