01
02
Grape-violet masthead dare over a gold-tan work index flushed hard right, project names at poster scale as the proof, Criss Jami's line the standfirst above them.
Why
The hero is Criss Jami's dare against waiting, and a portfolio is the one place that line can be answered rather than just repeated. So the composition leads with the work itself: a list object, seven projects dated 2008 through 2026, rendered as the biggest thing on the page, with the quote stepped down to a masthead standfirst above it. The dare states the thesis; the index is the evidence that Doug never waited to feel ready. That is the whole because-of chain, phrase to object to grid.
The chassis is Zilla Slab (zilla-worksans), chosen over the three recently-used faces because its sturdy, structural, index-tagged slab sets both a long caps standfirst and a column of poster-scale project names without tipping into either shouting or didone delicacy. It spends the middle of the scale the owner asked for: 4xl quote, 5xl titles, lg standfirst, base body at 62ch, xs labels. The palette deviates from the terracotta target on purpose, because terracotta shipped the last two nights and the repetition gate demands distance; grape violet at 288° sits in the open 252–340° window and reads as conviction, warm-blooded but unmistakably not the clay of yesterday. Paired with a gold-tan ground it makes a true duotone, two committed hues and no neutral void, which is the field-dominant commitment the gold-standard builds reward.
Layout puts the dare in a full-bleed violet masthead, flushed right against a hard edge, the single deliberate risk point: a flush-right specimen index is the most un-templated way to set a ledger, and the ragged left edge is the structure. The mark lives single-color top-left of that violet field, in the first fold at both widths, with nav deferred to a numbered foot ledger that carries the day's signals. On the phone the split and the right edge are gone, so the masthead carries the quote alone in the first 640px and the index scrolls beneath it as proof.
Visual specification
1. Color Specification
#faf3e2, 100 #f2e6c4, 200 #e9d6a8, 300 #e0c88e, 400 #c9b483, 500 #a8925f, 600 #8a6f3e, 700 #5f4d30, 800 #4a3c25, 900 #2b2213#a96bd6, default #6e2db0, dark #3e176a, glow #c597e5#d99a1e — day's figures (Pistons score, temperature) rendered on the violet field ONLY, where it reads ~6:1; never on the gold-tan ground, where it disappears.#e9d6a8; card/surface #f2e6c4; band/bgAlt #e0c88e; the masthead/footer field #3e176a#2a1142; secondary (decks, attribution captions) #561f8e; muted (metadata) #5f4d30; on the violet field, ink #faf3e2, muted ink #c597e52. Typography
hero_object is list, the quote is the one h1 but steps down to the 4xl fluid step, set right-aligned in the violet masthead in caps, reversed out in fieldInk cream, with "never make it" lifted in signal gold. "Criss Jami" sits beneath it at sm in fieldInkMuted. The project titles below are the marquee object.hero step reserved for nothing; project titles ride hero_scale (see MEASURABLES) at the 5xl register. Quote at 4xl. Section/metadata labels at xs tracked caps (space above a label ≥ 2× space below). Body/notes at base, held to 62ch. Years and roles at sm tabular. This spends the mid-scale: quote 4xl, titles 5xl, a lg standfirst on inner routes, base body, xs labels.3. Layout Specification
display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2vw, 32px). Masthead spans cols 1–12. Index rows span cols 4–12 (right-weighted), each row an inner grid-template-columns: 1fr auto auto collapsing to flush-right title / year / role.min-height: 58vhmax-width: none; side padding clamp(24px, 6vw, 112px)clamp(96px, 11vw, 148px) per project, borderStrong baseline rule each4xl; mark top-left at columns 1–2./, place <SiteCallout /> below the work index and above the footer ledger, between the index section and the foot. No copy or styling authored here.4. Component Character
2px (sm), buttons 2px, tags 0 (none). Specimen-sharp.border on row rules; borderStrong on the masthead/footer break and index baselines.accent violet with accentText cream (the row becomes a specimen chip); links underline-thicken in accent.5. Signal Integration
129–125, set as tabular figures — gold is only legible on violet, so the Pistons line renders in accent violet on the paper foot, or lifts to gold if placed on the masthead strip; figures bold, "WIN" as an xs tracked label.763.25, -1.11%, down — textFaint metadata line with a small down caret, not alarmist.52°F — foot ledger line.Self-check
Rationale
The hero is Criss Jami's dare against waiting, and a portfolio is the one place that line can be answered rather than just repeated. So the composition leads with the work itself: a list object, seven projects dated 2008 through 2026, rendered as the biggest thing on the page, with the quote stepped down to a masthead standfirst above it. The dare states the thesis; the index is the evidence that Doug never waited to feel ready. That is the whole because-of chain, phrase to object to grid.
The chassis is Zilla Slab (zilla-worksans), chosen over the three recently-used faces because its sturdy, structural, index-tagged slab sets both a long caps standfirst and a column of poster-scale project names without tipping into either shouting or didone delicacy. It spends the middle of the scale the owner asked for: 4xl quote, 5xl titles, lg standfirst, base body at 62ch, xs labels. The palette deviates from the terracotta target on purpose, because terracotta shipped the last two nights and the repetition gate demands distance; grape violet at 288° sits in the open 252–340° window and reads as conviction, warm-blooded but unmistakably not the clay of yesterday. Paired with a gold-tan ground it makes a true duotone, two committed hues and no neutral void, which is the field-dominant commitment the gold-standard builds reward.
Layout puts the dare in a full-bleed violet masthead, flushed right against a hard edge, the single deliberate risk point: a flush-right specimen index is the most un-templated way to set a ledger, and the ragged left edge is the structure. The mark lives single-color top-left of that violet field, in the first fold at both widths, with nav deferred to a numbered foot ledger that carries the day's signals. On the phone the split and the right edge are gone, so the masthead carries the quote alone in the first 640px and the index scrolls beneath it as proof.
Composition rationale
The phrase is a dare, so the page answers it with evidence: the work index leads as the biggest object (list), proving Doug acted without waiting. I moved axis onto discouraged vertical because a 2008→2026 work ledger is inherently top-to-bottom and radial/diagonal fight a reading order; I moved symmetry and alignment onto discouraged right-weighted/right as the one deliberate risk point, a flush-right specimen index whose hard right edge and ragged left edge is the most un-templated way to set a ledger. collapse: hero-only replaces the starting rail-to-band because the composition has no rail to band; the masthead is the honest first fold at 360.
Signal integration
129–125, set as tabular figures — gold is only legible on violet, so the Pistons line renders in accent violet on the paper foot, or lifts to gold if placed on the masthead strip; figures bold, "WIN" as an xs tracked label.763.25, -1.11%, down — textFaint metadata line with a small down caret, not alarmist.52°F — foot ledger line.03
grape violet
hsl(288 60% 42%)
A deep grape violet masthead speaks the dare and a gold-tan index answers it with the work; two committed hues, no neutral void, so the page reads as proof rather than decoration.
04
Color — 3 ramps, 30 stops
violet
amber
sand
05
06