Color
Roles first. The page wash, ink, and one primary carry almost everything. The accent stays rare, and semantic colours describe state rather than decorate.
warning and red
on danger, so brand accent never doubles as status.
Brand roles and status roles stay separate; see
Material Design 3 colour roles
and the
Adobe Color wheel
for harmony types.
Brand
Brand stripe
The 5px rule under the live site header. Gold to magenta to blue.
A divider under dark chrome, not a wash. Token
--cds-brand-stripe, class .cds-brand-stripe.
Paper and ink
Semantic
State only. Do not borrow danger red for emphasis or
success green for brand decoration.
Primary ramp
Five steps for charts, illustrations, and progressive emphasis. Use it deliberately, not as general decoration, and keep chart series far enough apart to stay legible at small sizes.
--cds-primary-1 … --cds-primary-5
Pairing rules
on-* token. Recheck the
matrix if you change a fill.
| Fill | Text token | Sample |
|---|---|---|
primary |
on-primary |
Sign in |
accent |
on-accent |
Book a call |
surface-dark |
on-dark |
Callout title |
primary-soft |
primary-deep |
Selected |
Accessibility matrix
Rows are backgrounds. Columns are text colours. Each cell is the
live pair plus its WCAG 2 ratio. Ratios are computed from the
--cds-* tokens on this page, so a customize run
updates the grid. Look at on-primary on
primary and primary-deep — that is the
primary button at rest and on hover.
Prefer AAA or AA for body copy, labels, and buttons. AA large is headings and oversized stats only. Fail means pick another pair.