Type
display & textSwitzer · 400 / 600 / 800 · fontshare license, free
annotations & dataFragment Mono · 400 · open font license
Stack
designfigma · one token set, light and dark modes · comps before code
buildnext.js app router · vercel
engineering agentclaude code, directed by a person with opinions
analyticscookieless page counts, nothing else
The rules
r01one grotesque, one mono; the serif stays retired
r02caps live only on the drawing layer
r03annotation ink is blue: blue reads as blueprint, red reads as error
r04photos are evidence; blue drawings are reconstructions
r05screenshots sit on mats at true aspect, never cropped
r06ensure outcomes are attached to case studies, with named sources
r07motion earns its place or it goes
Changelog
v2 · jul 2026quiet paper, loud margins: full redesign, dark by default, drawing layer added
retiredserif display type and the theme switcher: one voice, one system
rejectedred annotation ink and warm washi paper: red read as error, the washi fought the blue
not chosenthree about-page treatments: photo as figure, tight crop, no photo. the banner hero won
How this was made
Designed sheet by sheet in Figma, then built by directing Claude Code as the engineering agent. The annotations are sample markup, not decoration: decisions, specs, rejections, and outcomes, written the way I would hand them to a developer. Where a number appears on a case page it has a source, and where a screen could not be shown as shipped it is drawn in blue as a reconstruction. All the thinking, and the taste, stayed human with Claude only responsible for engineering and ingestion from Figma.