Colophon
About this site and the thinking behind it.
Why It Looks This Way
This site is designed to feel like a patent drawing come to life : warm parchment, india ink, and the careful precision of technical documentation. The dot-grid background, hand-drawn accents, and editorial typography are deliberate. They signal that this is a working space for someone who reads footnotes and visits primary sources.
The aesthetic borrows from engineering notebooks, architectural blueprints, and field journals. If the site feels like something you'd find on a drafting table rather than in a boardroom, that's the intention.
Tech Stack
- Framework
- Next.js 15(App Router, static generation)
- UI
- React 19
- Hosting
- Vercel(auto-deploy from git)
- Styling
- Tailwind CSS v4(CSS custom properties)
- Hand-drawn
- rough.js + rough-notation
- Typography
- 6 fonts via next/font(Vollkorn, IBM Plex Sans, Ysabeau, Courier Prime, JetBrains Mono, Amarna)
- Primitives
- Radix UI(Accordion, Collapsible, Tooltip)
- Icons
- Phosphor + SketchIcon system
- Content
- Markdown + gray-matter + remark
- Validation
- Zod schemas
- RSS
- feed package
- Studio
- Django + HTMX(GitHub Contents API pipeline)
Typography
The site uses three typography systems that shift by context. Vollkorn carries editorial weight in headings: a sturdy, old-style serif that grounds every page title. IBM Plex Sans handles all body text: a neo-grotesque with enough personality to feel intentional while staying clean at paragraph length.
Its weight range (300 through 700) supports visual hierarchy across contexts, from light captions to bold callouts. Labels and metadata are always set in Courier Prime: uppercase, tracked, monospaced, evoking typewritten case files and document stamps.
The toolkit pages use Ysabeau, a glyphic humanist sans that suggests letters chiseled into stone. It gives those pages an architectural, structural feel distinct from the editorial warmth elsewhere.
The masthead uses Amarna, a self-hosted semi-glyphic humanist sans with a carved, naturalistic quality at larger sizes. It is the only locally hosted font; the remaining six load via Google Fonts through next/font.
Design Philosophy
Every design decision on this site was made with the same question in mind: does this serve the content, or does it serve the ego of the designer? Ornament for its own sake is out. Warmth and texture that invite you to read are in.
The hand-drawn underline on the homepage is the only rough.js element that's truly decorative, and it's a statement. It says: this work is in progress. The ideas are real, but they're still being shaped. Nothing here pretends to be final.
Credits
Built with Next.js, styled with Tailwind CSS, illustrated with rough.js by Preet Shihn. Accessible UI primitives from Radix. Fonts served via next/font. Hosted on Vercel.
Claude Code handled much of the implementation, but every design decision, every color choice, and every layout judgment was made by a human. The tool writes markup; the person decides what the site should feel like.