Colophon
The materials and small decisions behind this site.
Type and color
The typeface is Areal, served from this site. Text uses two sizes, 16px and 14px, with normal and bold weights. Spacing and color do most of the work of separating one thought from the next.
The palette stays mostly monochrome in both light and dark modes. A small orange arch gives it a little warmth.
The story behind the logoMotion and sound
Transitions are gradual, with reduced-motion preferences respected. The interface sounds share a generated chamber-piano palette, played through @web-kits/audio. You can listen to each cue and adjust the sound controls in the sounds lab.
Listen to the soundsBuilt with
- Next.js
- Pages and static exports, built with React and TypeScript.
- Tailwind CSS
- Layout, spacing, and the light and dark palettes.
- Motion
- Page entrances, springs, and interactive studies.
- Paper Shaders
- The slowly moving light inside the orange arch.
- Glimm
- Transitions between pages.
- Highlighters
- The ink effect when you select text.
Pages are exported as static files and hosted on Cloudflare. Google Analytics helps me understand which parts of the site people visit.
Privacy and analytics