Our colors support Theming and Dark Mode!
Check out our Theming documentation!
Check out our Theming documentation!
Our palette is divided into 3 main categories:
- Backgrounds - Colors destined for backgrounds.
- Foregrounds - Colors destined for content, i.e. text and icons.
- Borders - Colors destined for borders, like dividers, or edges of elements.
Interactive elements
Primary
background / interactive / primary
default
The background color of primary actions in the default state.
hover
The background color of primary actions in the hover state.
active
The background color of primary actions in the active state.
Secondary
background / interactive / secondary
default
The background color of secondary actions in the default state.
hover
The background color of secondary actions in the hover state.
active
The background color of secondary actions in the active state.
Tertiary
background / interactive / tertiary
default
The background color of tertiary actions in the default state.
hover
The background color of tertiary actions in the hover state.
active
The background color of tertiary actions in the active state.
Ghost
background / interactive / ghost
default
The background color of dismissal actions in the default state.
hover
The background color of dismissal actions in the hover state.
active
The background color of dismissal actions in the active state.
Subtle
background / interactive / subtle
default
The background color of subtle dismissal actions, like close buttons on modals; in the default state.
hover
The background color of subtle dismissal actions, like close buttons on modals; in the hover state.
active
The background color of subtle dismissal actions, like close buttons on modals; in the active state.
Danger
background / interactive / danger
default
The background color of danger actions in the default state.
hover
The background color of danger actions in the hover state.
active
The background color of danger actions in the active state.
Container elements
Page
background / container / page
default
The default background color for a page.
tonal_subtle
A more subtle background color for a page, ideal for highlight surfaces that are over the background, for example, a dashboard with different panels.
tonal_medium
The background color to highlight elements in the background, for example, the row of a table.
tonal_high
The background color to highlight elements in the background, for example, the alternated row of a table.
Elevated
background / container / elevated
default
The background color for the default state of an elevated surface like modals, popovers, cards, etc.
hover
The background color for the hover state of an elevated surface like modals, popovers, cards, etc.
active
The background color for the active state of an elevated surface like modals, popovers, cards, etc.
error
The color of surfaces that are in an error state.
High contrast
background / container / high_constrast
default
The background color for the default state of a surface that needs to pop up in pages with a lot of content, like tooltips on dashboards.
hover
The background color for the hover state of a surface that needs to pop up in pages with a lot of content, like tooltips on dashboards.
active
The background color for the active state of a surface that needs to pop up in pages with a lot of content, like tooltips on dashboards.
Form Control elements
Text-based inputs
background / form_control / text_input
track
The default background color for inputs.
Click-based inputs
background / form_control / click_input
track
The color used for the tracks of click-based components,like the container of the toggle or the track of the slider.
System elements
Feedback
tonal_medium
The default background color for smaller error elements like badges that need a slightly more saturated color that tonal_subtle because of their size.