Activity

Scope

Phase 1 of the UX overhaul (plan / audit / spec / brief).

Wires the wire-service-editorial tokens spec into Tailwind v4 as first-class utilities. No components refactored. No visual change on existing pages. Foundation only.

What's in

• resources/css/tokens.css (new) — raw semantic CSS custom properties for surfaces, text, borders, accents, semantic statuses, motion, radii. References Tailwind v4's default-palette variables (--color-zinc-950, --color-emerald-400, etc.) so we inherit the colour scales rather than redefining them.
• resources/css/app.css (modified) — @import './tokens.css', a @theme block exposing every semantic token as a Tailwind utility (text-success-fg, bg-panel-raised, border-hairline, etc.), and a @layer components set of type-scale classes (.text-display, .text-h1, .text-mono, .text-overline, …) matching the spec's type table exactly.
• @source inline() directives keep the new utility classes in the compiled CSS even before any component consumes them.
• CLAUDE.md — new "Visual language" section pointing future contributors (human or agent) at the tokens spec before they write any visual code.

Pragmatic deviations (documented inline)

The sub-agent that built this made three judgement calls to preserve zero-pixel-shift:

1. --color-accent (spec name) → --color-accent-brand to avoid clobbering an existing shadcn --color-accent used by 14+ files via *-accent Tailwind utilities.
2. --radius-{sm,md,lg} (spec names) → --radius-token-{sm,md,lg} to avoid clobbering shadcn's calc() ladder used by 30+ rounded-* usages.
3. Tailwind's --font-serif / --font-mono defaults left untouched — the new .text-display, .text-mono etc. consume their own --font-family-serif/mono vars so existing font-mono usages don't shift.

Later phases that refactor onto the design system can adopt the spec names verbatim once the shadcn dependencies have been peeled off.

Test plan

• npm run build clean (4.9s, no warnings)
• All affected tokens reachable as Tailwind utilities (verified via build output)
• No .tsx files modified — visual appearance of existing pages unchanged
• Pint clean (no PHP changes)
• After deploy: Playwright visual diff /, /reports/predictions, /reports/scoreboard — should be pixel-identical to pre-phase audit screenshots