The design language of the documentation site (the Astro app in web/) and of the
recordings in media/: a blueprint drawn in the terminal’s own vocabulary —
monochrome, ruled, sharp, keyboard-first. Version: DS-2.0 (2026-10-11).
wr design system
In this document9 pages
01
Rules
Monochrome. Each palette is one hue: a ramp of it for the background, the
02Tokens: the ten colors
Code is highlighted by Shiki in its css-variables mode: the highlighter names the
03Themes
A theme is one block in web/src/styles/tokens.css (html[data-theme="…"]), one
04Type
Role Face Size Notes --- --- --- --- hero Geist Mono 600 clamp(42px, 8.4vw, 108px) tracking -0.065em, line height 0.95 section heading Geist Mono 600…
05Layout
.frame — the page: 1240px wide, centered, between two 1px rails, over
06Components
.head — the header: the wr mark with a block cursor, the version, the
07Motion
Every transition animates opacity, transform or a color; nothing animates
08Keyboard
On the search page ↑ ↓ choose a result and Enter opens it.
09The recordings
media/ holds the sources that produce the frames used above:
The UI, recordedscripts/capture.sh
