Colophon

Stack

This site is built with Astro (opens in new tab), deployed to Cloudflare Workers (opens in new tab), and managed with pnpm (opens in new tab). There are no client-side frameworks — just Astro components, scoped CSS, and minimal inline scripts. Content is authored in MDX (opens in new tab).

Typography

Fraunces (variable, weight 100–900) for display headings, using the WONK and SOFT optical axes. Lora (variable, weight 400–700) for body text. IBM Plex Mono for structural text, code, and metadata — navigation, dates, tags, and captions. DRAFTPAPER, a hand-drawn drafting font, for select structural labels. All fonts are self-hosted as WOFF2 (~197KB total).

Sizing follows a fluid type scale generated with Utopia (opens in new tab) — a Major Third scale (1.25–1.333) spanning 320px to 1240px viewports using vi units.

Layout

The grid is a named-line CSS grid with breakout tracks, based on Ryan Mulligan's layout breakouts (opens in new tab). At wider viewports, the grid shifts off-center to make room for a margin column — following Edward Tufte's (opens in new tab) principle of sidenotes over footnotes.

Spacing uses a fluid scale from Utopia, matching the type scale's viewport range.

Color

The palette is Industrial Plants — 16 colors extracted from a photographed book page using color science. Light mode uses a warm beige grain surface (#DED4BD) with darkened alert-orange accents (#9D3D06). Dark mode shifts to a deep green (hsl(150, 12%, 15%)) with lighter orange (#F8A850). All color pairings meet WCAG AA contrast, verified against the composited grain surface.

Three-layer dark mode: semantic color tokens via light-dark() on :root, @media (prefers-color-scheme: dark) for grain overrides (no-JS fallback), and [data-theme] for the JavaScript toggle.

Texture

The paper grain overlay uses gggrain (opens in new tab) SVGs with a warm scrim overlay and text-shadow halos for legibility — analog texture at ~2KB per SVG. A hatch-stripe pattern marks structural boundaries (table of contents, code blocks). Both reinforce the xerographic aesthetic without adding weight.

Principles

• Structure is visible — let the skeleton show through.
• Mono carries metadata — serif is for reading, display (Fraunces) for headings.
• Texture over decoration — grain and hatching, not gradients.
• Earned complexity — every component serves the writing.
• Accessible by default — WCAG AA, reduced motion, semantic HTML.

Privacy

This site has no analytics, no cookies, no tracking scripts, and no third-party JavaScript. Embedded content from YouTube, Bluesky, and similar services loads in sandboxed iframes — their scripts are blocked by the Content Security Policy (opens in new tab).