How this site is made
Colophon
col·o·phon
/ˈkɒl.ə.fɒn/ noun
- 1.A note, usually at the very end of a book, about how it was made.
- 2.This page, but at the front, because I couldn't wait.
- typefaces
- colours
- packages
- pages
Last built on 4 October 2026.
01 · Type
Two voices, one page
Measured live from the font, in units per 1000.
Instrument Serif was designed by Rodrigo Fuenzalida for Instrument. Geist is by Vercel. Both are free and open source under the SIL Open Font License. Thank you to the people who made them.
The scale, at its real sizes
Page title
Serif, up to 160px
Software that respects the device
Section title
Serif, up to 80px
Software that respects the device
Lead paragraph
Sans, 20 to 24px
Software that respects the device
Body
Sans, 16 to 18px
Software that respects the device
Label
Sans medium, 14 to 16px
Software that respects the device
02 · Layout
The grid, drawn to scale
Not a mock-up. These are the measurements the site is actually built on, read from its own code and the rendered page. Point at a row to light up where it lives.
03 · Colour
Five colours, no more
Keep scrolling. The page will change colour to show you each one.
01 / 05
Cream
The page itself. Warm, never pure white, because pure white makes everything feel like a form.
Tap a swatch to copy its hex.
04 · Stack
What it's built with
Versions are read from this project's own package.json every time the site is built, so this list can't go stale.
Foundation
Next.js
Framework, routing and image generation
v16.3.8
React
The UI layer
v19.3.0
TypeScript
Types, everywhere
v7.0.2
Tailwind CSS
Styling and the design tokens
v4.3.3
Motion
GSAP
Scroll scenes, text splitting, line drawing
v3.15.0
Lenis
Smooth scrolling
v1.3.26
Motion
Layout animation and gestures
v13.5.0
NumberFlow
The clock's flipping digits
v0.6.2
Interface
Radix UI
Accessible primitives under the dialogs and menus
v1.1.23
shadcn/ui
The base component set, copied in
copied in
Magic UI
Scroll velocity and a few effects, copied in
copied in
Aceternity UI
The animated tooltip pattern, copied in
copied in
React Bits
The magnetic email link, copied in
copied in
cmdk
The command palette on Cmd K
v1.1.1
Sonner
Toasts
v2.0.8
Data
TanStack Query
Fetching and caching GitHub and Monkeytype
v5.104.0
Supabase
Guestbook accounts and messages
v2.117.2
react-activity-calendar
The contribution heatmap
v3.2.1
05 · Decisions
Why it works this way
Serif for feeling, sans for facts
Headlines, names and big numbers are set in Instrument Serif. Labels, body copy and anything you read quickly are in Geist. The contrast does the hierarchy so I didn't need many sizes.
Lime is a highlighter, not a theme
It marks one action per screen and a couple of full-bleed moments, like the contact block. If lime were everywhere, none of it would stand out.
Icons first, words on demand
Five destinations don't need five labels. The nav shows icons and unfolds a name when you point at one. Phones get the labels because there's no hover.
One scroll engine
Lenis handles smooth scrolling and GSAP's ticker drives it, so every ScrollTrigger on the site agrees about where the page is. Two systems fighting is where scroll jank comes from.
Motion has an off switch
Every animation checks prefers-reduced-motion and falls back to a still page. Nothing important is only reachable by watching something move.
The share card is a JPEG on purpose
Generated images come out as heavy PNGs, and WhatsApp skips previews over roughly 300KB. So the card is rendered once and shipped as a small JPEG.
06 · Credits
Standing on other people's work
Type
- Instrument Serif, designed by Rodrigo Fuenzalida for Instrument
- Geist, by Vercel
- Both under the SIL Open Font License
Icons
- Phosphor Icons
- Lucide
- Simple Icons, through react-icons
Music
- Nocturne in E-flat, by Chopin
- Clair de Lune, by Debussy
- Gymnopedie No. 1, by Satie
Photography
- The portraits are mine
- Cipher and Vigil screenshots are from the apps themselves
The Android robot is reproduced or modified from work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License.