design-review

# Design Review — Facet UI `verify.sh` proves a component *builds, types, tests, and passes axe*. It cannot prove the component **matches the design system** — "is this on-system?" is a judgment call, not a grep (see [`docs/11`](../../../../../docs/11-designing-uis.md)). This skill is that judgment pass, as a checklist, so a component doesn't ship looking almost-right. It loads only when you're reviewing UI — everyday work doesn't pay for it. ## When this fires You type `/design-review`, or you've added/restyled a component and are about to open or merge the PR. ## Before you start Open [`DESIGN.md`](../../../DESIGN.md) and keep it beside the diff. Every check below is "does the component agree with `DESIGN.md`?" — if you're guessing, you haven't read it recently enough. ## Checklist Walk these in order. Stop at the first miss, fix it, restart — an off-system component is not "done." 1. **Tokens, not literals.** No raw hex, `px` font sizes, or magic radii in the component — every value resolves to a token in `src/tokens/` that mirrors `DESIGN.md` (`color.primary`, `radius.md`, `type.body`, `space.lg`). A literal `#5e6ad2` or `13px` is a miss even if it looks identical, because the next token change won't reach it. 2. **All states present and on-system.** Default, hover, active, `:focus-visible`, and disabled — each matching `DESIGN.md` (e.g. a primary button: hover → `primary-hover` `#828fff`, focus → a 2px `primary-focus` ring). A missing state is the ...