diff --git a/libs/@hashintel/ds-theme/data/variables.json b/libs/@hashintel/ds-theme/data/variables.json
new file mode 100644
index 00000000000..41e9e3d4f9e
--- /dev/null
+++ b/libs/@hashintel/ds-theme/data/variables.json
@@ -0,0 +1,912 @@
+{
+  "color.core": {
+    "gray": {
+      "10": {
+        "value": {
+          "_light": "#f5f5f5",
+          "_dark": "#1d2836"
+        },
+        "type": "color"
+      },
+      "20": {
+        "value": {
+          "_light": "#e5e5e5",
+          "_dark": "#374151"
+        },
+        "type": "color"
+      },
+      "30": {
+        "value": {
+          "_light": "#d9d9d9",
+          "_dark": "#4b5563"
+        },
+        "type": "color"
+      },
+      "35": {
+        "value": {
+          "_light": "#c7c7c7",
+          "_dark": "#4b5563"
+        },
+        "type": "color"
+      },
+      "40": {
+        "value": {
+          "_light": "#a3a3a3",
+          "_dark": "#6b7280"
+        },
+        "type": "color"
+      },
+      "50": {
+        "value": {
+          "_light": "#737373",
+          "_dark": "#9ca3af"
+        },
+        "type": "color"
+      },
+      "60": {
+        "value": {
+          "_light": "#525252",
+          "_dark": "#dde0e4"
+        },
+        "type": "color"
+      },
+      "70": {
+        "value": {
+          "_light": "#404040",
+          "_dark": "#e5e7eb"
+        },
+        "type": "color"
+      },
+      "80": {
+        "value": {
+          "_light": "#262626",
+          "_dark": "#f0f2f4"
+        },
+        "type": "color"
+      },
+      "90": {
+        "value": {
+          "_light": "#171717",
+          "_dark": "#f6f8f9"
+        },
+        "type": "color"
+      },
+      "95": {
+        "value": {
+          "_light": "#0a0a0a",
+          "_dark": "#f6f8f9"
+        },
+        "type": "color"
+      },
+      "00": {
+        "value": {
+          "_light": "#fafafa",
+          "_dark": "#070a0d"
+        },
+        "type": "color"
+      }
+    },
+    "red": {
+      "10": {
+        "value": {
+          "_light": "#fbd5d7",
+          "_dark": "#991b1b"
+        },
+        "type": "color"
+      },
+      "20": {
+        "value": {
+          "_light": "#f5a3a3",
+          "_dark": "#b91c1c"
+        },
+        "type": "color"
+      },
+      "30": {
+        "value": {
+          "_light": "#f17e7e",
+          "_dark": "#dc2626"
+        },
+        "type": "color"
+      },
+      "40": {
+        "value": {
+          "_light": "#ed5a5a",
+          "_dark": "#ef4444"
+        },
+        "type": "color"
+      },
+      "50": {
+        "value": {
+          "_light": "#e93535",
+          "_dark": "#f87171"
+        },
+        "type": "color"
+      },
+      "60": {
+        "value": {
+          "_light": "#dc1818",
+          "_dark": "#fca5a5"
+        },
+        "type": "color"
+      },
+      "70": {
+        "value": {
+          "_light": "#b81414",
+          "_dark": "#fecaca"
+        },
+        "type": "color"
+      },
+      "80": {
+        "value": {
+          "_light": "#931010",
+          "_dark": "#fee2e2"
+        },
+        "type": "color"
+      },
+      "90": {
+        "value": {
+          "_light": "#6e0c0c",
+          "_dark": "#fef2f2"
+        },
+        "type": "color"
+      },
+      "00": {
+        "value": {
+          "_light": "#fde8e9",
+          "_dark": "#7f1d1d"
+        },
+        "type": "color"
+      }
+    },
+    "orange": {
+      "10": {
+        "value": {
+          "_light": "#ffe0b8",
+          "_dark": "#9a3412"
+        },
+        "type": "color"
+      },
+      "20": {
+        "value": {
+          "_light": "#fed7aa",
+          "_dark": "#c2410c"
+        },
+        "type": "color"
+      },
+      "30": {
+        "value": {
+          "_light": "#fdba74",
+          "_dark": "#d97706"
+        },
+        "type": "color"
+      },
+      "40": {
+        "value": {
+          "_light": "#fb923c",
+          "_dark": "#f97316"
+        },
+        "type": "color"
+      },
+      "50": {
+        "value": {
+          "_light": "#f97316",
+          "_dark": "#fb923c"
+        },
+        "type": "color"
+      },
+      "60": {
+        "value": {
+          "_light": "#d97706",
+          "_dark": "#fdba74"
+        },
+        "type": "color"
+      },
+      "70": {
+        "value": {
+          "_light": "#c2410c",
+          "_dark": "#fed7aa"
+        },
+        "type": "color"
+      },
+      "80": {
+        "value": {
+          "_light": "#9a3412",
+          "_dark": "#ffedd5"
+        },
+        "type": "color"
+      },
+      "90": {
+        "value": {
+          "_light": "#7c2d12",
+          "_dark": "#fff7ed"
+        },
+        "type": "color"
+      },
+      "00": {
+        "value": {
+          "_light": "#fff1e0",
+          "_dark": "#7c2d12"
+        },
+        "type": "color"
+      }
+    },
+    "green": {
+      "10": {
+        "value": {
+          "_light": "#e4f7f3",
+          "_dark": "#096638"
+        },
+        "type": "color"
+      },
+      "20": {
+        "value": {
+          "_light": "#b9ebdf",
+          "_dark": "#0e7d4b"
+        },
+        "type": "color"
+      },
+      "30": {
+        "value": {
+          "_light": "#91dbc9",
+          "_dark": "#159663"
+        },
+        "type": "color"
+      },
+      "40": {
+        "value": {
+          "_light": "#4fc29e",
+          "_dark": "#19a874"
+        },
+        "type": "color"
+      },
+      "50": {
+        "value": {
+          "_light": "#19a874",
+          "_dark": "#4fc29e"
+        },
+        "type": "color"
+      },
+      "60": {
+        "value": {
+          "_light": "#159663",
+          "_dark": "#91dbc9"
+        },
+        "type": "color"
+      },
+      "70": {
+        "value": {
+          "_light": "#0e7d4b",
+          "_dark": "#b9ebdf"
+        },
+        "type": "color"
+      },
+      "80": {
+        "value": {
+          "_light": "#096638",
+          "_dark": "#e4f7f3"
+        },
+        "type": "color"
+      },
+      "90": {
+        "value": {
+          "_light": "#054d27",
+          "_dark": "#edfaf7"
+        },
+        "type": "color"
+      },
+      "00": {
+        "value": {
+          "_light": "#edfaf7",
+          "_dark": "#054d27"
+        },
+        "type": "color"
+      }
+    },
+    "blue": {
+      "10": {
+        "value": {
+          "_light": "#daf0ff",
+          "_dark": "#0e2e8c"
+        },
+        "type": "color"
+      },
+      "20": {
+        "value": {
+          "_light": "#bee6ff",
+          "_dark": "#1541b0"
+        },
+        "type": "color"
+      },
+      "30": {
+        "value": {
+          "_light": "#78c0fc",
+          "_dark": "#1c62e3"
+        },
+        "type": "color"
+      },
+      "40": {
+        "value": {
+          "_light": "#56b0fb",
+          "_dark": "#266df0"
+        },
+        "type": "color"
+      },
+      "50": {
+        "value": {
+          "_light": "#34a0fa",
+          "_dark": "#629df0"
+        },
+        "type": "color"
+      },
+      "60": {
+        "value": {
+          "_light": "#2a80c8",
+          "_dark": "#a3cff7"
+        },
+        "type": "color"
+      },
+      "70": {
+        "value": {
+          "_light": "#0666c6",
+          "_dark": "#c5e3fa"
+        },
+        "type": "color"
+      },
+      "80": {
+        "value": {
+          "_light": "#05529e",
+          "_dark": "#e5eeff"
+        },
+        "type": "color"
+      },
+      "90": {
+        "value": {
+          "_light": "#043d77",
+          "_dark": "#f5fbff"
+        },
+        "type": "color"
+      },
+      "00": {
+        "value": {
+          "_light": "#eff9ff",
+          "_dark": "#071e69"
+        },
+        "type": "color"
+      }
+    },
+    "neutral": {
+      "white": {
+        "value": {
+          "_light": "#ffffff",
+          "_dark": "#000000"
+        },
+        "type": "color"
+      },
+      "black": {
+        "value": {
+          "_light": "#000000",
+          "_dark": "#ffffff"
+        },
+        "type": "color"
+      }
+    },
+    "purple": {
+      "10": {
+        "value": {
+          "_light": "#e0d6fc",
+          "_dark": "#2d138f"
+        },
+        "type": "color"
+      },
+      "20": {
+        "value": {
+          "_light": "#c2adf8",
+          "_dark": "#401db3"
+        },
+        "type": "color"
+      },
+      "30": {
+        "value": {
+          "_light": "#a385f5",
+          "_dark": "#5429d6"
+        },
+        "type": "color"
+      },
+      "40": {
+        "value": {
+          "_light": "#865cf1",
+          "_dark": "#6633ee"
+        },
+        "type": "color"
+      },
+      "50": {
+        "value": {
+          "_light": "#6633ee",
+          "_dark": "#865cf1"
+        },
+        "type": "color"
+      },
+      "60": {
+        "value": {
+          "_light": "#5429d6",
+          "_dark": "#a385f5"
+        },
+        "type": "color"
+      },
+      "70": {
+        "value": {
+          "_light": "#401db3",
+          "_dark": "#c2adf8"
+        },
+        "type": "color"
+      },
+      "80": {
+        "value": {
+          "_light": "#2d138f",
+          "_dark": "#e0d6fc"
+        },
+        "type": "color"
+      },
+      "90": {
+        "value": {
+          "_light": "#1d0a6b",
+          "_dark": "#eee6f3"
+        },
+        "type": "color"
+      },
+      "00": {
+        "value": {
+          "_light": "#eee6f3",
+          "_dark": "#1d0a6b"
+        },
+        "type": "color"
+      }
+    },
+    "pink": {
+      "10": {
+        "value": {
+          "_light": "#fce7f3",
+          "_dark": "#9d174d"
+        },
+        "type": "color"
+      },
+      "20": {
+        "value": {
+          "_light": "#fbcfe8",
+          "_dark": "#be185d"
+        },
+        "type": "color"
+      },
+      "30": {
+        "value": {
+          "_light": "#f9a8d4",
+          "_dark": "#db2777"
+        },
+        "type": "color"
+      },
+      "40": {
+        "value": {
+          "_light": "#f174b2",
+          "_dark": "#ec4899"
+        },
+        "type": "color"
+      },
+      "50": {
+        "value": {
+          "_light": "#ec4899",
+          "_dark": "#f174b2"
+        },
+        "type": "color"
+      },
+      "60": {
+        "value": {
+          "_light": "#db2777",
+          "_dark": "#f9a8d4"
+        },
+        "type": "color"
+      },
+      "70": {
+        "value": {
+          "_light": "#be185d",
+          "_dark": "#fbcfe8"
+        },
+        "type": "color"
+      },
+      "80": {
+        "value": {
+          "_light": "#9d174d",
+          "_dark": "#fce7f3"
+        },
+        "type": "color"
+      },
+      "90": {
+        "value": {
+          "_light": "#831843",
+          "_dark": "#fdf2f8"
+        },
+        "type": "color"
+      },
+      "00": {
+        "value": {
+          "_light": "#fdf2f8",
+          "_dark": "#831843"
+        },
+        "type": "color"
+      }
+    },
+    "yellow": {
+      "10": {
+        "value": {
+          "_light": "#fef9c3",
+          "_dark": "#854d0e"
+        },
+        "type": "color"
+      },
+      "20": {
+        "value": {
+          "_light": "#fef08a",
+          "_dark": "#a16207"
+        },
+        "type": "color"
+      },
+      "30": {
+        "value": {
+          "_light": "#fde047",
+          "_dark": "#ca8a04"
+        },
+        "type": "color"
+      },
+      "40": {
+        "value": {
+          "_light": "#facc15",
+          "_dark": "#eab308"
+        },
+        "type": "color"
+      },
+      "50": {
+        "value": {
+          "_light": "#eab308",
+          "_dark": "#facc15"
+        },
+        "type": "color"
+      },
+      "60": {
+        "value": {
+          "_light": "#ca8a04",
+          "_dark": "#fde047"
+        },
+        "type": "color"
+      },
+      "70": {
+        "value": {
+          "_light": "#a16207",
+          "_dark": "#fef08a"
+        },
+        "type": "color"
+      },
+      "80": {
+        "value": {
+          "_light": "#854d0e",
+          "_dark": "#fef9c3"
+        },
+        "type": "color"
+      },
+      "90": {
+        "value": {
+          "_light": "#713f12",
+          "_dark": "#fefce8"
+        },
+        "type": "color"
+      },
+      "00": {
+        "value": {
+          "_light": "#fefce8",
+          "_dark": "#713f12"
+        },
+        "type": "color"
+      }
+    },
+    "accent": {
+      "10": {
+        "value": {
+          "_light": "#bbdffd",
+          "_dark": "#0e2e8c"
+        },
+        "type": "color"
+      },
+      "20": {
+        "value": {
+          "_light": "#9ad0fd",
+          "_dark": "#1541b0"
+        },
+        "type": "color"
+      },
+      "30": {
+        "value": {
+          "_light": "#78c0fc",
+          "_dark": "#1c62e3"
+        },
+        "type": "color"
+      },
+      "40": {
+        "value": {
+          "_light": "#56b0fb",
+          "_dark": "#266df0"
+        },
+        "type": "color"
+      },
+      "50": {
+        "value": {
+          "_light": "#2070e6",
+          "_dark": "#629df0"
+        },
+        "type": "color"
+      },
+      "60": {
+        "value": {
+          "_light": "#1567e0",
+          "_dark": "#a3cff7"
+        },
+        "type": "color"
+      },
+      "70": {
+        "value": {
+          "_light": "#0666c6",
+          "_dark": "#c5e3fa"
+        },
+        "type": "color"
+      },
+      "80": {
+        "value": {
+          "_light": "#05529e",
+          "_dark": "#e5eeff"
+        },
+        "type": "color"
+      },
+      "90": {
+        "value": {
+          "_light": "#043d77",
+          "_dark": "#f5fbff"
+        },
+        "type": "color"
+      },
+      "00": {
+        "value": {
+          "_light": "#ddeffe",
+          "_dark": "#071e69"
+        },
+        "type": "color"
+      }
+    },
+    "accent-gray": {
+      "10": {
+        "value": {
+          "_light": "rgba(0, 0, 0, 0.023)",
+          "_dark": "rgba(255, 255, 255, 0.035)"
+        },
+        "type": "color"
+      },
+      "20": {
+        "value": {
+          "_light": "rgba(0, 0, 0, 0.059)",
+          "_dark": "#ffffff"
+        },
+        "type": "color"
+      },
+      "30": {
+        "value": {
+          "_light": "rgba(0, 0, 0, 0.09)",
+          "_dark": "#ffffff"
+        },
+        "type": "color"
+      },
+      "40": {
+        "value": {
+          "_light": "rgba(0, 0, 0, 0.122)",
+          "_dark": "#ffffff"
+        },
+        "type": "color"
+      },
+      "50": {
+        "value": {
+          "_light": "rgba(0, 0, 0, 0.149)",
+          "_dark": "#ffffff"
+        },
+        "type": "color"
+      },
+      "60": {
+        "value": {
+          "_light": "rgba(0, 0, 0, 0.192)",
+          "_dark": "#ffffff"
+        },
+        "type": "color"
+      },
+      "70": {
+        "value": {
+          "_light": "rgba(0, 0, 0, 0.267)",
+          "_dark": "#ffffff"
+        },
+        "type": "color"
+      },
+      "80": {
+        "value": {
+          "_light": "rgba(0, 0, 0, 0.447)",
+          "_dark": "#ffffff"
+        },
+        "type": "color"
+      },
+      "90": {
+        "value": {
+          "_light": "rgba(0, 0, 0, 0.486)",
+          "_dark": "#ffffff"
+        },
+        "type": "color"
+      },
+      "95": {
+        "value": {
+          "_light": "rgba(0, 0, 0, 0.608)",
+          "_dark": "#ffffff"
+        },
+        "type": "color"
+      },
+      "00": {
+        "value": {
+          "_light": "rgba(0, 0, 0, 0.012)",
+          "_dark": "rgba(255, 255, 255, 0)"
+        },
+        "type": "color"
+      }
+    },
+    "accent-alpha": {
+      "10": {
+        "value": {
+          "_light": "rgba(38, 121, 243, 0.043)",
+          "_dark": "#0e2e8c"
+        },
+        "type": "color"
+      },
+      "20": {
+        "value": {
+          "_light": "rgba(38, 121, 243, 0.098)",
+          "_dark": "rgba(21, 65, 176, 0.098)"
+        },
+        "type": "color"
+      },
+      "30": {
+        "value": {
+          "_light": "rgba(38, 121, 243, 0.165)",
+          "_dark": "rgba(28, 98, 227, 0.165)"
+        },
+        "type": "color"
+      },
+      "40": {
+        "value": {
+          "_light": "rgba(38, 121, 243, 0.239)",
+          "_dark": "rgba(38, 109, 240, 0.239)"
+        },
+        "type": "color"
+      },
+      "50": {
+        "value": {
+          "_light": "rgba(38, 121, 243, 0.326)",
+          "_dark": "rgba(98, 157, 240, 0.326)"
+        },
+        "type": "color"
+      },
+      "60": {
+        "value": {
+          "_light": "rgba(21, 103, 224, 0.443)",
+          "_dark": "rgba(163, 207, 247, 0.443)"
+        },
+        "type": "color"
+      },
+      "70": {
+        "value": {
+          "_light": "rgba(38, 121, 243, 0.631)",
+          "_dark": "rgba(197, 227, 250, 0.631)"
+        },
+        "type": "color"
+      },
+      "80": {
+        "value": {
+          "_light": "rgba(38, 121, 243, 0.78)",
+          "_dark": "#e5eeff"
+        },
+        "type": "color"
+      },
+      "90": {
+        "value": {
+          "_light": "rgba(38, 121, 243, 0.849)",
+          "_dark": "rgba(245, 251, 255, 0.849)"
+        },
+        "type": "color"
+      },
+      "00": {
+        "value": {
+          "_light": "rgba(38, 121, 243, 0.016)",
+          "_dark": "#071e69"
+        },
+        "type": "color"
+      }
+    },
+    "white-alpha": {
+      "10": {
+        "value": {
+          "_light": "rgba(255, 255, 255, 0.1)",
+          "_dark": "rgba(0, 0, 0, 0.035)"
+        },
+        "type": "color"
+      },
+      "20": {
+        "value": {
+          "_light": "rgba(255, 255, 255, 0.2)",
+          "_dark": "#000000"
+        },
+        "type": "color"
+      },
+      "30": {
+        "value": {
+          "_light": "rgba(255, 255, 255, 0.3)",
+          "_dark": "#ffffff"
+        },
+        "type": "color"
+      },
+      "40": {
+        "value": {
+          "_light": "rgba(255, 255, 255, 0.4)",
+          "_dark": "#ffffff"
+        },
+        "type": "color"
+      },
+      "50": {
+        "value": {
+          "_light": "rgba(255, 255, 255, 0.5)",
+          "_dark": "#ffffff"
+        },
+        "type": "color"
+      },
+      "60": {
+        "value": {
+          "_light": "rgba(255, 255, 255, 0.6)",
+          "_dark": "#ffffff"
+        },
+        "type": "color"
+      },
+      "70": {
+        "value": {
+          "_light": "rgba(255, 255, 255, 0.7)",
+          "_dark": "#ffffff"
+        },
+        "type": "color"
+      },
+      "80": {
+        "value": {
+          "_light": "rgba(255, 255, 255, 0.8)",
+          "_dark": "#ffffff"
+        },
+        "type": "color"
+      },
+      "90": {
+        "value": {
+          "_light": "rgba(255, 255, 255, 0.9)",
+          "_dark": "#ffffff"
+        },
+        "type": "color"
+      },
+      "95": {
+        "value": {
+          "_light": "rgba(255, 255, 255, 0.95)",
+          "_dark": "#ffffff"
+        },
+        "type": "color"
+      },
+      "00": {
+        "value": {
+          "_light": "rgba(255, 255, 255, 0)",
+          "_dark": "rgba(0, 0, 0, 0)"
+        },
+        "type": "color"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/libs/@hashintel/ds-theme/generate-colors.ts b/libs/@hashintel/ds-theme/generate-colors.ts
new file mode 100644
index 00000000000..56bc3439b19
--- /dev/null
+++ b/libs/@hashintel/ds-theme/generate-colors.ts
@@ -0,0 +1,108 @@
+import fs from "node:fs";
+import { join } from "node:path";
+import { camelCase, kebabCase } from "case-anything";
+import figmaVariables from "./data/variables.json" with { type: "json" };
+
+const OUTPUT_DIR = "src/theme/colors";
+
+type FigmaColorValue = {
+  value: { _light: string; _dark: string };
+  type: "color";
+};
+
+type FigmaColorScale = Record<string, FigmaColorValue>;
+
+type FigmaColorCore = Record<string, FigmaColorScale>;
+
+const colorCore = figmaVariables["color.core"] as FigmaColorCore;
+
+function transformColorScale(
+  scale: FigmaColorScale
+): Record<string, { value: { _light: string; _dark: string } }> {
+  return Object.fromEntries(
+    Object.entries(scale).map(([step, { value }]) => [step, { value }])
+  );
+}
+
+function formatTokensForOutput(tokens: Record<string, unknown>): string {
+  const formatValue = (value: unknown): string => {
+    if (typeof value !== "object" || value === null) {
+      return JSON.stringify(value);
+    }
+
+    if (Array.isArray(value)) {
+      return `[${value.map((v) => formatValue(v)).join(", ")}]`;
+    }
+
+    const entries = Object.entries(value);
+    const formatted = entries
+      .map(([key, val]) => {
+        const keyStr = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key)
+          ? key
+          : JSON.stringify(key);
+        return `${keyStr}: ${formatValue(val)}`;
+      })
+      .join(", ");
+
+    return `{ ${formatted} }`;
+  };
+
+  return formatValue(tokens);
+}
+
+function writeColorFile(name: string, tokens: Record<string, unknown>): void {
+  const fileName = kebabCase(name);
+  const varName = camelCase(name);
+  const filePath = join(process.cwd(), OUTPUT_DIR, `${fileName}.ts`);
+  const formattedTokens = formatTokensForOutput(tokens);
+
+  const content = `import { defineSemanticTokens } from "@pandacss/dev";
+
+export const ${varName} = defineSemanticTokens.colors(${formattedTokens});
+`;
+
+  fs.writeFileSync(filePath, content, "utf8");
+  console.log(`📄 Created ${fileName}.ts`);
+}
+
+function writeIndexFile(colorNames: string[]): void {
+  const filePath = join(process.cwd(), OUTPUT_DIR, "index.ts");
+
+  const imports = colorNames
+    .map((name) => `import { ${camelCase(name)} } from "./${kebabCase(name)}";`)
+    .join("\n");
+
+  const exports = colorNames.map((name) => camelCase(name)).join(",\n  ");
+
+  const content = `${imports}
+
+export const colors = {
+  ${exports},
+};
+`;
+
+  fs.writeFileSync(filePath, content, "utf8");
+  console.log(`📄 Created index.ts`);
+}
+
+function main(): void {
+  console.log("🎨 Generating semantic color tokens from Figma export...");
+
+  const outputPath = join(process.cwd(), OUTPUT_DIR);
+  fs.rmSync(outputPath, { recursive: true, force: true });
+  fs.mkdirSync(outputPath, { recursive: true });
+
+  const colorNames: string[] = [];
+
+  for (const [colorName, scale] of Object.entries(colorCore)) {
+    const tokens = transformColorScale(scale);
+    writeColorFile(colorName, tokens);
+    colorNames.push(colorName);
+  }
+
+  writeIndexFile(colorNames);
+
+  console.log(`✅ Generated ${colorNames.length} color files`);
+}
+
+main();
diff --git a/libs/@hashintel/ds-theme/package.json b/libs/@hashintel/ds-theme/package.json
index e9e87563661..459d3507b7d 100644
--- a/libs/@hashintel/ds-theme/package.json
+++ b/libs/@hashintel/ds-theme/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@hashintel/ds-theme",
   "version": "0.0.1",
-  "description": "HASH UI Preset",
+  "description": "HASH PandaCSS Preset",
   "repository": {
     "type": "git",
     "url": "https://github.com/hashintel/hash.git",
@@ -12,10 +12,13 @@
   "type": "module",
   "main": "src/index.ts",
   "scripts": {
-    "generate:panda": "tsx scripts/toPanda.ts"
+    "generate:colors": "tsx generate-colors.ts",
+    "lint:tsc": "tsc --noEmit"
   },
   "devDependencies": {
-    "es-toolkit": "1.41.0",
-    "tsx": "4.20.6"
+    "@pandacss/dev": "1.4.3",
+    "case-anything": "3.1.0",
+    "tsx": "4.20.6",
+    "typescript": "5.9.3"
   }
 }
diff --git a/libs/@hashintel/ds-theme/scripts/lib/figma.types.ts b/libs/@hashintel/ds-theme/scripts/lib/figma.types.ts
deleted file mode 100644
index e4b4e8b2e58..00000000000
--- a/libs/@hashintel/ds-theme/scripts/lib/figma.types.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-export type Collection = {
-  readonly id: string;
-  readonly name: string;
-  readonly hiddenFromPublishing: boolean;
-  readonly key: string;
-  readonly modes: ReadonlyArray<{
-    id: string;
-    name: string;
-  }>;
-  readonly variableIds: ReadonlyArray<string>;
-  readonly defaultModeId: string;
-};
-
-/**
- * NON-exhaustive list of variable scopes from Figma export.
- * See: https://help.figma.com/hc/en-us/articles/15145852043927-Create-and-manage-variables-and-collections#h_01H32HZB74TE7MJXYBWEBBQWJV
- */
-export type VariableScope =
-  | "ALL_SCOPES"
-  | "WIDTH_HEIGHT"
-  | "GAP"
-  | "COLOR"
-  | "FILL_COLOR"
-  | "STROKE_COLOR"
-  | "NUMBER"
-  | "BOOLEAN"
-  | "STRING"
-  | "TEXT_FILL"
-  | "SHAPE_FILL"
-  | "FONT_SIZE"
-  | "FONT_STYLE"
-  | "LINE_HEIGHT"
-  | "CORNER_RADIUS"
-  | "FRAME_FILL"
-  | "ALL_FILLS"
-  | "EFFECT_COLOR";
-
-/**
- * Exhaustive list of variable types from Figma export.
- * See: https://help.figma.com/hc/en-us/articles/14506821864087-Overview-of-variables-collections-and-modes
- */
-export type VariableType = "COLOR" | "FLOAT" | "STRING" | "BOOLEAN";
-
-/**
- * NON-exhaustive list of variable value types from Figma export.
- * See: https://help.figma.com/hc/en-us/articles/14506821864087-Overview-of-variables-collections-and-modes
- */
-export type VariableValue =
-  | string
-  | number
-  | VariableValueColor
-  | VariableValueAlias;
-
-export type VariableValueColor = {
-  readonly r: number;
-  readonly g: number;
-  readonly b: number;
-};
-
-export type VariableValueAlias = {
-  readonly type: "VARIABLE_ALIAS";
-  readonly id: string;
-};
-
-export type Variable = {
-  readonly id: string;
-  readonly name: string;
-  readonly description: string;
-  readonly key: string;
-  readonly remote: boolean;
-  readonly scopes: ReadonlyArray<VariableScope>;
-  readonly type: VariableType;
-  readonly valuesByMode: {
-    readonly [modeId: string]: VariableValue;
-  };
-};
-
-export type FigmaVariablesExport = {
-  readonly collections: ReadonlyArray<Collection>;
-  readonly variables: ReadonlyArray<Variable>;
-};
diff --git a/libs/@hashintel/ds-theme/scripts/lib/toPanda.ts b/libs/@hashintel/ds-theme/scripts/lib/toPanda.ts
deleted file mode 100644
index 004d933cf9c..00000000000
--- a/libs/@hashintel/ds-theme/scripts/lib/toPanda.ts
+++ /dev/null
@@ -1,318 +0,0 @@
-import type {
-  TokenDataTypes as Panda_TokenDataType,
-  Preset,
-} from "@pandacss/types";
-import { setWith } from "es-toolkit/compat";
-import {
-  FigmaVariablesExport,
-  Variable,
-  VariableValue,
-  VariableValueAlias,
-  VariableValueColor,
-} from "./figma.types";
-
-// This script maps the Figma variables JSON export to PandaCSS tokens.
-// Figma plugin: https://www.figma.com/community/plugin/1491572182178544621/variables-exporter-for-dev-mode
-//
-// If at some point we get access to the Figma API for variables, mapping will still be necessary,
-// so having this script is useful for future-proofing.
-//
-// The goal is to keep Figma variables as the source of truth for design tokens,
-// and progressively enhance them to target in the future some kind of "standard" format.
-
-/**
- * Figma Collections Modes need to be mapped to PandaCSS conditions.
- * See: https://panda-css.com/docs/concepts/conditional-styles#reference
- *
- * No need to map Mode in case of single-mode in Figma collection.
- * Always define a "base" mapping for new modes.
- *
- * TODO: Make this an argument of the toPanda function.
- */
-const MODE_TO_CONDITION_MAP: Record<string, string> = {
-  // Light/Dark
-  Light: "base",
-  Dark: "_dark",
-};
-
-/**
- * Determine if variable should be omitted from output.
- *
- * TODO: Discuss with @CiaranH to confirm these exclusions/adapt values
- * TODO: Make this an argument of the toPanda function.
- */
-function SHOULD_OMIT_VARIABLE(variable: Variable): boolean {
-  return (
-    variable.name === "container" ||
-    // variable.scopes.length === 0 ||
-    variable.name === "spacing/Number" ||
-    variable.name === "weight/normal" ||
-    variable.name === "weight/medium" ||
-    variable.name === "weight/semibold"
-  );
-}
-
-/**
- * Clean up variable name for use in PandaCSS:
- * - Replace slashes with dots
- * - Remove all non-alphanumeric characters except dots
- */
-function cleanVariableName(name: string): string {
-  return name
-    .replace(/\//g, ".") // Replace slashes with dots
-    .replace(/[^a-zA-Z0-9.]/g, ""); // Remove non-alphanumeric except dots
-}
-
-function isVariableAliasValue(
-  variableValue: VariableValue,
-): variableValue is VariableValueAlias {
-  return (
-    typeof variableValue === "object" &&
-    variableValue !== null &&
-    "type" in variableValue &&
-    variableValue.type === "VARIABLE_ALIAS"
-  );
-}
-
-function isVariableColorValue(
-  variableValue: VariableValue,
-): variableValue is VariableValueColor {
-  return (
-    typeof variableValue === "object" &&
-    variableValue !== null &&
-    "r" in variableValue &&
-    "g" in variableValue &&
-    "b" in variableValue
-  );
-}
-
-/**
- * Determine to which PandaCSS token type the variable belongs
- * based on its type and scopes.
- *
- * This needs to be improved to avoid hardcoding / special cases
- * and handle better all possible variable types and scopes.
- */
-function getVariablePandaTokenType(
-  variable: Variable,
-): keyof Panda_TokenDataType {
-  if (
-    variable.type === "COLOR" &&
-    (variable.scopes.includes("ALL_SCOPES") ||
-      variable.scopes.includes("COLOR") ||
-      variable.scopes.includes("FILL_COLOR") ||
-      variable.scopes.includes("STROKE_COLOR") ||
-      variable.scopes.includes("TEXT_FILL") ||
-      variable.scopes.includes("SHAPE_FILL") ||
-      variable.scopes.includes("FRAME_FILL") ||
-      variable.scopes.includes("ALL_FILLS") ||
-      variable.scopes.includes("EFFECT_COLOR"))
-  ) {
-    return "colors";
-  } else if (variable.scopes.includes("CORNER_RADIUS")) {
-    return "radii";
-  } else if (variable.scopes.includes("GAP")) {
-    return "spacing";
-  } else if (variable.scopes.includes("FONT_SIZE")) {
-    return "fontSizes";
-  } else if (variable.scopes.includes("FONT_STYLE")) {
-    return "fonts";
-  } else if (variable.scopes.includes("LINE_HEIGHT")) {
-    return "lineHeights";
-  } else if (variable.scopes.includes("WIDTH_HEIGHT")) {
-    return "spacing";
-  }
-  // Special cases
-  else if (variable.name.includes("family/")) {
-    return "fonts";
-  } else if (
-    variable.name.startsWith("core/md") ||
-    variable.name.startsWith("core/sm") ||
-    variable.name.startsWith("core/lg") ||
-    variable.name.startsWith("core/full") ||
-    variable.name.startsWith("core/none")
-  ) {
-    // core/md, core/sm, core/lg, core/full, core/none have no scope defined in Figma variable scopes
-    // But are actually only used for as CORNER_RADIUS references in Figma variables
-    return "radii";
-  } else {
-    throw new Error(
-      `Unsupported variable scopes for variable ${
-        variable.name
-      }: ${variable.scopes.join(", ")}`,
-    );
-  }
-}
-
-/**
- * Used in first pass, to extract variable info for second pass.
- *
- * Calculates:
- * - tokenRoot: "tokens" | "semanticTokens"
- * - tokenType: e.g. "colors", "fontSizes", etc.
- * - tokenName: cleaned variable name for reference, e.g. "red.500"
- * - tokenPath: full path for token reference, e.g. "colors.red.500"
- *
- * Allows the second pass to know how to expand a Figma variable ID to the correct PandaCSS token path
- */
-function getVariableOutput(variable: Variable) {
-  const allValues = Object.values(variable.valuesByMode);
-
-  // Is semantic if has multiple modes
-  const isSemantic = allValues.length > 1;
-
-  const tokenRoot = isSemantic ? "semanticTokens" : "tokens";
-  const tokenType = getVariablePandaTokenType(variable);
-  const tokenName = cleanVariableName(variable.name);
-  const tokenPath = `${tokenType}.${tokenName}`;
-
-  return {
-    _figmaVariable: variable, // Keep original variable for reference
-    name: cleanVariableName(variable.name),
-    isSemantic,
-    tokenRoot,
-    tokenType,
-    tokenName,
-    tokenPath,
-  } as const;
-}
-
-function getVariablePandaValue(
-  variable: ReturnType<typeof getVariableOutput>,
-  modeIdToNameMap: Map<string, string>,
-  varIdToVarMap: Map<string, ReturnType<typeof getVariableOutput>>,
-) {
-  const { valuesByMode } = variable._figmaVariable;
-
-  function transformValue(figmaValue: VariableValue): string | number {
-    if (isVariableColorValue(figmaValue)) {
-      // Convert RGB color to hex
-      // TODO: Handle alpha channel if needed
-      const r = Math.round(figmaValue.r * 255);
-      const g = Math.round(figmaValue.g * 255);
-      const b = Math.round(figmaValue.b * 255);
-      const hexValue = `#${r.toString(16).padStart(2, "0")}${g
-        .toString(16)
-        .padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
-
-      return hexValue;
-    } else if (isVariableAliasValue(figmaValue)) {
-      // Resolve alias to get token path
-      const aliasVar = varIdToVarMap.get(figmaValue.id);
-      if (!aliasVar) {
-        throw new Error(
-          `Alias variable ID ${figmaValue.id} for variable ${variable.name} not found in varIdToVarMap`,
-        );
-      }
-      return `{${aliasVar.tokenPath}}`;
-    } else {
-      const shouldAddPixelsUnit =
-        variable.tokenType === "fontSizes" ||
-        variable.tokenType === "radii" ||
-        variable.tokenType === "spacing";
-
-      if (shouldAddPixelsUnit && typeof figmaValue === "number") {
-        return `${figmaValue}px`;
-      } else {
-        return figmaValue as string | number;
-      }
-    }
-  }
-
-  if (variable.tokenRoot === "tokens") {
-    // If core tokens (not semantic), just return single value
-    const figmaValue = Object.values(valuesByMode)[0];
-
-    return {
-      value: transformValue(figmaValue),
-    };
-  } else {
-    // Semantic tokens (multiple modes)
-    const valuesByModeEntries = Object.entries(valuesByMode);
-
-    return {
-      value: Object.fromEntries(
-        valuesByModeEntries.map(([modeId, figmaValue]) => {
-          // If multiple modes, need to map mode ID to PandaCSS condition
-          const modeName = modeIdToNameMap.get(modeId);
-
-          if (!modeName || !(modeName in MODE_TO_CONDITION_MAP)) {
-            throw new Error(
-              `Mode ID ${modeId} for variable ${variable.name} has no mapping to PandaCSS condition`,
-            );
-          }
-          return [MODE_TO_CONDITION_MAP[modeName], transformValue(figmaValue)];
-        }),
-      ),
-    };
-  }
-}
-
-/**
- * Transform Figma export to PandaCSS preset
- */
-export function toPanda(root: FigmaVariablesExport) {
-  const modeIdToNameMap = new Map<string, string>();
-  const varIdToVarMap = new Map<string, ReturnType<typeof getVariableOutput>>();
-
-  const preset = {
-    name: "@hashintel/ds-theme",
-    theme: {
-      tokens: {},
-      semanticTokens: {},
-    },
-  } satisfies Preset;
-
-  // From collections, only extract mapping from Mode ID to Mode name
-  for (const collection of root.collections) {
-    for (const mode of collection.modes) {
-      modeIdToNameMap.set(mode.id, mode.name);
-    }
-  }
-
-  //
-  // First pass on variables:
-  // - Create map id -> partial variable output (names and paths)
-  // - Keep references for second pass
-  //
-  for (const variable of root.variables) {
-    if (SHOULD_OMIT_VARIABLE(variable)) continue;
-
-    varIdToVarMap.set(variable.id, getVariableOutput(variable));
-  }
-
-  //
-  // Second pass on variables:
-  // - Map to PandaCSS token structure, and resolve references in case of aliases
-  //
-  for (const [_variableId, transformedVariable] of varIdToVarMap) {
-    const pandaValue = getVariablePandaValue(
-      transformedVariable,
-      modeIdToNameMap,
-      varIdToVarMap,
-    );
-
-    setWith(
-      preset.theme[transformedVariable.tokenRoot],
-      transformedVariable.tokenPath,
-      pandaValue,
-      Object, // Use Object as customizer to prevent array creation (in case of numeric keys)
-    );
-  }
-
-  //
-  // Define Figma->Panda names map to help LLM when porting components using Figma MCP
-  //
-  type NameMapEntry = { id: string; tokenName: string; tokenPath: string };
-  const nameMap: Record<string, NameMapEntry> = {};
-
-  for (const [id, transformedVariable] of varIdToVarMap) {
-    nameMap[transformedVariable._figmaVariable.name] = {
-      id,
-      tokenName: transformedVariable.tokenName,
-      tokenPath: transformedVariable.tokenPath,
-    };
-  }
-
-  return { preset, nameMap };
-}
diff --git a/libs/@hashintel/ds-theme/scripts/toPanda.ts b/libs/@hashintel/ds-theme/scripts/toPanda.ts
deleted file mode 100644
index 5523ff4c271..00000000000
--- a/libs/@hashintel/ds-theme/scripts/toPanda.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { readFileSync, writeFileSync } from "fs";
-import { toPanda } from "./lib/toPanda";
-
-const inputPath = process.argv[2];
-const inputContent = JSON.parse(readFileSync(inputPath, "utf-8"));
-
-const outputPath = "./src/index.ts";
-const { preset, nameMap } = toPanda(inputContent);
-
-// Write preset output file
-
-const fileContent = `import { definePreset } from "@pandacss/dev";
-export default definePreset(${JSON.stringify(preset, null, 2)});
-`;
-
-writeFileSync(outputPath, fileContent, "utf-8");
-
-// Write name map output file
-
-const nameMapOutputPath = "./src/figma-to-panda-mapping.json";
-writeFileSync(nameMapOutputPath, JSON.stringify(nameMap, null, 2), "utf-8");
diff --git a/libs/@hashintel/ds-theme/src/figma-to-panda-mapping.json b/libs/@hashintel/ds-theme/src/figma-to-panda-mapping.json
deleted file mode 100644
index aaf4a321607..00000000000
--- a/libs/@hashintel/ds-theme/src/figma-to-panda-mapping.json
+++ /dev/null
@@ -1,1882 +0,0 @@
-{
-  "border/neutral/hover": {
-    "id": "VariableID:34307:125249",
-    "tokenName": "border.neutral.hover",
-    "tokenPath": "colors.border.neutral.hover"
-  },
-  "border/neutral/default": {
-    "id": "VariableID:34307:125250",
-    "tokenName": "border.neutral.default",
-    "tokenPath": "colors.border.neutral.default"
-  },
-  "border/neutral/subtle": {
-    "id": "VariableID:34307:125251",
-    "tokenName": "border.neutral.subtle",
-    "tokenPath": "colors.border.neutral.subtle"
-  },
-  "border/neutral/muted": {
-    "id": "VariableID:34307:125252",
-    "tokenName": "border.neutral.muted",
-    "tokenPath": "colors.border.neutral.muted"
-  },
-  "text/primary": {
-    "id": "VariableID:34307:125254",
-    "tokenName": "text.primary",
-    "tokenPath": "colors.text.primary"
-  },
-  "text/secondary": {
-    "id": "VariableID:34307:125255",
-    "tokenName": "text.secondary",
-    "tokenPath": "colors.text.secondary"
-  },
-  "text/tertiary": {
-    "id": "VariableID:34307:125256",
-    "tokenName": "text.tertiary",
-    "tokenPath": "colors.text.tertiary"
-  },
-  "text/disabled": {
-    "id": "VariableID:34307:125257",
-    "tokenName": "text.disabled",
-    "tokenPath": "colors.text.disabled"
-  },
-  "text/inverted": {
-    "id": "VariableID:34307:125258",
-    "tokenName": "text.inverted",
-    "tokenPath": "colors.text.inverted"
-  },
-  "text/semantic/info": {
-    "id": "VariableID:34307:125259",
-    "tokenName": "text.semantic.info",
-    "tokenPath": "colors.text.semantic.info"
-  },
-  "text/semantic/success": {
-    "id": "VariableID:34307:125260",
-    "tokenName": "text.semantic.success",
-    "tokenPath": "colors.text.semantic.success"
-  },
-  "text/semantic/warning": {
-    "id": "VariableID:34307:125261",
-    "tokenName": "text.semantic.warning",
-    "tokenPath": "colors.text.semantic.warning"
-  },
-  "text/semantic/critical": {
-    "id": "VariableID:34307:125262",
-    "tokenName": "text.semantic.critical",
-    "tokenPath": "colors.text.semantic.critical"
-  },
-  "core/gray/00": {
-    "id": "VariableID:34307:125422",
-    "tokenName": "core.gray.00",
-    "tokenPath": "colors.core.gray.00"
-  },
-  "core/gray/10": {
-    "id": "VariableID:34307:125423",
-    "tokenName": "core.gray.10",
-    "tokenPath": "colors.core.gray.10"
-  },
-  "core/gray/20": {
-    "id": "VariableID:34307:125424",
-    "tokenName": "core.gray.20",
-    "tokenPath": "colors.core.gray.20"
-  },
-  "core/gray/30": {
-    "id": "VariableID:34307:125425",
-    "tokenName": "core.gray.30",
-    "tokenPath": "colors.core.gray.30"
-  },
-  "core/gray/40": {
-    "id": "VariableID:34307:125426",
-    "tokenName": "core.gray.40",
-    "tokenPath": "colors.core.gray.40"
-  },
-  "core/gray/50": {
-    "id": "VariableID:34307:125427",
-    "tokenName": "core.gray.50",
-    "tokenPath": "colors.core.gray.50"
-  },
-  "core/gray/60": {
-    "id": "VariableID:34307:125428",
-    "tokenName": "core.gray.60",
-    "tokenPath": "colors.core.gray.60"
-  },
-  "core/gray/70": {
-    "id": "VariableID:34307:125429",
-    "tokenName": "core.gray.70",
-    "tokenPath": "colors.core.gray.70"
-  },
-  "core/gray/80": {
-    "id": "VariableID:34307:125430",
-    "tokenName": "core.gray.80",
-    "tokenPath": "colors.core.gray.80"
-  },
-  "core/gray/90": {
-    "id": "VariableID:34307:125431",
-    "tokenName": "core.gray.90",
-    "tokenPath": "colors.core.gray.90"
-  },
-  "core/red/00": {
-    "id": "VariableID:34307:125442",
-    "tokenName": "core.red.00",
-    "tokenPath": "colors.core.red.00"
-  },
-  "core/red/10": {
-    "id": "VariableID:34307:125443",
-    "tokenName": "core.red.10",
-    "tokenPath": "colors.core.red.10"
-  },
-  "core/red/20": {
-    "id": "VariableID:34307:125444",
-    "tokenName": "core.red.20",
-    "tokenPath": "colors.core.red.20"
-  },
-  "core/red/30": {
-    "id": "VariableID:34307:125445",
-    "tokenName": "core.red.30",
-    "tokenPath": "colors.core.red.30"
-  },
-  "core/red/40": {
-    "id": "VariableID:34307:125446",
-    "tokenName": "core.red.40",
-    "tokenPath": "colors.core.red.40"
-  },
-  "core/red/50": {
-    "id": "VariableID:34307:125447",
-    "tokenName": "core.red.50",
-    "tokenPath": "colors.core.red.50"
-  },
-  "core/red/60": {
-    "id": "VariableID:34307:125448",
-    "tokenName": "core.red.60",
-    "tokenPath": "colors.core.red.60"
-  },
-  "core/red/70": {
-    "id": "VariableID:34307:125449",
-    "tokenName": "core.red.70",
-    "tokenPath": "colors.core.red.70"
-  },
-  "core/red/80": {
-    "id": "VariableID:34307:125450",
-    "tokenName": "core.red.80",
-    "tokenPath": "colors.core.red.80"
-  },
-  "core/red/90": {
-    "id": "VariableID:34307:125451",
-    "tokenName": "core.red.90",
-    "tokenPath": "colors.core.red.90"
-  },
-  "core/orange/00": {
-    "id": "VariableID:34307:125452",
-    "tokenName": "core.orange.00",
-    "tokenPath": "colors.core.orange.00"
-  },
-  "core/orange/10": {
-    "id": "VariableID:34307:125453",
-    "tokenName": "core.orange.10",
-    "tokenPath": "colors.core.orange.10"
-  },
-  "core/orange/20": {
-    "id": "VariableID:34307:125454",
-    "tokenName": "core.orange.20",
-    "tokenPath": "colors.core.orange.20"
-  },
-  "core/orange/30": {
-    "id": "VariableID:34307:125455",
-    "tokenName": "core.orange.30",
-    "tokenPath": "colors.core.orange.30"
-  },
-  "core/orange/40": {
-    "id": "VariableID:34307:125456",
-    "tokenName": "core.orange.40",
-    "tokenPath": "colors.core.orange.40"
-  },
-  "core/orange/50": {
-    "id": "VariableID:34307:125457",
-    "tokenName": "core.orange.50",
-    "tokenPath": "colors.core.orange.50"
-  },
-  "core/orange/60": {
-    "id": "VariableID:34307:125458",
-    "tokenName": "core.orange.60",
-    "tokenPath": "colors.core.orange.60"
-  },
-  "core/orange/70": {
-    "id": "VariableID:34307:125459",
-    "tokenName": "core.orange.70",
-    "tokenPath": "colors.core.orange.70"
-  },
-  "core/orange/80": {
-    "id": "VariableID:34307:125460",
-    "tokenName": "core.orange.80",
-    "tokenPath": "colors.core.orange.80"
-  },
-  "core/orange/90": {
-    "id": "VariableID:34307:125461",
-    "tokenName": "core.orange.90",
-    "tokenPath": "colors.core.orange.90"
-  },
-  "core/green/00": {
-    "id": "VariableID:34307:125462",
-    "tokenName": "core.green.00",
-    "tokenPath": "colors.core.green.00"
-  },
-  "core/green/10": {
-    "id": "VariableID:34307:125463",
-    "tokenName": "core.green.10",
-    "tokenPath": "colors.core.green.10"
-  },
-  "core/green/20": {
-    "id": "VariableID:34307:125464",
-    "tokenName": "core.green.20",
-    "tokenPath": "colors.core.green.20"
-  },
-  "core/green/30": {
-    "id": "VariableID:34307:125465",
-    "tokenName": "core.green.30",
-    "tokenPath": "colors.core.green.30"
-  },
-  "core/green/40": {
-    "id": "VariableID:34307:125466",
-    "tokenName": "core.green.40",
-    "tokenPath": "colors.core.green.40"
-  },
-  "core/green/50": {
-    "id": "VariableID:34307:125467",
-    "tokenName": "core.green.50",
-    "tokenPath": "colors.core.green.50"
-  },
-  "core/green/60": {
-    "id": "VariableID:34307:125468",
-    "tokenName": "core.green.60",
-    "tokenPath": "colors.core.green.60"
-  },
-  "core/green/70": {
-    "id": "VariableID:34307:125469",
-    "tokenName": "core.green.70",
-    "tokenPath": "colors.core.green.70"
-  },
-  "core/green/80": {
-    "id": "VariableID:34307:125470",
-    "tokenName": "core.green.80",
-    "tokenPath": "colors.core.green.80"
-  },
-  "core/green/90": {
-    "id": "VariableID:34307:125471",
-    "tokenName": "core.green.90",
-    "tokenPath": "colors.core.green.90"
-  },
-  "core/blue/00": {
-    "id": "VariableID:34307:125472",
-    "tokenName": "core.blue.00",
-    "tokenPath": "colors.core.blue.00"
-  },
-  "core/blue/10": {
-    "id": "VariableID:34307:125473",
-    "tokenName": "core.blue.10",
-    "tokenPath": "colors.core.blue.10"
-  },
-  "core/blue/20": {
-    "id": "VariableID:34307:125474",
-    "tokenName": "core.blue.20",
-    "tokenPath": "colors.core.blue.20"
-  },
-  "core/blue/30": {
-    "id": "VariableID:34307:125475",
-    "tokenName": "core.blue.30",
-    "tokenPath": "colors.core.blue.30"
-  },
-  "core/blue/40": {
-    "id": "VariableID:34307:125476",
-    "tokenName": "core.blue.40",
-    "tokenPath": "colors.core.blue.40"
-  },
-  "core/blue/50": {
-    "id": "VariableID:34307:125477",
-    "tokenName": "core.blue.50",
-    "tokenPath": "colors.core.blue.50"
-  },
-  "core/blue/60": {
-    "id": "VariableID:34307:125478",
-    "tokenName": "core.blue.60",
-    "tokenPath": "colors.core.blue.60"
-  },
-  "core/blue/70": {
-    "id": "VariableID:34307:125479",
-    "tokenName": "core.blue.70",
-    "tokenPath": "colors.core.blue.70"
-  },
-  "core/blue/80": {
-    "id": "VariableID:34307:125480",
-    "tokenName": "core.blue.80",
-    "tokenPath": "colors.core.blue.80"
-  },
-  "core/blue/90": {
-    "id": "VariableID:34307:125481",
-    "tokenName": "core.blue.90",
-    "tokenPath": "colors.core.blue.90"
-  },
-  "core/neutral/white": {
-    "id": "VariableID:35052:116274",
-    "tokenName": "core.neutral.white",
-    "tokenPath": "colors.core.neutral.white"
-  },
-  "core/neutral/black": {
-    "id": "VariableID:35052:116275",
-    "tokenName": "core.neutral.black",
-    "tokenPath": "colors.core.neutral.black"
-  },
-  "core/purple/50": {
-    "id": "VariableID:40:50884",
-    "tokenName": "core.purple.50",
-    "tokenPath": "colors.core.purple.50"
-  },
-  "core/purple/40": {
-    "id": "VariableID:40:50885",
-    "tokenName": "core.purple.40",
-    "tokenPath": "colors.core.purple.40"
-  },
-  "core/purple/30": {
-    "id": "VariableID:40:50886",
-    "tokenName": "core.purple.30",
-    "tokenPath": "colors.core.purple.30"
-  },
-  "core/purple/20": {
-    "id": "VariableID:40:50887",
-    "tokenName": "core.purple.20",
-    "tokenPath": "colors.core.purple.20"
-  },
-  "core/purple/10": {
-    "id": "VariableID:40:50888",
-    "tokenName": "core.purple.10",
-    "tokenPath": "colors.core.purple.10"
-  },
-  "text/link": {
-    "id": "VariableID:40:51104",
-    "tokenName": "text.link",
-    "tokenPath": "colors.text.link"
-  },
-  "core/purple/60": {
-    "id": "VariableID:511:17654",
-    "tokenName": "core.purple.60",
-    "tokenPath": "colors.core.purple.60"
-  },
-  "core/purple/70": {
-    "id": "VariableID:511:17655",
-    "tokenName": "core.purple.70",
-    "tokenPath": "colors.core.purple.70"
-  },
-  "core/purple/80": {
-    "id": "VariableID:511:17656",
-    "tokenName": "core.purple.80",
-    "tokenPath": "colors.core.purple.80"
-  },
-  "core/purple/90": {
-    "id": "VariableID:511:17657",
-    "tokenName": "core.purple.90",
-    "tokenPath": "colors.core.purple.90"
-  },
-  "core/purple/00": {
-    "id": "VariableID:15673:12641",
-    "tokenName": "core.purple.00",
-    "tokenPath": "colors.core.purple.00"
-  },
-  "core/pink/20": {
-    "id": "VariableID:16150:786",
-    "tokenName": "core.pink.20",
-    "tokenPath": "colors.core.pink.20"
-  },
-  "core/pink/50": {
-    "id": "VariableID:16150:30796",
-    "tokenName": "core.pink.50",
-    "tokenPath": "colors.core.pink.50"
-  },
-  "core/pink/60": {
-    "id": "VariableID:16150:34244",
-    "tokenName": "core.pink.60",
-    "tokenPath": "colors.core.pink.60"
-  },
-  "core/pink/70": {
-    "id": "VariableID:16150:34245",
-    "tokenName": "core.pink.70",
-    "tokenPath": "colors.core.pink.70"
-  },
-  "core/pink/80": {
-    "id": "VariableID:16150:34246",
-    "tokenName": "core.pink.80",
-    "tokenPath": "colors.core.pink.80"
-  },
-  "core/pink/90": {
-    "id": "VariableID:16150:34247",
-    "tokenName": "core.pink.90",
-    "tokenPath": "colors.core.pink.90"
-  },
-  "core/pink/30": {
-    "id": "VariableID:16150:34248",
-    "tokenName": "core.pink.30",
-    "tokenPath": "colors.core.pink.30"
-  },
-  "core/pink/10": {
-    "id": "VariableID:16150:34249",
-    "tokenName": "core.pink.10",
-    "tokenPath": "colors.core.pink.10"
-  },
-  "core/pink/00": {
-    "id": "VariableID:16150:34250",
-    "tokenName": "core.pink.00",
-    "tokenPath": "colors.core.pink.00"
-  },
-  "core/yellow/00": {
-    "id": "VariableID:16150:34251",
-    "tokenName": "core.yellow.00",
-    "tokenPath": "colors.core.yellow.00"
-  },
-  "core/yellow/10": {
-    "id": "VariableID:16150:34252",
-    "tokenName": "core.yellow.10",
-    "tokenPath": "colors.core.yellow.10"
-  },
-  "core/yellow/20": {
-    "id": "VariableID:16150:34253",
-    "tokenName": "core.yellow.20",
-    "tokenPath": "colors.core.yellow.20"
-  },
-  "core/yellow/30": {
-    "id": "VariableID:16150:34254",
-    "tokenName": "core.yellow.30",
-    "tokenPath": "colors.core.yellow.30"
-  },
-  "core/yellow/40": {
-    "id": "VariableID:16150:34255",
-    "tokenName": "core.yellow.40",
-    "tokenPath": "colors.core.yellow.40"
-  },
-  "core/yellow/50": {
-    "id": "VariableID:16150:34256",
-    "tokenName": "core.yellow.50",
-    "tokenPath": "colors.core.yellow.50"
-  },
-  "core/yellow/60": {
-    "id": "VariableID:16150:34257",
-    "tokenName": "core.yellow.60",
-    "tokenPath": "colors.core.yellow.60"
-  },
-  "core/yellow/70": {
-    "id": "VariableID:16150:34258",
-    "tokenName": "core.yellow.70",
-    "tokenPath": "colors.core.yellow.70"
-  },
-  "core/yellow/80": {
-    "id": "VariableID:16150:34259",
-    "tokenName": "core.yellow.80",
-    "tokenPath": "colors.core.yellow.80"
-  },
-  "core/yellow/90": {
-    "id": "VariableID:16150:34260",
-    "tokenName": "core.yellow.90",
-    "tokenPath": "colors.core.yellow.90"
-  },
-  "core/pink/40": {
-    "id": "VariableID:16265:33421",
-    "tokenName": "core.pink.40",
-    "tokenPath": "colors.core.pink.40"
-  },
-  "spacing/default/0": {
-    "id": "VariableID:16279:33452",
-    "tokenName": "spacing.default.0",
-    "tokenPath": "spacing.spacing.default.0"
-  },
-  "spacing/default/1": {
-    "id": "VariableID:16279:33453",
-    "tokenName": "spacing.default.1",
-    "tokenPath": "spacing.spacing.default.1"
-  },
-  "spacing/default/2": {
-    "id": "VariableID:16279:33454",
-    "tokenName": "spacing.default.2",
-    "tokenPath": "spacing.spacing.default.2"
-  },
-  "spacing/default/3": {
-    "id": "VariableID:16279:33455",
-    "tokenName": "spacing.default.3",
-    "tokenPath": "spacing.spacing.default.3"
-  },
-  "spacing/default/4": {
-    "id": "VariableID:16279:33456",
-    "tokenName": "spacing.default.4",
-    "tokenPath": "spacing.spacing.default.4"
-  },
-  "spacing/default/5": {
-    "id": "VariableID:16279:33458",
-    "tokenName": "spacing.default.5",
-    "tokenPath": "spacing.spacing.default.5"
-  },
-  "spacing/default/6": {
-    "id": "VariableID:16279:33459",
-    "tokenName": "spacing.default.6",
-    "tokenPath": "spacing.spacing.default.6"
-  },
-  "spacing/default/7": {
-    "id": "VariableID:16279:33460",
-    "tokenName": "spacing.default.7",
-    "tokenPath": "spacing.spacing.default.7"
-  },
-  "spacing/default/8": {
-    "id": "VariableID:16279:33461",
-    "tokenName": "spacing.default.8",
-    "tokenPath": "spacing.spacing.default.8"
-  },
-  "spacing/default/9": {
-    "id": "VariableID:16279:33462",
-    "tokenName": "spacing.default.9",
-    "tokenPath": "spacing.spacing.default.9"
-  },
-  "spacing/default/10": {
-    "id": "VariableID:16279:33463",
-    "tokenName": "spacing.default.10",
-    "tokenPath": "spacing.spacing.default.10"
-  },
-  "spacing/default/11": {
-    "id": "VariableID:16279:33464",
-    "tokenName": "spacing.default.11",
-    "tokenPath": "spacing.spacing.default.11"
-  },
-  "family/display": {
-    "id": "VariableID:20383:8732",
-    "tokenName": "family.display",
-    "tokenPath": "fonts.family.display"
-  },
-  "family/body": {
-    "id": "VariableID:20383:8733",
-    "tokenName": "family.body",
-    "tokenPath": "fonts.family.body"
-  },
-  "weight/normal-delete": {
-    "id": "VariableID:20383:8736",
-    "tokenName": "weight.normaldelete",
-    "tokenPath": "fonts.weight.normaldelete"
-  },
-  "weight/medium-delete": {
-    "id": "VariableID:20383:8737",
-    "tokenName": "weight.mediumdelete",
-    "tokenPath": "fonts.weight.mediumdelete"
-  },
-  "weight/semibold-delete": {
-    "id": "VariableID:20383:8738",
-    "tokenName": "weight.semibolddelete",
-    "tokenPath": "fonts.weight.semibolddelete"
-  },
-  "size/text-3xl": {
-    "id": "VariableID:20383:22068",
-    "tokenName": "size.text3xl",
-    "tokenPath": "fontSizes.size.text3xl"
-  },
-  "size/text-sm": {
-    "id": "VariableID:20383:22069",
-    "tokenName": "size.textsm",
-    "tokenPath": "fontSizes.size.textsm"
-  },
-  "leading/none/text-3xl": {
-    "id": "VariableID:20383:31547",
-    "tokenName": "leading.none.text3xl",
-    "tokenPath": "lineHeights.leading.none.text3xl"
-  },
-  "leading/none/text-sm": {
-    "id": "VariableID:20383:31548",
-    "tokenName": "leading.none.textsm",
-    "tokenPath": "lineHeights.leading.none.textsm"
-  },
-  "size/text-base": {
-    "id": "VariableID:20472:4187",
-    "tokenName": "size.textbase",
-    "tokenPath": "fontSizes.size.textbase"
-  },
-  "size/text-xs": {
-    "id": "VariableID:20472:4188",
-    "tokenName": "size.textxs",
-    "tokenPath": "fontSizes.size.textxs"
-  },
-  "size/text-xl": {
-    "id": "VariableID:20472:4189",
-    "tokenName": "size.textxl",
-    "tokenPath": "fontSizes.size.textxl"
-  },
-  "size/text-lg": {
-    "id": "VariableID:20472:4190",
-    "tokenName": "size.textlg",
-    "tokenPath": "fontSizes.size.textlg"
-  },
-  "size/text-2xl": {
-    "id": "VariableID:20472:4191",
-    "tokenName": "size.text2xl",
-    "tokenPath": "fontSizes.size.text2xl"
-  },
-  "size/text-4xl": {
-    "id": "VariableID:20472:4192",
-    "tokenName": "size.text4xl",
-    "tokenPath": "fontSizes.size.text4xl"
-  },
-  "leading/none/text-xs": {
-    "id": "VariableID:20472:4195",
-    "tokenName": "leading.none.textxs",
-    "tokenPath": "lineHeights.leading.none.textxs"
-  },
-  "leading/none/text-base": {
-    "id": "VariableID:20472:4196",
-    "tokenName": "leading.none.textbase",
-    "tokenPath": "lineHeights.leading.none.textbase"
-  },
-  "leading/none/text-lg": {
-    "id": "VariableID:20472:4197",
-    "tokenName": "leading.none.textlg",
-    "tokenPath": "lineHeights.leading.none.textlg"
-  },
-  "leading/normal/text-xs": {
-    "id": "VariableID:20472:4295",
-    "tokenName": "leading.normal.textxs",
-    "tokenPath": "lineHeights.leading.normal.textxs"
-  },
-  "leading/normal/text-sm": {
-    "id": "VariableID:20472:4296",
-    "tokenName": "leading.normal.textsm",
-    "tokenPath": "lineHeights.leading.normal.textsm"
-  },
-  "leading/normal/text-base": {
-    "id": "VariableID:20472:4297",
-    "tokenName": "leading.normal.textbase",
-    "tokenPath": "lineHeights.leading.normal.textbase"
-  },
-  "leading/normal/text-lg": {
-    "id": "VariableID:20472:4298",
-    "tokenName": "leading.normal.textlg",
-    "tokenPath": "lineHeights.leading.normal.textlg"
-  },
-  "surface/default": {
-    "id": "VariableID:37948:5594",
-    "tokenName": "surface.default",
-    "tokenPath": "colors.surface.default"
-  },
-  "surface/emphasis": {
-    "id": "VariableID:37948:5595",
-    "tokenName": "surface.emphasis",
-    "tokenPath": "colors.surface.emphasis"
-  },
-  "surface/subtle": {
-    "id": "VariableID:37948:5596",
-    "tokenName": "surface.subtle",
-    "tokenPath": "colors.surface.subtle"
-  },
-  "surface/alt": {
-    "id": "VariableID:37948:5597",
-    "tokenName": "surface.alt",
-    "tokenPath": "colors.surface.alt"
-  },
-  "core/custom/00": {
-    "id": "VariableID:37953:59399",
-    "tokenName": "core.custom.00",
-    "tokenPath": "colors.core.custom.00"
-  },
-  "core/custom/10": {
-    "id": "VariableID:37953:59400",
-    "tokenName": "core.custom.10",
-    "tokenPath": "colors.core.custom.10"
-  },
-  "core/custom/20": {
-    "id": "VariableID:37953:59401",
-    "tokenName": "core.custom.20",
-    "tokenPath": "colors.core.custom.20"
-  },
-  "core/custom/30": {
-    "id": "VariableID:37953:59402",
-    "tokenName": "core.custom.30",
-    "tokenPath": "colors.core.custom.30"
-  },
-  "core/custom/40": {
-    "id": "VariableID:37953:59403",
-    "tokenName": "core.custom.40",
-    "tokenPath": "colors.core.custom.40"
-  },
-  "core/custom/50": {
-    "id": "VariableID:37953:59404",
-    "tokenName": "core.custom.50",
-    "tokenPath": "colors.core.custom.50"
-  },
-  "core/custom/60": {
-    "id": "VariableID:37953:59405",
-    "tokenName": "core.custom.60",
-    "tokenPath": "colors.core.custom.60"
-  },
-  "core/custom/70": {
-    "id": "VariableID:37953:59406",
-    "tokenName": "core.custom.70",
-    "tokenPath": "colors.core.custom.70"
-  },
-  "core/custom/80": {
-    "id": "VariableID:37953:59407",
-    "tokenName": "core.custom.80",
-    "tokenPath": "colors.core.custom.80"
-  },
-  "core/custom/90": {
-    "id": "VariableID:37953:59408",
-    "tokenName": "core.custom.90",
-    "tokenPath": "colors.core.custom.90"
-  },
-  "bg/brand/subtle/default": {
-    "id": "VariableID:38012:105479",
-    "tokenName": "bg.brand.subtle.default",
-    "tokenPath": "colors.bg.brand.subtle.default"
-  },
-  "bg/brand/subtle/hover": {
-    "id": "VariableID:38012:105480",
-    "tokenName": "bg.brand.subtle.hover",
-    "tokenPath": "colors.bg.brand.subtle.hover"
-  },
-  "bg/brand/subtle/active": {
-    "id": "VariableID:38012:105481",
-    "tokenName": "bg.brand.subtle.active",
-    "tokenPath": "colors.bg.brand.subtle.active"
-  },
-  "surface/muted": {
-    "id": "VariableID:38012:105483",
-    "tokenName": "surface.muted",
-    "tokenPath": "colors.surface.muted"
-  },
-  "bg/brand/bold/default": {
-    "id": "VariableID:38012:106008",
-    "tokenName": "bg.brand.bold.default",
-    "tokenPath": "colors.bg.brand.bold.default"
-  },
-  "bg/brand/bold/hover": {
-    "id": "VariableID:38012:106009",
-    "tokenName": "bg.brand.bold.hover",
-    "tokenPath": "colors.bg.brand.bold.hover"
-  },
-  "bg/brand/bold/selected": {
-    "id": "VariableID:38012:106010",
-    "tokenName": "bg.brand.bold.selected",
-    "tokenPath": "colors.bg.brand.bold.selected"
-  },
-  "bg/brand/bold/active": {
-    "id": "VariableID:38012:106011",
-    "tokenName": "bg.brand.bold.active",
-    "tokenPath": "colors.bg.brand.bold.active"
-  },
-  "bg/neutral/subtle/default": {
-    "id": "VariableID:38012:106012",
-    "tokenName": "bg.neutral.subtle.default",
-    "tokenPath": "colors.bg.neutral.subtle.default"
-  },
-  "bg/neutral/subtle/hover": {
-    "id": "VariableID:38012:106013",
-    "tokenName": "bg.neutral.subtle.hover",
-    "tokenPath": "colors.bg.neutral.subtle.hover"
-  },
-  "bg/neutral/subtle/active": {
-    "id": "VariableID:38012:106014",
-    "tokenName": "bg.neutral.subtle.active",
-    "tokenPath": "colors.bg.neutral.subtle.active"
-  },
-  "bg/neutral/subtle/selected": {
-    "id": "VariableID:38012:106015",
-    "tokenName": "bg.neutral.subtle.selected",
-    "tokenPath": "colors.bg.neutral.subtle.selected"
-  },
-  "text/link-hover": {
-    "id": "VariableID:38013:106088",
-    "tokenName": "text.linkhover",
-    "tokenPath": "colors.text.linkhover"
-  },
-  "border/status/info": {
-    "id": "VariableID:38013:106092",
-    "tokenName": "border.status.info",
-    "tokenPath": "colors.border.status.info"
-  },
-  "border/status/caution": {
-    "id": "VariableID:38013:106093",
-    "tokenName": "border.status.caution",
-    "tokenPath": "colors.border.status.caution"
-  },
-  "border/status/warning": {
-    "id": "VariableID:38013:106094",
-    "tokenName": "border.status.warning",
-    "tokenPath": "colors.border.status.warning"
-  },
-  "border/status/critical": {
-    "id": "VariableID:38013:106095",
-    "tokenName": "border.status.critical",
-    "tokenPath": "colors.border.status.critical"
-  },
-  "border/status/success": {
-    "id": "VariableID:38013:106096",
-    "tokenName": "border.status.success",
-    "tokenPath": "colors.border.status.success"
-  },
-  "icon/primary": {
-    "id": "VariableID:38013:106097",
-    "tokenName": "icon.primary",
-    "tokenPath": "colors.icon.primary"
-  },
-  "icon/secondary": {
-    "id": "VariableID:38013:106098",
-    "tokenName": "icon.secondary",
-    "tokenPath": "colors.icon.secondary"
-  },
-  "icon/tertiary": {
-    "id": "VariableID:38013:106099",
-    "tokenName": "icon.tertiary",
-    "tokenPath": "colors.icon.tertiary"
-  },
-  "icon/disabled": {
-    "id": "VariableID:38013:106100",
-    "tokenName": "icon.disabled",
-    "tokenPath": "colors.icon.disabled"
-  },
-  "icon/inverted": {
-    "id": "VariableID:38013:106101",
-    "tokenName": "icon.inverted",
-    "tokenPath": "colors.icon.inverted"
-  },
-  "icon/link": {
-    "id": "VariableID:38013:106102",
-    "tokenName": "icon.link",
-    "tokenPath": "colors.icon.link"
-  },
-  "icon/link-hover": {
-    "id": "VariableID:38013:106103",
-    "tokenName": "icon.linkhover",
-    "tokenPath": "colors.icon.linkhover"
-  },
-  "icon/semantic/info": {
-    "id": "VariableID:38013:106104",
-    "tokenName": "icon.semantic.info",
-    "tokenPath": "colors.icon.semantic.info"
-  },
-  "icon/semantic/success": {
-    "id": "VariableID:38013:106105",
-    "tokenName": "icon.semantic.success",
-    "tokenPath": "colors.icon.semantic.success"
-  },
-  "icon/semantic/warning": {
-    "id": "VariableID:38013:106106",
-    "tokenName": "icon.semantic.warning",
-    "tokenPath": "colors.icon.semantic.warning"
-  },
-  "icon/semantic/critical": {
-    "id": "VariableID:38013:106107",
-    "tokenName": "icon.semantic.critical",
-    "tokenPath": "colors.icon.semantic.critical"
-  },
-  "bg/neutral/bold/default": {
-    "id": "VariableID:38014:106108",
-    "tokenName": "bg.neutral.bold.default",
-    "tokenPath": "colors.bg.neutral.bold.default"
-  },
-  "bg/neutral/bold/hover": {
-    "id": "VariableID:38014:106109",
-    "tokenName": "bg.neutral.bold.hover",
-    "tokenPath": "colors.bg.neutral.bold.hover"
-  },
-  "bg/neutral/bold/active": {
-    "id": "VariableID:38014:106110",
-    "tokenName": "bg.neutral.bold.active",
-    "tokenPath": "colors.bg.neutral.bold.active"
-  },
-  "bg/neutral/bold/selected": {
-    "id": "VariableID:38014:106111",
-    "tokenName": "bg.neutral.bold.selected",
-    "tokenPath": "colors.bg.neutral.bold.selected"
-  },
-  "core/md/1": {
-    "id": "VariableID:38014:106115",
-    "tokenName": "core.md.1",
-    "tokenPath": "radii.core.md.1"
-  },
-  "core/md/2": {
-    "id": "VariableID:38014:106117",
-    "tokenName": "core.md.2",
-    "tokenPath": "radii.core.md.2"
-  },
-  "core/md/3": {
-    "id": "VariableID:38014:106118",
-    "tokenName": "core.md.3",
-    "tokenPath": "radii.core.md.3"
-  },
-  "core/md/4": {
-    "id": "VariableID:38014:106119",
-    "tokenName": "core.md.4",
-    "tokenPath": "radii.core.md.4"
-  },
-  "core/md/5": {
-    "id": "VariableID:38014:106120",
-    "tokenName": "core.md.5",
-    "tokenPath": "radii.core.md.5"
-  },
-  "core/md/6": {
-    "id": "VariableID:38014:106121",
-    "tokenName": "core.md.6",
-    "tokenPath": "radii.core.md.6"
-  },
-  "core/md/7": {
-    "id": "VariableID:38014:106122",
-    "tokenName": "core.md.7",
-    "tokenPath": "radii.core.md.7"
-  },
-  "core/md/8": {
-    "id": "VariableID:38014:106123",
-    "tokenName": "core.md.8",
-    "tokenPath": "radii.core.md.8"
-  },
-  "core/md/9": {
-    "id": "VariableID:38014:106124",
-    "tokenName": "core.md.9",
-    "tokenPath": "radii.core.md.9"
-  },
-  "core/md/10": {
-    "id": "VariableID:38014:106126",
-    "tokenName": "core.md.10",
-    "tokenPath": "radii.core.md.10"
-  },
-  "core/md/full": {
-    "id": "VariableID:38014:106136",
-    "tokenName": "core.md.full",
-    "tokenPath": "radii.core.md.full"
-  },
-  "core/md/0": {
-    "id": "VariableID:38014:106144",
-    "tokenName": "core.md.0",
-    "tokenPath": "radii.core.md.0"
-  },
-  "component/button/sm": {
-    "id": "VariableID:38014:106145",
-    "tokenName": "component.button.sm",
-    "tokenPath": "radii.component.button.sm"
-  },
-  "component/button/md": {
-    "id": "VariableID:38014:106152",
-    "tokenName": "component.button.md",
-    "tokenPath": "radii.component.button.md"
-  },
-  "component/button/lg": {
-    "id": "VariableID:38014:106153",
-    "tokenName": "component.button.lg",
-    "tokenPath": "radii.component.button.lg"
-  },
-  "component/button/xs": {
-    "id": "VariableID:38014:106154",
-    "tokenName": "component.button.xs",
-    "tokenPath": "radii.component.button.xs"
-  },
-  "core/gray/95": {
-    "id": "VariableID:38017:115540",
-    "tokenName": "core.gray.95",
-    "tokenPath": "colors.core.gray.95"
-  },
-  "core/gray/35": {
-    "id": "VariableID:38019:118660",
-    "tokenName": "core.gray.35",
-    "tokenPath": "colors.core.gray.35"
-  },
-  "core/gray-alpha/00": {
-    "id": "VariableID:38034:18034",
-    "tokenName": "core.grayalpha.00",
-    "tokenPath": "colors.core.grayalpha.00"
-  },
-  "core/gray-alpha/10": {
-    "id": "VariableID:38034:18035",
-    "tokenName": "core.grayalpha.10",
-    "tokenPath": "colors.core.grayalpha.10"
-  },
-  "core/gray-alpha/20": {
-    "id": "VariableID:38034:18036",
-    "tokenName": "core.grayalpha.20",
-    "tokenPath": "colors.core.grayalpha.20"
-  },
-  "core/gray-alpha/30": {
-    "id": "VariableID:38034:18037",
-    "tokenName": "core.grayalpha.30",
-    "tokenPath": "colors.core.grayalpha.30"
-  },
-  "core/gray-alpha/40": {
-    "id": "VariableID:38034:18039",
-    "tokenName": "core.grayalpha.40",
-    "tokenPath": "colors.core.grayalpha.40"
-  },
-  "core/gray-alpha/50": {
-    "id": "VariableID:38034:18040",
-    "tokenName": "core.grayalpha.50",
-    "tokenPath": "colors.core.grayalpha.50"
-  },
-  "core/gray-alpha/60": {
-    "id": "VariableID:38034:18041",
-    "tokenName": "core.grayalpha.60",
-    "tokenPath": "colors.core.grayalpha.60"
-  },
-  "core/gray-alpha/70": {
-    "id": "VariableID:38034:18042",
-    "tokenName": "core.grayalpha.70",
-    "tokenPath": "colors.core.grayalpha.70"
-  },
-  "core/gray-alpha/80": {
-    "id": "VariableID:38034:18043",
-    "tokenName": "core.grayalpha.80",
-    "tokenPath": "colors.core.grayalpha.80"
-  },
-  "core/gray-alpha/90": {
-    "id": "VariableID:38034:18044",
-    "tokenName": "core.grayalpha.90",
-    "tokenPath": "colors.core.grayalpha.90"
-  },
-  "core/gray-alpha/95": {
-    "id": "VariableID:38034:18045",
-    "tokenName": "core.grayalpha.95",
-    "tokenPath": "colors.core.grayalpha.95"
-  },
-  "core/custom-alpha/00": {
-    "id": "VariableID:38034:18046",
-    "tokenName": "core.customalpha.00",
-    "tokenPath": "colors.core.customalpha.00"
-  },
-  "core/custom-alpha/10": {
-    "id": "VariableID:38034:18047",
-    "tokenName": "core.customalpha.10",
-    "tokenPath": "colors.core.customalpha.10"
-  },
-  "core/custom-alpha/20": {
-    "id": "VariableID:38034:18048",
-    "tokenName": "core.customalpha.20",
-    "tokenPath": "colors.core.customalpha.20"
-  },
-  "core/custom-alpha/30": {
-    "id": "VariableID:38034:18049",
-    "tokenName": "core.customalpha.30",
-    "tokenPath": "colors.core.customalpha.30"
-  },
-  "core/custom-alpha/40": {
-    "id": "VariableID:38034:18050",
-    "tokenName": "core.customalpha.40",
-    "tokenPath": "colors.core.customalpha.40"
-  },
-  "core/custom-alpha/50": {
-    "id": "VariableID:38034:18051",
-    "tokenName": "core.customalpha.50",
-    "tokenPath": "colors.core.customalpha.50"
-  },
-  "core/custom-alpha/60": {
-    "id": "VariableID:38034:18052",
-    "tokenName": "core.customalpha.60",
-    "tokenPath": "colors.core.customalpha.60"
-  },
-  "core/custom-alpha/70": {
-    "id": "VariableID:38034:18053",
-    "tokenName": "core.customalpha.70",
-    "tokenPath": "colors.core.customalpha.70"
-  },
-  "core/custom-alpha/80": {
-    "id": "VariableID:38034:18054",
-    "tokenName": "core.customalpha.80",
-    "tokenPath": "colors.core.customalpha.80"
-  },
-  "core/custom-alpha/90": {
-    "id": "VariableID:38034:18055",
-    "tokenName": "core.customalpha.90",
-    "tokenPath": "colors.core.customalpha.90"
-  },
-  "bg/status/info/subtle/default": {
-    "id": "VariableID:38034:18104",
-    "tokenName": "bg.status.info.subtle.default",
-    "tokenPath": "colors.bg.status.info.subtle.default"
-  },
-  "bg/status/info/subtle/hover": {
-    "id": "VariableID:38034:18105",
-    "tokenName": "bg.status.info.subtle.hover",
-    "tokenPath": "colors.bg.status.info.subtle.hover"
-  },
-  "bg/status/info/subtle/active": {
-    "id": "VariableID:38034:18106",
-    "tokenName": "bg.status.info.subtle.active",
-    "tokenPath": "colors.bg.status.info.subtle.active"
-  },
-  "bg/status/success/subtle/default": {
-    "id": "VariableID:38034:18107",
-    "tokenName": "bg.status.success.subtle.default",
-    "tokenPath": "colors.bg.status.success.subtle.default"
-  },
-  "bg/status/caution/subtle/default": {
-    "id": "VariableID:38034:18108",
-    "tokenName": "bg.status.caution.subtle.default",
-    "tokenPath": "colors.bg.status.caution.subtle.default"
-  },
-  "bg/status/caution/subtle/hover": {
-    "id": "VariableID:38034:18109",
-    "tokenName": "bg.status.caution.subtle.hover",
-    "tokenPath": "colors.bg.status.caution.subtle.hover"
-  },
-  "bg/status/caution/subtle/active": {
-    "id": "VariableID:38034:18110",
-    "tokenName": "bg.status.caution.subtle.active",
-    "tokenPath": "colors.bg.status.caution.subtle.active"
-  },
-  "bg/status/success/subtle/hover": {
-    "id": "VariableID:38034:18111",
-    "tokenName": "bg.status.success.subtle.hover",
-    "tokenPath": "colors.bg.status.success.subtle.hover"
-  },
-  "bg/status/success/subtle/active": {
-    "id": "VariableID:38034:18112",
-    "tokenName": "bg.status.success.subtle.active",
-    "tokenPath": "colors.bg.status.success.subtle.active"
-  },
-  "bg/status/warning/subtle/default": {
-    "id": "VariableID:38034:18113",
-    "tokenName": "bg.status.warning.subtle.default",
-    "tokenPath": "colors.bg.status.warning.subtle.default"
-  },
-  "bg/status/warning/subtle/hover": {
-    "id": "VariableID:38034:18114",
-    "tokenName": "bg.status.warning.subtle.hover",
-    "tokenPath": "colors.bg.status.warning.subtle.hover"
-  },
-  "bg/status/warning/subtle/active": {
-    "id": "VariableID:38034:18115",
-    "tokenName": "bg.status.warning.subtle.active",
-    "tokenPath": "colors.bg.status.warning.subtle.active"
-  },
-  "bg/status/critical/subtle/default": {
-    "id": "VariableID:38034:18116",
-    "tokenName": "bg.status.critical.subtle.default",
-    "tokenPath": "colors.bg.status.critical.subtle.default"
-  },
-  "bg/status/critical/subtle/hover": {
-    "id": "VariableID:38034:18117",
-    "tokenName": "bg.status.critical.subtle.hover",
-    "tokenPath": "colors.bg.status.critical.subtle.hover"
-  },
-  "bg/status/critical/subtle/active": {
-    "id": "VariableID:38034:18118",
-    "tokenName": "bg.status.critical.subtle.active",
-    "tokenPath": "colors.bg.status.critical.subtle.active"
-  },
-  "bg/status/critical/strong/default": {
-    "id": "VariableID:38056:8004",
-    "tokenName": "bg.status.critical.strong.default",
-    "tokenPath": "colors.bg.status.critical.strong.default"
-  },
-  "bg/status/critical/strong/hover": {
-    "id": "VariableID:38056:8005",
-    "tokenName": "bg.status.critical.strong.hover",
-    "tokenPath": "colors.bg.status.critical.strong.hover"
-  },
-  "bg/status/critical/strong/active": {
-    "id": "VariableID:38056:8006",
-    "tokenName": "bg.status.critical.strong.active",
-    "tokenPath": "colors.bg.status.critical.strong.active"
-  },
-  "core/white-alpha/00": {
-    "id": "VariableID:38089:6469",
-    "tokenName": "core.whitealpha.00",
-    "tokenPath": "colors.core.whitealpha.00"
-  },
-  "core/white-alpha/10": {
-    "id": "VariableID:38089:6470",
-    "tokenName": "core.whitealpha.10",
-    "tokenPath": "colors.core.whitealpha.10"
-  },
-  "core/white-alpha/20": {
-    "id": "VariableID:38089:6471",
-    "tokenName": "core.whitealpha.20",
-    "tokenPath": "colors.core.whitealpha.20"
-  },
-  "core/white-alpha/30": {
-    "id": "VariableID:38089:6472",
-    "tokenName": "core.whitealpha.30",
-    "tokenPath": "colors.core.whitealpha.30"
-  },
-  "core/white-alpha/40": {
-    "id": "VariableID:38089:6473",
-    "tokenName": "core.whitealpha.40",
-    "tokenPath": "colors.core.whitealpha.40"
-  },
-  "core/white-alpha/50": {
-    "id": "VariableID:38089:6474",
-    "tokenName": "core.whitealpha.50",
-    "tokenPath": "colors.core.whitealpha.50"
-  },
-  "core/white-alpha/60": {
-    "id": "VariableID:38089:6475",
-    "tokenName": "core.whitealpha.60",
-    "tokenPath": "colors.core.whitealpha.60"
-  },
-  "core/white-alpha/70": {
-    "id": "VariableID:38089:6476",
-    "tokenName": "core.whitealpha.70",
-    "tokenPath": "colors.core.whitealpha.70"
-  },
-  "core/white-alpha/80": {
-    "id": "VariableID:38089:6477",
-    "tokenName": "core.whitealpha.80",
-    "tokenPath": "colors.core.whitealpha.80"
-  },
-  "core/white-alpha/90": {
-    "id": "VariableID:38089:6478",
-    "tokenName": "core.whitealpha.90",
-    "tokenPath": "colors.core.whitealpha.90"
-  },
-  "core/white-alpha/95": {
-    "id": "VariableID:38089:6479",
-    "tokenName": "core.whitealpha.95",
-    "tokenPath": "colors.core.whitealpha.95"
-  },
-  "surface-glass/default": {
-    "id": "VariableID:38089:6480",
-    "tokenName": "surfaceglass.default",
-    "tokenPath": "colors.surfaceglass.default"
-  },
-  "surface-glass/alt": {
-    "id": "VariableID:38089:6481",
-    "tokenName": "surfaceglass.alt",
-    "tokenPath": "colors.surfaceglass.alt"
-  },
-  "surface-glass/70": {
-    "id": "VariableID:38089:6482",
-    "tokenName": "surfaceglass.70",
-    "tokenPath": "colors.surfaceglass.70"
-  },
-  "surface-glass/60": {
-    "id": "VariableID:38089:6483",
-    "tokenName": "surfaceglass.60",
-    "tokenPath": "colors.surfaceglass.60"
-  },
-  "surface-glass/50": {
-    "id": "VariableID:38089:6484",
-    "tokenName": "surfaceglass.50",
-    "tokenPath": "colors.surfaceglass.50"
-  },
-  "core/sm/0": {
-    "id": "VariableID:38388:15745",
-    "tokenName": "core.sm.0",
-    "tokenPath": "radii.core.sm.0"
-  },
-  "core/sm/1": {
-    "id": "VariableID:38388:15746",
-    "tokenName": "core.sm.1",
-    "tokenPath": "radii.core.sm.1"
-  },
-  "core/sm/2": {
-    "id": "VariableID:38388:15747",
-    "tokenName": "core.sm.2",
-    "tokenPath": "radii.core.sm.2"
-  },
-  "core/sm/3": {
-    "id": "VariableID:38388:15748",
-    "tokenName": "core.sm.3",
-    "tokenPath": "radii.core.sm.3"
-  },
-  "core/sm/4": {
-    "id": "VariableID:38388:15749",
-    "tokenName": "core.sm.4",
-    "tokenPath": "radii.core.sm.4"
-  },
-  "core/sm/5": {
-    "id": "VariableID:38388:15750",
-    "tokenName": "core.sm.5",
-    "tokenPath": "radii.core.sm.5"
-  },
-  "core/sm/6": {
-    "id": "VariableID:38388:15751",
-    "tokenName": "core.sm.6",
-    "tokenPath": "radii.core.sm.6"
-  },
-  "core/sm/7": {
-    "id": "VariableID:38388:15752",
-    "tokenName": "core.sm.7",
-    "tokenPath": "radii.core.sm.7"
-  },
-  "core/sm/8": {
-    "id": "VariableID:38388:15753",
-    "tokenName": "core.sm.8",
-    "tokenPath": "radii.core.sm.8"
-  },
-  "core/sm/9": {
-    "id": "VariableID:38388:15754",
-    "tokenName": "core.sm.9",
-    "tokenPath": "radii.core.sm.9"
-  },
-  "core/sm/10": {
-    "id": "VariableID:38388:15755",
-    "tokenName": "core.sm.10",
-    "tokenPath": "radii.core.sm.10"
-  },
-  "core/sm/full": {
-    "id": "VariableID:38388:15756",
-    "tokenName": "core.sm.full",
-    "tokenPath": "radii.core.sm.full"
-  },
-  "core/lg/0": {
-    "id": "VariableID:38388:15757",
-    "tokenName": "core.lg.0",
-    "tokenPath": "radii.core.lg.0"
-  },
-  "core/lg/1": {
-    "id": "VariableID:38388:15758",
-    "tokenName": "core.lg.1",
-    "tokenPath": "radii.core.lg.1"
-  },
-  "core/lg/2": {
-    "id": "VariableID:38388:15759",
-    "tokenName": "core.lg.2",
-    "tokenPath": "radii.core.lg.2"
-  },
-  "core/lg/3": {
-    "id": "VariableID:38388:15760",
-    "tokenName": "core.lg.3",
-    "tokenPath": "radii.core.lg.3"
-  },
-  "core/lg/4": {
-    "id": "VariableID:38388:15761",
-    "tokenName": "core.lg.4",
-    "tokenPath": "radii.core.lg.4"
-  },
-  "core/lg/5": {
-    "id": "VariableID:38388:15762",
-    "tokenName": "core.lg.5",
-    "tokenPath": "radii.core.lg.5"
-  },
-  "core/lg/6": {
-    "id": "VariableID:38388:15763",
-    "tokenName": "core.lg.6",
-    "tokenPath": "radii.core.lg.6"
-  },
-  "core/lg/7": {
-    "id": "VariableID:38388:15764",
-    "tokenName": "core.lg.7",
-    "tokenPath": "radii.core.lg.7"
-  },
-  "core/lg/8": {
-    "id": "VariableID:38388:15765",
-    "tokenName": "core.lg.8",
-    "tokenPath": "radii.core.lg.8"
-  },
-  "core/lg/9": {
-    "id": "VariableID:38388:15766",
-    "tokenName": "core.lg.9",
-    "tokenPath": "radii.core.lg.9"
-  },
-  "core/lg/10": {
-    "id": "VariableID:38388:15767",
-    "tokenName": "core.lg.10",
-    "tokenPath": "radii.core.lg.10"
-  },
-  "core/lg/full": {
-    "id": "VariableID:38388:15768",
-    "tokenName": "core.lg.full",
-    "tokenPath": "radii.core.lg.full"
-  },
-  "core/full/0": {
-    "id": "VariableID:38388:15769",
-    "tokenName": "core.full.0",
-    "tokenPath": "radii.core.full.0"
-  },
-  "core/full/1": {
-    "id": "VariableID:38388:15770",
-    "tokenName": "core.full.1",
-    "tokenPath": "radii.core.full.1"
-  },
-  "core/full/2": {
-    "id": "VariableID:38388:15771",
-    "tokenName": "core.full.2",
-    "tokenPath": "radii.core.full.2"
-  },
-  "core/full/3": {
-    "id": "VariableID:38388:15772",
-    "tokenName": "core.full.3",
-    "tokenPath": "radii.core.full.3"
-  },
-  "core/full/4": {
-    "id": "VariableID:38388:15773",
-    "tokenName": "core.full.4",
-    "tokenPath": "radii.core.full.4"
-  },
-  "core/full/5": {
-    "id": "VariableID:38388:15774",
-    "tokenName": "core.full.5",
-    "tokenPath": "radii.core.full.5"
-  },
-  "core/full/6": {
-    "id": "VariableID:38388:15775",
-    "tokenName": "core.full.6",
-    "tokenPath": "radii.core.full.6"
-  },
-  "core/full/7": {
-    "id": "VariableID:38388:15776",
-    "tokenName": "core.full.7",
-    "tokenPath": "radii.core.full.7"
-  },
-  "core/full/8": {
-    "id": "VariableID:38388:15777",
-    "tokenName": "core.full.8",
-    "tokenPath": "radii.core.full.8"
-  },
-  "core/full/9": {
-    "id": "VariableID:38388:15778",
-    "tokenName": "core.full.9",
-    "tokenPath": "radii.core.full.9"
-  },
-  "core/full/10": {
-    "id": "VariableID:38388:15779",
-    "tokenName": "core.full.10",
-    "tokenPath": "radii.core.full.10"
-  },
-  "core/full/full": {
-    "id": "VariableID:38388:15780",
-    "tokenName": "core.full.full",
-    "tokenPath": "radii.core.full.full"
-  },
-  "core/none/0": {
-    "id": "VariableID:38388:15781",
-    "tokenName": "core.none.0",
-    "tokenPath": "radii.core.none.0"
-  },
-  "core/none/1": {
-    "id": "VariableID:38388:15782",
-    "tokenName": "core.none.1",
-    "tokenPath": "radii.core.none.1"
-  },
-  "core/none/2": {
-    "id": "VariableID:38388:15783",
-    "tokenName": "core.none.2",
-    "tokenPath": "radii.core.none.2"
-  },
-  "core/none/3": {
-    "id": "VariableID:38388:15784",
-    "tokenName": "core.none.3",
-    "tokenPath": "radii.core.none.3"
-  },
-  "core/none/4": {
-    "id": "VariableID:38388:15785",
-    "tokenName": "core.none.4",
-    "tokenPath": "radii.core.none.4"
-  },
-  "core/none/5": {
-    "id": "VariableID:38388:15786",
-    "tokenName": "core.none.5",
-    "tokenPath": "radii.core.none.5"
-  },
-  "core/none/6": {
-    "id": "VariableID:38388:15787",
-    "tokenName": "core.none.6",
-    "tokenPath": "radii.core.none.6"
-  },
-  "core/none/7": {
-    "id": "VariableID:38388:15788",
-    "tokenName": "core.none.7",
-    "tokenPath": "radii.core.none.7"
-  },
-  "core/none/8": {
-    "id": "VariableID:38388:15789",
-    "tokenName": "core.none.8",
-    "tokenPath": "radii.core.none.8"
-  },
-  "core/none/9": {
-    "id": "VariableID:38388:15790",
-    "tokenName": "core.none.9",
-    "tokenPath": "radii.core.none.9"
-  },
-  "core/none/10": {
-    "id": "VariableID:38388:15791",
-    "tokenName": "core.none.10",
-    "tokenPath": "radii.core.none.10"
-  },
-  "core/none/full": {
-    "id": "VariableID:38388:15792",
-    "tokenName": "core.none.full",
-    "tokenPath": "radii.core.none.full"
-  },
-  "color/accent/00": {
-    "id": "VariableID:38390:38715",
-    "tokenName": "color.accent.00",
-    "tokenPath": "colors.color.accent.00"
-  },
-  "color/accent/10": {
-    "id": "VariableID:38390:38717",
-    "tokenName": "color.accent.10",
-    "tokenPath": "colors.color.accent.10"
-  },
-  "color/accent/20": {
-    "id": "VariableID:38390:38718",
-    "tokenName": "color.accent.20",
-    "tokenPath": "colors.color.accent.20"
-  },
-  "color/accent/30": {
-    "id": "VariableID:38390:38719",
-    "tokenName": "color.accent.30",
-    "tokenPath": "colors.color.accent.30"
-  },
-  "color/accent/40": {
-    "id": "VariableID:38390:38720",
-    "tokenName": "color.accent.40",
-    "tokenPath": "colors.color.accent.40"
-  },
-  "color/accent/50": {
-    "id": "VariableID:38390:38721",
-    "tokenName": "color.accent.50",
-    "tokenPath": "colors.color.accent.50"
-  },
-  "color/accent/60": {
-    "id": "VariableID:38390:38722",
-    "tokenName": "color.accent.60",
-    "tokenPath": "colors.color.accent.60"
-  },
-  "color/accent/70": {
-    "id": "VariableID:38390:38723",
-    "tokenName": "color.accent.70",
-    "tokenPath": "colors.color.accent.70"
-  },
-  "color/accent/80": {
-    "id": "VariableID:38390:38724",
-    "tokenName": "color.accent.80",
-    "tokenPath": "colors.color.accent.80"
-  },
-  "color/accent/90": {
-    "id": "VariableID:38390:38725",
-    "tokenName": "color.accent.90",
-    "tokenPath": "colors.color.accent.90"
-  },
-  "color/accent/95": {
-    "id": "VariableID:38390:38726",
-    "tokenName": "color.accent.95",
-    "tokenPath": "colors.color.accent.95"
-  },
-  "radius/0": {
-    "id": "VariableID:38390:38738",
-    "tokenName": "radius.0",
-    "tokenPath": "radii.radius.0"
-  },
-  "radius/1": {
-    "id": "VariableID:38390:38739",
-    "tokenName": "radius.1",
-    "tokenPath": "radii.radius.1"
-  },
-  "radius/2": {
-    "id": "VariableID:38390:38740",
-    "tokenName": "radius.2",
-    "tokenPath": "radii.radius.2"
-  },
-  "radius/3": {
-    "id": "VariableID:38390:38741",
-    "tokenName": "radius.3",
-    "tokenPath": "radii.radius.3"
-  },
-  "radius/4": {
-    "id": "VariableID:38390:38742",
-    "tokenName": "radius.4",
-    "tokenPath": "radii.radius.4"
-  },
-  "radius/5": {
-    "id": "VariableID:38390:38743",
-    "tokenName": "radius.5",
-    "tokenPath": "radii.radius.5"
-  },
-  "radius/6": {
-    "id": "VariableID:38390:38744",
-    "tokenName": "radius.6",
-    "tokenPath": "radii.radius.6"
-  },
-  "radius/7": {
-    "id": "VariableID:38390:38745",
-    "tokenName": "radius.7",
-    "tokenPath": "radii.radius.7"
-  },
-  "radius/8": {
-    "id": "VariableID:38390:38746",
-    "tokenName": "radius.8",
-    "tokenPath": "radii.radius.8"
-  },
-  "radius/9": {
-    "id": "VariableID:38390:38747",
-    "tokenName": "radius.9",
-    "tokenPath": "radii.radius.9"
-  },
-  "radius/10": {
-    "id": "VariableID:38390:38748",
-    "tokenName": "radius.10",
-    "tokenPath": "radii.radius.10"
-  },
-  "radius/full": {
-    "id": "VariableID:38390:38749",
-    "tokenName": "radius.full",
-    "tokenPath": "radii.radius.full"
-  },
-  "spacing/compact/0": {
-    "id": "VariableID:38390:38750",
-    "tokenName": "spacing.compact.0",
-    "tokenPath": "spacing.spacing.compact.0"
-  },
-  "spacing/compact/1": {
-    "id": "VariableID:38390:38751",
-    "tokenName": "spacing.compact.1",
-    "tokenPath": "spacing.spacing.compact.1"
-  },
-  "spacing/compact/2": {
-    "id": "VariableID:38390:38752",
-    "tokenName": "spacing.compact.2",
-    "tokenPath": "spacing.spacing.compact.2"
-  },
-  "spacing/compact/3": {
-    "id": "VariableID:38390:38753",
-    "tokenName": "spacing.compact.3",
-    "tokenPath": "spacing.spacing.compact.3"
-  },
-  "spacing/compact/4": {
-    "id": "VariableID:38390:38754",
-    "tokenName": "spacing.compact.4",
-    "tokenPath": "spacing.spacing.compact.4"
-  },
-  "spacing/compact/5": {
-    "id": "VariableID:38390:38755",
-    "tokenName": "spacing.compact.5",
-    "tokenPath": "spacing.spacing.compact.5"
-  },
-  "spacing/compact/6": {
-    "id": "VariableID:38390:38756",
-    "tokenName": "spacing.compact.6",
-    "tokenPath": "spacing.spacing.compact.6"
-  },
-  "spacing/compact/7": {
-    "id": "VariableID:38390:38757",
-    "tokenName": "spacing.compact.7",
-    "tokenPath": "spacing.spacing.compact.7"
-  },
-  "spacing/compact/8": {
-    "id": "VariableID:38390:38758",
-    "tokenName": "spacing.compact.8",
-    "tokenPath": "spacing.spacing.compact.8"
-  },
-  "spacing/compact/9": {
-    "id": "VariableID:38390:38759",
-    "tokenName": "spacing.compact.9",
-    "tokenPath": "spacing.spacing.compact.9"
-  },
-  "spacing/compact/10": {
-    "id": "VariableID:38390:38760",
-    "tokenName": "spacing.compact.10",
-    "tokenPath": "spacing.spacing.compact.10"
-  },
-  "spacing/comfortable/0": {
-    "id": "VariableID:38390:38767",
-    "tokenName": "spacing.comfortable.0",
-    "tokenPath": "spacing.spacing.comfortable.0"
-  },
-  "spacing/comfortable/1": {
-    "id": "VariableID:38390:38768",
-    "tokenName": "spacing.comfortable.1",
-    "tokenPath": "spacing.spacing.comfortable.1"
-  },
-  "spacing/comfortable/2": {
-    "id": "VariableID:38390:38769",
-    "tokenName": "spacing.comfortable.2",
-    "tokenPath": "spacing.spacing.comfortable.2"
-  },
-  "spacing/comfortable/3": {
-    "id": "VariableID:38390:38770",
-    "tokenName": "spacing.comfortable.3",
-    "tokenPath": "spacing.spacing.comfortable.3"
-  },
-  "spacing/comfortable/4": {
-    "id": "VariableID:38390:38771",
-    "tokenName": "spacing.comfortable.4",
-    "tokenPath": "spacing.spacing.comfortable.4"
-  },
-  "spacing/comfortable/5": {
-    "id": "VariableID:38390:38772",
-    "tokenName": "spacing.comfortable.5",
-    "tokenPath": "spacing.spacing.comfortable.5"
-  },
-  "spacing/comfortable/6": {
-    "id": "VariableID:38390:38773",
-    "tokenName": "spacing.comfortable.6",
-    "tokenPath": "spacing.spacing.comfortable.6"
-  },
-  "spacing/comfortable/7": {
-    "id": "VariableID:38390:38774",
-    "tokenName": "spacing.comfortable.7",
-    "tokenPath": "spacing.spacing.comfortable.7"
-  },
-  "spacing/comfortable/8": {
-    "id": "VariableID:38390:38775",
-    "tokenName": "spacing.comfortable.8",
-    "tokenPath": "spacing.spacing.comfortable.8"
-  },
-  "spacing/comfortable/9": {
-    "id": "VariableID:38390:38776",
-    "tokenName": "spacing.comfortable.9",
-    "tokenPath": "spacing.spacing.comfortable.9"
-  },
-  "spacing/comfortable/10": {
-    "id": "VariableID:38390:38777",
-    "tokenName": "spacing.comfortable.10",
-    "tokenPath": "spacing.spacing.comfortable.10"
-  },
-  "spacing/comfortable/11": {
-    "id": "VariableID:38390:38778",
-    "tokenName": "spacing.comfortable.11",
-    "tokenPath": "spacing.spacing.comfortable.11"
-  },
-  "spacing/comfortable/12": {
-    "id": "VariableID:38390:38779",
-    "tokenName": "spacing.comfortable.12",
-    "tokenPath": "spacing.spacing.comfortable.12"
-  },
-  "spacing/0": {
-    "id": "VariableID:38390:38784",
-    "tokenName": "spacing.0",
-    "tokenPath": "spacing.spacing.0"
-  },
-  "spacing/1": {
-    "id": "VariableID:38390:38796",
-    "tokenName": "spacing.1",
-    "tokenPath": "spacing.spacing.1"
-  },
-  "spacing/2": {
-    "id": "VariableID:38390:38797",
-    "tokenName": "spacing.2",
-    "tokenPath": "spacing.spacing.2"
-  },
-  "spacing/3": {
-    "id": "VariableID:38390:38798",
-    "tokenName": "spacing.3",
-    "tokenPath": "spacing.spacing.3"
-  },
-  "spacing/4": {
-    "id": "VariableID:38390:38799",
-    "tokenName": "spacing.4",
-    "tokenPath": "spacing.spacing.4"
-  },
-  "spacing/5": {
-    "id": "VariableID:38390:38800",
-    "tokenName": "spacing.5",
-    "tokenPath": "spacing.spacing.5"
-  },
-  "spacing/6": {
-    "id": "VariableID:38390:38801",
-    "tokenName": "spacing.6",
-    "tokenPath": "spacing.spacing.6"
-  },
-  "spacing/7": {
-    "id": "VariableID:38390:38802",
-    "tokenName": "spacing.7",
-    "tokenPath": "spacing.spacing.7"
-  },
-  "spacing/8": {
-    "id": "VariableID:38390:38803",
-    "tokenName": "spacing.8",
-    "tokenPath": "spacing.spacing.8"
-  },
-  "spacing/9": {
-    "id": "VariableID:38390:38804",
-    "tokenName": "spacing.9",
-    "tokenPath": "spacing.spacing.9"
-  },
-  "spacing/10": {
-    "id": "VariableID:38390:38805",
-    "tokenName": "spacing.10",
-    "tokenPath": "spacing.spacing.10"
-  },
-  "spacing/compact/11": {
-    "id": "VariableID:38394:39134",
-    "tokenName": "spacing.compact.11",
-    "tokenPath": "spacing.spacing.compact.11"
-  },
-  "spacing/compact/12": {
-    "id": "VariableID:38394:39135",
-    "tokenName": "spacing.compact.12",
-    "tokenPath": "spacing.spacing.compact.12"
-  },
-  "spacing/default/12": {
-    "id": "VariableID:38394:39136",
-    "tokenName": "spacing.default.12",
-    "tokenPath": "spacing.spacing.default.12"
-  },
-  "typography/font family/display": {
-    "id": "VariableID:38517:57741",
-    "tokenName": "typography.fontfamily.display",
-    "tokenPath": "fonts.typography.fontfamily.display"
-  },
-  "typography/font family/body": {
-    "id": "VariableID:38517:57742",
-    "tokenName": "typography.fontfamily.body",
-    "tokenPath": "fonts.typography.fontfamily.body"
-  },
-  "typography/font family/code": {
-    "id": "VariableID:38517:57743",
-    "tokenName": "typography.fontfamily.code",
-    "tokenPath": "fonts.typography.fontfamily.code"
-  },
-  "surface/inverted": {
-    "id": "VariableID:38919:4068",
-    "tokenName": "surface.inverted",
-    "tokenPath": "colors.surface.inverted"
-  },
-  "border/neutral/active": {
-    "id": "VariableID:38938:14195",
-    "tokenName": "border.neutral.active",
-    "tokenPath": "colors.border.neutral.active"
-  },
-  "color/accent-gray/00": {
-    "id": "VariableID:39342:23760",
-    "tokenName": "color.accentgray.00",
-    "tokenPath": "colors.color.accentgray.00"
-  },
-  "color/accent-gray/10": {
-    "id": "VariableID:39342:23761",
-    "tokenName": "color.accentgray.10",
-    "tokenPath": "colors.color.accentgray.10"
-  },
-  "color/accent-gray/20": {
-    "id": "VariableID:39342:23762",
-    "tokenName": "color.accentgray.20",
-    "tokenPath": "colors.color.accentgray.20"
-  },
-  "color/accent-gray/30": {
-    "id": "VariableID:39342:23763",
-    "tokenName": "color.accentgray.30",
-    "tokenPath": "colors.color.accentgray.30"
-  },
-  "color/accent-gray/40": {
-    "id": "VariableID:39342:23764",
-    "tokenName": "color.accentgray.40",
-    "tokenPath": "colors.color.accentgray.40"
-  },
-  "color/accent-gray/50": {
-    "id": "VariableID:39342:23765",
-    "tokenName": "color.accentgray.50",
-    "tokenPath": "colors.color.accentgray.50"
-  },
-  "color/accent-gray/60": {
-    "id": "VariableID:39342:23766",
-    "tokenName": "color.accentgray.60",
-    "tokenPath": "colors.color.accentgray.60"
-  },
-  "color/accent-gray/70": {
-    "id": "VariableID:39342:23767",
-    "tokenName": "color.accentgray.70",
-    "tokenPath": "colors.color.accentgray.70"
-  },
-  "color/accent-gray/80": {
-    "id": "VariableID:39342:23768",
-    "tokenName": "color.accentgray.80",
-    "tokenPath": "colors.color.accentgray.80"
-  },
-  "color/accent-gray/90": {
-    "id": "VariableID:39342:23769",
-    "tokenName": "color.accentgray.90",
-    "tokenPath": "colors.color.accentgray.90"
-  },
-  "color/accent-gray/95": {
-    "id": "VariableID:39342:23770",
-    "tokenName": "color.accentgray.95",
-    "tokenPath": "colors.color.accentgray.95"
-  },
-  "border/neutral/emphasis": {
-    "id": "VariableID:39343:20677",
-    "tokenName": "border.neutral.emphasis",
-    "tokenPath": "colors.border.neutral.emphasis"
-  }
-}
diff --git a/libs/@hashintel/ds-theme/src/index.ts b/libs/@hashintel/ds-theme/src/index.ts
index e9032a7dd5a..ba96b054ba2 100644
--- a/libs/@hashintel/ds-theme/src/index.ts
+++ b/libs/@hashintel/ds-theme/src/index.ts
@@ -1,1662 +1,19 @@
 import { definePreset } from "@pandacss/dev";
-export default definePreset({
+import { colors } from "./theme/colors";
+
+export const preset = definePreset({
   name: "@hashintel/ds-theme",
+  conditions: {
+    light: "[data-theme=light] &, .light &",
+    dark: "[data-theme=dark] &, .dark &",
+  },
   theme: {
-    tokens: {
-      colors: {
-        border: {
-          neutral: {
-            hover: {
-              value: "{colors.core.gray.35}",
-            },
-            default: {
-              value: "{colors.core.gray.20}",
-            },
-            subtle: {
-              value: "{colors.core.gray.20}",
-            },
-            muted: {
-              value: "{colors.core.gray.10}",
-            },
-            active: {
-              value: "{colors.core.gray.90}",
-            },
-            emphasis: {
-              value: "{colors.core.gray.30}",
-            },
-          },
-          status: {
-            info: {
-              value: "{colors.core.blue.10}",
-            },
-            caution: {
-              value: "{colors.core.yellow.10}",
-            },
-            warning: {
-              value: "{colors.core.orange.10}",
-            },
-            critical: {
-              value: "{colors.core.red.10}",
-            },
-            success: {
-              value: "{colors.core.green.10}",
-            },
-          },
-        },
-        text: {
-          primary: {
-            value: "{colors.core.gray.90}",
-          },
-          secondary: {
-            value: "{colors.core.gray.70}",
-          },
-          tertiary: {
-            value: "{colors.core.gray.50}",
-          },
-          disabled: {
-            value: "{colors.core.gray.40}",
-          },
-          inverted: {
-            value: "{colors.core.neutral.white}",
-          },
-          semantic: {
-            info: {
-              value: "{colors.core.blue.90}",
-            },
-            success: {
-              value: "{colors.core.green.80}",
-            },
-            warning: {
-              value: "{colors.core.orange.80}",
-            },
-            critical: {
-              value: "{colors.core.red.80}",
-            },
-          },
-          link: {
-            value: "{colors.core.custom.60}",
-          },
-          linkhover: {
-            value: "{colors.core.custom.70}",
-          },
-        },
-        surface: {
-          default: {
-            value: "{colors.core.neutral.white}",
-          },
-          emphasis: {
-            value: "{colors.core.gray.20}",
-          },
-          subtle: {
-            value: "{colors.core.gray.20}",
-          },
-          alt: {
-            value: "{colors.core.gray.00}",
-          },
-          muted: {
-            value: "{colors.core.gray.10}",
-          },
-          inverted: {
-            value: "{colors.core.gray.90}",
-          },
-        },
-        bg: {
-          brand: {
-            subtle: {
-              default: {
-                value: "{colors.core.custom.00}",
-              },
-              hover: {
-                value: "{colors.core.custom.10}",
-              },
-              active: {
-                value: "{colors.core.custom.00}",
-              },
-            },
-            bold: {
-              default: {
-                value: "{colors.core.custom.50}",
-              },
-              hover: {
-                value: "{colors.core.custom.60}",
-              },
-              selected: {
-                value: "{colors.core.custom.60}",
-              },
-              active: {
-                value: "{colors.core.custom.50}",
-              },
-            },
-          },
-          neutral: {
-            subtle: {
-              default: {
-                value: "{colors.core.neutral.white}",
-              },
-              hover: {
-                value: "{colors.core.gray.10}",
-              },
-              active: {
-                value: "{colors.core.gray.20}",
-              },
-              selected: {
-                value: "{colors.core.gray.10}",
-              },
-            },
-            bold: {
-              default: {
-                value: "{colors.core.gray.80}",
-              },
-              hover: {
-                value: "{colors.core.gray.70}",
-              },
-              active: {
-                value: "{colors.core.gray.80}",
-              },
-              selected: {
-                value: "{colors.core.gray.70}",
-              },
-            },
-          },
-          status: {
-            info: {
-              subtle: {
-                default: {
-                  value: "{colors.core.blue.00}",
-                },
-                hover: {
-                  value: "{colors.core.blue.10}",
-                },
-                active: {
-                  value: "{colors.core.blue.00}",
-                },
-              },
-            },
-            success: {
-              subtle: {
-                default: {
-                  value: "{colors.core.green.00}",
-                },
-                hover: {
-                  value: "{colors.core.green.10}",
-                },
-                active: {
-                  value: "{colors.core.green.00}",
-                },
-              },
-            },
-            caution: {
-              subtle: {
-                default: {
-                  value: "{colors.core.yellow.00}",
-                },
-                hover: {
-                  value: "{colors.core.yellow.10}",
-                },
-                active: {
-                  value: "{colors.core.yellow.00}",
-                },
-              },
-            },
-            warning: {
-              subtle: {
-                default: {
-                  value: "{colors.core.orange.00}",
-                },
-                hover: {
-                  value: "{colors.core.orange.10}",
-                },
-                active: {
-                  value: "{colors.core.orange.00}",
-                },
-              },
-            },
-            critical: {
-              subtle: {
-                default: {
-                  value: "{colors.core.red.00}",
-                },
-                hover: {
-                  value: "{colors.core.red.10}",
-                },
-                active: {
-                  value: "{colors.core.red.00}",
-                },
-              },
-              strong: {
-                default: {
-                  value: "{colors.core.red.50}",
-                },
-                hover: {
-                  value: "{colors.core.red.60}",
-                },
-                active: {
-                  value: "{colors.core.red.50}",
-                },
-              },
-            },
-          },
-        },
-        icon: {
-          primary: {
-            value: "{colors.core.gray.70}",
-          },
-          secondary: {
-            value: "{colors.core.gray.50}",
-          },
-          tertiary: {
-            value: "{colors.core.gray.40}",
-          },
-          disabled: {
-            value: "{colors.core.gray.30}",
-          },
-          inverted: {
-            value: "{colors.core.neutral.white}",
-          },
-          link: {
-            value: "{colors.core.custom.60}",
-          },
-          linkhover: {
-            value: "{colors.core.custom.70}",
-          },
-          semantic: {
-            info: {
-              value: "{colors.core.blue.90}",
-            },
-            success: {
-              value: "{colors.core.green.80}",
-            },
-            warning: {
-              value: "{colors.core.orange.70}",
-            },
-            critical: {
-              value: "{colors.core.red.70}",
-            },
-          },
-        },
-        surfaceglass: {
-          "50": {
-            value: "{colors.core.gray.20}",
-          },
-          "60": {
-            value: "{colors.core.whitealpha.60}",
-          },
-          "70": {
-            value: "{colors.core.whitealpha.70}",
-          },
-          default: {
-            value: "{colors.core.whitealpha.90}",
-          },
-          alt: {
-            value: "{colors.core.whitealpha.60}",
-          },
-        },
-        color: {
-          accent: {
-            "10": {
-              value: "#ffffff",
-            },
-            "20": {
-              value: "#f7dccb",
-            },
-            "30": {
-              value: "#f2c1ac",
-            },
-            "40": {
-              value: "#e88372",
-            },
-            "50": {
-              value: "#dd3c3c",
-            },
-            "60": {
-              value: "#ffffff",
-            },
-            "70": {
-              value: "#ffffff",
-            },
-            "80": {
-              value: "#ffffff",
-            },
-            "90": {
-              value: "#ffffff",
-            },
-            "95": {
-              value: "#ffffff",
-            },
-            "00": {
-              value: "#ffffff",
-            },
-          },
-          accentgray: {
-            "10": {
-              value: "#ffffff",
-            },
-            "20": {
-              value: "#ffffff",
-            },
-            "30": {
-              value: "#ffffff",
-            },
-            "40": {
-              value: "#ffffff",
-            },
-            "50": {
-              value: "#968c8c",
-            },
-            "60": {
-              value: "#ffffff",
-            },
-            "70": {
-              value: "#ffffff",
-            },
-            "80": {
-              value: "#ffffff",
-            },
-            "90": {
-              value: "#ffffff",
-            },
-            "95": {
-              value: "#ffffff",
-            },
-            "00": {
-              value: "#ffffff",
-            },
-          },
-        },
-      },
-      spacing: {
-        spacing: {
-          "0": {
-            value: "{spacing.spacing.default.0}",
-          },
-          "1": {
-            value: "{spacing.spacing.default.1}",
-          },
-          "2": {
-            value: "{spacing.spacing.default.2}",
-          },
-          "3": {
-            value: "{spacing.spacing.default.3}",
-          },
-          "4": {
-            value: "{spacing.spacing.default.4}",
-          },
-          "5": {
-            value: "{spacing.spacing.default.5}",
-          },
-          "6": {
-            value: "{spacing.spacing.default.6}",
-          },
-          "7": {
-            value: "{spacing.spacing.default.7}",
-          },
-          "8": {
-            value: "{spacing.spacing.default.8}",
-          },
-          "9": {
-            value: "{spacing.spacing.default.9}",
-          },
-          "10": {
-            value: "{spacing.spacing.default.10}",
-          },
-          default: {
-            "0": {
-              value: "0px",
-            },
-            "1": {
-              value: "1px",
-            },
-            "2": {
-              value: "2px",
-            },
-            "3": {
-              value: "4px",
-            },
-            "4": {
-              value: "6px",
-            },
-            "5": {
-              value: "8px",
-            },
-            "6": {
-              value: "10px",
-            },
-            "7": {
-              value: "12px",
-            },
-            "8": {
-              value: "14px",
-            },
-            "9": {
-              value: "16px",
-            },
-            "10": {
-              value: "20px",
-            },
-            "11": {
-              value: "24px",
-            },
-            "12": {
-              value: "28px",
-            },
-          },
-          compact: {
-            "0": {
-              value: "0px",
-            },
-            "1": {
-              value: "1px",
-            },
-            "2": {
-              value: "1px",
-            },
-            "3": {
-              value: "2px",
-            },
-            "4": {
-              value: "4px",
-            },
-            "5": {
-              value: "6px",
-            },
-            "6": {
-              value: "8px",
-            },
-            "7": {
-              value: "10px",
-            },
-            "8": {
-              value: "12px",
-            },
-            "9": {
-              value: "14px",
-            },
-            "10": {
-              value: "16px",
-            },
-            "11": {
-              value: "20px",
-            },
-            "12": {
-              value: "24px",
-            },
-          },
-          comfortable: {
-            "0": {
-              value: "0px",
-            },
-            "1": {
-              value: "2px",
-            },
-            "2": {
-              value: "4px",
-            },
-            "3": {
-              value: "6px",
-            },
-            "4": {
-              value: "8px",
-            },
-            "5": {
-              value: "10px",
-            },
-            "6": {
-              value: "12px",
-            },
-            "7": {
-              value: "14px",
-            },
-            "8": {
-              value: "16px",
-            },
-            "9": {
-              value: "20px",
-            },
-            "10": {
-              value: "24px",
-            },
-            "11": {
-              value: "28px",
-            },
-            "12": {
-              value: "32px",
-            },
-          },
-        },
-      },
-      fonts: {
-        family: {
-          display: {
-            value: "Inter Display",
-          },
-          body: {
-            value: "Inter",
-          },
-        },
-        weight: {
-          normaldelete: {
-            value: "Regular",
-          },
-          mediumdelete: {
-            value: "Medium",
-          },
-          semibolddelete: {
-            value: "SemiBold",
-          },
-        },
-        typography: {
-          fontfamily: {
-            display: {
-              value: "Inter Display",
-            },
-            body: {
-              value: "Inter",
-            },
-            code: {
-              value: "Inter",
-            },
-          },
-        },
-      },
-      fontSizes: {
-        size: {
-          text3xl: {
-            value: "30px",
-          },
-          textsm: {
-            value: "14px",
-          },
-          textbase: {
-            value: "16px",
-          },
-          textxs: {
-            value: "12px",
-          },
-          textxl: {
-            value: "20px",
-          },
-          textlg: {
-            value: "18px",
-          },
-          text2xl: {
-            value: "24px",
-          },
-          text4xl: {
-            value: "36px",
-          },
-        },
-      },
-      lineHeights: {
-        leading: {
-          none: {
-            text3xl: {
-              value: "{fontSizes.size.text3xl}",
-            },
-            textsm: {
-              value: "{fontSizes.size.textsm}",
-            },
-            textxs: {
-              value: "{fontSizes.size.textxs}",
-            },
-            textbase: {
-              value: "{fontSizes.size.textbase}",
-            },
-            textlg: {
-              value: "{fontSizes.size.textlg}",
-            },
-          },
-          normal: {
-            textxs: {
-              value: 18,
-            },
-            textsm: {
-              value: 21,
-            },
-            textbase: {
-              value: 24,
-            },
-            textlg: {
-              value: 27,
-            },
-          },
-        },
-      },
-      radii: {
-        core: {
-          md: {
-            "0": {
-              value: "0px",
-            },
-            "1": {
-              value: "2px",
-            },
-            "2": {
-              value: "4px",
-            },
-            "3": {
-              value: "6px",
-            },
-            "4": {
-              value: "8px",
-            },
-            "5": {
-              value: "10px",
-            },
-            "6": {
-              value: "12px",
-            },
-            "7": {
-              value: "16px",
-            },
-            "8": {
-              value: "20px",
-            },
-            "9": {
-              value: "24px",
-            },
-            "10": {
-              value: "32px",
-            },
-            full: {
-              value: "9999px",
-            },
-          },
-          sm: {
-            "0": {
-              value: "0px",
-            },
-            "1": {
-              value: "1px",
-            },
-            "2": {
-              value: "2px",
-            },
-            "3": {
-              value: "4px",
-            },
-            "4": {
-              value: "6px",
-            },
-            "5": {
-              value: "8px",
-            },
-            "6": {
-              value: "10px",
-            },
-            "7": {
-              value: "12px",
-            },
-            "8": {
-              value: "16px",
-            },
-            "9": {
-              value: "20px",
-            },
-            "10": {
-              value: "24px",
-            },
-            full: {
-              value: "9999px",
-            },
-          },
-          lg: {
-            "0": {
-              value: "0px",
-            },
-            "1": {
-              value: "4px",
-            },
-            "2": {
-              value: "6px",
-            },
-            "3": {
-              value: "8px",
-            },
-            "4": {
-              value: "10px",
-            },
-            "5": {
-              value: "12px",
-            },
-            "6": {
-              value: "16px",
-            },
-            "7": {
-              value: "20px",
-            },
-            "8": {
-              value: "24px",
-            },
-            "9": {
-              value: "32px",
-            },
-            "10": {
-              value: "40px",
-            },
-            full: {
-              value: "9999px",
-            },
-          },
-          full: {
-            "0": {
-              value: "9999px",
-            },
-            "1": {
-              value: "9999px",
-            },
-            "2": {
-              value: "9999px",
-            },
-            "3": {
-              value: "9999px",
-            },
-            "4": {
-              value: "9999px",
-            },
-            "5": {
-              value: "9999px",
-            },
-            "6": {
-              value: "9999px",
-            },
-            "7": {
-              value: "9999px",
-            },
-            "8": {
-              value: "9999px",
-            },
-            "9": {
-              value: "9999px",
-            },
-            "10": {
-              value: "9999px",
-            },
-            full: {
-              value: "9999px",
-            },
-          },
-          none: {
-            "0": {
-              value: "0px",
-            },
-            "1": {
-              value: "0px",
-            },
-            "2": {
-              value: "0px",
-            },
-            "3": {
-              value: "0px",
-            },
-            "4": {
-              value: "0px",
-            },
-            "5": {
-              value: "0px",
-            },
-            "6": {
-              value: "0px",
-            },
-            "7": {
-              value: "0px",
-            },
-            "8": {
-              value: "0px",
-            },
-            "9": {
-              value: "0px",
-            },
-            "10": {
-              value: "0px",
-            },
-            full: {
-              value: "0px",
-            },
-          },
-        },
-        component: {
-          button: {
-            sm: {
-              value: "{radii.radius.4}",
-            },
-            md: {
-              value: "{radii.radius.4}",
-            },
-            lg: {
-              value: "{radii.radius.5}",
-            },
-            xs: {
-              value: "{radii.radius.2}",
-            },
-          },
-        },
-        radius: {
-          "0": {
-            value: "{radii.core.md.0}",
-          },
-          "1": {
-            value: "{radii.core.md.1}",
-          },
-          "2": {
-            value: "{radii.core.md.2}",
-          },
-          "3": {
-            value: "{radii.core.md.3}",
-          },
-          "4": {
-            value: "{radii.core.md.4}",
-          },
-          "5": {
-            value: "{radii.core.md.5}",
-          },
-          "6": {
-            value: "{radii.core.md.6}",
-          },
-          "7": {
-            value: "{radii.core.md.7}",
-          },
-          "8": {
-            value: "{radii.core.md.8}",
-          },
-          "9": {
-            value: "{radii.core.md.9}",
-          },
-          "10": {
-            value: "{radii.core.md.10}",
-          },
-          full: {
-            value: "{radii.core.md.full}",
-          },
-        },
-      },
-    },
-    semanticTokens: {
-      colors: {
-        core: {
-          gray: {
-            "10": {
-              value: {
-                _dark: "#1d2836",
-                base: "#f5f5f5",
-              },
-            },
-            "20": {
-              value: {
-                _dark: "#374151",
-                base: "#e5e5e5",
-              },
-            },
-            "30": {
-              value: {
-                _dark: "#4b5563",
-                base: "#d9d9d9",
-              },
-            },
-            "35": {
-              value: {
-                _dark: "#4b5563",
-                base: "#c7c7c7",
-              },
-            },
-            "40": {
-              value: {
-                _dark: "#6b7280",
-                base: "#a3a3a3",
-              },
-            },
-            "50": {
-              value: {
-                _dark: "#9ca3af",
-                base: "#737373",
-              },
-            },
-            "60": {
-              value: {
-                _dark: "#dde0e4",
-                base: "#525252",
-              },
-            },
-            "70": {
-              value: {
-                _dark: "#e5e7eb",
-                base: "#404040",
-              },
-            },
-            "80": {
-              value: {
-                _dark: "#f0f2f4",
-                base: "#262626",
-              },
-            },
-            "90": {
-              value: {
-                _dark: "#f6f8f9",
-                base: "#171717",
-              },
-            },
-            "95": {
-              value: {
-                _dark: "#f6f8f9",
-                base: "#0a0a0a",
-              },
-            },
-            "00": {
-              value: {
-                _dark: "#070a0d",
-                base: "#fafafa",
-              },
-            },
-          },
-          red: {
-            "10": {
-              value: {
-                _dark: "#991b1b",
-                base: "#fbd5d7",
-              },
-            },
-            "20": {
-              value: {
-                _dark: "#b91c1c",
-                base: "#f5a3a3",
-              },
-            },
-            "30": {
-              value: {
-                _dark: "#dc2626",
-                base: "#f17e7e",
-              },
-            },
-            "40": {
-              value: {
-                _dark: "#ef4444",
-                base: "#ed5a5a",
-              },
-            },
-            "50": {
-              value: {
-                _dark: "#f87171",
-                base: "#e93535",
-              },
-            },
-            "60": {
-              value: {
-                _dark: "#fca5a5",
-                base: "#dc1818",
-              },
-            },
-            "70": {
-              value: {
-                _dark: "#fecaca",
-                base: "#b81414",
-              },
-            },
-            "80": {
-              value: {
-                _dark: "#fee2e2",
-                base: "#931010",
-              },
-            },
-            "90": {
-              value: {
-                _dark: "#fef2f2",
-                base: "#6e0c0c",
-              },
-            },
-            "00": {
-              value: {
-                _dark: "#7f1d1d",
-                base: "#fde8e9",
-              },
-            },
-          },
-          orange: {
-            "10": {
-              value: {
-                _dark: "#9a3412",
-                base: "#ffe0b8",
-              },
-            },
-            "20": {
-              value: {
-                _dark: "#c2410c",
-                base: "#fed7aa",
-              },
-            },
-            "30": {
-              value: {
-                _dark: "#d97706",
-                base: "#fdba74",
-              },
-            },
-            "40": {
-              value: {
-                _dark: "#f97316",
-                base: "#fb923c",
-              },
-            },
-            "50": {
-              value: {
-                _dark: "#fb923c",
-                base: "#f97316",
-              },
-            },
-            "60": {
-              value: {
-                _dark: "#fdba74",
-                base: "#d97706",
-              },
-            },
-            "70": {
-              value: {
-                _dark: "#fed7aa",
-                base: "#c2410c",
-              },
-            },
-            "80": {
-              value: {
-                _dark: "#ffedd5",
-                base: "#9a3412",
-              },
-            },
-            "90": {
-              value: {
-                _dark: "#fff7ed",
-                base: "#7c2d12",
-              },
-            },
-            "00": {
-              value: {
-                _dark: "#7c2d12",
-                base: "#fff1e0",
-              },
-            },
-          },
-          green: {
-            "10": {
-              value: {
-                _dark: "#096638",
-                base: "#e4f7f3",
-              },
-            },
-            "20": {
-              value: {
-                _dark: "#0e7d4b",
-                base: "#b9ebdf",
-              },
-            },
-            "30": {
-              value: {
-                _dark: "#159663",
-                base: "#91dbc9",
-              },
-            },
-            "40": {
-              value: {
-                _dark: "#19a874",
-                base: "#4fc29e",
-              },
-            },
-            "50": {
-              value: {
-                _dark: "#4fc29e",
-                base: "#19a874",
-              },
-            },
-            "60": {
-              value: {
-                _dark: "#91dbc9",
-                base: "#159663",
-              },
-            },
-            "70": {
-              value: {
-                _dark: "#b9ebdf",
-                base: "#0e7d4b",
-              },
-            },
-            "80": {
-              value: {
-                _dark: "#e4f7f3",
-                base: "#096638",
-              },
-            },
-            "90": {
-              value: {
-                _dark: "#edfaf7",
-                base: "#054d27",
-              },
-            },
-            "00": {
-              value: {
-                _dark: "#054d27",
-                base: "#edfaf7",
-              },
-            },
-          },
-          blue: {
-            "10": {
-              value: {
-                _dark: "#0e2e8c",
-                base: "#daf0ff",
-              },
-            },
-            "20": {
-              value: {
-                _dark: "#1541b0",
-                base: "#bee6ff",
-              },
-            },
-            "30": {
-              value: {
-                _dark: "#1c62e3",
-                base: "#78c0fc",
-              },
-            },
-            "40": {
-              value: {
-                _dark: "#266df0",
-                base: "#56b0fb",
-              },
-            },
-            "50": {
-              value: {
-                _dark: "#629df0",
-                base: "#34a0fa",
-              },
-            },
-            "60": {
-              value: {
-                _dark: "#a3cff7",
-                base: "#2a80c8",
-              },
-            },
-            "70": {
-              value: {
-                _dark: "#c5e3fa",
-                base: "#0666c6",
-              },
-            },
-            "80": {
-              value: {
-                _dark: "#e5eeff",
-                base: "#05529e",
-              },
-            },
-            "90": {
-              value: {
-                _dark: "#f5fbff",
-                base: "#043d77",
-              },
-            },
-            "00": {
-              value: {
-                _dark: "#071e69",
-                base: "#eff9ff",
-              },
-            },
-          },
-          neutral: {
-            white: {
-              value: {
-                _dark: "#000000",
-                base: "#ffffff",
-              },
-            },
-            black: {
-              value: {
-                _dark: "#ffffff",
-                base: "#000000",
-              },
-            },
-          },
-          purple: {
-            "10": {
-              value: {
-                _dark: "#2d138f",
-                base: "#e0d6fc",
-              },
-            },
-            "20": {
-              value: {
-                _dark: "#401db3",
-                base: "#c2adf8",
-              },
-            },
-            "30": {
-              value: {
-                _dark: "#5429d6",
-                base: "#a385f5",
-              },
-            },
-            "40": {
-              value: {
-                _dark: "#6633ee",
-                base: "#865cf1",
-              },
-            },
-            "50": {
-              value: {
-                _dark: "#865cf1",
-                base: "#6633ee",
-              },
-            },
-            "60": {
-              value: {
-                _dark: "#a385f5",
-                base: "#5429d6",
-              },
-            },
-            "70": {
-              value: {
-                _dark: "#c2adf8",
-                base: "#401db3",
-              },
-            },
-            "80": {
-              value: {
-                _dark: "#e0d6fc",
-                base: "#2d138f",
-              },
-            },
-            "90": {
-              value: {
-                _dark: "#eee6f3",
-                base: "#1d0a6b",
-              },
-            },
-            "00": {
-              value: {
-                _dark: "#1d0a6b",
-                base: "#eee6f3",
-              },
-            },
-          },
-          pink: {
-            "10": {
-              value: {
-                _dark: "#9d174d",
-                base: "#fce7f3",
-              },
-            },
-            "20": {
-              value: {
-                _dark: "#be185d",
-                base: "#fbcfe8",
-              },
-            },
-            "30": {
-              value: {
-                _dark: "#db2777",
-                base: "#f9a8d4",
-              },
-            },
-            "40": {
-              value: {
-                _dark: "#ec4899",
-                base: "#f174b2",
-              },
-            },
-            "50": {
-              value: {
-                _dark: "#f174b2",
-                base: "#ec4899",
-              },
-            },
-            "60": {
-              value: {
-                _dark: "#f9a8d4",
-                base: "#db2777",
-              },
-            },
-            "70": {
-              value: {
-                _dark: "#fbcfe8",
-                base: "#be185d",
-              },
-            },
-            "80": {
-              value: {
-                _dark: "#fce7f3",
-                base: "#9d174d",
-              },
-            },
-            "90": {
-              value: {
-                _dark: "#fdf2f8",
-                base: "#831843",
-              },
-            },
-            "00": {
-              value: {
-                _dark: "#831843",
-                base: "#fdf2f8",
-              },
-            },
-          },
-          yellow: {
-            "10": {
-              value: {
-                _dark: "#854d0e",
-                base: "#fef9c3",
-              },
-            },
-            "20": {
-              value: {
-                _dark: "#a16207",
-                base: "#fef08a",
-              },
-            },
-            "30": {
-              value: {
-                _dark: "#ca8a04",
-                base: "#fde047",
-              },
-            },
-            "40": {
-              value: {
-                _dark: "#eab308",
-                base: "#facc15",
-              },
-            },
-            "50": {
-              value: {
-                _dark: "#facc15",
-                base: "#eab308",
-              },
-            },
-            "60": {
-              value: {
-                _dark: "#fde047",
-                base: "#ca8a04",
-              },
-            },
-            "70": {
-              value: {
-                _dark: "#fef08a",
-                base: "#a16207",
-              },
-            },
-            "80": {
-              value: {
-                _dark: "#fef9c3",
-                base: "#854d0e",
-              },
-            },
-            "90": {
-              value: {
-                _dark: "#fefce8",
-                base: "#713f12",
-              },
-            },
-            "00": {
-              value: {
-                _dark: "#713f12",
-                base: "#fefce8",
-              },
-            },
-          },
-          custom: {
-            "10": {
-              value: {
-                _dark: "#0e2e8c",
-                base: "#bbdffd",
-              },
-            },
-            "20": {
-              value: {
-                _dark: "#1541b0",
-                base: "#9ad0fd",
-              },
-            },
-            "30": {
-              value: {
-                _dark: "#1c62e3",
-                base: "#78c0fc",
-              },
-            },
-            "40": {
-              value: {
-                _dark: "#266df0",
-                base: "#56b0fb",
-              },
-            },
-            "50": {
-              value: {
-                _dark: "#629df0",
-                base: "#2070e6",
-              },
-            },
-            "60": {
-              value: {
-                _dark: "#a3cff7",
-                base: "#1567e0",
-              },
-            },
-            "70": {
-              value: {
-                _dark: "#c5e3fa",
-                base: "#0666c6",
-              },
-            },
-            "80": {
-              value: {
-                _dark: "#e5eeff",
-                base: "#05529e",
-              },
-            },
-            "90": {
-              value: {
-                _dark: "#f5fbff",
-                base: "#043d77",
-              },
-            },
-            "00": {
-              value: {
-                _dark: "#071e69",
-                base: "#ddeffe",
-              },
-            },
-          },
-          grayalpha: {
-            "10": {
-              value: {
-                _dark: "#ffffff",
-                base: "#000000",
-              },
-            },
-            "20": {
-              value: {
-                _dark: "#ffffff",
-                base: "#000000",
-              },
-            },
-            "30": {
-              value: {
-                _dark: "#ffffff",
-                base: "#000000",
-              },
-            },
-            "40": {
-              value: {
-                _dark: "#ffffff",
-                base: "#000000",
-              },
-            },
-            "50": {
-              value: {
-                _dark: "#ffffff",
-                base: "#000000",
-              },
-            },
-            "60": {
-              value: {
-                _dark: "#ffffff",
-                base: "#000000",
-              },
-            },
-            "70": {
-              value: {
-                _dark: "#ffffff",
-                base: "#000000",
-              },
-            },
-            "80": {
-              value: {
-                _dark: "#ffffff",
-                base: "#000000",
-              },
-            },
-            "90": {
-              value: {
-                _dark: "#ffffff",
-                base: "#000000",
-              },
-            },
-            "95": {
-              value: {
-                _dark: "#ffffff",
-                base: "#000000",
-              },
-            },
-            "00": {
-              value: {
-                _dark: "#ffffff",
-                base: "#000000",
-              },
-            },
-          },
-          customalpha: {
-            "10": {
-              value: {
-                _dark: "#0e2e8c",
-                base: "#2679f3",
-              },
-            },
-            "20": {
-              value: {
-                _dark: "#1541b0",
-                base: "#2679f3",
-              },
-            },
-            "30": {
-              value: {
-                _dark: "#1c62e3",
-                base: "#2679f3",
-              },
-            },
-            "40": {
-              value: {
-                _dark: "#266df0",
-                base: "#2679f3",
-              },
-            },
-            "50": {
-              value: {
-                _dark: "#629df0",
-                base: "#2679f3",
-              },
-            },
-            "60": {
-              value: {
-                _dark: "#a3cff7",
-                base: "#1567e0",
-              },
-            },
-            "70": {
-              value: {
-                _dark: "#c5e3fa",
-                base: "#2679f3",
-              },
-            },
-            "80": {
-              value: {
-                _dark: "#e5eeff",
-                base: "#2679f3",
-              },
-            },
-            "90": {
-              value: {
-                _dark: "#f5fbff",
-                base: "#2679f3",
-              },
-            },
-            "00": {
-              value: {
-                _dark: "#071e69",
-                base: "#2679f3",
-              },
-            },
-          },
-          whitealpha: {
-            "10": {
-              value: {
-                _dark: "#000000",
-                base: "#ffffff",
-              },
-            },
-            "20": {
-              value: {
-                _dark: "#000000",
-                base: "#ffffff",
-              },
-            },
-            "30": {
-              value: {
-                _dark: "#ffffff",
-                base: "#ffffff",
-              },
-            },
-            "40": {
-              value: {
-                _dark: "#ffffff",
-                base: "#ffffff",
-              },
-            },
-            "50": {
-              value: {
-                _dark: "#ffffff",
-                base: "#ffffff",
-              },
-            },
-            "60": {
-              value: {
-                _dark: "#ffffff",
-                base: "#ffffff",
-              },
-            },
-            "70": {
-              value: {
-                _dark: "#ffffff",
-                base: "#ffffff",
-              },
-            },
-            "80": {
-              value: {
-                _dark: "#ffffff",
-                base: "#ffffff",
-              },
-            },
-            "90": {
-              value: {
-                _dark: "#ffffff",
-                base: "#ffffff",
-              },
-            },
-            "95": {
-              value: {
-                _dark: "#ffffff",
-                base: "#ffffff",
-              },
-            },
-            "00": {
-              value: {
-                _dark: "#000000",
-                base: "#ffffff",
-              },
-            },
-          },
-        },
+    extend: {
+      semanticTokens: {
+        colors,
       },
     },
   },
 });
+
+export default preset;
diff --git a/libs/@hashintel/ds-theme/src/theme/colors/accent-alpha.ts b/libs/@hashintel/ds-theme/src/theme/colors/accent-alpha.ts
new file mode 100644
index 00000000000..290dc62f052
--- /dev/null
+++ b/libs/@hashintel/ds-theme/src/theme/colors/accent-alpha.ts
@@ -0,0 +1,3 @@
+import { defineSemanticTokens } from "@pandacss/dev";
+
+export const accentAlpha = defineSemanticTokens.colors({ "10": { value: { _light: "rgba(38, 121, 243, 0.043)", _dark: "#0e2e8c" } }, "20": { value: { _light: "rgba(38, 121, 243, 0.098)", _dark: "rgba(21, 65, 176, 0.098)" } }, "30": { value: { _light: "rgba(38, 121, 243, 0.165)", _dark: "rgba(28, 98, 227, 0.165)" } }, "40": { value: { _light: "rgba(38, 121, 243, 0.239)", _dark: "rgba(38, 109, 240, 0.239)" } }, "50": { value: { _light: "rgba(38, 121, 243, 0.326)", _dark: "rgba(98, 157, 240, 0.326)" } }, "60": { value: { _light: "rgba(21, 103, 224, 0.443)", _dark: "rgba(163, 207, 247, 0.443)" } }, "70": { value: { _light: "rgba(38, 121, 243, 0.631)", _dark: "rgba(197, 227, 250, 0.631)" } }, "80": { value: { _light: "rgba(38, 121, 243, 0.78)", _dark: "#e5eeff" } }, "90": { value: { _light: "rgba(38, 121, 243, 0.849)", _dark: "rgba(245, 251, 255, 0.849)" } }, "00": { value: { _light: "rgba(38, 121, 243, 0.016)", _dark: "#071e69" } } });
diff --git a/libs/@hashintel/ds-theme/src/theme/colors/accent-gray.ts b/libs/@hashintel/ds-theme/src/theme/colors/accent-gray.ts
new file mode 100644
index 00000000000..c0c1ab5676d
--- /dev/null
+++ b/libs/@hashintel/ds-theme/src/theme/colors/accent-gray.ts
@@ -0,0 +1,3 @@
+import { defineSemanticTokens } from "@pandacss/dev";
+
+export const accentGray = defineSemanticTokens.colors({ "10": { value: { _light: "rgba(0, 0, 0, 0.023)", _dark: "rgba(255, 255, 255, 0.035)" } }, "20": { value: { _light: "rgba(0, 0, 0, 0.059)", _dark: "#ffffff" } }, "30": { value: { _light: "rgba(0, 0, 0, 0.09)", _dark: "#ffffff" } }, "40": { value: { _light: "rgba(0, 0, 0, 0.122)", _dark: "#ffffff" } }, "50": { value: { _light: "rgba(0, 0, 0, 0.149)", _dark: "#ffffff" } }, "60": { value: { _light: "rgba(0, 0, 0, 0.192)", _dark: "#ffffff" } }, "70": { value: { _light: "rgba(0, 0, 0, 0.267)", _dark: "#ffffff" } }, "80": { value: { _light: "rgba(0, 0, 0, 0.447)", _dark: "#ffffff" } }, "90": { value: { _light: "rgba(0, 0, 0, 0.486)", _dark: "#ffffff" } }, "95": { value: { _light: "rgba(0, 0, 0, 0.608)", _dark: "#ffffff" } }, "00": { value: { _light: "rgba(0, 0, 0, 0.012)", _dark: "rgba(255, 255, 255, 0)" } } });
diff --git a/libs/@hashintel/ds-theme/src/theme/colors/accent.ts b/libs/@hashintel/ds-theme/src/theme/colors/accent.ts
new file mode 100644
index 00000000000..ce260db14ba
--- /dev/null
+++ b/libs/@hashintel/ds-theme/src/theme/colors/accent.ts
@@ -0,0 +1,3 @@
+import { defineSemanticTokens } from "@pandacss/dev";
+
+export const accent = defineSemanticTokens.colors({ "10": { value: { _light: "#bbdffd", _dark: "#0e2e8c" } }, "20": { value: { _light: "#9ad0fd", _dark: "#1541b0" } }, "30": { value: { _light: "#78c0fc", _dark: "#1c62e3" } }, "40": { value: { _light: "#56b0fb", _dark: "#266df0" } }, "50": { value: { _light: "#2070e6", _dark: "#629df0" } }, "60": { value: { _light: "#1567e0", _dark: "#a3cff7" } }, "70": { value: { _light: "#0666c6", _dark: "#c5e3fa" } }, "80": { value: { _light: "#05529e", _dark: "#e5eeff" } }, "90": { value: { _light: "#043d77", _dark: "#f5fbff" } }, "00": { value: { _light: "#ddeffe", _dark: "#071e69" } } });
diff --git a/libs/@hashintel/ds-theme/src/theme/colors/blue.ts b/libs/@hashintel/ds-theme/src/theme/colors/blue.ts
new file mode 100644
index 00000000000..fdc27947937
--- /dev/null
+++ b/libs/@hashintel/ds-theme/src/theme/colors/blue.ts
@@ -0,0 +1,3 @@
+import { defineSemanticTokens } from "@pandacss/dev";
+
+export const blue = defineSemanticTokens.colors({ "10": { value: { _light: "#daf0ff", _dark: "#0e2e8c" } }, "20": { value: { _light: "#bee6ff", _dark: "#1541b0" } }, "30": { value: { _light: "#78c0fc", _dark: "#1c62e3" } }, "40": { value: { _light: "#56b0fb", _dark: "#266df0" } }, "50": { value: { _light: "#34a0fa", _dark: "#629df0" } }, "60": { value: { _light: "#2a80c8", _dark: "#a3cff7" } }, "70": { value: { _light: "#0666c6", _dark: "#c5e3fa" } }, "80": { value: { _light: "#05529e", _dark: "#e5eeff" } }, "90": { value: { _light: "#043d77", _dark: "#f5fbff" } }, "00": { value: { _light: "#eff9ff", _dark: "#071e69" } } });
diff --git a/libs/@hashintel/ds-theme/src/theme/colors/gray.ts b/libs/@hashintel/ds-theme/src/theme/colors/gray.ts
new file mode 100644
index 00000000000..62b07597691
--- /dev/null
+++ b/libs/@hashintel/ds-theme/src/theme/colors/gray.ts
@@ -0,0 +1,3 @@
+import { defineSemanticTokens } from "@pandacss/dev";
+
+export const gray = defineSemanticTokens.colors({ "10": { value: { _light: "#f5f5f5", _dark: "#1d2836" } }, "20": { value: { _light: "#e5e5e5", _dark: "#374151" } }, "30": { value: { _light: "#d9d9d9", _dark: "#4b5563" } }, "35": { value: { _light: "#c7c7c7", _dark: "#4b5563" } }, "40": { value: { _light: "#a3a3a3", _dark: "#6b7280" } }, "50": { value: { _light: "#737373", _dark: "#9ca3af" } }, "60": { value: { _light: "#525252", _dark: "#dde0e4" } }, "70": { value: { _light: "#404040", _dark: "#e5e7eb" } }, "80": { value: { _light: "#262626", _dark: "#f0f2f4" } }, "90": { value: { _light: "#171717", _dark: "#f6f8f9" } }, "95": { value: { _light: "#0a0a0a", _dark: "#f6f8f9" } }, "00": { value: { _light: "#fafafa", _dark: "#070a0d" } } });
diff --git a/libs/@hashintel/ds-theme/src/theme/colors/green.ts b/libs/@hashintel/ds-theme/src/theme/colors/green.ts
new file mode 100644
index 00000000000..d9cbd9cffcc
--- /dev/null
+++ b/libs/@hashintel/ds-theme/src/theme/colors/green.ts
@@ -0,0 +1,3 @@
+import { defineSemanticTokens } from "@pandacss/dev";
+
+export const green = defineSemanticTokens.colors({ "10": { value: { _light: "#e4f7f3", _dark: "#096638" } }, "20": { value: { _light: "#b9ebdf", _dark: "#0e7d4b" } }, "30": { value: { _light: "#91dbc9", _dark: "#159663" } }, "40": { value: { _light: "#4fc29e", _dark: "#19a874" } }, "50": { value: { _light: "#19a874", _dark: "#4fc29e" } }, "60": { value: { _light: "#159663", _dark: "#91dbc9" } }, "70": { value: { _light: "#0e7d4b", _dark: "#b9ebdf" } }, "80": { value: { _light: "#096638", _dark: "#e4f7f3" } }, "90": { value: { _light: "#054d27", _dark: "#edfaf7" } }, "00": { value: { _light: "#edfaf7", _dark: "#054d27" } } });
diff --git a/libs/@hashintel/ds-theme/src/theme/colors/index.ts b/libs/@hashintel/ds-theme/src/theme/colors/index.ts
new file mode 100644
index 00000000000..6bb18e1d61d
--- /dev/null
+++ b/libs/@hashintel/ds-theme/src/theme/colors/index.ts
@@ -0,0 +1,29 @@
+import { gray } from "./gray";
+import { red } from "./red";
+import { orange } from "./orange";
+import { green } from "./green";
+import { blue } from "./blue";
+import { neutral } from "./neutral";
+import { purple } from "./purple";
+import { pink } from "./pink";
+import { yellow } from "./yellow";
+import { accent } from "./accent";
+import { accentGray } from "./accent-gray";
+import { accentAlpha } from "./accent-alpha";
+import { whiteAlpha } from "./white-alpha";
+
+export const colors = {
+  gray,
+  red,
+  orange,
+  green,
+  blue,
+  neutral,
+  purple,
+  pink,
+  yellow,
+  accent,
+  accentGray,
+  accentAlpha,
+  whiteAlpha,
+};
diff --git a/libs/@hashintel/ds-theme/src/theme/colors/neutral.ts b/libs/@hashintel/ds-theme/src/theme/colors/neutral.ts
new file mode 100644
index 00000000000..2c32873e4cf
--- /dev/null
+++ b/libs/@hashintel/ds-theme/src/theme/colors/neutral.ts
@@ -0,0 +1,3 @@
+import { defineSemanticTokens } from "@pandacss/dev";
+
+export const neutral = defineSemanticTokens.colors({ white: { value: { _light: "#ffffff", _dark: "#000000" } }, black: { value: { _light: "#000000", _dark: "#ffffff" } } });
diff --git a/libs/@hashintel/ds-theme/src/theme/colors/orange.ts b/libs/@hashintel/ds-theme/src/theme/colors/orange.ts
new file mode 100644
index 00000000000..b69106be4c5
--- /dev/null
+++ b/libs/@hashintel/ds-theme/src/theme/colors/orange.ts
@@ -0,0 +1,3 @@
+import { defineSemanticTokens } from "@pandacss/dev";
+
+export const orange = defineSemanticTokens.colors({ "10": { value: { _light: "#ffe0b8", _dark: "#9a3412" } }, "20": { value: { _light: "#fed7aa", _dark: "#c2410c" } }, "30": { value: { _light: "#fdba74", _dark: "#d97706" } }, "40": { value: { _light: "#fb923c", _dark: "#f97316" } }, "50": { value: { _light: "#f97316", _dark: "#fb923c" } }, "60": { value: { _light: "#d97706", _dark: "#fdba74" } }, "70": { value: { _light: "#c2410c", _dark: "#fed7aa" } }, "80": { value: { _light: "#9a3412", _dark: "#ffedd5" } }, "90": { value: { _light: "#7c2d12", _dark: "#fff7ed" } }, "00": { value: { _light: "#fff1e0", _dark: "#7c2d12" } } });
diff --git a/libs/@hashintel/ds-theme/src/theme/colors/pink.ts b/libs/@hashintel/ds-theme/src/theme/colors/pink.ts
new file mode 100644
index 00000000000..4bbbdaefef5
--- /dev/null
+++ b/libs/@hashintel/ds-theme/src/theme/colors/pink.ts
@@ -0,0 +1,3 @@
+import { defineSemanticTokens } from "@pandacss/dev";
+
+export const pink = defineSemanticTokens.colors({ "10": { value: { _light: "#fce7f3", _dark: "#9d174d" } }, "20": { value: { _light: "#fbcfe8", _dark: "#be185d" } }, "30": { value: { _light: "#f9a8d4", _dark: "#db2777" } }, "40": { value: { _light: "#f174b2", _dark: "#ec4899" } }, "50": { value: { _light: "#ec4899", _dark: "#f174b2" } }, "60": { value: { _light: "#db2777", _dark: "#f9a8d4" } }, "70": { value: { _light: "#be185d", _dark: "#fbcfe8" } }, "80": { value: { _light: "#9d174d", _dark: "#fce7f3" } }, "90": { value: { _light: "#831843", _dark: "#fdf2f8" } }, "00": { value: { _light: "#fdf2f8", _dark: "#831843" } } });
diff --git a/libs/@hashintel/ds-theme/src/theme/colors/purple.ts b/libs/@hashintel/ds-theme/src/theme/colors/purple.ts
new file mode 100644
index 00000000000..563eeee0623
--- /dev/null
+++ b/libs/@hashintel/ds-theme/src/theme/colors/purple.ts
@@ -0,0 +1,3 @@
+import { defineSemanticTokens } from "@pandacss/dev";
+
+export const purple = defineSemanticTokens.colors({ "10": { value: { _light: "#e0d6fc", _dark: "#2d138f" } }, "20": { value: { _light: "#c2adf8", _dark: "#401db3" } }, "30": { value: { _light: "#a385f5", _dark: "#5429d6" } }, "40": { value: { _light: "#865cf1", _dark: "#6633ee" } }, "50": { value: { _light: "#6633ee", _dark: "#865cf1" } }, "60": { value: { _light: "#5429d6", _dark: "#a385f5" } }, "70": { value: { _light: "#401db3", _dark: "#c2adf8" } }, "80": { value: { _light: "#2d138f", _dark: "#e0d6fc" } }, "90": { value: { _light: "#1d0a6b", _dark: "#eee6f3" } }, "00": { value: { _light: "#eee6f3", _dark: "#1d0a6b" } } });
diff --git a/libs/@hashintel/ds-theme/src/theme/colors/red.ts b/libs/@hashintel/ds-theme/src/theme/colors/red.ts
new file mode 100644
index 00000000000..a1c78eaf641
--- /dev/null
+++ b/libs/@hashintel/ds-theme/src/theme/colors/red.ts
@@ -0,0 +1,3 @@
+import { defineSemanticTokens } from "@pandacss/dev";
+
+export const red = defineSemanticTokens.colors({ "10": { value: { _light: "#fbd5d7", _dark: "#991b1b" } }, "20": { value: { _light: "#f5a3a3", _dark: "#b91c1c" } }, "30": { value: { _light: "#f17e7e", _dark: "#dc2626" } }, "40": { value: { _light: "#ed5a5a", _dark: "#ef4444" } }, "50": { value: { _light: "#e93535", _dark: "#f87171" } }, "60": { value: { _light: "#dc1818", _dark: "#fca5a5" } }, "70": { value: { _light: "#b81414", _dark: "#fecaca" } }, "80": { value: { _light: "#931010", _dark: "#fee2e2" } }, "90": { value: { _light: "#6e0c0c", _dark: "#fef2f2" } }, "00": { value: { _light: "#fde8e9", _dark: "#7f1d1d" } } });
diff --git a/libs/@hashintel/ds-theme/src/theme/colors/white-alpha.ts b/libs/@hashintel/ds-theme/src/theme/colors/white-alpha.ts
new file mode 100644
index 00000000000..96b49e48159
--- /dev/null
+++ b/libs/@hashintel/ds-theme/src/theme/colors/white-alpha.ts
@@ -0,0 +1,3 @@
+import { defineSemanticTokens } from "@pandacss/dev";
+
+export const whiteAlpha = defineSemanticTokens.colors({ "10": { value: { _light: "rgba(255, 255, 255, 0.1)", _dark: "rgba(0, 0, 0, 0.035)" } }, "20": { value: { _light: "rgba(255, 255, 255, 0.2)", _dark: "#000000" } }, "30": { value: { _light: "rgba(255, 255, 255, 0.3)", _dark: "#ffffff" } }, "40": { value: { _light: "rgba(255, 255, 255, 0.4)", _dark: "#ffffff" } }, "50": { value: { _light: "rgba(255, 255, 255, 0.5)", _dark: "#ffffff" } }, "60": { value: { _light: "rgba(255, 255, 255, 0.6)", _dark: "#ffffff" } }, "70": { value: { _light: "rgba(255, 255, 255, 0.7)", _dark: "#ffffff" } }, "80": { value: { _light: "rgba(255, 255, 255, 0.8)", _dark: "#ffffff" } }, "90": { value: { _light: "rgba(255, 255, 255, 0.9)", _dark: "#ffffff" } }, "95": { value: { _light: "rgba(255, 255, 255, 0.95)", _dark: "#ffffff" } }, "00": { value: { _light: "rgba(255, 255, 255, 0)", _dark: "rgba(0, 0, 0, 0)" } } });
diff --git a/libs/@hashintel/ds-theme/src/theme/colors/yellow.ts b/libs/@hashintel/ds-theme/src/theme/colors/yellow.ts
new file mode 100644
index 00000000000..e3722d03e4f
--- /dev/null
+++ b/libs/@hashintel/ds-theme/src/theme/colors/yellow.ts
@@ -0,0 +1,3 @@
+import { defineSemanticTokens } from "@pandacss/dev";
+
+export const yellow = defineSemanticTokens.colors({ "10": { value: { _light: "#fef9c3", _dark: "#854d0e" } }, "20": { value: { _light: "#fef08a", _dark: "#a16207" } }, "30": { value: { _light: "#fde047", _dark: "#ca8a04" } }, "40": { value: { _light: "#facc15", _dark: "#eab308" } }, "50": { value: { _light: "#eab308", _dark: "#facc15" } }, "60": { value: { _light: "#ca8a04", _dark: "#fde047" } }, "70": { value: { _light: "#a16207", _dark: "#fef08a" } }, "80": { value: { _light: "#854d0e", _dark: "#fef9c3" } }, "90": { value: { _light: "#713f12", _dark: "#fefce8" } }, "00": { value: { _light: "#fefce8", _dark: "#713f12" } } });
diff --git a/libs/@hashintel/ds-theme/tsconfig.json b/libs/@hashintel/ds-theme/tsconfig.json
new file mode 100644
index 00000000000..8046fbdcf56
--- /dev/null
+++ b/libs/@hashintel/ds-theme/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@local/tsconfig/legacy-base-tsconfig-to-refactor.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "target": "es2022",
+    "moduleResolution": "bundler",
+    "lib": ["ES2021"],
+    "noEmit": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*", "generate-colors.ts"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/yarn.lock b/yarn.lock
index b8e3b28b57f..5b616386e9e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8544,8 +8544,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@hashintel/ds-theme@workspace:libs/@hashintel/ds-theme"
   dependencies:
-    es-toolkit: "npm:1.41.0"
+    "@pandacss/dev": "npm:1.4.3"
+    case-anything: "npm:3.1.0"
     tsx: "npm:4.20.6"
+    typescript: "npm:5.9.3"
   languageName: unknown
   linkType: soft
 
@@ -24800,6 +24802,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"case-anything@npm:3.1.0":
+  version: 3.1.0
+  resolution: "case-anything@npm:3.1.0"
+  checksum: 10c0/b913c530169f2ff9a1046f604855593095a9ea2674121a6a8323ecd226ef983e2b908b5e3c7adbeb349656a299ab60a4f3e51dda38cfef970acaba3af25a4208
+  languageName: node
+  linkType: hard
+
 "cborg@npm:^4.2.14":
   version: 4.2.16
   resolution: "cborg@npm:4.2.16"