Colour

Semantic colour tokens named by the job they do in the interface, not by their hex value — the foundation for consistent, themeable UI.

Semantic colour tokens are named by what the colour is used for in the interface, not by its hex value – for example, color.text.primary or color.background.success. They form the base for consistent, themeable UI.

This means:

UI stays consistent across teams and platforms.
Products can support different themes (light/dark and brand themes) without renaming tokens.
Accessibility can be improved and maintained in one place.

Theming model

All themes share the same token names.

Light and dark mode do not introduce new tokens.
A theme changes the value of a token, not its name.

Avoid creating tokens like ...light or ...dark, as this leads to duplication. Instead, use existing semantic tokens and let the theme handle the value.

How to pick the right colour token

Start from the context – what surface are you on (canvas, subtle, elevated, inverse)?
Choose tokens that match that surface – for example ...primary/secondary/tertiary or ...inverse / ...on-*.
For interactive UI, use the interactive tokens for the right variant (primary, secondary, outlined, etc.) to keep hover/pressed states consistent.

Avoid using primitives or raw values in product code. If a suitable semantic token doesn’t exist, contact the CDS team.

Token reference

Values are defined per theme in the token packages. The table below describes how each token is used.

Background

Token	Use
`color.background.backdrop`	Backdrop/scrim behind overlays and modals.
`color.background.sheet`	Non-interactive background.
`color.background.brand.accent`	Brand surface (accent). Use when attention is the absolute priority.
`color.background.brand.primary`	Brand surface (primary). Use for brand blocks, banners, and key actions.
`color.background.brand.secondary`	Brand surface (secondary). Use for brand blocks and banners.
`color.background.brand.tertiary`	Brand surface (tertiary). Use for brand blocks and banners.
`color.background.canvas`	App/page canvas background (lowest layer).
`color.background.elevated`	Use for surfaces that appear above the main content, such as modals, flyouts, and dropdowns.
`color.background.feedback.critical`	Feedback surface for critical messages, such as alerts and banners.
`color.background.feedback.destructive`	Feedback surface for destructive messages, such as alerts and banners.
`color.background.feedback.neutral`	Feedback surface for neutral messages, such as alerts and banners.
`color.background.feedback.success`	Feedback surface for success messages, such as alerts and banners.
`color.background.feedback.warning`	Feedback surface for warning messages, such as alerts and banners.
`color.background.inverse`	Inverse surface used in dark-on-light / light-on-dark contexts.
`color.background.pricing.discount`	Pricing surface for discount contexts.
`color.background.pricing.member`	Pricing surface for member contexts.
`color.background.subtle`	Subtle surface for low-emphasis containers (e.g. section backgrounds).
`color.background.transparent`	No background colour – the element takes on the background of its parent surface.

Text

Token	Use
`color.text.brand.on-accent`	Text on brand on-accent surfaces.
`color.text.brand.on-primary`	Text on brand on-primary surfaces.
`color.text.brand.on-secondary`	Text on brand on-secondary surfaces.
`color.text.brand.on-tertiary`	Text on brand on-tertiary surfaces.
`color.text.feedback.error`	Standalone error text (e.g. inline validation).
`color.text.feedback.on-critical`	Text on feedback critical surfaces.
`color.text.feedback.on-destructive`	Text on feedback destructive surfaces.
`color.text.feedback.on-neutral`	Text on feedback neutral surfaces.
`color.text.feedback.on-success`	Text on feedback success surfaces.
`color.text.feedback.on-warning`	Text on feedback warning surfaces.
`color.text.highlight`	Highlight text, such as selections and emphasis, on default surfaces.
`color.text.inverse`	Text on inverse surfaces.
`color.text.pricing.on-discount`	Text on pricing discount surfaces.
`color.text.pricing.on-member`	Text on pricing member surfaces.
`color.text.primary`	Primary body text on default surfaces.
`color.text.secondary`	Secondary/supporting text on default surfaces.
`color.text.tertiary`	Low-emphasis text, such as metadata and hints, on default surfaces.

Icon

Token	Use
`color.icon.brand.accent`	Brand icon colour (accent). Use when an icon should be emphasised.
`color.icon.brand.on-accent`	Icons on brand on-accent surfaces.
`color.icon.brand.on-primary`	Icons on brand on-primary surfaces.
`color.icon.brand.on-secondary`	Icons on brand on-secondary surfaces.
`color.icon.brand.on-tertiary`	Icons on brand on-tertiary surfaces.
`color.icon.brand.primary`	Brand icon colour (primary). Use when an icon should be brand-coloured.
`color.icon.brand.secondary`	Brand icon colour (secondary). Use when an icon itself should be supporting.
`color.icon.brand.tertiary`	Brand icon colour (tertiary). Use when an icon itself should be decorative.
`color.icon.feedback.error`	Standalone error icons, for example inline validation.
`color.icon.feedback.on-critical`	Icons on feedback critical surfaces.
`color.icon.feedback.on-destructive`	Icons on feedback destructive surfaces.
`color.icon.feedback.on-neutral`	Icons on feedback neutral surfaces.
`color.icon.feedback.on-success`	Icons on feedback success surfaces.
`color.icon.feedback.on-warning`	Icons on feedback warning surfaces.
`color.icon.highlight`	Highlight icons, such as selected states, on default surfaces.
`color.icon.inverse`	Icons on inverse surfaces.
`color.icon.pricing.on-discount`	Icons on pricing discount surfaces.
`color.icon.pricing.on-member`	Icons on pricing member surfaces.
`color.icon.primary`	Primary icons on default surfaces.
`color.icon.secondary`	Secondary/supporting icons on default surfaces.

