palette · dna1In the files
Flavour colour on plain cloth
Anchored to
Bold Typography look quality · newGatorade G2 brand · newNeutral Palettes surface · new
Translates: Bold Typography · Vibrant Colors · Neutral Palettes
Through the convention: sports-drink packaging: oversized heavy grotesque capitals stacked edge to edge, one vibrant flavour colour on a plain neutral field
InterpretationPackaging draws Bold Typography as heavy ink on a plain field with one vibrant flavour colour. Here the field is a cool, clean cloth grey, the ink a near-black, and the single flavour colour an electric chartreuse used only behind the loudest words and numbers. A dark olive-black is the documentary frame and a tungsten amber the one lamp inside it. No brand's own colours: the chartreuse is a genre's vibrancy, not a bottle's.
#e2e3de#121312#d6ff2e#23241f#c8793f#8c8f87
Made with css-palette for “The label on the bottle”: Six custom properties on :root carry the cloth, ink, flavour, frame, lamp and steel values used everywhere through var().
Away from the sketch: 5 colours
typography · dna2In the files
Stacked label capitals over a plain humanist text
Anchored to
Bold Typography look quality · newGatorade G2 brand · new
Translates: Bold Typography · Athletic Branding
Through the convention: sports-drink packaging: oversized heavy grotesque capitals stacked edge to edge, one vibrant flavour colour on a plain neutral field
InterpretationBold Typography set the way sports-drink labels set it: a heavy, wide grotesque in capitals, stacked with tight leading so words run edge to edge, against a quiet humanist sans for the reading text and the subtitles. Not the condensed scoreboard faces I would have chosen.
Made to measure. Not off the rack.
Archivo Black
Made to measure. Not off the rack.
Cabin
line-height: .86letter-spacing: -.02em
Made with library-font for “The label on the bottle”: Archivo Black and Cabin fetched into fonts/ and loaded with @font-face; heading rules set the tight label leading and tracking.
Away from the sketch: 2 type families
imagery · dna5In the files
The kitchen table with the sealed guess
Anchored to
Men of a Certain Age TV · newIntimate look quality · new
Translates: Breakfast table intimacy · Intimate
Through the convention: kitchen-sink television: a domestic table under one tungsten lamp, muted colour, nothing styled
InterpretationBreakfast-table intimacy drawn as a flat inline SVG inside the cold open: a table edge, a mug, a lamp's warm pool, a notebook and a sealed envelope that stands for the frozen guess. Muted, one tungsten light, nothing staged.
svg#kitchen-table
Made with inline-svg for “Close and unvarnished”: A flat drawing of the table scene lives inside the cold open, so it can push in and needs no picture generator.
imagery · dna6In the files
Tape measure and pattern pieces
Anchored to
Tailored Fit surface · newClean surface · new
Translates: Tailored Fit · Clean
Through the convention: tailoring: chalk marks, a tape measure and paper pattern pieces laid on plain cloth
InterpretationTailored Fit becomes the page's emblem: an inline SVG tape measure unrolling across paper pattern pieces with chalk marks, drawn in clean single-weight lines on the cloth grey. Made to measure is what the product does.
svg#tape-measure@keyframes tape-unroll
Made with inline-svg for “Made to measure”: A line drawing whose tape path unrolls with stroke-dashoffset when it enters the view: the signature moment.
motion · dna7In the files
Slow subtitle rise and a long push-in
Anchored to
Hauntingly Intimate pacing · newJeremih music · new
Translates: Hauntingly Intimate · Melodic
InterpretationHauntingly Intimate pacing: subtitles fade up slowly one line after another with a soft ease and no overshoot, and the cold-open drawing pushes in over fourteen seconds, once. Melodic, not punchy; no tickers.
@keyframes subtitle-rise@keyframes push-inanimation: push-in 14s cubic-bezier(.25,.1,.25,1) both
Made with css-motion for “Close and unvarnished”: Keyframes for the subtitle rise with staggered delays and a single long push-in on the drawing, both removed under reduced motion.
voice · dna10In the files
Training-day lines, short and determined
Anchored to
Determined mood quality · newDetermination tone · newReliability tone · new
Translates: Determined · Determination · Reliability
InterpretationDetermined and reliable: short declarative lines that sound like a coach before a session, with the facts left exactly as they are.
Made to measure. Not off the rack.
Guess first. Then measure. Then design from the difference.
The guess is sealed before the tape comes out.
Made with copy for “The long road”: The headline, the cold open's last subtitle and section intros carry the lines; every fact keeps its number and name.
layout · dna4In the files
Letterboxed cold open with burned-in subtitles
Anchored to
Camping TV · newIntimate look quality · new
Translates: Unvarnished close ups · Intimate
Through the convention: observational documentary: tight handheld frames, letterboxed, with burned-in white subtitles at the bottom
InterpretationThe problem opens like an observational documentary: a dark 2.39:1 frame, tight on a table, with the facts arriving as white subtitles at the bottom rather than as a headline. Unvarnished close-ups become a frame with no chrome.
#cold-openaspect-ratio: 2.39 / 1
Made with css-layout for “Close and unvarnished”: A dark frame with a 2.39 / 1 aspect ratio on desktop, the drawing behind and subtitles absolutely placed at the bottom.
Away from the sketch: 1 new part
structure · dna3In the files
The evidence as a nutrition-facts label
Anchored to
Bold Typography look quality · newRealistic look quality · new
Translates: Bold Typography · Realistic
Through the convention: nutrition-facts panels: a boxed table of heavy rows and thick bars, with the fine print set small underneath
InterpretationEach kind of evidence becomes a row of a boxed facts panel with thick bars between groups; the line about what it does not show is printed as the label's fine print, so the honesty is part of the package. Realistic: plain numbers, nothing dramatized.
#evidence-factsborder: 4px solid var(--ink)
Made with css-layout for “The label on the bottle”: A boxed facts panel built from a definition list with thick group bars, fine print under each row, styled in CSS grid.
Away from the sketch: 1 new part
structure · dna8In the files
The five steps as a training log
Anchored to
Resilience meaning quality · newPerseverance meaning quality · new
Translates: Resilience · Perseverance
Through the convention: training logs: day-by-day entries, sets ticked off, notes in the margin
InterpretationResilience and perseverance become the spine of how it works: the five steps as entries in a training log, each a session ticked off with a short note in the margin, read in order like days of a programme.
#training-log
Made with css-layout for “The long road”: An ordered list styled as log entries with a session column, a tick box and a margin note.
Away from the sketch: 1 new part
structure · dna9In the files
Three agents as an ensemble of lower-thirds
Anchored to
Relationships meaning quality · newIverson film · new
Translates: Relationships · Resilient
InterpretationRelationships become the ensemble: Claude Code, Codex and Kiro each introduced as a documentary interview lower-third, a name bar and a role line, with the install commands beneath. One engine, three voices.
#ensemble
Made with css-layout for “The long road”: Three lower-third bars, a heavy name bar in flavour colour with a role line under it, and the commands in a plain code block.
Away from the sketch: 1 new part
