Design system

Two layers of tokens and eight components. A page declares content; it does not declare colour, spacing or type.

Principles

The artefact is the argument. An item is a file, so the site shows files and real terminal output rather than describing them. Nothing on the site is typed to look like the program.
Strata, not cards. A cairn is stacked stone. The page is horizontal bands of differing weight, separated by one hairline. Nothing is a rounded box with a shadow.
Monospace is the voice. In this product monospace is how the subject speaks, so headings are set in it. The proportional face is for prose only.
One accent, spent once. Lichen marks the thing you should do next. If it appears twice in a view, one of them is wrong.

Colour

Raw values are named for what they are; semantic tokens are named for the job they do. Components only reference the second layer, so a value changes in one place.

Surfaces

--bgthe page

--bg-sunkena recessed band or a code block

--bg-raisedinline code, a chip

--bg-deepthe heaviest stratum

Ink and edge

--fgbody and headings

--fg-mutedsupporting prose, captions

--accentthe one thing to do next

--borderevery rule and edge

Terminal

The colours the program itself prints. The sample recorder emits the class in the right column, so a terminal on the site is coloured the way a terminal is.

--ansi-dim.d

--ansi-yellow.y

--ansi-blue.b

--ansi-green.g

--ansi-red.r

--ansi-magenta.m

--ansi-cyan.c

Type

A major-third scale, fluid where the jump between a phone and a desk would otherwise be jarring.

The stones are stacked--text-3xlpage title

The stones are stacked--text-2xlsection heading

The stones are stacked--text-xlrarely; a lift within prose

The stones are stacked--text-lgsubheading, lede

The stones are stacked--text-basebody

The stones are stacked--text-smcaptions, navigation

The stones are stacked--text-xsterminal output

The stones are stacked--text-2xsa filename above a terminal

Space

A four-pixel base, doubling loosely. The last two are fluid, because band padding is what changes most across viewports.

--space-1

--space-2

--space-3

--space-4

--space-5

--space-6

--space-7

--space-8

--space-9

Components

Eight, each doing one job. A page composes them; it does not restyle them.

Button

Primary Quiet

primary is the only filled element on the site and should appear once per view.

Lede

The sentence under a heading, muted and held to a shorter measure so it reads as an opening rather than a paragraph.

Callout

Band, Grid and Stack

Band is a horizontal stratum with a tone.Grid collapses to one column below a stated minimum.Stack owns vertical rhythm, so children never carry margins that depend on their neighbours.

Terminal and Prose

Terminal renders a recording fromdoc/samples.json; it cannot show anything the program did not print. Prose styles whatever a Markdown document emits, so writing a document is writing prose.