@spawn-llc/design-system 1.1.0

package/dist/tokens.d.ts

@@ -0,0 +1,245 @@
+declare const colors: {
+    readonly paper: "#FAF8F3";
+    readonly white: "#FFFFFF";
+    readonly mist: "#F2F0E9";
+    readonly line: "#8C8678";
+    readonly stone: "#B7B1A4";
+    readonly slate: "#6B655A";
+    readonly ink: "#1A1916";
+    readonly clay: "#C0492F";
+    readonly ember: "#9C3A23";
+    readonly steel: "#2E3A46";
+    readonly "steel-2": "#3B4855";
+    readonly "steel-border": "#7A8690";
+    readonly "nav-inactive": "#A6B0BB";
+    readonly "row-hover": "#FBFAF6";
+};
+declare const fontStacks: {
+    readonly serif: "'Newsreader Variable', Georgia, serif";
+    readonly sans: "'Geist Variable', 'Geist', system-ui, Arial, sans-serif";
+    readonly mono: "'Geist Mono Variable', 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace";
+};
+declare const typeScale: {
+    readonly pageTitle: {
+        readonly font: "serif";
+        readonly size: "24px";
+        readonly lineHeight: 1.1;
+        readonly weight: 500;
+    };
+    readonly figure: {
+        readonly font: "mono";
+        readonly size: "28px";
+        readonly lineHeight: 1;
+        readonly weight: 500;
+        readonly numeric: "tabular-nums";
+    };
+    readonly section: {
+        readonly font: "sans";
+        readonly size: "14px";
+        readonly lineHeight: 1.3;
+        readonly weight: 600;
+    };
+    readonly body: {
+        readonly font: "sans";
+        readonly size: "13px";
+        readonly lineHeight: 1.5;
+        readonly weight: 400;
+    };
+    readonly secondary: {
+        readonly font: "sans";
+        readonly size: "12px";
+        readonly lineHeight: 1.4;
+        readonly weight: 400;
+        readonly color: "slate";
+    };
+    readonly label: {
+        readonly font: "mono";
+        readonly size: "10px";
+        readonly lineHeight: 1;
+        readonly weight: 500;
+        readonly tracking: "0.12em";
+        readonly transform: "uppercase";
+        readonly color: "slate";
+    };
+    readonly axisTick: {
+        readonly font: "mono";
+        readonly size: "10px";
+        readonly lineHeight: 1;
+        readonly weight: 400;
+        readonly color: "slate";
+    };
+};
+declare const spacing: {
+    readonly base: 8;
+    readonly scale: readonly [4, 8, 16, 24, 32, 48, 64, 96];
+};
+declare const radius: {
+    readonly xs: "2px";
+    readonly sm: "3px";
+    readonly md: "4px";
+    readonly lg: "6px";
+    readonly xl: "8px";
+    readonly "2xl": "10px";
+    readonly "3xl": "12px";
+    readonly "4xl": "16px";
+    readonly base: "4px";
+    readonly max: "16px";
+};
+declare const semantic: {
+    readonly background: "paper";
+    readonly foreground: "ink";
+    readonly card: "white";
+    readonly "card-foreground": "ink";
+    readonly popover: "white";
+    readonly "popover-foreground": "ink";
+    readonly primary: "ink";
+    readonly "primary-foreground": "paper";
+    readonly secondary: "mist";
+    readonly "secondary-foreground": "ink";
+    readonly muted: "mist";
+    readonly "muted-foreground": "slate";
+    readonly accent: "mist";
+    readonly "accent-foreground": "ink";
+    readonly destructive: "ember";
+    readonly border: "line";
+    readonly input: "line";
+    readonly ring: "ink";
+    readonly "chart-1": "stone";
+    readonly "chart-2": "steel";
+    readonly "chart-3": "slate";
+    readonly "chart-4": "mist";
+    readonly "chart-5": "clay";
+    readonly sidebar: "steel";
+    readonly "sidebar-foreground": "nav-inactive";
+    readonly "sidebar-primary": "clay";
+    readonly "sidebar-primary-foreground": "paper";
+    readonly "sidebar-accent": "steel-2";
+    readonly "sidebar-accent-foreground": "white";
+    readonly "sidebar-border": "steel-border";
+    readonly "sidebar-ring": "clay";
+};
+declare const tokens: {
+    readonly colors: {
+        readonly paper: "#FAF8F3";
+        readonly white: "#FFFFFF";
+        readonly mist: "#F2F0E9";
+        readonly line: "#8C8678";
+        readonly stone: "#B7B1A4";
+        readonly slate: "#6B655A";
+        readonly ink: "#1A1916";
+        readonly clay: "#C0492F";
+        readonly ember: "#9C3A23";
+        readonly steel: "#2E3A46";
+        readonly "steel-2": "#3B4855";
+        readonly "steel-border": "#7A8690";
+        readonly "nav-inactive": "#A6B0BB";
+        readonly "row-hover": "#FBFAF6";
+    };
+    readonly fontStacks: {
+        readonly serif: "'Newsreader Variable', Georgia, serif";
+        readonly sans: "'Geist Variable', 'Geist', system-ui, Arial, sans-serif";
+        readonly mono: "'Geist Mono Variable', 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace";
+    };
+    readonly typeScale: {
+        readonly pageTitle: {
+            readonly font: "serif";
+            readonly size: "24px";
+            readonly lineHeight: 1.1;
+            readonly weight: 500;
+        };
+        readonly figure: {
+            readonly font: "mono";
+            readonly size: "28px";
+            readonly lineHeight: 1;
+            readonly weight: 500;
+            readonly numeric: "tabular-nums";
+        };
+        readonly section: {
+            readonly font: "sans";
+            readonly size: "14px";
+            readonly lineHeight: 1.3;
+            readonly weight: 600;
+        };
+        readonly body: {
+            readonly font: "sans";
+            readonly size: "13px";
+            readonly lineHeight: 1.5;
+            readonly weight: 400;
+        };
+        readonly secondary: {
+            readonly font: "sans";
+            readonly size: "12px";
+            readonly lineHeight: 1.4;
+            readonly weight: 400;
+            readonly color: "slate";
+        };
+        readonly label: {
+            readonly font: "mono";
+            readonly size: "10px";
+            readonly lineHeight: 1;
+            readonly weight: 500;
+            readonly tracking: "0.12em";
+            readonly transform: "uppercase";
+            readonly color: "slate";
+        };
+        readonly axisTick: {
+            readonly font: "mono";
+            readonly size: "10px";
+            readonly lineHeight: 1;
+            readonly weight: 400;
+            readonly color: "slate";
+        };
+    };
+    readonly spacing: {
+        readonly base: 8;
+        readonly scale: readonly [4, 8, 16, 24, 32, 48, 64, 96];
+    };
+    readonly radius: {
+        readonly xs: "2px";
+        readonly sm: "3px";
+        readonly md: "4px";
+        readonly lg: "6px";
+        readonly xl: "8px";
+        readonly "2xl": "10px";
+        readonly "3xl": "12px";
+        readonly "4xl": "16px";
+        readonly base: "4px";
+        readonly max: "16px";
+    };
+    readonly semantic: {
+        readonly background: "paper";
+        readonly foreground: "ink";
+        readonly card: "white";
+        readonly "card-foreground": "ink";
+        readonly popover: "white";
+        readonly "popover-foreground": "ink";
+        readonly primary: "ink";
+        readonly "primary-foreground": "paper";
+        readonly secondary: "mist";
+        readonly "secondary-foreground": "ink";
+        readonly muted: "mist";
+        readonly "muted-foreground": "slate";
+        readonly accent: "mist";
+        readonly "accent-foreground": "ink";
+        readonly destructive: "ember";
+        readonly border: "line";
+        readonly input: "line";
+        readonly ring: "ink";
+        readonly "chart-1": "stone";
+        readonly "chart-2": "steel";
+        readonly "chart-3": "slate";
+        readonly "chart-4": "mist";
+        readonly "chart-5": "clay";
+        readonly sidebar: "steel";
+        readonly "sidebar-foreground": "nav-inactive";
+        readonly "sidebar-primary": "clay";
+        readonly "sidebar-primary-foreground": "paper";
+        readonly "sidebar-accent": "steel-2";
+        readonly "sidebar-accent-foreground": "white";
+        readonly "sidebar-border": "steel-border";
+        readonly "sidebar-ring": "clay";
+    };
+};
+type ColorToken = keyof typeof colors;
+
+export { type ColorToken, colors, tokens as default, fontStacks, radius, semantic, spacing, tokens, typeScale };

