01Foundations

Colour roles

The colour roles this page is rendered with. Roles are resolved from token names; text colours and each action’s resting pair are measured against WCAG AA contrast. Hover, active and disabled variants are matched by name.

Canvassurface/default/page
Texttext/default/default
Text, secondarytext/default/hint
Text, disabledtext/disabled/default
Borderborder/default/default
Focus ringborder/brand/focus
brandresthoveractive
brand-primaryresthoveractive
discountresthoveractive
errorresthover
informationresthover
promotionresthover
successresthoveractive
warningresthover
02Foundations

Type scale

27 text styles, ordered by size. Each specimen is rendered by its own class from the exported stylesheet.

display-xxxlAa Bb Cc 0123
display-xxlThe quick brown fox jumps over the lazy dog
display-xlThe quick brown fox jumps over the lazy dog
display-lThe quick brown fox jumps over the lazy dog
headline-1The quick brown fox jumps over the lazy dog
headline-2The quick brown fox jumps over the lazy dog
displayThe quick brown fox jumps over the lazy dog
headline-3The quick brown fox jumps over the lazy dog
body-18-regularThe quick brown fox jumps over the lazy dog
body-18-semiboldThe quick brown fox jumps over the lazy dog
headline-4The quick brown fox jumps over the lazy dog
subtitle-18-regularThe quick brown fox jumps over the lazy dog
subtitle-18-semiboldThe quick brown fox jumps over the lazy dog
body-16-regularThe quick brown fox jumps over the lazy dog
body-16-semiboldThe quick brown fox jumps over the lazy dog
headline-5The quick brown fox jumps over the lazy dog
headline-6The quick brown fox jumps over the lazy dog
body-14-regularThe quick brown fox jumps over the lazy dog
body-14-semiboldThe quick brown fox jumps over the lazy dog
subtitle-14-regularThe quick brown fox jumps over the lazy dog
subtitle-14-semiboldThe quick brown fox jumps over the lazy dog
body-13-regularThe quick brown fox jumps over the lazy dog
body-13-semiboldThe quick brown fox jumps over the lazy dog
body-12-regularThe quick brown fox jumps over the lazy dog
body-12-semiboldThe quick brown fox jumps over the lazy dog
helper-text-12-regularThe quick brown fox jumps over the lazy dog
helper-text-12-semiboldThe quick brown fox jumps over the lazy dog
03Foundations

Elevation

beautiful-shadow
04Components

Components

Base controls rendered entirely with the system's tokens. In the Button row, the default specimen responds to hover and press; every other specimen is static, painted with the token named beneath it.

Button

defaultButtonhoverButtonactiveButtonfocusdisabled
Tokens: background surface/brand/default · text text/brand/on-color · hover surface/brand/default-hover · active surface/brand/active · focus ring border/brand/focus · disabled text/disabled/default · 12.96:1 on its surface

Input

Tokens: background surface/default/page · text text/default/default · border border/default/default · focus ring border/brand/focus · error border border/error/default · error text text/error/default

Checkbox & Radio

Unchecked✓CheckedRadioSelected
Tokens: checked surface/brand/default · mark text/brand/on-color · border border/default/default

Switch

OffOn
Tokens: track, on surface/brand/default · track, off border/default/default · knob surface/default/page

Select

Choose an option
First option
Second option
Third, disabled
Tokens: field surface/default/page · border border/default/default · selected item surface/brand/default

Tabs

ActiveSecondThird
Tokens: active surface/brand/default · inactive text/default/hint · rule border/default/default

Badges

brandbrand-primarydiscounterrorinformationpromotionsuccesswarning
One badge per family the system names — its word, its tokens.

Alerts

Error. Drawn from its own family's tokens.
Information. Drawn from its own family's tokens.
Success. Drawn from its own family's tokens.
Warning. Drawn from its own family's tokens.
Status families, each in its own surface, text and border.

Card

A cardBorder, corner and shadow are tokens.
Tokens: surface surface/default/page · border border/default/default · action surface/brand/default

Table

NameValue
First rowPlain
Selected rowMarked
Third rowPlain
Tokens: rules border/default/default · heading text/default/hint · selection surface/brand/default
05Patterns

Patterns

Compositions assembled from the components above. Every colour and radius is taken from the tokens; layout spacing is the page’s own.

Form

Check the form. One field still needs a value.
Tokens: action surface/brand/default · field border border/default/default · alert surface/error/default

Page header

Design system Tokens Colour
Colour tokensPrimitives, semantics and where each one is used.
Tokens: breadcrumbs text/default/hint · heading text/default/default · actions surface/brand/default

Filters

Tokens: fields surface/default/page · border border/default/default