Fewer, better pieces: two button families, one caption, one metric, one evidence row. Where the system once had duplicates, the canonical component is marked and the alias noted — edit discipline is part of the system.
.btn is the workhorse; .btn-fill (imported from portfolio 11) is for hero and footer CTAs where the hover deserves theater. Violet and blue fills only where the destination is lab or speculative content.
Maximum three per element. If a card needs five tags, the card is about too many things.
The KPI card is label → value → note. A metric without a note (cohort, timeframe, n) doesn't ship.
Claims get the three-column evidence row. Figures get .sem-cap — canonical since the portfolio-11 merge. The older inline .dec-cap remains as an alias for prose-adjacent figures; new work uses sem-cap.
FIG 1Semantic caption — a typed index chip plus one sentence stating what the evidence proves, not what the image shows.
Stroke panels carry structure; the gradient frame (.frame-grad, canonical — replaces .stroke-panel.stroke-frame) carries the single takeaway. Violet frame = speculative content only.
Hairline border. The resting state for grouped content.
Reflection and commentary — the designer's voice beside the work.
The one panel per section that must read as the takeaway.
Marks the "without constraints" version of a shipped design.
Where the 47 minutes actually went.
02Nine sections, one spine, two catalog paths.
03What shipped, what moved, what I'd redo.
A kräftig uppercase label in accent, followed by a hairline rail that runs to the margin. Use it to open a numbered passage inside long case-study pages.
Page-scale compositions — built from the components above — are documented with the in-context mock on the Patterns page.