colophon

A colophon used to be the printer’s mark at the back of a book — who set the type, on what press, in which face. This is that page, except the book is a website and it can show its work instead of just describing it.

Everything below is rendered with the same custom properties, fonts, and libraries that draw this very sentence. Toggle the theme in the nav — the swatches, and the whole page around them, will follow.

01 / palette, live

Eight variables, two moods.

Every chip below is painted with the actual custom property, not a frozen hex — flip the theme and watch them repaint. Click one to copy its variable name.

yes — I know you might be reading these values in devtools right now. that’s the point.

--color-ruling — the graph-paper grid, a teal at roughly 5% opacity so it reads as texture, not noise.

--color-shadow — the one shadow color on the site, reused everywhere something needs to lift off the paper.

02 / type specimens

Three faces, three jobs.

Newsreader — display serif

Build the magic, keep the receipts.

Headlines, page titles, the occasional italic aside.

Geist Mono — the workhorse

$ bun run dev · NAV · 03:14:07 · 2/2 checks passed

Navigation, timestamps, labels, and every code block on the site.

Caveat — the marginalia

a note scribbled in the margin, because rigor still needs room to breathe

Asides and annotations — the handwriting layer over the grid.

03 / stack

What it’s actually made of.

Next.js 16
App Router, React Server Components — the whole site runs on it.
React 19
actions and refs-as-props mean fewer wrappers between intent and pixels.
TypeScript, strict
"readable is a feature" applies to the source too, not just the interface.
Bun
package manager and script runner for install, dev, and build.
next-mdx-remote
writing lives as MDX in /writing and renders server-side — no client bundle for prose.
rough.js
the hand-drawn canvas accents: the 404 map, the CV timeline, the homepage system diagram.
sugar-high
syntax highlighting, retokenized into the site's own warm palette.
hand-rolled CSS
one globals.css plus a CSS module per component — no Tailwind, no UI kit.
Vercel
build, deploy, analytics, and speed insights.

04 / ingredients

The small decisions that add up.

  • graph-paper ruling: two layered linear-gradients on <html>, 32px apart, tinted with --color-ruling
  • a custom dot cursor: an inline SVG data URI, terracotta over text, teal over links
  • a ctrl+k terminal for poking at the site from the keyboard instead of the mouse
  • dark mode as "midnight blueprint" — one data-theme attribute flips every token on this page, no second stylesheet
  • hand-drawn SVG and canvas annotations: the circled "receipts" on the homepage, the torn-page 404 scene, the CV timeline dots

05 / provenance

Who built this, honestly.

This site is designed and built by Niels, in collaboration with Claude — Anthropic’s model, working as a pair-programmer with strong opinions about CSS. That is not a caveat tucked at the bottom of the page; it is the point. The same “build the magic, keep the receipts” ethic that runs through the rest of this site applies to how the site itself got made.

The git history keeps the receipts, commit by commit:

Co-Authored-By: Claude <noreply@anthropic.com>

No ghostwriting, no pretending otherwise. If a line of CSS turned out clever, it is worth knowing whose idea it was.