epro-console

Token specimen — S2.3. Every pair below is computed by npm run check:a11y.

Theme

Surfaces

This panel is --c-surface on the page’s --c-ground.

ground
rail
surface
surface-alt
hover
selected

Text

Primary text is --c-text, not pure white and not pure black. Pure white on #0b0d13 is about 18:1, which is right for a headline read once and fatiguing for a table read all afternoon.

Secondary text carries the same sentence at one step down, for a value that has been read already.

Muted text sits near 4.7:1 on the darkest surface a paragraph can land on, so it clears AA as body text and not only as large text. That line is where admin themes usually fail.

An accent link, which is the accent as a label

State

successwarningdangerinfo
confirmedpendingcancelleddraftselected

Fills

Controls, on the second surface step

This panel is --c-surface-alt. The boundary below is 3.10:1 on light and 3.54:1 on dark — the tightest pair in the palette. Tab into it: the focus ring is two rings, the inner one the ground colour, so it reads on any surface.

Density and numerals

ReferenceAmount
EPRO-10421.250.000
EPRO-104398.000

Row height is --row-h, 36px under a pointer and 44px under a finger. The figures are tabular, so they are compared before they are read.