Body copy is Neco, the serif, at 18px on a 1.72 line, for long-form only. Every note on this site renders through this one class, so what you see here is what a post looks like.
Headings carve the page
An h2 earns a rule above it. That’s the only structural furniture in the system: no
boxes, no bars, no accent. Bold switches to the sans deliberately, so emphasis reads
as a change of voice rather than weight.
Smaller headings just get smaller
And they stay in the sans, tight-tracked, so a scanned page reads as an outline.
- Unordered lists get a dash, not a bullet
- The dash is a 7px rule in the gutter, set on the first line’s baseline
- Nesting works, but if you need it, question the writing
- Ordered lists number in the gutter, right-aligned
- Tabular figures, so the column stays true past nine
- The numerals are muted because they’re structure
A quote sits behind a 2px rule and speaks in the ink colour, one size up. Whoever said it
Inline code gets the stage colour and a hairline. Links are underlined at a distance
and the underline inks in on hover, the same gesture as everything else.
// Code blocks stay ink in both themes. Shiki needs a fixed ground, and a block that
// inverts with the page is a block you can't read a diff in.
export const place = (layer: Layer, at: number): Pt => ({
x: CX + RING[layer].rx * Math.sin((at * Math.PI) / 180),
y: CY - RING[layer].ry * Math.cos((at * Math.PI) / 180),
});| Token | Role | Notes |
|---|---|---|
--ink | Primary text and fill | The one ink |
--paper | The page | Warm, not white |
--edge | The 1.5px container border | Every box on the site |
Rules are 1.5px and get 48px of air. Em dashes — like this one — are set tight.