Notebooks have always had colophons — a small note at the back,
describing the paper, the press, the type. Here's mine. Built in HTML
and CSS, by hand, over more evenings than I'll admit.
↬ type.
Three faces, each doing exactly one job. Mixing fewer than three felt
thin; more than three felt loud.
display + bodyInstrument Serif
marginaliaCaveat — pen ink
technicalGeist Mono · for code, labels, stamps
All three are open-source and served via Google Fonts. The serif does the
thinking; the handwriting does the talking; the mono does the receipts.
↬ palette.
Warm cream paper, ink near-black, one signal red for accents. One
color, used carefully, is louder than four colors used at all.
paper#fbf3e6
paper-2#f5ead4
ink#1d1612
signal redoklch(0.55 0.19 28)
highlighteroklch(0.93 0.14 92)
dark paper#14100c
Dark mode is a "library at midnight" — deep warm black,
glowing cream, jewel-tone Post-its. Not generic dark gray.
↬ principles.
Voice first. The text was written before the layout. The layout serves the text.
Asymmetry over symmetry. Marginalia, tape strips, tilted cards. Slight imperfection reads as care, not carelessness.
One signal color. Red appears when something matters. The rest of the page is calm.
Hand-set anywhere a sentence can carry it. The Caveat font is doing the work of three illustrations.
Light mode is the design. Dark mode is reframed, not inverted. Many sites get this wrong.
No emoji, no stock icons, no AI-generated illustrations. Either the system has a place for an element, or it doesn't appear.
Every page has a footer. Footers are where good websites tell you they're done. This one is, almost.
↬ tools.
Hand-written HTML and CSS. No framework, no build step. A single
stylesheet per page, with a small JavaScript at the bottom for the theme
toggle and a couple of interactions.
Drafts on paper. Type and layout
tested in the browser. Iconography pulled from
Simple Icons,
with a couple of inline SVGs where the CDN was missing. Hosted on
(wherever you're seeing this).
↬ debts.
A short, honest list of things I borrowed shape from:
- Shubham Katta's personal site, for the warm-paper energy.
- Derek Sivers' "now" page idea.
- every literary magazine that puts a small mark at the end of an essay.
- my own real notebooks, for the marginalia habit.