Colophon

Design

Type

Headings are set in Bricolage Grotesque, a variable display typeface with weight, width, and optical size axes.

Body text is set in iA Writer Quattro, a "quattrospace" typeface — each character occupies one of four widths, landing somewhere between monospaced and proportional. Navigation and code elements use its companion, iA Writer Mono. The variable font versions aren't distributed for web, so I converted them myself from the iA-Fonts repository.

Scale & Measure

Type and spacing scale fluidly between screen sizes with Utopia calculations, using my Panda CSS preset. The modular scale becomes more dramatic on larger screens where there's more space to breathe.

Colour

The colour palette comes from Radix Colors. Radix provides specific steps on each colour scale along with dark variants, which means the site can use a single semantic approach to naming colours — primary, secondary and neutral. Colour palette switching and light/dark mode handle themselves without any special-casing.

Technology

This site is built with Next.js and styled with Panda CSS. I jumped on the Server Components hype train and use Cache Components for data fetching. Animations are just CSS, but some are powered by Motion. Icons are from Remix Icon.

Content pages are authored in Markdown and rendered with MDX. Open Graph images are generated dynamically with Satori.

The site currently lives in my personal monorepo — where most of my crazy projects live — managed with pnpm and Turborepo. Hosted on Vercel.

Inspiration

The concept of a colophon comes from the tradition of crediting the people and tools involved in making a book. The now page movement started by Derek Sivers inspired the structure of this site.