Design
How this site looks and behaves, shown with the parts it is built from. The written version is DESIGN.md in the repository. When the two disagree with a page, the page is right.
Colour
- bgThe page.
- surfaceHover washes, code blocks, cards, the hover note.
- fgTitles, and text that is the reading itself.
- mutedIntros, blurbs, summaries, quiet links.
- faintLabels, dates, figure labels, inactive nav.
- lineHairlines and borders.
- accentEmber: hover, focus, current, and what a figure points at.
Warm neutrals in oklch, light and dark. Toggle the theme to see the other set.
Type
24 · 500Page titles
17 · 500Section headings in a post
16 · 500Directory titles
15 · 400Body, and the titles of list rows
15 · 500Headings inside content
13 · 400Labels, nav, figure labels, quiet links
12 · monoOct 2026 · Python · CS639
Geist for reading, Geist Mono for values. Two weights.
Lists
Links and notes
An inline link keeps a hairline that warms on hover. A quiet link has none until you reach for it. A marked word (A few extra words, on hover or focus., Desktop only) has a little more to say.
Motion
- ArrivalBlocks rise 8px into place, 620ms, staggered 65ms. Transform only.
- ResponseColour and opacity, 180–350ms, easing out.
- ThemeA soft edge travels down the page; both pages hold still.
- Opening a postThe title glides from the list into the heading. Back cuts.
- OverflowA clipped one-line description scrolls to its end on hover.
Patterns, where they live
TimelineDated entries, hollow markers, status icons/lab
DirectoryHairlines, a mono column, a title, an arrow/notes
CheatsheetSticky concept nav, disclosures, formulas/notes
WorkspaceA tool at the wide measure, or in a dialog/notes
PreviewA project screenshot that opens in place/projects
Post with a figureProse that points at an interactive chart/writing
Figure with viewsTabs across the top, each with its one number/writing