Color

Sentiment

Every color should convey a purpose, which is its sentiment

Neutral

A palette for non-actionable items, eg. page content

View the neutral color reference docs

Action

A palette that represents actionable and interactive items (eg. buttons, text links). Only used for status and feedback.

View the action color reference docs

Info

A palette meant to communicate an informative message to the user (eg. Admonition, Toast). Only used for status and feedback.

View the info color reference docs

Success

A palette meant to communicate a successful state to the user (eg. Admonition, Toast). Only used for status and feedback.

View the success color reference docs

Warning

A palette meant to communicate a warning state to the user (eg. Admonition, Toast). Only used for status and feedback.

View the warning color reference docs

Danger

A palette meant to communicate a destructive action, loss of data, or required information to the user (eg. Admonition, Toast, Confirm Dialog, destructive Buttons)

View the danger color reference docs

Usage

Where, how, and when a particular token/variable will be used

Background

Component specific background colors (eg. avatar, progress)

Surface

Layout specific background colors (eg. page, container, wrapper)

Border

All borders of interface items

Text

Used for body copy, labels, and content within components

Navigation (Action only)

Used for actionable text, either within body copy or within components (eg. Text links, Tag)

Prominence

Use

Initial

The default and baseline emphasis (eg. main body copy)

Inverse

High contrast alternative (eg. dark button text, special container)

Emphasis

300

Highest emphasis. It should stand out from surrounding content (eg. headings, titles)

200

More important, but not the most important or most emphasized (eg. examples, asides)

100

Lowest emphasis and lowest priority (eg. copyright text. side notes)

Interaction

Used mainly in the Action sentiment

Focus

The indicator (visual, aural, or otherwise) that an element is currently selected and can be interacted with

Visited

Typically represented only in text navigation. The visited interaction state will represent any previously used control.

Hover

Used for pointer devices to express interactivity

Active

The active interaction state presents itself on press or on activation of a control (can also be used for focus)