Stroke

Stroke tokens cover borders, dividers, and outlines.

Token	Use
`color.stroke.brand.on-accent`	Stroke on brand on-accent surfaces.
`color.stroke.brand.on-primary`	Stroke on brand on-primary surfaces.
`color.stroke.brand.on-secondary`	Stroke on brand on-secondary surfaces.
`color.stroke.brand.on-tertiary`	Stroke on brand on-tertiary surfaces.
`color.stroke.divider`	Default dividers (list separators, table grid).
`color.stroke.feedback.critical`	Stroke for feedback critical surfaces.
`color.stroke.feedback.error`	Standalone error stroke (e.g. invalid input outline).
`color.stroke.feedback.neutral`	Stroke for feedback neutral surfaces.
`color.stroke.feedback.success`	Stroke for feedback success surfaces.
`color.stroke.feedback.warning`	Stroke for feedback warning surfaces.
`color.stroke.highlight`	Highlight stroke (selection, focus-adjacent decoration).
`color.stroke.pricing.discount`	Stroke for pricing discount contexts.
`color.stroke.pricing.member`	Stroke for pricing member contexts.
`color.stroke.strong`	High-emphasis stroke (strong outlines, emphasis separators).
`color.stroke.subtle`	Low-emphasis stroke (borders on quiet surfaces).
`color.stroke.transparent`	Transparent stroke used to reserve space without visual border.

Interactive colours

Interactive colour tokens are used for components with different states, such as buttons, controls, and cards (clickable surfaces).

Default / hover / pressed are defined as separate tokens to keep behavior consistent.
Don’t create your own hover states in product code, for example by combining background and opacity.

Cards (clickable surface)

Token	Use
`color.interactive.card.background`	Interactive component container.
`color.interactive.card.background-hover`	Interactive component container on hover/focus (pointer).
`color.interactive.card.background-pressed`	Interactive component container on pressed/active.
`color.interactive.card.icon`	Icon colour.
`color.interactive.card.text`	Text colour.

Links

Token	Use
`color.interactive.link.text`	Text colour.
`color.interactive.link.text-inverse`	Link text on inverse surfaces.
`color.interactive.link.text-inverse-visited`	Visited link text on inverse surfaces.
`color.interactive.link.text-visited`	Visited link text.

Controls (inputs, toggles, selection)

Token	Use
`color.interactive.control.background`	Default background.
`color.interactive.control.background-hover`	Background on hover/focus (pointer).
`color.interactive.control.background-pressed`	Background on pressed/active.
`color.interactive.control.background-selection-off`	Selection background when OFF.
`color.interactive.control.background-selection-on`	Selection background when ON.
`color.interactive.control.icon`	Icon colour.
`color.interactive.control.icon-inverse-inverse`	Icon used on inverse backgrounds, for example the thumb in a switch.
`color.interactive.control.indicator-off`	Indicator/bullet when OFF.
`color.interactive.control.indicator-on`	Indicator/bullet when ON.
`color.interactive.control.stroke`	Stroke/border colour.
`color.interactive.control.stroke-hover`	Stroke on hover.
`color.interactive.control.stroke-pressed`	Stroke on pressed/active.
`color.interactive.control.text`	Text colour.

Read-only

Token	Use
`color.interactive.background-read-only`	Default background for read-only objects.
`color.interactive.icon-read-only`	Icon colour for read-only objects.
`color.interactive.stroke-read-only`	Stroke colour for read-only objects.
`color.interactive.text-read-only`	Text colour for read-only objects.

Button and action variants

Choose the variant that matches the semantic intent (the purpose) of the action:

primary — main call-to-action
secondary — supporting action
subtle — low-emphasis action
outlined / outlined-subtle — actions that should stay light on the surface
inverse / outlined-inverse — actions placed on inverse surfaces
critical — high-risk confirmation (non-destructive)
destructive — destructive actions (delete, remove)

Primary

Token	Use
`color.interactive.primary.background`	Default background colour.
`color.interactive.primary.background-hover`	Background colour on hover/focus (pointer).
`color.interactive.primary.background-pressed`	Background colour on pressed/active.
`color.interactive.primary.icon`	Icon colour.
`color.interactive.primary.stroke`	Stroke/border colour.
`color.interactive.primary.stroke-hover`	Stroke on hover.
`color.interactive.primary.stroke-pressed`	Stroke on pressed/active.
`color.interactive.primary.text`	Text colour.

