Frontend design system: feature screens bypass the OKLCH tokens + ui/* kit (inconsistent visual language) #49

New Issue

2026-06-06T18:51:31Z

logaritmisk commented

2026-06-06 18:51:31 +00:00

Severity: High. From a frontend UX audit. A coherent design foundation exists; almost no feature screen uses it — "a coherent kit wrapped around an incoherent app."

Problems

Tokens defined, never used outside ui/. web/src/index.css:31-72 defines a full semantic OKLCH token set (--foreground, --muted-foreground, --primary, --destructive, --border, --radius, light + .dark). A grep for token utilities (text-foreground, text-muted-foreground, bg-primary, text-destructive…) outside components/ui/ returns zero hits, while ~70 hardcoded palette utilities appear across the feature screens.
Inconsistent neutrals & danger: muted text is text-neutral-400/-500/-600 (three shades, one role); danger is text-red-600 everywhere — not the --destructive token (a different red).
Two competing accents: "active/selected" and links use indigo (bg-indigo-50, text-indigo-600, bg-indigo-600, combobox data-[highlighted]:bg-indigo-50), but --primary and the primary Button are near-black, and the publish stepper / active filter chips use bg-neutral-800. No single recognizable accent.
Status colors aren't tokens: visibility-badge.tsx:9-11 hardcodes amber/green-100/800 (no dark variant); highlight.tsx:34 hardcodes bg-yellow-200.
Radius token ignored: bare rounded (0.25rem) used ~20× vs the kit's token-derived rounded-md/lg (--radius: 0.625rem). ui/card.tsx exists but has zero usages — panels are hand-rolled with ad-hoc borders/radii.
Uppercase caption-label appears ~6× with 4 different recipes (color/weight/tracking/size all vary).

Suggested fixes

Migrate feature screens to token utilities (text-muted-foreground, text-destructive, bg-accent/bg-muted, text-primary); pick one accent and route nav/active/combobox-highlight/links/filter-chips through it.
Add --success/--warning/--highlight tokens (+ dark) and give Badge success/warning variants so VisibilityBadge selects a variant instead of patching classes.
Standardize on rounded-md/rounded-lg; use Card for panel containers; extract one .label-caption utility.
Add a CI guard / lint rule banning raw color utilities outside components/ui/.

Source: frontend UX/design audit, 2026-06-06.

**Severity: High.** _From a frontend UX audit. A coherent design foundation exists; almost no feature screen uses it — "a coherent kit wrapped around an incoherent app."_ ## Problems - **Tokens defined, never used outside `ui/`.** `web/src/index.css:31-72` defines a full semantic OKLCH token set (`--foreground`, `--muted-foreground`, `--primary`, `--destructive`, `--border`, `--radius`, light + `.dark`). A grep for token utilities (`text-foreground`, `text-muted-foreground`, `bg-primary`, `text-destructive`…) **outside `components/ui/` returns zero hits**, while ~70 hardcoded palette utilities appear across the feature screens. - **Inconsistent neutrals & danger:** muted text is `text-neutral-400`/`-500`/`-600` (three shades, one role); danger is `text-red-600` everywhere — not the `--destructive` token (a *different* red). - **Two competing accents:** "active/selected" and links use **indigo** (`bg-indigo-50`, `text-indigo-600`, `bg-indigo-600`, combobox `data-[highlighted]:bg-indigo-50`), but `--primary` and the primary `Button` are **near-black**, and the publish stepper / active filter chips use `bg-neutral-800`. No single recognizable accent. - **Status colors aren't tokens:** `visibility-badge.tsx:9-11` hardcodes `amber/green-100/800` (no dark variant); `highlight.tsx:34` hardcodes `bg-yellow-200`. - **Radius token ignored:** bare `rounded` (0.25rem) used ~20× vs the kit's token-derived `rounded-md/lg` (`--radius: 0.625rem`). `ui/card.tsx` exists but has **zero usages** — panels are hand-rolled with ad-hoc borders/radii. - **Uppercase caption-label** appears ~6× with 4 different recipes (color/weight/tracking/size all vary). ## Suggested fixes - Migrate feature screens to token utilities (`text-muted-foreground`, `text-destructive`, `bg-accent`/`bg-muted`, `text-primary`); pick **one** accent and route nav/active/combobox-highlight/links/filter-chips through it. - Add `--success`/`--warning`/`--highlight` tokens (+ dark) and give `Badge` `success`/`warning` variants so `VisibilityBadge` selects a variant instead of patching classes. - Standardize on `rounded-md`/`rounded-lg`; use `Card` for panel containers; extract one `.label-caption` utility. - Add a CI guard / lint rule banning raw color utilities outside `components/ui/`. _Source: frontend UX/design audit, 2026-06-06._