Practice
The system, applied.
The surfaces below are rebuilt from the tokens, on this page, using nothing the system does not define. They are illustrations of the rules, not renders of shipped components — but every colour pair in them is measured against the same floor the products answer to, every time this page is built.
The one glass surface
The system has a single translucent treatment, and it is reserved for the figure a view exists to show. Everything else — every list row, every panel, every secondary card — is a plain surface. The restraint is what gives the treatment meaning: a view with two anchors has none.
Balance anchor
The headline figure a forecast opens with, on the one glass surface the system allows.
Lowest projected balance
$412.80
on 14 March, 6 weeks out
This week
$1,204.00 scheduled across 6 items
What this is built from
Composed from 10 tokens. Every text pair below is measured against the same floor the products answer to, in both themes, when this page is built.
-
--muted-foregroundon--cardThe label above the figure -
--foregroundon--cardSupporting figures beneath the anchor
Glass on an ordinary card
Applied to a list item or a secondary panel, the treatment stops marking anything. It also costs real performance — a blurred backdrop is expensive to composite, and paying that for a row that carries no special meaning is the worst of both.
Status, and the tint trap
Badges are the most common place a contrast rule quietly breaks, because the pairing that
gets checked is rarely the pairing that renders. Each badge below uses the
-on-tint variant of its own hue over a wash of that hue, which is the composition
the reader actually sees.
Status row
A row carrying state — the badge idiom, and the reason the -on-tint tokens exist.
Each badge states its meaning in words; the colour only reinforces it.
What this is built from
Composed from 9 tokens. Every text pair below is measured against the same floor the products answer to, in both themes, when this page is built.
-
--primary-on-tinton--cardover--primary/14%Informational badge on its own tint -
--warning-on-tinton--cardover--warning/14%Attention badge on its own tint -
--destructive-on-tinton--cardover--destructive/14%Blocking badge on its own tint -
--muted-foregroundon--cardRow supporting text
The state survives a greyscale printout, a high-contrast mode, and a reader who does not distinguish the hue.
A dot encodes the state and nothing else does. To a reader who cannot separate it from the other dots, this row says only "car insurance".
Forms
Fields follow the label rule, mark what is required rather than what is optional, and put validation messages beneath the field they concern in the destructive text colour — never as a colour change alone.
Form field
A labelled input, its optional/required marking, and its error state.
Pick a start date so the schedule can be projected forward.
What this is built from
Composed from 6 tokens. Every text pair below is measured against the same floor the products answer to, in both themes, when this page is built.
-
--muted-foregroundon--cardField label -
--foregroundon--cardEntered value -
--destructive-on-tinton--cardValidation message -
--muted-foreground-subtleon--cardPlaceholder text
Say what to do, not what went wrong
Validation copy names the next action. "Invalid input" describes the system's state; "pick a start date so the schedule can be projected forward" describes the reader's.
Data colour
Series colour is a separate set from status colour, and strokes use the dedicated stroke tokens rather than raw palette entries — the palette includes hues that are too light to clear the 3:1 floor for non-text marks on a light surface.
Chart series
Data colour, kept strictly apart from status colour — and drawn with the stroke tokens rather than the raw palette.
What this is built from
Composed from 6 tokens. Every text pair below is measured against the same floor the products answer to, in both themes, when this page is built.
-
--chart-forecaston--cardProjected series stroke — a non-text mark, so the 3:1 floor applies -
--chart-actualon--cardRecorded series stroke -
--chart-favorableon--cardFavourable variance mark -
--chart-tickon--cardAxis tick labels — text, so the full 4.5:1 applies
Borrowing a status hue for a series
A series drawn in the warning colour tells the reader something is wrong with that data. If the data is merely data, the chart has made a claim the numbers do not support.
Keeping these honest
A reconstruction is a hand-built picture of something that lives elsewhere, so it can fall behind. Two things guard against that, and it is worth being precise about which does what.
- Automatic. Each reconstruction declares the tokens it composes and the text pairs it renders. Those tokens are asserted to still exist, and those pairs to still clear their floor in both themes — with any tint composited the way the surface paints it. A renamed token or a drifted value fails the build.
- Procedural. No test can see that a surface was redesigned. A change to a governed surface updates its reconstruction in the same change, the same way a change to a user-facing journey updates its test plan.
And the honest disclaimer
Between those two, these remain illustrations of rules rather than renders of components. That is why the page says so rather than presenting them as the real thing — the claim it makes is one it can keep.