Secondary

Token	Use
`color.interactive.secondary.background`	Default background colour.
`color.interactive.secondary.background-hover`	Background colour on hover/focus (pointer).
`color.interactive.secondary.background-pressed`	Background colour on pressed/active.
`color.interactive.secondary.icon`	Icon colour.
`color.interactive.secondary.stroke`	Stroke/border colour.
`color.interactive.secondary.stroke-hover`	Stroke on hover.
`color.interactive.secondary.stroke-pressed`	Stroke on pressed/active.
`color.interactive.secondary.text`	Text colour.

Subtle

Token	Use
`color.interactive.subtle.background`	Default background colour.
`color.interactive.subtle.background-hover`	Background colour on hover/focus (pointer).
`color.interactive.subtle.background-pressed`	Background colour on pressed/active.
`color.interactive.subtle.icon`	Icon colour.
`color.interactive.subtle.stroke`	Stroke/border colour.
`color.interactive.subtle.stroke-hover`	Stroke on hover.
`color.interactive.subtle.stroke-pressed`	Stroke on pressed/active.
`color.interactive.subtle.text`	Text colour.

Outlined

Token	Use
`color.interactive.outlined.background`	Default background colour.
`color.interactive.outlined.background-hover`	Background colour on hover/focus (pointer).
`color.interactive.outlined.background-pressed`	Background colour on pressed/active.
`color.interactive.outlined.icon`	Icon colour.
`color.interactive.outlined.stroke`	Stroke/border colour.
`color.interactive.outlined.stroke-hover`	Stroke on hover.
`color.interactive.outlined.stroke-pressed`	Stroke on pressed/active.
`color.interactive.outlined.text`	Text colour.

Outlined Subtle

Token	Use
`color.interactive.outlined-subtle.background`	Default background colour.
`color.interactive.outlined-subtle.background-hover`	Background colour on hover/focus (pointer).
`color.interactive.outlined-subtle.background-pressed`	Background colour on pressed/active.
`color.interactive.outlined-subtle.icon`	Icon colour.
`color.interactive.outlined-subtle.stroke`	Stroke/border colour.
`color.interactive.outlined-subtle.stroke-hover`	Stroke on hover.
`color.interactive.outlined-subtle.stroke-pressed`	Stroke on pressed/active.
`color.interactive.outlined-subtle.text`	Text colour.

Inverse

Token	Use
`color.interactive.inverse.background`	Default background colour.
`color.interactive.inverse.background-hover`	Background colour on hover/focus (pointer).
`color.interactive.inverse.background-pressed`	Background colour on pressed/active.
`color.interactive.inverse.icon`	Icon colour.
`color.interactive.inverse.stroke`	Stroke/border colour.
`color.interactive.inverse.stroke-hover`	Stroke on hover.
`color.interactive.inverse.stroke-pressed`	Stroke on pressed/active.
`color.interactive.inverse.text`	Text colour.

Outlined Inverse

Token	Use
`color.interactive.outlined-inverse.background`	Default background colour.
`color.interactive.outlined-inverse.background-hover`	Background colour on hover/focus (pointer).
`color.interactive.outlined-inverse.background-pressed`	Background colour on pressed/active.
`color.interactive.outlined-inverse.icon`	Icon colour.
`color.interactive.outlined-inverse.stroke`	Stroke/border colour.
`color.interactive.outlined-inverse.stroke-hover`	Stroke on hover.
`color.interactive.outlined-inverse.stroke-pressed`	Stroke on pressed/active.
`color.interactive.outlined-inverse.text`	Text colour.

Critical

Token	Use
`color.interactive.critical.background`	Default background colour.
`color.interactive.critical.background-hover`	Background colour on hover/focus (pointer).
`color.interactive.critical.background-pressed`	Background colour on pressed/active.
`color.interactive.critical.icon`	Icon colour.
`color.interactive.critical.stroke`	Stroke/border colour.
`color.interactive.critical.stroke-hover`	Stroke on hover.
`color.interactive.critical.stroke-pressed`	Stroke on pressed/active.
`color.interactive.critical.text`	Text colour.

Destructive

Token	Use
`color.interactive.destructive.background`	Default background colour.
`color.interactive.destructive.background-hover`	Background colour on hover/focus (pointer).
`color.interactive.destructive.background-pressed`	Background colour on pressed/active.
`color.interactive.destructive.icon`	Icon colour.
`color.interactive.destructive.stroke`	Stroke/border colour.
`color.interactive.destructive.stroke-hover`	Stroke on hover.
`color.interactive.destructive.stroke-pressed`	Stroke on pressed/active.
`color.interactive.destructive.text`	Text colour.

On this page