package/dist/tokens.js

@@ -0,0 +1,134 @@
+// src/tokens.generated.ts
+var colors = {
+  "paper": "#FAF8F3",
+  "white": "#FFFFFF",
+  "mist": "#F2F0E9",
+  "line": "#8C8678",
+  "stone": "#B7B1A4",
+  "slate": "#6B655A",
+  "ink": "#1A1916",
+  "clay": "#C0492F",
+  "ember": "#9C3A23",
+  "steel": "#2E3A46",
+  "steel-2": "#3B4855",
+  "steel-border": "#7A8690",
+  "nav-inactive": "#A6B0BB",
+  "row-hover": "#FBFAF6"
+};
+var fontStacks = {
+  "serif": "'Newsreader Variable', Georgia, serif",
+  "sans": "'Geist Variable', 'Geist', system-ui, Arial, sans-serif",
+  "mono": "'Geist Mono Variable', 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace"
+};
+var typeScale = {
+  "pageTitle": {
+    "font": "serif",
+    "size": "24px",
+    "lineHeight": 1.1,
+    "weight": 500
+  },
+  "figure": {
+    "font": "mono",
+    "size": "28px",
+    "lineHeight": 1,
+    "weight": 500,
+    "numeric": "tabular-nums"
+  },
+  "section": {
+    "font": "sans",
+    "size": "14px",
+    "lineHeight": 1.3,
+    "weight": 600
+  },
+  "body": {
+    "font": "sans",
+    "size": "13px",
+    "lineHeight": 1.5,
+    "weight": 400
+  },
+  "secondary": {
+    "font": "sans",
+    "size": "12px",
+    "lineHeight": 1.4,
+    "weight": 400,
+    "color": "slate"
+  },
+  "label": {
+    "font": "mono",
+    "size": "10px",
+    "lineHeight": 1,
+    "weight": 500,
+    "tracking": "0.12em",
+    "transform": "uppercase",
+    "color": "slate"
+  },
+  "axisTick": {
+    "font": "mono",
+    "size": "10px",
+    "lineHeight": 1,
+    "weight": 400,
+    "color": "slate"
+  }
+};
+var spacing = {
+  "base": 8,
+  "scale": [
+    4,
+    8,
+    16,
+    24,
+    32,
+    48,
+    64,
+    96
+  ]
+};
+var radius = {
+  "xs": "2px",
+  "sm": "3px",
+  "md": "4px",
+  "lg": "6px",
+  "xl": "8px",
+  "2xl": "10px",
+  "3xl": "12px",
+  "4xl": "16px",
+  "base": "4px",
+  "max": "16px"
+};
+var semantic = {
+  "background": "paper",
+  "foreground": "ink",
+  "card": "white",
+  "card-foreground": "ink",
+  "popover": "white",
+  "popover-foreground": "ink",
+  "primary": "ink",
+  "primary-foreground": "paper",
+  "secondary": "mist",
+  "secondary-foreground": "ink",
+  "muted": "mist",
+  "muted-foreground": "slate",
+  "accent": "mist",
+  "accent-foreground": "ink",
+  "destructive": "ember",
+  "border": "line",
+  "input": "line",
+  "ring": "ink",
+  "chart-1": "stone",
+  "chart-2": "steel",
+  "chart-3": "slate",
+  "chart-4": "mist",
+  "chart-5": "clay",
+  "sidebar": "steel",
+  "sidebar-foreground": "nav-inactive",
+  "sidebar-primary": "clay",
+  "sidebar-primary-foreground": "paper",
+  "sidebar-accent": "steel-2",
+  "sidebar-accent-foreground": "white",
+  "sidebar-border": "steel-border",
+  "sidebar-ring": "clay"
+};
+var tokens = { colors, fontStacks, typeScale, spacing, radius, semantic };
+var tokens_generated_default = tokens;
+
+export { colors, tokens_generated_default as default, fontStacks, radius, semantic, spacing, tokens, typeScale };

