design-systemlisted

# Design System Reply in the project conversation language (CLAUDE.md → Language); code, identifiers, paths and commit messages stay in English. Template `.claude/docs/templates/design-system.md`. References: `web-platform.md` (WCAG, CSS Baseline), `angular.md`/`vue.md` (UI-kit themes). ## Phase 1: Base and principles Base from `technical-preferences.md` or the argument; questions: tone (strict/playful), density, brand colours (if any), dark theme needed?, target devices. ## Phase 2: Tokens Draft colour roles for light/dark with computed contrast (4.5:1 / 3:1), spacing/typography scales (fluid `clamp()`), radii/shadows/motion. Mapping onto `--mat-*`/`--tui-*`/`@theme`. Show a `tokens.css` draft (`@layer base { :root { --ds-… } }`, `light-dark()`). ## Phase 3: Components and patterns Inventory from the needs of the product spec/feature specs; per component — states and aria pattern (WAI-ARIA APG); patterns for forms/tables/empty states/dialogs. ## Phase 4: Write "May I write `docs/specs/design-system.md` and `[frontend_root]/src/styles/tokens.css`?" — one `AskUserQuestion`: write (Recommended) · show the draft/diff first · not now — the CSS is written by `css-engineer` via Task after consent. After the "write" answer: `touch .claude/.write-consent` (rule 7 — the consent-guard hook checks the marker). Verdict: `COMPLETE`. Next step — one `AskUserQuestion`: `/ux-spec` for the first flow (Recommended) · `/feature-spec` · revise the tokens.