01
SELECTED WORK · 03
MOB analysis→
v6 icon: 88px. Slightly smaller than numeral footprint.
Two last things from v6. (1) Sizing — the centred marks were matching each other in weight but not in footprint. Numeral 120px, icon 88px, monogram 72px meant the three marks occupied visibly different amounts of the strip, and the breathing room around each was inconsistent. v7 pins all three to a 120px reference size, so the bounding boxes are structurally identical and the breathing around the visible content reads the same for every type.
(2) Geist vs Fraunces — the weight decision in v6 settled the sizing problem but not the family question. v5's original move was to drop Fraunces because lucide couldn't visually match a transitional serif with a geometric sans icon library. v7 puts both families side by side at the new matched sizes, with lucide's stroke weight tuned to approximate each, so the trade-off is visible rather than argued.
In v6 the numeral was 120px, the icon was 88px, and the monogram was 72px. The weights matched (Geist 400 + lucide 2) but the footprints didn't — visible cap-heights came out to roughly 84px for the numeral, 80px for the icon, and 52px for the monogram. The monogram especially looked cramped in the same frame.
v7 pins all three to a 120px reference: numeral 120px font-size, icon 120px × 120px, monogram 120px font-size. Because font cap-height is ~0.7 × em and lucide content fills ~0.67 × its viewBox, the visible content heights come out at ~84px, ~80px, and ~84px respectively — now within 5px of each other instead of a 30px spread. Visible breathing room (from top of strip content area to top of rendered mark) is now ~38–40px for all three.
v7 monogram: 120px Geist 400. Grown from 72px; tighter tracking (-0.05em) keeps PLN compact.
v5's argument for Geist was that lucide (geometric sans) couldn't visually match Fraunces (transitional serif) without swapping the icon library. That still applies. But at the matched sizes, and with lucide's stroke-width tuned per family, it's worth seeing the side-by-side before the family locks for good.
Geist 400 numeral. Clean lining figures, tight tracking, tabular-nums locked.
Fraunces 300 numeral. Serif terminals, bracketed feet, editorial character.
Lucide stroke 1.25 — thinner to approximate Fraunces's modulated strokes. Still geometric linework, still recognisably lucide.
Fraunces 300 monogram. Bracketed serifs on the P and N; the serif-family DNA is unmistakable.
Featured treatment is unchanged from v6 — gradient border (2px), "FEATURED" gradient kicker pill, gradient effect on the visual element. Below: one featured card per mark type at the new v7 sizes, Geist side. Confirming that the larger sizes don't break the featured treatment.
Featured + 120px numeral. Gradient fills the larger mark without losing definition.
Featured + 120px icon. Gradient stroke traces the full icon corner-to-corner.
Featured + Fraunces 300 numeral. Gradient on serif letterforms — editorial meets signature.
Everything below is final once you pick the family. No other open items — border is 2px from v6, featured treatment is unchanged from v6, Q2 is unchanged from v5.
Numeral, icon, and monogram all use a 120px reference size. Numeral and monogram: font-size: 120px. Icon: width: 120px; height: 120px (up from 88px). Monogram tracking tightens to -0.05em to keep three-letter lockups compact at the new size. Shared shell from v4 still centres all three in the same frame; visible breathing around rendered content is now uniform within ~5px.
Last open item on the card spec. Both are viable at the v7 matched sizes, and the trade-off is visible in §2. My recommendation is Geist unless icons are deliberately rare — but this is the one call I don't want to make for you. Both options include:
Every featured card gets three things together: 2px gradient border, "FEATURED" gradient kicker pill, and a gradient effect on the visual element adapted to type (overlay for screenshot/diagram, background-clip for numeral/monogram, SVG stroke reference for icon). Card prop: featured?: boolean. At most one per grid, enforced by review. The v5 gradient-mark strip type stays dropped — the gradient is an effect applied to the chosen visual type, never a visual type on its own.
Final visual-type pool: screenshot, diagram, numeral, icon, monogram. Card prop: kind: "screenshot" | "diagram" | "numeral" | "icon" | "monogram".
M5 (meta split) and M6 (detail zoom) live in the <Screenshot> helper as a variant prop. Default variant="detail" (M6); M5 is explicit opt-in. Hierarchy rule ("max one M5 per grid") lives in the style guide, enforced by review.
Tell me Geist or Fraunces and the card component spec is frozen. Nothing else on the card side until chunk 4c.1 (page layout mockups), when the component gets built straight from this doc. The iteration trail (v1 → v7) stays preserved as the spine of a future design-system case study.
Next work on the critical path: chunk 4a.4 — synthesising voice research, diary audit, and imagery standards into .claude/rules/writing-style.md at the workspace root. Foundation work (4a.4 → 4a.5 → 4a.6) still gates chunk 4b.