diff --git a/changelog.d/feat-legacy-tokens-css.added.md b/changelog.d/feat-legacy-tokens-css.added.md
new file mode 100644
index 0000000..9ee4576
--- /dev/null
+++ b/changelog.d/feat-legacy-tokens-css.added.md
@@ -0,0 +1 @@
+Add `@policyengine/ui-kit/legacy/tokens.css` — CSS-side companion to the JS `legacy` shim. Mirrors the `--pe-color-*` / `--pe-font-*` / `--pe-space-*` / `--pe-radius-*` custom properties that `@policyengine/design-system@0.3.0` shipped, so consumers migrating from design-system can switch their globals.css import with a single line (`@policyengine/design-system/tokens.css` → `@policyengine/ui-kit/legacy/tokens.css`) instead of inlining hex values per repo.
diff --git a/package.json b/package.json
index 62006fb..9dbe7b4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@policyengine/ui-kit",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -83,6 +83,7 @@
     },
     "./styles.css": "./dist/styles.css",
     "./theme.css": "./src/theme/tokens.css",
+    "./legacy/tokens.css": "./src/legacy/tokens.css",
     "./quarto.scss": "./src/theme/quarto.scss",
     "./tokens": {
       "types": "./dist/theme/index.d.ts",
@@ -94,6 +95,7 @@
   "files": [
     "dist",
     "src/theme",
+    "src/legacy",
     "src/assets"
   ],
   "scripts": {
diff --git a/src/legacy/tokens.css b/src/legacy/tokens.css
new file mode 100644
index 0000000..37650d5
--- /dev/null
+++ b/src/legacy/tokens.css
@@ -0,0 +1,130 @@
+/**
+ * @policyengine/ui-kit/legacy/tokens.css
+ *
+ * CSS-side companion to the JS `@policyengine/ui-kit/legacy` shim.
+ *
+ * Mirrors the `--pe-color-*` / `--pe-font-*` / `--pe-space-*` / `--pe-radius-*`
+ * custom properties shipped by `@policyengine/design-system@0.3.0` so that
+ * consumers migrating from the deprecated design-system package can switch
+ * their globals.css import with a single line:
+ *
+ *   - @import "@policyengine/design-system/tokens.css";
+ *   + @import "@policyengine/ui-kit/legacy/tokens.css";
+ *
+ * Values are bit-identical to design-system 0.3.0 `dist/tokens.css`. For new
+ * code, prefer the canonical `@policyengine/ui-kit/theme.css` (shadcn-style
+ * tokens — `--primary`, `--background`, etc.). Mixing both is supported but
+ * the canonical theme is the source of truth for components shipped from
+ * this package.
+ */
+:root {
+  /* Colors — primary (teal) */
+  --pe-color-primary-50: #E6FFFA;
+  --pe-color-primary-100: #B2F5EA;
+  --pe-color-primary-200: #81E6D9;
+  --pe-color-primary-300: #4FD1C5;
+  --pe-color-primary-400: #38B2AC;
+  --pe-color-primary-500: #319795;
+  --pe-color-primary-600: #2C7A7B;
+  --pe-color-primary-700: #285E61;
+  --pe-color-primary-800: #234E52;
+  --pe-color-primary-900: #1D4044;
+  --pe-color-primary-alpha-40: #31979566;
+  --pe-color-primary-alpha-50: #31979580;
+  --pe-color-primary-alpha-60: #31979599;
+
+  /* Colors — gray */
+  --pe-color-gray-50: #F9FAFB;
+  --pe-color-gray-100: #F2F4F7;
+  --pe-color-gray-200: #E2E8F0;
+  --pe-color-gray-300: #D1D5DB;
+  --pe-color-gray-400: #9CA3AF;
+  --pe-color-gray-500: #6B7280;
+  --pe-color-gray-600: #4B5563;
+  --pe-color-gray-700: #344054;
+  --pe-color-gray-800: #1F2937;
+  --pe-color-gray-900: #101828;
+
+  /* Colors — semantic */
+  --pe-color-warning: #FEC601;
+  --pe-color-error: #EF4444;
+  --pe-color-info: #2C7A7B;
+
+  /* Colors — background */
+  --pe-color-bg-primary: #FFFFFF;
+  --pe-color-bg-secondary: #F5F9FF;
+  --pe-color-bg-tertiary: #F1F5F9;
+  --pe-color-bg-sider: #FFFFFF;
+
+  /* Colors — text */
+  --pe-color-text-primary: #000000;
+  --pe-color-text-secondary: #5A5A5A;
+  --pe-color-text-tertiary: #9CA3AF;
+  --pe-color-text-inverse: #FFFFFF;
+  --pe-color-text-title: #000000;
+  --pe-color-text-link: #2C7A7B;
+  --pe-color-text-linkHover: #285E61;
+  --pe-color-text-warning: #d9480f;
+
+  /* Colors — border */
+  --pe-color-border-light: #E2E8F0;
+  --pe-color-border-medium: #CBD5E1;
+  --pe-color-border-dark: #94A3B8;
+
+  /* Typography — font families */
+  --pe-font-family-primary: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --pe-font-family-secondary: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --pe-font-family-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --pe-font-family-chart: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --pe-font-family-prose: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --pe-font-family-mono: JetBrains Mono, "Fira Code", Consolas, monospace;
+
+  /* Typography — font sizes */
+  --pe-font-size-xs: 12px;
+  --pe-font-size-sm: 14px;
+  --pe-font-size-base: 16px;
+  --pe-font-size-lg: 18px;
+  --pe-font-size-xl: 20px;
+  --pe-font-size-2xl: 24px;
+  --pe-font-size-3xl: 28px;
+  --pe-font-size-4xl: 32px;
+
+  /* Typography — font weights */
+  --pe-font-weight-thin: 100;
+  --pe-font-weight-light: 300;
+  --pe-font-weight-normal: 400;
+  --pe-font-weight-medium: 500;
+  --pe-font-weight-semibold: 600;
+  --pe-font-weight-bold: 700;
+  --pe-font-weight-extrabold: 800;
+  --pe-font-weight-black: 900;
+
+  /* Typography — line heights */
+  --pe-line-height-20: 20px;
+  --pe-line-height-22: 22px;
+  --pe-line-height-24: 24px;
+  --pe-line-height-none: 1;
+  --pe-line-height-tight: 1.25;
+  --pe-line-height-snug: 1.375;
+  --pe-line-height-normal: 1.5;
+  --pe-line-height-relaxed: 1.625;
+  --pe-line-height-loose: 2;
+
+  /* Spacing — base scale */
+  --pe-space-xs: 4px;
+  --pe-space-sm: 8px;
+  --pe-space-md: 12px;
+  --pe-space-lg: 16px;
+  --pe-space-xl: 20px;
+  --pe-space-2xl: 24px;
+  --pe-space-3xl: 32px;
+  --pe-space-4xl: 48px;
+  --pe-space-5xl: 64px;
+
+  /* Spacing — border radius */
+  --pe-radius-none: 0px;
+  --pe-radius-chip: 2px;
+  --pe-radius-element: 4px;
+  --pe-radius-container: 8px;
+  --pe-radius-feature: 12px;
+}