Components reference is canonical — wireframes must use the documented class strings

Decision

A canonical components reference page now exists at:

• .context/designs/web/patterns/components.html
• .context/designs/mobile/patterns/components.html

Every wireframe — existing or new — must use the exact class strings documented there. Improvising button padding, status-pill text-size, or card border-radius is now a defect, not a style choice.

Why

Audit on 2026-06-27 found 73-95% baseline consistency across 240 wireframes — meaning the patterns existed but ~5-27% of files drifted. Drift compounds: every author who improvises makes the next author's "match the existing pattern" instinct ambiguous. A single reference page closes the loop.

Canonical components covered

• Buttons (primary / secondary / destructive · 3 sizes each · all rounded-md · font-semibold)
• Status pills (rounded-full px-2 py-0.5 text-[10px])
• Section cards (rounded-2xl border bg-{color}/40 p-5 web / p-4 mobile)
• Eyebrow labels (text-[10px] uppercase tracking-widest)
• Info banners (rounded-md border px-3 py-2 text-[11px])
• Form inputs (rounded border border-zinc-700 bg-zinc-950)
• Tab pills (rounded-full px-3 py-1 text-[12px])
• Stat blocks (eyebrow + mono text-2xl font-semibold)
• Typography scale (web vs mobile)
• Color semantics (emerald = primary/confirmed · amber = pending · rose = danger · blue = family · purple = AI Self · zinc = neutral)

Impact

• 5 outlier files identified by the audit have been normalized:
  • app/review/confirm-ais.html — buttons updated from rounded-xl px-6 text-[13px] to canonical rounded-md px-5 py-2.5 text-sm
  • app/tax/tax-review.html — AY-picker sub-labels updated from text-[8px] to text-[9px]
  • app/settings/settings.html — profile card padding from p-6 to canonical p-5
  • app/portfolio/portfolio-review.html — 4 section cards from p-4 to canonical p-5
  • Expense category badges already inline-consistent
• .context/designs/{website,mobile}/index.html link to the components reference from the System & utility states section
• Future audits should diff every wireframe's class strings against components.html — any deviation is a fix-it, not a question.

Status

Active.

Sources

• 2026-06-27 component-inconsistency audit (Explore agent · 272 file scan).
• User feedback 2026-06-27 — "components inconsistent across variants and across website and mobile".