Colophon

Would this appear in a well-typeset book?

That question resolves every design decision on this site. Not “is this on trend” or “does this match the wireframes,” but: would a careful typesetter, setting pages for a reader who cares, make this choice? If the answer is no, the element doesn’t belong here.

This is both a colophon in the traditional sense — a record of how the site was made — and a living design system. The colophon tells the story. The design system pages that follow document the specifics.

Five principles

Typography is the interface. Size, weight, family, and spacing create all hierarchy. There are no colored backgrounds to distinguish sections, no bordered boxes to contain headings. Two typefaces do all the work.

Earn every element. Each component, each rule, each line of CSS exists because removing it would make something worse. The system accretes slowly and sheds easily.

Accent means agency. One color signals interactivity — links, hover states, the scroll progress bar. When you see it, something can happen. When you don’t, you’re reading. The links on this page are the accent in action.

Both modes are native. Dark mode is not an inversion of light mode. Every value is hand-tuned independently. The paper metaphor holds in both: warm cream and honest ink become warm near-black and soft off-white.

The page is the material. Paper grain, edge vignette, registration crop marks, letterpress text-shadows. These aren’t decoration. They’re the medium the text lives on.

Typography

The ornament between these sections — three em-spaced asterisks in Signifier — is the dinkus.¹

Two typefaces carry the entire site, each with a distinct voice.

Signifier is a variable serif by Klim Type Foundry. It’s the reading voice — everything you spend time with. Body prose, headings, pull quotes, the nameplate. Transitional in classification, warm enough for long-form reading, sharp enough at display sizes. Its variable axis lets weight shift on hover without loading additional files.

Montreuil is a humanist sans by 205TF. It’s the functional voice — everything that orients you. Navigation labels, section headings, dates, captions, category pills. Its construction pairs naturally with Signifier without competing for attention.

There’s a third voice, used sparingly: Caveat appears only in handwritten marginalia on link posts, where an editorial annotation should feel personal and informal.

Typography foundations →

Color

The palette is built entirely from Flexoki by Steph Ango — a set of colors designed around the warmth of ink on paper. Where most palettes start with pure hues and add warmth later, Flexoki starts warm.

Three tiers: surfaces , structure , and text . One accent color that means “something is alive.” The reader can choose any of the eight Flexoki hues through the accent picker in the footer.

Color foundations →

The page as material

Look closely at the edges of the viewport. Four crop marks sit at the corners, the kind a printer uses to register pages on a proof sheet. A radial vignette darkens the periphery, pulling focus to the center like a reading lamp. An SVG noise filter lays paper grain across the entire surface, warm-tinted to match the cream background.

On headings and pull quotes, dual text-shadows simulate type pressed into the paper — a bright highlight below each letter and a subtle shadow above, as if the characters are debossed. In dark mode, the shadows reverse, matching the expectation that light comes from within the screen.

None of these layers carry content. All are pointer-events: none. They exist to make the screen feel less like a screen.

Atmosphere →

Writing style

This guide is inspired by—and owes a tremendous debt to—Robin Sloan’s style guide. His colophon convinced me every writer should keep one of these. Most of these rules started as his; I’ve adapted them to my own preferences and added a few of my own.

Capitalization

• Sentence case for titles and headings. “A few thoughts on writing well,” not “A Few Thoughts on Writing Well.”
• Phrases following a colon are not capitalized, even full sentences: that’s just how I like it.
• Spell out acronyms on first use, unless universally known (NASA, URL, API).

Punctuation

• Oxford comma, always. Without it, you risk inviting the strippers, JFK and Stalin.
• Em dashes without spaces—like this—for parenthetical asides and abrupt shifts.
• Ellipses: write ... and let the site render … (Unicode ellipsis).
• Smart quotes: let the site replace straight quotes with curly quotes automatically.
• When a sentence ends in an italicized phrase followed by punctuation, italicize the punctuation, too!
• Punctuation goes inside quotation marks for complete, standalone sentences. Otherwise it goes outside, in the UK style.

Titles & names

• Italicize titles of books, films, albums, periodicals, and TV shows.
• Plain text (with quotes if needed) for shorter works: songs, articles, episodes.
• “The” belongs to you, not the brand. Write “the Atlantic,” not “The Atlantic”—claim the article for your own sentence.

Numbers & dates

• Spell out ten and below. Digits for 11 and up.
• Always digits for stats, data, and measurements. 50%, not fifty percent.
• Full dates in prose: “January 15” with the year only when it’s not obviously the current one. Shorthand is fine for navigation.
• YYYY-MM-DD for file organization and sorting.

Compound words & spelling

• Hyphenate compound modifiers before a noun (“side-by-side comparison”) but not after (“they stood side by side”). This is the general rule—apply it everywhere.
• Email, but e-book. Website, but web page. Home page. Home screen.
• Plugin. Codebase. Codename.
• Coworker, not co-worker.
• Reread, rewatch, redownload.
• Signup form, but “sign up”: you sign up with the signup form.
• James’s, not James’. Add ‘s to everything—it matches how you say it.

Voice & grammar

• Contractions are welcome. Write like you talk.
• Self-driving cars, not robotaxis.

Links & references

• Descriptive link text woven into prose. Rarely “click here.”
• Ampersands (&) in UI, labels, and headers. “And” in prose.

Built with

Astro generates the static site. Vercel deploys it. Content is written in Obsidian and synced to the site via a custom pipeline — a Python script watches for changes in the vault, converts Obsidian conventions (wikilinks, callouts, date syntax) into standard markdown, and pushes to the GitHub repo. Vercel picks it up from there.

The newsletter runs through Beehiiv. A custom signup form on the homepage posts to a Vercel serverless function that proxies the Beehiiv API — no iframe, no third-party styling. The form follows the same editorial pattern as the rest of the site: a bottom-border input like a line on a subscription card, and a text-only button that matches the section navigation links.

No CSS preprocessors, no utility frameworks, no component libraries. One CSS file (global.css), one source of truth. Seven font files, all woff2. The organizing principle is legibility, not abstraction.

Design system