One neutral ramp
There is no brand colour. The whole site is a single cool grey ramp carrying a trace of blue, and each theme picks its surfaces and inks from the same ramp.
#f2f4f6paper#e4e7ealight page#d3d7dclight panel#b4bac2light rule#6b737dborder#555c66muted ink#2a3037dark rule#191d21dark panel#0d0f11dark page
Neither end of the ramp is pure. The light page is #e4e7ea, not white,
and the dark page is #0d0f11, not black — the page should read as paper
with ink on it rather than as a light box or a void.
With no hue there is nothing to mean danger and nothing to mean success. States separate by weight and tone, and anything that has to be unmistakable says so in words instead of borrowing a colour the palette does not have.
A flat type scale
Cascadia Mono sets
everything — headings, body, navigation, code. There is one size:
h1 through h6 are the same 0.875rem as body
text. A heading is marked by uppercase, weight and letter-spacing, and in prose by a
literal ## printed in front of it.
That is the rule the whole design rests on, so nothing is allowed a
font-size of its own. The one exception is a health metric, which is a
quantity being read as a number rather than a heading.
Hairlines, and nothing that moves
Every border is 1px and every corner is square. There are no drop
shadows, apart from a single hard 5px 5px offset on the shortcuts
dialog, which is the only surface that genuinely floats above the page.
Hovering inverts foreground and background. Nothing lifts, slides or scales, so the focus ring stays the only cue that means focus — when hover moved an element, keyboard focus had no distinct signal left.
One column
Navigation, content and footer are all capped at 80ch and start at the
same left edge. Collection listings are dated rows separated by a hairline rather
than a grid of cards: at this measure a grid has nowhere to go, and a list is faster
to scan.
Built with
Astro 5 in static mode, TypeScript in strict mode, and hand-written CSS. No Tailwind, no CSS-in-JS, no UI framework — the design system is one stylesheet of custom properties.
Content is markdown in Astro's Content Layer, validated by Zod schemas. Adding an
entry means dropping a .md file in a folder; it appears on the homepage,
its list page, search and tags without any
other change.
Every page is registered in one route table, which drives the navigation, the footer, the 404 suggestions, the sitemap, the terminal's commands and the ? shortcut overlay. A page that is not in the table is invisible to all of them, which is deliberate — it makes forgetting impossible rather than merely unlikely.
The site builds to static HTML and is deployed on Coolify. There is no server runtime and no database.
Accessibility
Contrast is computed against the background an element actually renders on, not guessed. Body text clears 4.5:1 in both themes and control borders clear 3:1. Keyboard focus is always visible, there is a skip link ahead of the navigation, and keyboard shortcuts are suppressed whenever you are typing.
The full history of changes is on the changelog.