design-build

# Build from the design system - A **primitive** is a shared UI part such as a button or chip. - A **ramp** is the finite set of allowed type, radius, shadow, and motion values. - A **hard cut** is a surface appearing or disappearing in one frame. The 2026-08-03 inventory found that only 1 of 419 raw buttons used the available primitive, 11 of 20 conditional surfaces hard-cut, and 143 chips used fifty size combinations. Missing parts and an unwritten order—not model taste—were the gap. ## 0-Z. Search before adding a value `--control-h-{sm,md,lg}` (28/32/40) already existed when 24/30/34 were invented. Conflicts then produced an exception axis and one screen ended with 8–9 control heights. Before proposing a new primitive or ramp value (dimension, colour, or spacing), follow this sequence. Reusing an existing value does not require repeating the history review; verify its current role and use it: 1. search `app/globals.css` for the role; 2. read “System growth rules” in `docs/DESIGN-SYSTEM.md`; 3. inspect `git log --oneline -- app/globals.css | head -20` for history; 4. only then propose a value, with the measured number of blocked consumers. The existing height family begins at `--control-h-`. A value invented without searching does not extend the system; it creates another one. ## 0-A. Route specification changes Declare `design-contract` to `pnpm design:route` when changing: - `src/shared/ui/control-class.ts` axes, options, or defaults; - `src/shared/ui/controls.t...