Theme engine

Three inputs — a background, an accent, and a contrast — generate the entire token set. Every surface, text tier, border, control, and status colour is derived in OKLCH and contrast-solved, so the whole UI re-themes from one seed.

Drive the seed from the System Controls rail (top-right). Every colour, contrast number, and curve below is recomputed live from the engine — these are the guarantees, measured.

Surfaces

body text legibility on each surface

bg-1

APCA 10720.0:1

bg-2

APCA 10619.3:1

bg-3

APCA 10618.8:1

bg-4

APCA 10518.1:1

bg-5

APCA 10517.2:1

bg-6

APCA 10416.2:1

bg-sunken

APCA 10820.7:1

Text

each tier vs the canvas

fg-1

APCA 10720.0:1

fg-2

APCA 7812.8:1

fg-3

APCA 588.6:1

fg-4

APCA 385.2:1

link

APCA 629.4:1

Controls

control label on each state

control-2

APCA 10618.3:1

control-2-hover

APCA 10416.7:1

control-2-selected

APCA 10315.4:1

control-3

APCA 10719.5:1

control-3-hover

APCA 10618.4:1

control-3-selected

APCA 10517.8:1

Status

each status colour vs the canvas

success

APCA 568.2:1

warning

APCA 7211.6:1

danger

APCA 456.3:1

info

APCA 558.1:1

The colour space

accent

The sRGB gamut at lightness 0.7, every hue filled to its cusp. The dashed line marks the active accent — drag the accent in System Controls and watch where it lands on the skyline.

The light surface ramp

canvas L 0.137

top surface (bg-6)white ceiling

The six light surface rungs across the contrast knob — they fan apart yet never reach the white ceiling.

APCA vs WCAG

AA floor

light canvas (L 0.92)dark canvas (L 0.17)

The same APCA target buys less WCAG on a light canvas than a dark one — read across at any height.