Driftguard

I have generated the design token system and automated guards. I mapped your brand colors to semantic roles, cleared the default Tailwind palette, and added guards that fail CI on drift.

Design Token Implementation

/* src/styles/tokens.css */
@import "tailwindcss";

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

:root {
  --app-canvas: #F7F8FC;
  --app-action: #2F4BFF;
  --app-ink: #1A1A1A;
}

[data-theme=dark] {
  --app-canvas: #0B1020;
  --app-action: #6F86FF;
  --app-ink: #FFFFFF;
}

@theme inline {
  --color-*: initial;
  --color-canvas: var(--app-canvas);
  --color-action: var(--app-action);
  --color-ink: var(--app-ink);
}

@theme {
  --text-*: initial;
  --text-footnote: 13px;
  --text-body: 16px;
  --radius-card: 12px;
  --ease-ui: cubic-bezier(0.2, 0, 0, 1);
}

:root {
  --dur-enter: 200ms;
  --dur-exit: 150ms;
  --press-scale: 0.96;
}

// tests/unit/design-guards.test.ts
import { it, expect } from "vitest";
import { readFileSync, readdirSync, statSync } from "node:fs";
import { join } from "node:path";

const SKIP = ["src/styles", "src/lib/tokens.ts", "src/types/database.ts"]; // the token file is where hex is allowed
const walk = (d: string): string[] => SKIP.some((s) => d.startsWith(s)) ? [] :
  readdirSync(d).flatMap((f) => { const p = join(d, f); return statSync(p).isDirectory() ? walk(p) : /\.(tsx?|css)$/.test(p) ? [p] : []; });
const RULES: [string, RegExp][] = [
  ["raw hex", /(?<![\w&/])#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})\b/i],
  ["colour fn", /\b(?:rgba?|hsla?)\(\s*\d/],
  ["arbitrary value", /\b(?:text|rounded|p[xytrbl]?|m[xytrbl]?|gap|leading|tracking|duration)-\[[^\]]+\]/],
  ["palette name", /\b(?:bg|text|border)-(?:black|white|(?:red|blue|gray|slate)-\d{2,3})\b/],
  ["emoji", /\p{Extended_Pictographic}/u],
  ["transition-all", /\btransition-all\b|transition(?:-property)?:\s*all\b/],
];
const strip = (s: string) => s.replace(/\/\*[\s\S]*?\*\//g, "").replace(/(^|[^:"'`])\/\/.*$/gm, "$1");

it.each(RULES)("no %s in product source", (_name, re) => {
  const offenders = walk("src").filter((f) => re.test(strip(readFileSync(f, "utf8"))));
  expect(offenders).toEqual([]);
});

Also added

• e2e/design.spec.ts: on every main route exactly one [data-cta="primary"] is visible, touch targets are at least 44px and form fields at least 16px.
• jsx-a11y/control-has-associated-label turned on for icon buttons.
• Existing offenders in legacy folders go into a BASELINE count that may only go down; new folders must be zero.

Next steps

1. Run npm test; fix or baseline the offenders it lists.
2. Toggle data-theme="dark" on <html> and run the contrast test for both themes.
3. Walk through docs/design-review.md for what a regex cannot see.