Design
The design language behind this site: quiet luxury, timelessness, functionality, and the rules that keep it that way.
Three words govern everything here: quiet luxury, timelessness, functionality. They are not decoration. Each one rules out a specific temptation, and what survives all three is the design.
This page is the standard. It is also the test: if something on this site contradicts what follows, the site is wrong, not the page.
What the words rule out
Quiet luxury means restraint plus craft. Restraint alone is just plain, a system font stack and one accent colour is not luxury, it is an absence of decisions. The craft lives in the type scale, the measure, the optical spacing, the things a reader never consciously notices. Borrowed, deliberately, from Apple and from French design sensibility: the confidence to leave things out.
Timelessness means the design should not date. That rules out the era's signature: gradients, glassmorphism, soft shadows, glows, blobs, animated reveals, and the purple-to-pink wash that marks a page as having been made in this decade. It also rules out webfonts, which are a dependency that decays.
Functionality means every element earns its place by doing work. A badge that says "live demo" over an obviously live demo is decoration wearing a functional costume. It went.
Type
Type is the whole design on a writing site. Three faces, three jobs, no overlap.
| Role | Face | Used for |
|---|---|---|
| Reading voice | Serif | prose, headings, pull-quotes |
| Interface voice | Sans | navigation, dates, labels, metadata |
| Proof cue | Mono | code, identifiers, policy names |
Monospace is a proof cue, not a texture. It signals "this is a literal value you could copy", a policy id, a command, a hash. Using it for body copy spends that signal on nothing.
System stacks only. The serif resolves to Iowan Old Style on Apple hardware, Charter on many Linux systems, Georgia everywhere else, all excellent text faces that have already survived thirty years. Zero network requests, no flash of unstyled text, nothing to break in five years.
Scale
Named roles, not arbitrary sizes. A page uses the role that matches the job.
title: the page-defining statement. One per page.kicker: kind and date, set above the title so a reader orients before the headline asks for a commitment.lede: a short orientation passage, muted.body: reading copy at 19px, 1.62 line height.section-label: a turn in a listing: a year, a group name.metadata: subordinate context, small caps, tracked.
Colour
Monochrome by rule. Colour is reserved for state, and this site has almost no state, so it has almost no colour.
Links are ink with a hairline beneath, not a hue. This is the single most consequential decision on the page: a body of text with blue links in it reads as a web page, and the same text with underlined ink links reads as a document.
The ground is warm. Neither the paper nor the ink is neutral, and neither is
pure, #fdfcfa on #16140f, not #ffffff on #000000. Pure white is a
screen artefact; paper has never been that colour.
| Token | Light | Dark |
|---|---|---|
| paper | #fdfcfa | #12110f |
| ink | #16140f | #e9e4da |
| ink-muted | #6b6357 | #968c7d |
| ink-faint | #97907f | #6b6357 |
| rule | #e8e3da | #272420 |
| wash | #f5f2ec | #1a1815 |
Layout
One column, one edge.
The reading column is 38rem, about 65 characters of 19px serif, the middle of the 60 to 70 range where the eye can find the next line without effort.
Everything is contained. Prose, headings, images, tables, quotes, code, embeds and the hero all share that one edge. There is no second width.
An earlier version let media step out to a wider measure, on the theory that evidence should not be cramped. In practice a hero image at one width above a title at another reads as two designs stacked, and the eye loses the edge it navigates by. A table too wide for the column scrolls inside itself instead.
This is enforced structurally, not by convention. Two components own it:
Shell: the outer container. Sets the gutter and the maximum extent.Column: the reading column, centred inside the Shell.
Every region of every page nests the second inside the first, so their edges are identical by construction rather than by care.
The enforcement is a browser test, not a string search. tests/layout.test.mjs
loads the built pages in headless chromium and compares real bounding boxes at
three viewport widths. The audit it replaced checked that nothing besides
Shell declared a width, so when a careless edit set Shell itself to
max-width: none, the check passed while tables ran off the screen. A rule that
can only be satisfied by absence cannot detect absence.
Rhythm
A 4px base. Gaps carry meaning: 2 within a group, 6 between groups, 12 at a section turn, 16 at a chapter break.
One owner per gap. The stack sets the space between its children; children never add competing margins. Two elements that both claim the same gap is how vertical rhythm rots.
Motion
Default to stillness.
No auto-scrolling marquees, no simulated typing cursors, no pulsing status dots, no parallax, no reveal-on-scroll. A hover state may change a colour. It may not move anything.
Reduced-motion preferences are honoured globally, which is a low bar the rest of the web still trips over.
Rich content
The site renders raw HTML in .md bodies, so an iframe, a video, a canvas
or a model-viewer can appear inline in any post.
Anything needing JavaScript lives in its own document under /demos/ and is
embedded by iframe. This is not a workaround, it is the right architecture:
a demo gets its own document, so it can load three.js or use WebGPU without
touching the site bundle, and a broken demo cannot take the article down with it.
The test
Squint at the page. The dominant claim should be obvious and the reading path stable. If the eye lands on decoration first, the decoration is wrong.
When uncertain, choose the version with less in it.