Colophon

How it was built

I designed and built this site with Claude Code over a few days in September 2026. It started as a written plan and a detailed spec, with review points before each phase. I set the direction, made the design calls, and approved every word. Claude wrote most of the code, drafted much of the copy from my answers for me to edit, ran the checks, and caught problems I would have missed.

The essays are mine. Claude helped me edit and tighten them.

I kept a build log of every decision and every place I overruled Claude. A few from it follow.

Decisions along the way

• The first direction was a page drawn like an engineering drawing. I moved it to one laptop covered in stickers, because one object is simpler and more personal.
• My first idea for the opening was a cursor typing the headline. Claude pointed out that typing slows down fast readers, so the stickers press on instead.
• I asked for Drafter’s real prototype at the top of its case study, instead of recreations of it, so people can use it the way they’d use a product demo.

The laptop

The laptop on the home page is drawn in code. It’s a 13-inch lid, 304 by 215 millimetres, which happens to be the proportion of an ISO drawing sheet. One soft light from the top left sets everything: the grain of the aluminum, the reflection that slides as the lid tilts, and the shadows on the desk, which stay put while the lid moves. The grain imitates bead-blast pits smaller than a pixel, so it’s drawn at eight times the size and averaged down. At pixel size, it read as leather.

Each sticker is die-cut by a script. It traces the artwork, rounds a border around it the way a real die would, and turns the result into a vector outline within 0.025 mm of the trace. That outline is also the sticker’s hit area, its shadow, and its focus ring. The lettering is outlined from open-source fonts, so every sticker prints the same everywhere.

The stickers should look collected over years, not printed as one set. Each borrows a real genre, like a holographic die-cut, a postage stamp, a bookplate, or a name tag, and a material: gloss or matte vinyl, holographic foil, or paper. Newer stickers sit on top of older ones, in the order I collected them. The oldest, American Express, is peeling at one corner. There’s dust along worn edges, an air bubble, fine scratches on the lid, and the faint mark of a sticker peeled off long ago.

When the page opens, the stickers press on in that order, from 2022 to this month. It plays once per visit, any click or key finishes it, and with reduced motion the page simply starts finished. The laptop is one Tab stop, arrow keys move to the nearest sticker, and every card works without JavaScript.

Drafter, live

The demo at the top of the Drafter case study is Drafter’s real prototype, trimmed down, with no sign-in, no server, and no customer data, on Drafter’s own sample Wing Flap. It’s behind the password, because it’s Drafter’s own code. The CAD model is converted to a mesh when the site builds, so the viewer skips a 7 MB CAD kernel and loads in about 1.8 MB.

Further down, drafterinc.com runs live in a frame, so it never goes stale. When it’s framed here, it skips its cookie banner and its analytics, so reading this site never counts as a visit there.

Art and the résumé

• The stat stickers on the Drafter page are the lid’s own stickers, small. The stopwatch is the only one drawn just for the page.
• The clipboard illustrations in Show people what to check are drawn in code too: SVG, with filters that imitate watercolor, to match the art in the older essays.
• The résumé is built from the same code as the site. It’s HTML printed to PDF, and the build fails if it no longer fits on one page. It says the same things the site does.

Checks

npm run check runs the type checker, unit tests for the die-cut geometry, and a drift check that fails if a sticker’s outline no longer matches its art. Before I looked at a change, Claude checked it in a real browser at phone and desktop widths.

Details

• Built with Next.js and React, and deployed on Vercel.
• Set in Schibsted Grotesk and Fragment Mono. The stickers’ lettering is Archivo, EB Garamond, Fragment Mono, and Caveat, outlined.
• No analytics or tracking. The only cookie remembers that you entered the password for the private pages.
• Photos are re-saved without metadata, so none carries the location a phone records.
• There’s a plain-text version of this site for AI readers at /llms.txt. It says what the pages say, and there are no hidden instructions anywhere on this site.