designing-consistentlylisted

# Designing consistently UI drift has two sources: styles invented in-session instead of consumed from the system, and decisions that live only in conversation memory. DESIGN.md is a **living file** — honoring it is half the loop; writing back is the other half, and it is the half that gets skipped. ## Workflow Copy this checklist and tick items off: ``` Consistency progress: - [ ] 1. Locate the app's DESIGN.md - [ ] 2. Read tokens + Decisions for the target surfaces - [ ] 3. Build consuming the system - [ ] 4. Record decisions (gate) - [ ] 5. Verify ``` **1. Locate.** Single-app repo: root DESIGN.md. Monorepo: the app's own DESIGN.md next to its code. Missing? Offer to instantiate it first (Context-Engineering `templates/repo/DESIGN.md.template`) — designing without it just recreates the drift. **2. Read.** From the frontmatter: the tokens and components the work will need. From `## Decisions`: every entry under the surfaces (routes/screens) about to be touched — these are standing decisions, not suggestions. **3. Build.** Styles come from the generated `design.tokens.css`, never raw values. Reuse an existing component pattern when one fits; a genuinely new pattern is born tokenized: values added to DESIGN.md frontmatter, then `node scripts/design-md-gen.mjs` regenerates. The line: one-off micro-layout offsets (a 22px nudge, a hairline width) may stay inline, but new **colors, type sizes, radii, and shadows** always go through the frontmatter — a `text-[13px]` is a ty