back to the portfolio
portfolio/colophon
- on the making of this notebook.

Colophon.

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 + body Instrument Serif
marginalia Caveat — pen ink
technical Geist 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.

  1. Voice first. The text was written before the layout. The layout serves the text.
  2. Asymmetry over symmetry. Marginalia, tape strips, tilted cards. Slight imperfection reads as care, not carelessness.
  3. One signal color. Red appears when something matters. The rest of the page is calm.
  4. Hand-set anywhere a sentence can carry it. The Caveat font is doing the work of three illustrations.
  5. Light mode is the design. Dark mode is reframed, not inverted. Many sites get this wrong.
  6. No emoji, no stock icons, no AI-generated illustrations. Either the system has a place for an element, or it doesn't appear.
  7. 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.
- end of colophon -