This is the workshop. If you have read a few of these posts and wondered what they are actually made of, here is the kit, laid out on the bench and named.
The whole site runs on a small, fixed set of parts: one locked background color, a warm palette tuned around it, three typefaces, and a handful of building blocks. No framework, no theme. Next to each part below is one of two small tags:
It exists only on this site. Built for this one job and used nowhere else: the palette, and every component below.
I did not make the thing itself. I chose it and wired it in. Here, that is really just the three typefaces.
Chapter one
One color, and a palette tuned around it
The background is a single dark forest green, and it is locked. Everything else on the site exists to sit on top of it without ever fighting it.
The palette is tuned in OKLCH, so the steps up the ramp feel even instead of lurching. Nothing is a neutral gray and nothing is pure white: the darks are warm and green, the lights are cream, and the one everyday accent is a dusty gold, with a rose held in reserve for the single most important link on a page.
Dark to light in one smooth curve. The hue glides from green toward cream as it brightens; the chroma stays low the whole way. --bg is the locked background. The names in gold are the actual CSS variables a post uses.
The rose is the exact mirror of the gold, the background's complement, saved for the one key link or callout on a page. The lower row is the muted accent set posts pick from, all flattened to the same chroma so they read as equals.
Rose, the reserve emphasis
The categorical accents posts share
Chapter two
Three typefaces, and not a fourth
Every word on the site is set in one of three faces. Headlines in a serif, body text in a familiar sans, and anything that behaves like data in a monospace.
Here is the borrowed part, said plainly: I did not draw these letters. Century Supra is an old-book serif, Segoe UI is the interface font your machine probably already has, and Commit Mono is a free face built for code. What is mine is the casting, which face does which job, at what size, against this green.
All three are self hosted, so the site pulls from no font network and nothing tracks you through them. They are reached in CSS as --font-heading, --font-body, and --font-mono.
Chapter three
The kit every post is built from
A few of the building blocks a post is assembled from, each one rendered live below on the real stylesheet, not a picture of it. Every one is made here.
A boxed, labelled highlight. For a one off, meaningfully named point that earns the weight of a box.
The pull quote, a single italic line worth slowing down for, on a gold bar.
We learned to fill the room under the ceiling, not to raise it.from the longevity post
Three gold dots. The quietest way to mark a break without a hard rule.
Inline figures, divided by hairlines. For a quick row of numbers inside the flow of reading.
There is no build step. Every page is a single hand written HTML file you can read top to bottom with View Source, served straight from GitHub. Most of the code was written alongside an AI assistant, one small piece at a time, and a whole post takes that apart.
Set in Century Supra, Segoe UI, and Commit Mono, on a locked forest green. Built in the open.