design-systemlisted

# Design System Turn a brief into a validated design system, recorded in `DESIGN.md` at the project root — the identity file every later design session reads first. This skill also scopes the page set into a `PAGES.md` skeleton, which the `greyboxing` skill owns from then on. Stack-agnostic: express the tokens through the project's own theming mechanism (CSS variables, Tailwind theme, component library — whatever the stack offers). ## Prerequisites | Skill | For | | --------------- | ------------------------------------------------------ | | `grilling` | the mandatory grill gate before validation | | `artefact` | rendering the token showcase | | `extract-theme` | replicating a reference site's tokens (that branch only) | When one is missing, tell the user before the step that needs it. ## 1 — Design read Read the brief's signals before touching a token: project kind, vibe words, linked references, audience, existing brand assets, and quiet constraints (accessibility-first, regulated, trust-first — these override aesthetic preference). Declare the read in one line: **"Reading this as: \<project kind> for \<audience>, with a \<vibe> language, leaning toward \<aesthetic family or design system>."** If the read genuinely diverges, ask **one** clarifying question — never a questionnaire. A reference image or site the user pins is a **pinned aesthetic**: record it i