🎨 Color

The default background color of the interface.

The background color for elements with a different height than the interface, such as a Dialog box, Tooltip, or Dropdown Menu.

The background color for elements with the highest level of prominence, like a card.

The background color of the mask, used to cover the content below the mask. Dialog, Alert Dialog and other components use this token.

The background color of contained elements with a smaller surface area such as secondary Button and Dropdown Menu Item.

The background color for elements with a secondary level of prominence.

The hover state color of contained elements with a smaller surface area such as secondary Button and Dropdown Menu Item.

The selected state color of contained elements with a smaller surface area such as Dropdown Menu Item.

The background color for elements that should stand out in the interface.

The background color for muted elements such as TabsList, Skeleton and Switch.

The background color of main actions such as primary Buttons.

The hover state color of main actions such as primary Buttons.

The active state (on press) color of main actions such as primary Buttons.

Use for the background of elements used to reinforce our brand, but with less emphasis.

Use for the background of elements used to reinforce our brand, but with less emphasis.

Use for backgrounds communicating critical information on elements with a smaller surface area, like a badge or a banner.

The hover state color for communicating critical information on elements with a smaller surface area.

The active state (on press) color for communicating critical information on elements with a smaller surface area.

Use for backgrounds communicating critical information on elements with a smaller surface area, with a tertiary level of prominence.

Use for backgrounds communicating critical information on elements with a smaller surface area, with a secondary level of prominence.

Use for backgrounds communicating warning on elements with a smaller surface area, like a badge or a banner.

The hover state color for communicating warning on elements with a smaller surface area.

The active state (on press) color for communicating warning on elements with a smaller surface area.

Use for backgrounds communicating warning on elements with a smaller surface area, with a tertiary level of prominence.

Use for backgrounds communicating warning on elements with a smaller surface area, with a secondary level of prominence.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

Use for text with a secondary level of prominence.

The default text color.

Use for text indicating placeholder on elements with a smaller surface area, like an input.

Use for text on dark background.

Use for text links.

The hover state color for text links.

The active state (on press) color for text links.

Use for text on bg-brand, like primary buttons.

Use for text on bg-brand-subtle and subtles, like badge and alert.

Use for text communicating critical information.

The hover state color for text communicating critical information.

The active state (on press) color for text communicating critical information.

Use for text on bg-danger.

Use for text on bg-danger-subtle and subtles, like badge and alert.

Use for text communicating warning.

The hover state color for text communicating warning.

The active state (on press) color for text communicating warning.

Use for text on bg-warning.

Use for text on bg-warning-subtle and subtles, like badge and alert.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

The default color for borders on any element.

The hover color for borders on any element.

Use for borders paired with brand colors.

The hover color for borders paired with brand colors.

Use for the border of elements used to reinforce our brand, but with less emphasis.

Use for the border of elements used to reinforce our brand, but with less emphasis.

The active state (on press) color for borders paired with brand colors.

Use for borders communicating critical information.

The hover color for borders communicating critical information.

Use for the border of elements communicating critical information, but with less emphasis.

Use for the border of elements communicating critical information, but with less emphasis.

The active state (on press) color for borders communicating critical information.

Use for borders communicating warning information.

The hover color for borders communicating warning information.

Use for the border of elements communicating warning information, but with less emphasis.

Use for the border of elements communicating warning information, but with less emphasis.

The active state (on press) color for borders communicating warning information.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

The default color for icons.

The hover state color for icons.

The active state (on press) color for icons.

Use for icon on dark background.

Use for icons that need to pull more focus.

The hover color for icons that need to pull more focus.

The active state (on press) color for icons that need to pull more focus.

Use for icon on bg-brand-subtle and subtles, like badge and alert.

Use for icon on bg-brand, like primary buttons.

Use for icons communicating critical information.

The hover color for icons communicating critical information.

The active state (on press) color for icons communicating critical information.

Use for icon on bg-danger-subtle and subtles, like badge and alert.

Use for icons on bg-danger.

Use for icons communicating warning information.

The hover color for icons communicating warning information.

The active state (on press) color for icons communicating warning information.

Use for icon on bg-warning-subtle and subtles, like badge and alert.

Use for icons on bg-warning.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.

For data visualisation only.