Basics
palette / basics
black
white
white 64%
Background
background
disabled
Used for disabled background color
backdrop
Default overlay color. Used this to distinguish modal and popout layers from the layer underneath
brand
Used for logo and brand elements
background / interactive / neutral-bold
default
High contrast interactive background
hover
High contrast interactive background in hover state
active
High contrast interactive background in active state
background / interactive / danger
default
Used for the background for the destructive button. 4.68:1 AA text contrast
hover
Used for hover color for danger button
active
Used for active color for danger button
background / interactive / primary
default
Used for interactive primary background. Used for main actions like primary buttons
hover
Used for interactive primary background hover
active
Used for interactive primary background active
background / interactive / neutral-subtle
default
Subtle background color for interactive
hover
Subtle background color for interactive hover
active
Subtle background color for interactive active
background / interactive / neutral
default
Used for Chip in default state
hover
Used for Chip in hover state
active
Used for Chip in active state
background / interactive / secondary
default
Secondary background color for interactive
hover
Secondary background color for interactive hover
active
Secondary background color for interactive active
background / interactive / success
default
hover
active
background / alert / info
primary
Info message
secondary
Used for background color in info status messages
background / alert / basic
primary
Used for neutral messages
secondary
Used for background color in neutral messages
background / alert / danger
primary
Error, Danger message
secondary
Used for background color in Danger, Error, Alert messages
background / alert / warning
primary
Warning, Caution message
secondary
Used for background color in warning messages like alerts
background / alert / success
primary
Success message
secondary
Used for background color in success messages like alerts
background / static
flat
Used for default page background
raised
Used for raised background, cards backgrounds
floating
Used for floating backgrounds and modals
sunken
Used for background in the Appbar
inverse
High contrast backgrounds
on-color
inverse-on-color
background / dataviz
blue
used in graphs
orange
used in graphs
green
used in graphs
red
used in graphs
purple
used in graphs
pink
used in graphs
background / accent
primary
secondary
Used for spinner, progress bar
Text
text
disabled
Used for disabled text. 1.77 failing AA contrast
text / interactive
default
Used for text interactive default
hover
Used for text interactive hover
active
Used for text interactive active
text / static
primary
Used for primary text, Body copy and Headers
secondary
Used for secondary text and Input labels
tertiary
Used for placeholder text. Used for group labels in dropdown menus. Used for helper messages in input. Used for icons in secondary button. 5.69 AA contrast
inverse
Used for inverse text color on background.inverse and other high contrast backgrounds
on-color
Used for texts displayed on top of dark images and colored UI elements that has the same color value in both light and dark mode
text / alert
danger
Used for communicate problems that have to be resolved so that user can continue forward. This color should be always used for e.g. highlighting errors. 8.18 AAA contrast
warning
Used for display information that needs user attention and may require further steps. 7.97 AAA contrast
success
Used for convey success states. For example, you might show a success message that tells the user that changes were saved or something was completed. 6.38 AA contrast
info
Used for convey something informal. 5.64 AA contrast
basic
Used for default neutral status. 9.89 AAA contrast
Border
border
disabled
Used for border disabled
border / static
primary
Used for card outlines and dividers with more emphasis. Non-interactive
secondary
Subtle border secondary paired with background
inverse
Used for high contrast elements
on-color
Used for borders displayed on top of dark images and colored UI elements that has the same color value in both light and dark mode
tertiary
border / interactive
focus
Use for elements in state focus
border / interactive / primary
default
Used for borders interactive primary
hover
Used for borders interactive primary in state hover
active
Used for borders interactive primary in state active
border / interactive / secondary
default
Used for border interactive secondary in state default
hover
Used for border interactive secondary in state hover
active
Used for border interactive secondary in state active
border / interactive / bold
default
Strong border interactive color for highlighting specific parts in the user interface
hover
Strong border interactive color hover for highlighting specific parts in the user interface
active
Strong border interactive color active for highlighting specific parts in the user interface
border / alert
basic
Neutral border color. Used for the neutral tag border style
success
Success border color. Used for the success status messages
info
Info border color. Used for the info tag border style
danger
Danger, Error border color color. Used for the tag border style
warning
Border color in warning messages like alerts