Colour
Written in two layers. Primitives hold the raw values and are the only place a hex appears; semantic tokens reference them and say where a colour is used. Components reference the semantic layer, never a primitive.
Neutral ramp
Thirteen steps. Click a swatch to copy its hex.
How the semantic layer maps back: 900 → brand / values · 600 → field labels · 500 → helper text · 400 → disabled / ruler numbers · 300 → input strokes / slider track · 200 → overlay strokes · 100 → segmented track · 25 → board
A consistent cool cast reads as clean; leftover chroma reads as dirty
Every step of this ramp leans cool, with an RGB spread reaching 19–26 through the mid-tones. That is deliberate, not a ramp someone forgot to neutralise.
The cool cast is consistent and committed: every step shares a hue direction, with an RGB spread of 19–26 through the mid-tones. That is deliberate, not a ramp someone forgot to neutralise. Low-chroma greys land in the ambiguous zone — not neutral enough to read as grey, not cool enough to read as cool grey. Be fully neutral or be decisively cool. The one place pure neutral grey is used is the ruler ticks: a uniformly cool interface with neutral instrument markings, each coherent on its own terms.
The one exception is the ruler ticks, which use pure neutral grey. A uniformly cool interface and neutral instrument markings each hold up on their own terms without interfering.
Four text steps, each roughly half the contrast of the one above
→ neutral-900
→ neutral-600
→ neutral-500
→ neutral-400
Spread the four steps evenly, each about half the one above. The eye reads ratios, not absolutes: 17.7 and 12.4 land as the same step, while the jump from 4.8 to 2.5 is unmistakable. Only with four evenly spaced steps does "make the label step back" have somewhere to land.
Three stroke steps, each with a clear job
stroke-dividerstroke-defaultstroke-inputSignal hover with a heavier stroke, not a lighter fill. surface-subtle and background-input sit very close together in light mode, so changing the fill often changes nothing visible; lifting the stroke from stroke-input to stroke-strong always shows.
Board and ruler
The board surface canvas-surface sits just one step below the panels' white. The board must not be darker than the panels — a dark board pulls attention away from the artifact.
The ruler is instrument chrome in three descending layers: numbers 2.47:1 · major ticks 1.64:1 · minor ticks and grid 1.22:1. Against the artifact's own 19.2:1, that ladder says exactly one thing — legible when you look for it, invisible when you don't.
Brand and emphasis
Brand sits one step darker than body text — the primary button, the filled part of a slider and the on state of a switch should outweigh the text, or the hierarchy inverts. The emphasis red appears at most once per screen, on whatever costs money, spends credits, or cannot be undone. Its force comes entirely from scarcity: two red buttons on one screen is the same as none.
Semantic colours come in pairs
Lots of pieces, so the preview is computed in stages. The exported cut file is unaffected.
Parameters saved.
The shortest edge of a piece is 9.52 mm. Below 12 mm the pieces get hard to handle and snap easily. Use fewer rows and columns, or enlarge the board.
Width must be between 40 and 900 mm.
Subtle tint for the fill, the solid colour for the icon, and the message itself stays text-primary. Coloured text on a tinted background is the most common accessibility mistake in status messaging — warning on warning-subtle looks tidy and lands well under 4.5:1.