Design System P2 Deferred — One Variant, One Migration, Ten Items Still Deferred
- Version
- v7.8.3
- Date
- 2026-05-12
- Tier
- light
Tightly-scoped enhancement closing one P2 item (P2-044) from the eleven deferred at the end of fitme-story-design-system-p2-cleanup. Adds a `muted` variant to the Tag component, migrates the 3 inline `/search` category badges to use it, and extends the design-system showcase. The other 10 deferred P2s stay deferred with their per-item reasons documented — judgement calls about hero gradients, heading scales, and stat-component visual regression don't belong inside a mechanical cleanup pass.
- •This enhancement deliberately did NOT attack 10 of the 11 deferred P2s. The user could have asked for a bigger sweep; the scope-locking question that surfaced at the top of the session preserved the parent feature's locked-decision rationale. Each deferred item still has a real blocker (designer input, visual regression, or per-instance judgment) that was not resolved by this enhancement.
- •The
Tag<muted>variant is exclusively for muted-info contexts (rounded-full + lighter neutral surface). The standard variant remains rounded-md + heavier neutral surface. Reviewers proposing new Tag usages should check the variant semantic before reaching formuted.
How to read this case studyT1/T2/T3 · ledger · kill criterion▾
- T1Instrumented
- Numbers come from a machine-generated ledger or commit. Reproducible. Highest reader trust.
- T2Declared
- Numbers stated by a structured declaration (PRD, plan, frontmatter) but not directly measured.
- T3Narrative
- Estimates and observations from session memory. Useful for context; not citable as evidence.
- Ledger
- Where to verify the claim — a file path, GitHub issue, or backlog entry. Anything labelled
ledger:is the audit trail. - Kill criterion
- The pre-registered threshold under which this work would have been killed mid-flight. Not fired = work shipped without hitting the threshold.
- Deferred
- Items intentionally not closed in this version. Each cites the ledger that tracks remaining work.
Visual aid · key numbers at a glance
Default · no specialised visual declaredTL;DR
The parent feature fitme-story-design-system-p2-cleanup closed 4 of 16 P2 items from the 2026-05-10 lens audit and deferred 12 with documented per-item reasons. P2-044 (Tag<muted> variant needed for /search badges) was the only deferred item whose blocker could be resolved in isolation — the others needed designer input, visual-regression review, or per-instance judgment that didn't fit a mechanical cleanup pass.
This enhancement adds the muted variant, migrates 3 inline /search category badges, and extends the design-system showcase. Single PR, single session, ~55 min wall time.
What shipped
| Change | Site | Note |
|---|---|---|
New muted variant | src/components/ui/Tag.tsx | bg-neutral-100 light / bg-neutral-800 dark / !rounded-full |
3 inline span → <Tag variant="muted"> | src/app/search/page.tsx | Category label + version chip + tier chip |
| Showcase grid extension | src/components/design-system/VariantGrid.tsx | muted now renders alongside flagship / standard / tier_t1 on /design-system |
What stays deferred (and why)
Ten P2 items remain unaddressed by this enhancement. Their per-item deferral reasons are documented in the parent case study and re-summarized here for traceability:
| ID | Why it stays deferred |
|---|---|
| P2-002 | Hero gradient is intentional brand chrome; designer judgment needed |
| P2-003 | NumbersPanel text-3xl → --text-display-md would change at wide viewports (visual regression) |
| P2-006 | About contact link styling — per-instance polish, opportunistic |
| P2-012 | Methodology / Meta-analysis heading scale — per-heading review at wide viewports |
| P2-013 | "Developer deep-dives" Wrench icon — per-instance polish |
| P2-019 | Glossary <dt> term-label class — per-instance polish |
| P2-029 (rest) | Stat migration for NumbersPanel + timeline page — visual regression confirmed |
| P2-033 | Audit metadata link styling variation — per-instance polish |
| P2-034 | /pm-flow padding breakpoint stack tokenization — per-instance judgment |
| P2-037 | Section headings text-3xl alignment — visual regression risk |
These can be revisited individually as fix-as-you-touch PRs or bundled into a follow-up enhancement with operator visual-spot-check capacity.
Verification
tsc --noEmit: 0 new errors (8 pre-existing on main, all in test files unrelated to UI primitives).npm test: 0 new failures (1 timeline test fails on main, pre-existing).npm run case-study-audit: exit 0 (all 30 case studies COMPLIANT_FULL or intentionally exempt).- Visual check: deferred to operator (Vercel preview), but the migration is pixel-identical by construction.
Honest framing
This was a small, scope-locked piece of work. The user could have asked me to bulldoze all 11 deferred P2s in one pass; the conversation that opened the session explicitly preserved the parent feature's locked decision. The discipline of asking "which scope do you actually want?" before scaffolding paid for itself — without it, P2-002 (Hero gradient) and P2-029 (Stat regressions) would have shipped as silent visual drift.
Future Tag work should consult the variant table on /design-system before reaching for muted. The distinction between muted (rounded-full, supplementary) and standard (rounded-md, emphasis) is intentional, not a bug.