01
SELECTED WORK · 03
MOB analysis→
v5 — lucide stroke 2.25. Matches Geist 500 but reads heavy next to lighter body text.
v6 locks the card spec. Three changes from v5 drive it, all in response to your direction: (1) Geist 500 at 120px was overwhelming the content — tuned down to Geist 400 with lucide stroke at 2; (2) featured treatment is unified — border + "FEATURED" kicker pill + gradient effect on the visual element, one treatment, no tiers; (3) gradient-mark strip type is dropped entirely — the gradient lives only on featured-card treatments now, not as a visual type an author can pick.
The "one exception" rule: on a featured card, and only on a featured card, the gradient effect applies to whatever visual type the author chose — screenshot gets a gradient auto-tint, diagram gets a gradient overlay, numeral and monogram get gradient text fills, icon gets a gradient SVG stroke. The gradient becomes the mark of "featured" across every visual type, instead of gradient-mark being its own type that replaces content.
v5 moved numerals and monograms to Geist 500 to match lucide's geometric weight. At 120px that read as too heavy — the numeral started competing with the card title for attention instead of sitting under it. v6 drops everything one weight step: Geist 400 for numeral and monogram, lucide stroke-width 2 for icon. Same family, one weight lighter, same visual pairing.
v5 — lucide stroke 2.25. Matches Geist 500 but reads heavy next to lighter body text.
v5 — Geist 500 / 72px. Smaller size masks the weight, but still on the heavy side.
v6 — Geist 400 / 120px. Numeral now supports the title, doesn't compete with it.
v6 — lucide stroke 2. Sits in the same weight register as Geist 400.
h3), which now reads as the dominant element in the content column — exactly what the card hierarchy wants.
Every featured card gets three things, always together: (1) a gradient border around the perimeter, (2) a gradient "FEATURED" kicker pill as the single kicker content, (3) a gradient effect applied to whatever visual type the strip is using. This is the one exception to the "text marks and icons use card register colour, never gradient" rule — on a featured card, the visual element becomes the gradient.
There are no tiers. A card is featured or it isn't. One per grid, as before. The visual type the author picks is still their call — the featured treatment adapts to all five.
mix-blend-mode: color overlay (opacity 0.9) already existed as the auto-tint mechanism; on a featured card, the overlay background changes from flat royal-8 to var(--grad-rv). The screenshot's pixels now carry the gradient across the strip — royal top-left, violet bottom-right.Featured + screenshot. Auto-tint overlay swaps from flat royal to the royal→violet gradient — same mechanism, different fill.
Writing-register featured. The gradient is the same on both registers — the kicker label colour no longer differentiates, because on featured cards the kicker IS the pill.
mix-blend-mode: color technique applied as a ::after overlay on the strip. Diagram strokes now render in gradient colour — royal in the top-left, violet in the bottom-right. Luminance of the strokes is preserved so the diagram still reads.Featured + diagram. Same overlay mechanism as screenshot — mix-blend-mode: color preserves diagram linework while re-hueing to the gradient.
Writing-register diagram featured. Same overlay, same effect — the gradient becomes the unifying "featured" signal across both registers.
background-clip: text. The numeral reads as a gradient mark directly — the featured signal lives on the mark itself, not on an overlay.Featured + numeral. The "01" is now a gradient mark. This IS the v2 gradient-text treatment — allowed again, but only here.
Writing-register numeral featured. Same gradient fill — the exception applies uniformly regardless of register.
linearGradient referenced via stroke="url(#grad-rv-svg)". One shared gradient definition sits in a hidden SVG at the top of the document; every featured icon references it. Result: icon strokes trace the gradient from corner to corner.Featured + icon. SVG stroke references a shared gradient — top-left of the icon is royal, bottom-right is violet.
Writing-register icon featured. Same SVG stroke reference — uniform gradient treatment across registers.
background-clip: text technique as the numeral. Two- or three-letter lockups pick up the gradient fill directly — the mark IS the gradient.Featured + monogram. PLN lockup in gradient — reads as a confident project mark, not a caption.
Writing-register monogram featured. Same gradient fill — uniform treatment across registers.
GTD personal planner with persistent SMS reminders, UTC-safe scheduling, and spend-protected AI coaching.
Coles recipes become a single consolidated shopping trolley. POC in three weekends.
Killswitch, budget cap, idempotency, rollback. Why each layer is non-negotiable.
Writing as the thing that forces you to understand what you were claiming.
| Visual type | Gradient effect | Technique |
|---|---|---|
| Screenshot | Auto-tint overlay | ::after with background: var(--grad-rv), mix-blend-mode: color, opacity 0.9. Same mechanism as the non-featured auto-tint, different fill. |
| Diagram | Overlay blend | Same ::after + mix-blend-mode: color technique. Diagram strokes retain luminance, pick up gradient hue. |
| Numeral | Text gradient fill | background: var(--grad-rv) with background-clip: text. The "01" / "04" mark IS the gradient. |
| Icon | SVG stroke reference | stroke: url(#grad-rv-svg). Single shared <linearGradient> definition at document root; every featured icon references it. |
| Monogram | Text gradient fill | Same as numeral. Two- or three-letter lockups take the gradient via background-clip: text. |
Your call. Same featured card, same treatment, different border weight. 1.5px is what v5 shipped; 2px is the "slightly louder" alternative.
2px border. Gradient becomes a perceptible frame — the card declares itself at a glance.
Everything below ships into the Card component's prop surface. Nothing left open except the 1.5px / 2px border pick in §3.
Numeral: Geist 400, 120px, tight tracking, tabular lining nums. Monogram: Geist 400, 72px. Icon: lucide stroke-width 2 at 88px. Shared shell unchanged from v4 (same background, padding, grid texture, register tint). Fraunces stays on headings and prose — never used for UI marks.
Every featured card gets all three: gradient border (1.5px or 2px — TBD in §3), "FEATURED" gradient kicker pill (single word, replaces the normal kicker content entirely), and a gradient effect on the visual element adapted to the visual type the author picked. No tiered options, no opt-out on any of the three. Card prop:
featured?: boolean — that's the whole API.At most one featured card per grid. Enforced by review, not by types.
The gradient (var(--grad-rv)) appears in exactly the following places:
mix-blend-mode: color overlay with gradient fill.background-clip: text gradient fill.background-clip: text gradient fill.stroke="url(#grad-rv-svg)" via shared SVG gradient definition.
The v5 "gradient-mark strip" visual type is dropped entirely. There is no sixth visual type. The default author pool is five types: screenshot, diagram, numeral, icon, monogram. The gradient is never a visual type an author picks — it's an effect that applies when the author (or the system) sets featured to true.
The Card component's imagery surface stays small. M5 (meta split) and M6 (detail zoom) live in the <Screenshot> helper as a variant prop. Default is variant="detail" (M6); M5 is explicit opt-in via variant="meta-split". The hierarchy rule ("max one M5 per grid") lives in the style guide and is enforced by review.
The final visual-type pool: screenshot, diagram, numeral, icon, monogram. Card prop: kind: "screenshot" | "diagram" | "numeral" | "icon" | "monogram". Rendering rules per type unchanged from v4 — shared shell for centred marks (numeral / icon / monogram), dedicated treatment for screenshot and diagram.
Once you pick the border thickness in §3, 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 → v6) stays preserved in plans/portfolio-stitch-assets/ as the spine of a future design-system case study — "here's what we rejected at each step and why" is more interesting than the final spec alone.
The next work on the critical path is chunk 4a.4 — synthesising the 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.