Design tokens

Theming

Every colour is a CSS variable. The dark console language is the default; light is the same components with a swapped token set under :root[data-theme="light"]. Use the toggle in the top bar to see any swatch or component flip.

The one rule

Colour carries severity, never category. Neutral ink and paper are the default for all structure and text. A colour appears only when it means something a user must act on: in use, stale, fresh, the primary action. If you cannot name the severity a colour communicates, remove it.

Surfaces

--ink

--ink-1

--ink-2

--ink-3

--ink-4

Content and rules

--paper-strong

--paper

--paper-dim

--paper-faint

--rule

--rule-hot

Severity

--signal

--amber

--sage

--stone

Switching theme

// dark is the default (no attribute)
document.documentElement.removeAttribute("data-theme");

// light swaps the token set
document.documentElement.setAttribute("data-theme", "light");