package/package.json

@@ -0,0 +1,104 @@
+{
+  "name": "@spawn-llc/design-system",
+  "version": "1.1.0",
+  "description": "Spawn Partners brand system — Base UI components, design tokens, and themed CSS. Single source of truth for the Spawn Partners brand.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css",
+    "./dist/fonts.js"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./theme.css": "./dist/theme.css",
+    "./fonts": {
+      "types": "./dist/fonts.d.ts",
+      "import": "./dist/fonts.js"
+    },
+    "./tokens": {
+      "types": "./dist/tokens.d.ts",
+      "import": "./dist/tokens.js"
+    },
+    "./tokens.css": "./tokens/tokens.css",
+    "./tokens.json": "./tokens/tokens.json",
+    "./DESIGN-SYSTEM.md": "./dist/DESIGN-SYSTEM.md"
+  },
+  "files": [
+    "dist",
+    "tokens",
+    "SPEC.md",
+    "README.md",
+    "DESIGN-SYSTEM.md"
+  ],
+  "scripts": {
+    "prepare": "git config core.hooksPath .githooks || true",
+    "tokens:gen": "node scripts/generate-tokens.mjs",
+    "tokens:check": "node scripts/generate-tokens.mjs --check",
+    "pretest": "npm run tokens:check",
+    "build": "npm run clean && npm run tokens:gen && tsup && npm run build:css && cp src/styles/theme.css dist/theme.css && cp DESIGN-SYSTEM.md dist/DESIGN-SYSTEM.md",
+    "build:css": "tailwindcss -i src/styles/index.css -o dist/styles.css --minify",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run tokens:check && npm run test:contrast && npm run build",
+    "typecheck": "tsc --noEmit",
+    "play": "vite --config playground/vite.config.ts",
+    "play:build": "vite build --config playground/vite.config.ts",
+    "play:typecheck": "tsc --noEmit -p playground/tsconfig.json",
+    "test": "vitest run",
+    "test:contrast": "vitest run test/contrast.test.ts",
+    "test:e2e": "playwright test"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.6.0",
+    "@fontsource-variable/geist": "^5.2.9",
+    "@fontsource-variable/geist-mono": "^5.2.8",
+    "@fontsource-variable/inter": "^5.2.8",
+    "@fontsource-variable/newsreader": "^5.2.10",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^1.21.0",
+    "next-themes": "^0.4.6",
+    "react-day-picker": "^10.0.1",
+    "react-resizable-panels": "^4.0.10",
+    "recharts": "^3.8.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0",
+    "vaul": "^1.1.2"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.61.1",
+    "@tailwindcss/cli": "^4.3.1",
+    "@tailwindcss/vite": "^4.3.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^5.2.0",
+    "jsdom": "^29.1.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "shadcn": "^4.11.1",
+    "tailwindcss": "^4.3.1",
+    "tsup": "^8.5.1",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.7.0",
+    "vite": "^7.3.6",
+    "vitest": "^3.2.6"
+  }
+}

