v0.9.0
design / Rules

Rules

Monochrome. Each palette is one hue: a ramp of it for the background, the

v0.9.0 01 / 09 2 min read docs/DESIGN.md
  1. Monochrome. Each palette is one hue: a ramp of it for the background, the panels and the lines, and the same hue at full strength as the accent. There is no second color, no status red or green; state is shown with position, weight and the accent.
  2. Flat and sharp. No border-radius, no box-shadow, no text-shadow, no gradient (linear-gradient appears in no file), no blur. One translucency is allowed on purpose: the scrim behind a dialog, whose job is to dim the page.
  3. Lines are the structure. Blocks are separated by a 1px rule. The page is a frame between two vertical rails; every band of it (a sheet) starts with a crosshair + on each rail, like the registration marks of a drawing; the margins outside the frame are hatched; the hero and the closing band sit on a blueprint grid (minor line every 32px, major every 160px).
  4. Two typefaces, one job each. Geist Mono is the interface: headings, labels, keys, code, the status line. Geist is for reading: the lead paragraphs and the prose of the guide. Both are self-hosted variable fonts; the Latin subsets are preloaded.
  5. The program is the reference. The status line, the key caps, the [ 01 ] section labels, the labeled code frames and the ⣿ mark are the shapes wr draws, so the docs read like a page opened in the reader.
  6. The keyboard first. Everything has a key (see Keyboard); the mouse is never required and the keys are discoverable from the page itself.
  7. Adaptive, not decorative. The page follows prefers-color-scheme when no theme is chosen; a chosen theme is remembered in localStorage and can be linked (?theme=phosphor). Motion is always on (DS-1.1 removed the reduced-motion gate by product decision), but it is small: one transition per state change, no parallax, nothing that loops except the cursor and the product window, which pauses under the pointer and off screen.