Colour

Semantic tokens only — values invert at runtime.

Core

System anchors — pure values, not for general fills.

Core Base

White (light) / black (dark) anchor

Core Contrast

Always white — text on coloured fills

Core Invert

Mirror of base

Core Transparent

Zero-alpha base — fade transitions

Fill

Surface backgrounds, from page chrome to elevated cards.

Fill Base

Page background

Fill Primary

Card / elevated surface

Fill Secondary

Input backgrounds

Fill Tertiary

Borders, dividers fill

Text

Type colours — demonstrated as "Aa" on the system page fill.

Text Primary

Body copy, headings

Text Secondary

Supporting text

Text Tertiary

Metadata, captions

Text Contrast

On coloured surfaces

Grey

Solid grey emphasis tokens — never use for body text.

Grey Strong

Heaviest grey block

Grey Core

Solid grey emphasis

Grey Weak

Light grey panel

Outline

Border / rule colour

Transparent

Layered alpha overlays — for hover fills, scrims and dividers.

Transparent Weak

5% — dividers, hairlines

Transparent Core

20% — button hover fill

Transparent Strong

60% — scrim, backdrop

Accent

Semantic status and emphasis colours — inverts to lighter values in dark mode. Aliased as error / warning / success / info on status tokens.

Accent Red

Destructive actions, errors

Accent Orange

Warnings, caution states

Accent Yellow

Highlights, attention

Accent Green

Success, confirmation

Accent Blue

Informational, links