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–70 range where the eye can find the next line without effort. Everything that is read aligns to it: prose, listings, the navigation, the footer.
There is exactly one exception. Images, tables, code and embeds step out to 48rem, symmetrically, so evidence is never cramped by the text column. That step-out is the only width in the system besides the column itself.
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. No other component may set a width. A build-time audit fails if one tries.
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.