Design Tokens

Design tokens are a single source of truth for all design language decisions, that ensure its consistent application across different products, platforms and touchpoints.

Basics

palette / basics
#000000
black
#ffffff
white
rgba(255,255,255,0.64)
white 64%

Background

background
#e7e7e7
disabled
Used for disabled background color
rgba(18,18,25,0.08)
backdrop
Default overlay color. Used this to distinguish modal and popout layers from the layer underneath
#121219
brand
Used for logo and brand elements
background / dataviz
#297af2
blue
used in graphs
#ff5c00
orange
used in graphs
#009ba5
green
used in graphs
#fc091a
red
used in graphs
#7023b7
purple
used in graphs
#ff48b6
pink
used in graphs
background / static
#ffffff
flat
Used for default page background
#ffffff
raised
Used for raised background, cards backgrounds
#ffffff
floating
Used for floating backgrounds and modals
#f3f3f3
sunken
Used for background in the Appbar
#2a2a2a
inverse
High contrast backgrounds
#ffffff
on-color
#2a2a2a
inverse-on-color
background / interactive / neutral-subtle
#ffffff
default
Subtle background color for interactive
#f3f3f3
hover
Subtle background color for interactive hover
#e7e7e7
active
Subtle background color for interactive active
background / interactive / neutral-bold
#a0a0a0
default
High contrast interactive background
#888888
hover
High contrast interactive background in hover state
#717171
active
High contrast interactive background in active state
background / interactive / neutral
#f3f3f3
default
Used for Chip in default state
#e7e7e7
hover
Used for Chip in hover state
#dbdbdb
active
Used for Chip in active state
background / interactive / secondary
#f3f3f3
default
Secondary background color for interactive
#e7e7e7
hover
Secondary background color for interactive hover
#dbdbdb
active
Secondary background color for interactive active
background / interactive / success
#356b2a
default
#193313
hover
#193313
active
background / interactive / primary
#2a2a2a
default
Used for interactive primary background. Used for main actions like primary buttons
#414141
hover
Used for interactive primary background hover
#595959
active
Used for interactive primary background active
background / interactive / danger
#e41c1c
default
Used for the background for the destructive button. 4.68:1 AA text contrast
#cf0f0f
hover
Used for hover color for danger button
#a20606
active
Used for active color for danger button
background / accent
#21212e
primary
#7876fb
secondary
Used for spinner, progress bar
background / alert / info
#2272e9
primary
Info message
#e7f0ff
secondary
Used for background color in info status messages
background / alert / success
#58ad47
primary
Success message
#f2fff0
secondary
Used for background color in success messages like alerts
background / alert / danger
#e41c1c
primary
Error, Danger message
#ffe9e9
secondary
Used for background color in Danger, Error, Alert messages
background / alert / warning
#e9a504
primary
Warning, Caution message
#fff6e3
secondary
Used for background color in warning messages like alerts
background / alert / basic
#52526d
primary
Used for neutral messages
#f7f7fa
secondary
Used for background color in neutral messages

Text

text
#b8b8b8
disabled
Used for disabled text. 1.77 failing AA contrast
text / alert
#cf0f0f
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
#6b4b00
warning
Used for display information that needs user attention and may require further steps. 7.97 AAA contrast
#356b2a
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
#1361d7
info
Used for convey something informal. 5.64 AA contrast
#52526d
basic
Used for default neutral status. 9.89 AAA contrast
text / static
#2a2a2a
primary
Used for primary text, Body copy and Headers
#717171
secondary
Used for secondary text and Input labels
#888888
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
#ffffff
inverse
Used for inverse text color on background.inverse and other high contrast backgrounds
#ffffff
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 / interactive
#2a2a2a
default
Used for text interactive default
#414141
hover
Used for text interactive hover
#595959
active
Used for text interactive active

Border

border
#e7e7e7
disabled
Used for border disabled
border / interactive
#121212
focus
Use for elements in state focus
border / interactive / secondary
#c1c1d5
default
Used for border interactive secondary in state default
#8d8dac
hover
Used for border interactive secondary in state hover
#777797
active
Used for border interactive secondary in state active
border / interactive / primary
#2a2a2a
default
Used for borders interactive primary
#414141
hover
Used for borders interactive primary in state hover
#595959
active
Used for borders interactive primary in state active
border / interactive / bold
#52526d
default
Strong border interactive color for highlighting specific parts in the user interface
#414158
hover
Strong border interactive color hover for highlighting specific parts in the user interface
#313143
active
Strong border interactive color active for highlighting specific parts in the user interface
border / alert
#dbdbdb
basic
Neutral border color. Used for the neutral tag border style
#92f27e
success
Success border color. Used for the success status messages
#3782f2
info
Info border color. Used for the info tag border style
#ef2d2d
danger
Danger, Error border color color. Used for the tag border style
#f2b21b
warning
Border color in warning messages like alerts
border / static
#e7e7e7
primary
Used for card outlines and dividers with more emphasis. Non-interactive
#f3f3f3
secondary
Subtle border secondary paired with background
#ffffff
inverse
Used for high contrast elements
#ffffff
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
#b8b8b8
tertiary