Design tokens
Every colour pair the product is allowed to compose, and every state a component can be in. Switch the theme and nothing below should become unreadable.
Colour pairs
Each row is checked by the contrast test at build time and by axe-core in the browser.
fg on bg
body text on the page — minimum 4.5:1
fg on surface
body text on a card — minimum 4.5:1
fg on surface-muted
body text on a muted panel — minimum 4.5:1
fg on surface-raised
body text in an overlay — minimum 4.5:1
fg-muted on bg
secondary text on the page — minimum 4.5:1
fg-muted on surface
secondary text on a card — minimum 4.5:1
fg-muted on surface-muted
table header text — minimum 4.5:1
fg-subtle on bg
hint and helper text — minimum 4.5:1
fg-subtle on surface
hint text on a card — minimum 4.5:1
accent on bg
a link, and a quiet button label — minimum 4.5:1
accent on surface
a link on a card — minimum 4.5:1
accent on accent-subtle
a selected navigation item — minimum 4.5:1
accent-fg on accent
the primary button label — minimum 4.5:1
accent-fg on accent-hover
the primary button, hovered — minimum 4.5:1
accent-fg on danger
the destructive button label — minimum 4.5:1
accent-fg on danger-hover
the destructive button, hovered — minimum 4.5:1
ok on bg
a succeeded state as text — minimum 4.5:1
ok on ok-subtle
a succeeded badge — minimum 4.5:1
warn on bg
a warning as text — minimum 4.5:1
warn on warn-subtle
a warning badge — minimum 4.5:1
danger on bg
a failed state as text (P5) — minimum 4.5:1
danger on danger-subtle
a failed badge (P5) — minimum 4.5:1
pending on bg
a pending state as text (P5) — minimum 4.5:1
pending on pending-subtle
a pending badge (P5) — minimum 4.5:1
missing on bg
a missing state as text (P5) — minimum 4.5:1
missing on missing-subtle
a missing badge (P5) — minimum 4.5:1
border-strong on bg
an input outline must be visible — minimum 3:1
border-strong on surface
a control edge on a card — minimum 3:1
border-strong on surface-muted
a table rule — minimum 3:1
ring on bg
the focus ring (T-I3-01) — minimum 3:1
ring on surface
the focus ring on a card — minimum 3:1
ring on surface-muted
the focus ring on a muted panel — minimum 3:1
Type scale
One step per role, not a free choice.
Display
Page title
Section title
Card title
Body text, the default for anything a user reads.
Secondary text and table cells.
Hints, timestamps and helper text.
Buttons
Including the states a happy path skips: disabled, and in flight.
Honest states
Pending, failed and missing are rendered states, never a blank area (P5).
Upload pending
Delivery failed
Not found at the provider
Verified
Empty, loading, error — as components
Story I2. A region that has nothing, is waiting, or failed never renders as a blank area (T-I2-02). All three share a shape so swapping between them does not move the page.
No contributions yet
Loading contributions
Could not load contributions
req_7f3a91c4A screen that is in the navigation but not written yet
Form controls
Label, hint, error and required state are wired by the Field component.
A form
Nothing here is submitted; this is the component set.
Either one works.
Enter an email address or a phone number.
Dates render in the property's timezone, not yours.
Optional. Off by default, and you can change it later.
This screen is a component showcase. It records nothing and decides nothing.