Choose the role, then the shade
Ordinary actions, active navigation and interactive icons use the accent. Blue is the default; visitors can choose another accent in settings. Components reference a token rather than storing their own HEX value.
Red is reserved for errors and critical actions in the interface. It does not change with the user’s accent. The red part of the original logo remains part of the mark.
If the table is wider than the screen, scroll it horizontally.
| Role | Tokens |
|---|---|
| Primary action | --accent / --accent-foreground |
| Critical state | --destructive / --destructive-foreground |
| Surface and text | --background / --foreground |
| Secondary information | --muted / --muted-foreground |
Use more than colour to convey meaning
An error includes clear text near the field and an accessible message. Selected choices have a state and label; the icon supports meaning. Colour must not be the only distinction for important states.
A semantic colour pair · CSS
.primary-action {
background: var(--accent);
color: var(--accent-foreground);
}
.critical-message {
color: var(--destructive);
}Check the result
- Open light and dark themes, then high contrast.
- Change the user accent: critical states must keep their meaning.
- Compare combinations with the contrast table in the colours section.
- Check focus, errors, disabled controls and text on coloured buttons.