colophon
How the site is put together, and why it looks the way it does. Mostly written down so I stop re-deciding it.
The stack
Static output, no database, no CMS. Writing a post is the same motion as writing code: edit, commit, push.
- framework
- Next.js — App Router
- styling
- Tailwind v4, CSS-first config
- content
- MDX files in the repo
- highlighting
- rehype-pretty-code, at build time
- tooling
- Biome, pnpm, TypeScript
The type
Two faces doing two jobs. Sans for anything you read, mono for anything that labels or navigates.
- prose
- Geist
- chrome and code
- Geist Mono
- column
- 42rem — about 75 characters
The palette
Seven values, dark only. Contrast against the background is 17.1:1 for body text and 5.8:1 for the accent, so the pink is a real colour here rather than decoration you have to squint at.
- bg
- #08080athe page
- surface
- #0e0e11cards
- line
- #1c1c21borders and rules
- fg
- #ededf0body text
- muted
- #8b8b96secondary text
- accent
- #ff2d95links, markers, the glow
- accent-soft
- #ff8ac9inline code, hover states
What isn't here
- No analytics. I don't need to know how many of you there are.
- No comments. The email address at the bottom works.
- No cookie banner, because there are no cookies to warn you about.
- No light mode. The domain is .pink and the site has one look.