package/tokens/tokens.css

@@ -0,0 +1,87 @@
+/* Spawn Partners — Design Tokens
+   The :root @tokens:auto region is GENERATED from tokens/tokens.json (the
+   authored source of truth) by scripts/generate-tokens.mjs. Edit tokens.json,
+   then run `npm run tokens:gen`. Import this file; never hardcode hex inline. */
+
+:root {
+  /* @tokens:auto:start tokens-root */
+  /* ---- Color ---- */
+  --paper: #FAF8F3;  /* app/page background */
+  --white: #FFFFFF;  /* cards / surfaces */
+  --mist: #F2F0E9;  /* subtle fills, track bg, flat chart fill */
+  --line: #8C8678;  /* hairlines, borders, dividers — clears WCAG 3:1 on paper/white/mist */
+  --stone: #B7B1A4;  /* muted bars, disabled */
+  --slate: #6B655A;  /* secondary text, labels, axis ticks */
+  --ink: #1A1916;  /* primary text, dark surfaces, default buttons */
+  --clay: #C0492F;  /* THE accent — one element per view */
+  --ember: #9C3A23;  /* clay hover / pressed */
+  --steel: #2E3A46;  /* nav / chrome — internal tooling ONLY */
+  --steel-2: #3B4855;  /* active nav row */
+  --steel-border: #7A8690;  /* steel chrome border — clears WCAG 3:1 on steel */
+  --nav-inactive: #A6B0BB;  /* inactive nav labels */
+  --row-hover: #FBFAF6;  /* table row hover */
+
+  /* ---- Type ---- */
+  --font-serif: 'Newsreader Variable', Georgia, serif;
+  --font-sans:  'Geist Variable', 'Geist', system-ui, Arial, sans-serif;
+  --font-mono:  'Geist Mono Variable', 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+
+  /* type scale (interface density) */
+  --t-page-title: 24px;
+  --t-figure: 28px;
+  --t-section: 14px;
+  --t-body: 13px;
+  --t-secondary: 12px;
+  --t-label: 10px;
+  --t-axis-tick: 10px;
+  --tracking-label: 0.12em;
+
+  /* ---- Spacing (8px base) ---- */
+  --s-1: 4px;
+  --s-2: 8px;
+  --s-3: 16px;
+  --s-4: 24px;
+  --s-5: 32px;
+  --s-6: 48px;
+  --s-7: 64px;
+  --s-8: 96px;
+
+  /* ---- Shape ---- */
+  --radius: 4px;
+  --radius-lg: 6px;
+  /* @tokens:auto:end tokens-root */
+  --hairline: 1px solid var(--line);
+
+  /* Elevation — anchored surfaces stay flat. Only surfaces that float free of
+     the layout (dropdowns, popovers, selects, menus, tooltips, sheets) get this
+     small, warm-tinted lift, on top of their 1px border. */
+  --elevation-pop: 0 2px 4px -1px rgb(26 25 22 / 0.12), 0 10px 24px -4px rgb(26 25 22 / 0.2);
+}
+
+/* Default action button */
+.btn {
+  font-family: var(--font-sans); font-weight: 600;
+  background: var(--ink); color: var(--paper);
+  border: none; border-radius: var(--radius);
+  padding: var(--s-2) var(--s-3); cursor: pointer;
+}
+.btn:hover { background: #000; }
+.btn-secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
+.btn-clay { background: var(--clay); color: var(--paper); }   /* rare */
+.btn-clay:hover { background: var(--ember); }
+
+/* Link — ink with clay underline */
+a, .link {
+  color: var(--ink);
+  text-decoration: underline;
+  text-decoration-color: var(--clay);
+  text-decoration-thickness: 1.5px;
+  text-underline-offset: 2px;
+}
+
+/* Mono label */
+.label {
+  font-family: var(--font-mono); font-weight: 500;
+  font-size: var(--t-label); letter-spacing: var(--tracking-label);
+  text-transform: uppercase; color: var(--slate);
+}

package/tokens/tokens.json

@@ -0,0 +1,94 @@
+{
+  "$meta": {
+    "name": "Spawn Partners Design System",
+    "version": "1.1.0",
+    "ratio": "70% paper / 22% ink / <=8% clay",
+    "note": "Authored source of truth. tokens.css, src/styles/theme.css regions, DESIGN-SYSTEM.md, src/tokens.generated.ts, and the value tables in SPEC.md are GENERATED from this file by scripts/generate-tokens.mjs. Edit here, then run `npm run tokens:gen`."
+  },
+  "color": {
+    "paper":   { "value": "#FAF8F3", "role": "app/page background" },
+    "white":   { "value": "#FFFFFF", "role": "cards / surfaces" },
+    "mist":    { "value": "#F2F0E9", "role": "subtle fills, track bg, flat chart fill" },
+    "line":    { "value": "#8C8678", "role": "hairlines, borders, dividers — clears WCAG 3:1 on paper/white/mist" },
+    "stone":   { "value": "#B7B1A4", "role": "muted bars, disabled" },
+    "slate":   { "value": "#6B655A", "role": "secondary text, labels, axis ticks" },
+    "ink":     { "value": "#1A1916", "role": "primary text, dark surfaces, default buttons" },
+    "clay":    { "value": "#C0492F", "role": "THE accent — one element per view" },
+    "ember":   { "value": "#9C3A23", "role": "clay hover / pressed" },
+    "steel":   { "value": "#2E3A46", "role": "nav / chrome — internal tooling ONLY" },
+    "steel-2": { "value": "#3B4855", "role": "active nav row" },
+    "steel-border": { "value": "#7A8690", "role": "steel chrome border — clears WCAG 3:1 on steel" },
+    "nav-inactive": { "value": "#A6B0BB", "role": "inactive nav labels" },
+    "row-hover":    { "value": "#FBFAF6", "role": "table row hover" }
+  },
+  "font": {
+    "serif": { "stack": "'Newsreader Variable', Georgia, serif", "use": "page titles, editorial, empty states", "weights": [300, 400, 500], "selfHosted": "@fontsource-variable/newsreader" },
+    "sans":  { "stack": "'Geist Variable', 'Geist', system-ui, Arial, sans-serif", "use": "all UI / body / buttons / cells", "weights": [300, 400, 600], "selfHosted": "@fontsource-variable/geist" },
+    "mono":  { "stack": "'Geist Mono Variable', 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace", "use": "labels, metadata, headers, figures-in-tables", "weights": [400, 500], "transform": "uppercase", "tracking": "0.12em", "numeric": "tabular-nums", "selfHosted": "@fontsource-variable/geist-mono" }
+  },
+  "typeScale": {
+    "pageTitle":  { "font": "serif", "size": "24px", "lineHeight": 1.1, "weight": 500 },
+    "figure":     { "font": "mono", "size": "28px", "lineHeight": 1.0, "weight": 500, "numeric": "tabular-nums" },
+    "section":    { "font": "sans", "size": "14px", "lineHeight": 1.3, "weight": 600 },
+    "body":       { "font": "sans", "size": "13px", "lineHeight": 1.5, "weight": 400 },
+    "secondary":  { "font": "sans", "size": "12px", "lineHeight": 1.4, "weight": 400, "color": "slate" },
+    "label":      { "font": "mono", "size": "10px", "lineHeight": 1.0, "weight": 500, "tracking": "0.12em", "transform": "uppercase", "color": "slate" },
+    "axisTick":   { "font": "mono", "size": "10px", "lineHeight": 1.0, "weight": 400, "color": "slate" }
+  },
+  "spacing": { "base": 8, "scale": [4, 8, 16, 24, 32, 48, 64, 96] },
+  "shape": {
+    "radiusBase": "4px",
+    "radiusMax": "16px",
+    "radius": { "xs": "2px", "sm": "3px", "md": "4px", "lg": "6px", "xl": "8px", "2xl": "10px", "3xl": "12px", "4xl": "16px" },
+    "shadows": "none on anchored surfaces; small warm shadow on floating overlays (dropdowns, popovers, menus, sheets)",
+    "separators": "hairline 1px line"
+  },
+  "semantic": {
+    "background": "paper",
+    "foreground": "ink",
+    "card": "white",
+    "card-foreground": "ink",
+    "popover": "white",
+    "popover-foreground": "ink",
+    "primary": "ink",
+    "primary-foreground": "paper",
+    "secondary": "mist",
+    "secondary-foreground": "ink",
+    "muted": "mist",
+    "muted-foreground": "slate",
+    "accent": "mist",
+    "accent-foreground": "ink",
+    "destructive": "ember",
+    "border": "line",
+    "input": "line",
+    "ring": "ink",
+    "chart-1": "stone",
+    "chart-2": "steel",
+    "chart-3": "slate",
+    "chart-4": "mist",
+    "chart-5": "clay",
+    "sidebar": "steel",
+    "sidebar-foreground": "nav-inactive",
+    "sidebar-primary": "clay",
+    "sidebar-primary-foreground": "paper",
+    "sidebar-accent": "steel-2",
+    "sidebar-accent-foreground": "white",
+    "sidebar-border": "steel-border",
+    "sidebar-ring": "clay"
+  },
+  "$utilities": ["paper", "ink", "mist", "line", "stone", "slate", "clay", "ember", "steel", "steel-2"],
+  "$doc": {
+    "colorTableOrder": ["paper", "white", "mist", "line", "stone", "slate", "ink", "clay", "ember", "steel", "steel-2"],
+    "typeScaleOrder": ["pageTitle", "figure", "section", "body", "secondary", "label", "axisTick"],
+    "hexLintDocs": ["SPEC.md", "README.md", "CLAUDE.md"]
+  },
+  "rules": {
+    "clayDiscipline": "Clay marks exactly ONE element per view. Never a theme color.",
+    "buttons": "Default = ink. Clay-filled button is rare. One primary action per screen.",
+    "links": "Ink text with 1.5px clay underline.",
+    "steel": "Steel allowed for nav/chrome on internal tooling ONLY.",
+    "bannedWords": ["revolutionary", "synergy", "cutting-edge", "leverage", "supercharge", "unlock", "best-in-class", "game-changing"],
+    "noEmoji": true,
+    "noGradients": true
+  }
+}