foundation
Styleguide
The complete reference for Ground Control — every token, type size, texture, and component variant in one place. Use the header toggle to flip the whole page between light and dark; every token below flips with it. For the story behind these choices, read the design language behind this site →.
live preview
surfaces
Three stacked greys give depth without borders. bg is the page, surface lifts cards above it, and surface-2 insets panels within a card. All three flip in dark mode.
hairlines
Structure comes from 1px lines and whitespace, never heavy borders or shadows. line handles most splits; line-strong is for the rare divide that needs to assert itself.
text
Four ink weights build hierarchy without reaching for color. ink for headings, ink-2 for body, muted for meta, and faint for the quietest labels.
The quick brown fox — ink
The quick brown fox — ink-2
The quick brown fox — muted
The quick brown fox — faint
steel & spot
Steel is the accent family — steel/deep for links, soft/wash for fills and tints. spot (burnt orange) is the once-per-page pop; it appears here as a swatch only.
type — display / body / mono
Three faces do all the work: Bricolage Grotesque for display, Newsreader serif for reading at length, and IBM Plex Mono threading the machine voice through every label, date, tag, and code block.
Ground Control
Bricolage Grotesque
Body copy is set in Newsreader, a serif that reads warm at length. Italic threads in for emphasis without breaking the calm editorial rhythm of the page.
mono · IBM Plex Mono · 2026-06-09 · #the-connective-tissue · const status = "nominal";
textures
Texture, never decoration — both sit at low opacity so they never announce themselves. Halftone warms a flat surface; gridlines lend the quiet feel of engineering paper.
pills / badges
Mono tags that classify content at a glance — content type, category, or status. Solid and steel carry the most weight; ghost recedes for secondary labels.
buttons
Four weights for four jobs: solid for the primary action, steel and ghost for secondary, and link for inline calls to action inside prose.
project card · list rows
The two surfaces writing and work live on: a featured ProjectCard with a thumbnail for things worth pulling forward, and the calm dated ListRow for the running archive.
Stateless polling with overlapping windows
How a 10-min poll with a 15-min lookback kills stored state entirely — and triggers clean Cloudflare deploys.
The one-spot color rule
Why scarcity reads as confidence in a muted palette.
Notion image URLs expire in an hour
Download at build time, rewrite the markdown, or the site silently breaks.
comic panel — the one loud thing
The single loudest element, used at most once per screen — an ink-framed figure with a hard offset shadow and a slight tilt. The frame flips with the theme; the avatar keeps its own black backdrop.
terminal — ghosted Tron · all code
Every fenced code block on the site renders in this chrome — faint grid, drifting scanlines, window dots, a low cyan glow. By design it stays dark in both light and dark mode; it's the one surface that never flips. Syntax maps to a fixed set of tones, shown in the legend below.
// ground control — one loud thing
const palette = ["steel", "ink", "spot"];
function ship(work: string) {
return `shipped ${work} ✦`;
}