Design system

The tokens, type, surfaces, motion and components this site is built from — every example below is the real thing, not a picture of it.

Colour

20 tokens

Monochrome in two themes, with one green accent (blue on the heatmap). Each chip shows light on the left, dark on the right.

--bg
#fcfcfb / #08080a
Page, rail panel fill
--fg
#111111 / #f0f0f0
Headings, primary text
--muted
#555555 / #a0a0a0
Body copy, links
--soft
#8a8a8a / #6b6b6b
Labels, dates, captions
--line
rgb(0 0 0 / 0.1) / rgb(255 255 255 / 0.1)
Every rule and border
--stripe
rgb(0 0 0 / 0.055) / rgb(255 255 255 / 0.055)
Hatch pattern
--hover
rgb(0 0 0 / 0.03) / rgb(255 255 255 / 0.04)
Row and card hover fill
--card
#ffffff / #0f0f10
Raised surfaces
--chip
#f4f4f5 / #161617
Tags, icon buttons, keycaps
--tooltip
#1e1e20
Tooltip fill (always dark)
--tooltip-fg
#f0f0f0
Tooltip text
--tooltip-muted
#8a8a8a
Tooltip shortcut key
--accent
#16a34a / #4ade80
Status dot, terminal ok, caret
--accent [data-heat="blue"]
#2563eb / #60a5fa
GitHub heatmap and legend
--glass
rgb(255 255 255 / 0.3) / rgb(24 24 27 / 0.3)
Glass fill
--glass-rim
rgb(255 255 255 / 0.9) / rgb(255 255 255 / 0.28)
Glass top-edge highlight
--glass-edge
rgb(0 0 0 / 0.08) / rgb(255 255 255 / 0.06)
Glass outline
--glass-glow
rgb(255 255 255 / 0.7) / rgb(255 255 255 / 0.12)
Glass inner glow
--grid-line
rgb(0 0 0 / 0.07) / rgb(255 255 255 / 0.07)
Backdrop grid lines
--grid-cell
rgb(0 0 0 / 0.045) / rgb(255 255 255 / 0.05)
Backdrop squares that light up

3 families

Instrument Serif for headings, Hanken Grotesk for reading, Fragment Mono for data.

12 tokens

Flat by default. Depth comes from borders, glass and the odd shadow.

Hover to play

Fast, eased out, never bouncy. Everything stops under reduced motion.

Live

The real atoms and molecules, imported straight from the site. Hover and focus them.

30 glyphs

Lucide line icons at 1.75 stroke, plus brand marks from Simple Icons. Always 16px unless a component says otherwise.