Design system

One file is allowed to contain a hex literal.

Tokens come in three tiers: raw ramps, semantic names remapped per theme, and component values that reference only the semantic tier. Components touch the top two tiers and never a raw colour.

Semantic tier

Sixteen names the whole product speaks.

--wft-bg-0page

--wft-bg-1panel

--wft-bg-2raised / hover

--wft-bg-sunkchrome

--wft-ink-0values

--wft-ink-1secondary

--wft-ink-2labels

--wft-ink-3axis ticks

--wft-updelta up

--wft-downdelta down

--wft-flatbelow precision

--wft-accentattention

--wft-engineforecast ink

--wft-baselinebaseline

--wft-scenariobranch paths

--wft-unboundno connector

Type

Six sizes, and what each is for.

mega34px

the one number a panel exists for

quote22px

headline quote

kpi17px

panel statistics

cell12.5px

the workhorse — every grid body cell

label10.5px

column headers, uppercase, tracked

micro9.5px

axis ticks, provenance chips

Direction is earned, attention is not approval

A number only takes colour when it moved against something.

+1.24%up

A delta against a stated reference.

−0.86%down

Same rule, other direction.

0.00%flat

Below displayed precision — not up.

—no value

Never zero, never a dash pretending to be one.

1,284.06stale

Colour withdrawn once the value ages out.

1,290.10engine

A model number, in ink no fact may use.

Density, not zoom

Three densities. Relaxed is the touch profile.

compact

20px rows · 4px gutter

normal

24px rows · 6px gutter

relaxed

30px rows · 44px targets

Decisions recorded, not assumed

Direction needs a reference

A number is only coloured when there is a defined thing it moved against. An absolute level is never green.

Attention is not approval

Gold means "this carries an asterisk". It never means good and never means up — that is why it also marks unbound panels.

Engine ink is reserved

One token carries everything the model says, and observed numbers are never drawn in it. Prediction versus fact becomes pre-attentive.

Stale loses colour

A green that is no longer true is worse than no colour at all, so muting overrides direction entirely.

Heat is not up/down

Correlation and z-score use a separate diverging ramp. A correlation of −0.9 is not "bad".

Contrast measured

Every text token meets AA against its own theme’s panel background, checked with alpha compositing rather than assumed from hex values.