SYSTEM

Colour

Black ink on warm paper, and one red that only ever means a state.

Foundations

Aa Body text on paper --foreground on --background
Aa Headings, rules, buttons --ink on --background
Aa Text on an ink fill --chip-fg on --ink
Aa Text on a state fill --state-fg on --state
Aa Labels and secondary text --muted-foreground on --background
Aa The culture, a step back from the ink --tissue on --background
Point at me --state is only ever a state

Tokens

Token Light Dark Now Role
--background Page ground (paper)
--foreground Body text
--accent Legacy names. hover:bg-ink-deep resolves to red through them. Prefer --state in new code
--muted Code background, secondary text and labels, hairlines
--muted-foreground Code background, secondary text and labels, hairlines
--border Code background, secondary text and labels, hairlines
--ink Resting ink: headings, emphasis rules, buttons, the rail field
--ink-deep Legacy names. hover:bg-ink-deep resolves to red through them. Prefer --state in new code
--plate Neutral ground behind a print while it loads, behind avatar initials, and under the assistant's turns in a chat excerpt. Also the stage of the era slideshow, whose pictures are letterboxed. Never a card panel or a row tint (Oct 2026)
--canvas The system specimens' canvas: the flat field, with no edge, that a component is shown on, on the bench, in each state's well and on the index's plates (Components, System specimens). Only there (Oct 2026, Shan's call)
--chip-fg Text on an ink fill
--state The only red. Focus, hover, active, current
--state-fg Text on a state fill
--rail-tissue The document rail's axon and nodes ahead of the reader, on the ink field (Motion, 6). Replaced --rail-progress, the progress fill's tone, in Oct 2026
--rail-hairline The hairlines under the rail's TOC rows: --border's role, one step up from the ink field
--tissue The hero's neural culture. A step back from the ink so the wordmark stays the strongest mark in the hero (Oct 2026)
--ground-tissue The ground: the faint tissue under every page (Motion, 14). Replaced --grid and the 48px hairline lattice in Oct 2026
--img-ink Dithered imagery. One ink in both themes; only the paper dims. See Imagery
--img-paper Dithered imagery. One ink in both themes; only the paper dims. See Imagery
--diagram-ground The panel behind a diagram drawn on white (Figure plate). White in both themes so it meets the image's own white edge without a seam
--scrim The wash behind a layer over the page (the contact popover, the all-work modal). Flat and translucent: replaced the contact popover's 75% Bayer halftone in Oct 2026, which broke the text and pictures behind it into hollow, outlined ghosts and read as noise rather than the page stepping back. The all-work modal's hardcoded black 70% moved onto it the same month

Read from src/styles/global.css (:root and .dark) and the guide’s colour table at build time. “Now” is the live token, so it follows the theme switch.

Where red is allowed

  • Keyboard focus: 2px --state outline, 2px offset, everywhere. On an ink field the outline switches to --chip-fg; on a state fill, to --state-fg.
  • Text selection: --state at 28%.
  • Hover: link text and its developing underline, a button's rule, a hot cell (an icon control, the end of a solid button, which burns --state across its fill), menu item text and its hairline, TOC row text, and the title and caption rule of a work plate or a writing row (Motion, 11 and 13). Nothing turns red by changing a border: there are no borders round items (Rules and edges).
  • Active / current: the current section's node on the rail's axon, the open menu button (a --state cell on the rail), the current section in the site menu (a filled --state row), and the open laboratory experiment (its cell and name, Motion, 12), and the visitor's planted cell in the hero (its body only, Motion, 3), with its seed while the press is held. A touch on the hero answers with a brief --state luminance, a disc of grain that fades in under a second (Motion, 3): red as the active state, never left standing. Everything the lab culture fires prints in ink, not red (Oct 2026); the hero's planted cell fires in tissue grain round its red body.
  • A picture of activity (Oct 2026, Shan's call): the cover of "Fast is a design decision" (src/assets/blog/performance-is-design/signal.webp) prints a signal cascading through a culture, and the signal (pulses, the paths they have crossed, the cells they fired) is in --state; the resting culture stays --tissue on paper. It is red for the same reason as the planted cell: what it shows is the active state. One file serves both themes, so the red is the light theme's #d63a00. The post's link preview uses this image, so that preview is red too. The exception covers this one illustration, not image ink in general.

Ink fields

The rail and the mobile header are solid --ink fields with --chip-fg content. There is one such field per page, and none on the agents view, which has no chrome (Components, For agents); the one exception is a system specimen, which shows a control on a field of its own (Components, System specimens). Every field carries .sh-on-field. In the dark theme --ink is the light text colour, and a paper-white bar beside a dark page glares, so global.css re-scopes the tokens on .sh-on-field to a raised dark panel (Oct 2026; it named #ink-rail and #site-header) (--ink: oklch(24% …), --chip-fg: oklch(92% …)). Anything that pops out of a field onto paper, such as the rail's flyout labels, must use --foreground, not --ink, because it sits inside that scope.

Decisions

  • Nothing at rest is red

    Red is a state: focus, hover, active, current. Anything else in red is a bug: headings, rules, borders at rest, list markers, image ink, the rail, OG cards.

  • Two-ink dropped

    The red “two-ink” system of July 2026 went with the September retheme, with the peach plate.

  • Scrim

    A flat translucent wash replaced the contact popover’s 75% Bayer halftone in Oct 2026, which broke the text and pictures behind it into hollow, outlined ghosts.

  • One image ink

    The dark ink had been a step no one could see; one ink in both themes lets the phone carousel ship one print (Oct 2026).

  • Plate

    A neutral ground behind a print while it loads, never a card panel or a row tint (Oct 2026).