Colors
| Demo | Token name | Code | Figma usage | Description | Value |
|---|---|---|---|---|---|
text.brand | React: themeGet('text.brand')CSS: --text-brand | text/brand | Use for text that reinforces our brand. | #397bff | |
text.inverse | React: themeGet('text.inverse')CSS: --text-inverse | text/inverse | Use for text on bold backgrounds. | #090a0f | |
text.default | React: themeGet('text.default')CSS: --text | text/default | Use for primary text, such as body copy, sentence case headers, and buttons. | #ffffff | |
text.subtle.default | React: themeGet('text.subtle.default')CSS: --text-subtle | text/subtle/default | Use for secondary text, such as navigation, subtle button links, input field labels, and all caps subheadings. | #cfccd4 | |
text.subtle.inverse | React: themeGet('text.subtle.inverse')CSS: --text-subtle-inverse | text/subtle/inverse | Use for secondary text, such as navigation, subtle button links, input field labels, and all caps subheadings. | #5c5b5e | |
text.subtlest.default | React: themeGet('text.subtlest.default')CSS: --text-subtlest | text/subtlest/default | Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text. | #a19fa5 | |
text.subtlest.inverse | React: themeGet('text.subtlest.inverse')CSS: --text-subtlest-inverse | text/subtlest/inverse | Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text. | #a19fa5 | |
text.danger.default | React: themeGet('text.danger.default')CSS: --text-danger | text/danger/default | Use for critical text, such as input field error messaging. | #f44343 | |
text.danger.inverse | React: themeGet('text.danger.inverse')CSS: --text-danger-inverse | text/danger/inverse | Use for critical text in inverse contexts, such as input field error messaging. Use with background.danger.inverse or on surface.inverse. | #c33636 | |
text.warning.default.[default] | React: themeGet('text.warning.default.default')CSS: --text-warning | text/warning/default/default | Use for backgrounds communicating caution, such as in warning section messages. | #181608 | |
text.warning.default.hovered | React: themeGet('text.warning.default.hovered')CSS: --text-warning-hovered | text/warning/default/hovered | Hovered state for color.background.warning | #484117 | |
text.warning.default.pressed | React: themeGet('text.warning.default.pressed')CSS: --text-warning-pressed | text/warning/default/pressed | Pressed state for color.background.warning | #90832f | |
text.warning.bold.default | React: themeGet('text.warning.bold.default')CSS: --text-warning-bold | text/warning/bold/default | A vibrant background option for communicating caution, such as in warning buttons and warning banners. | #fff8c5 | |
text.warning.bold.hovered | React: themeGet('text.warning.bold.hovered')CSS: --text-warning-bold-hovered | text/warning/bold/hovered | Hovered state of color.background.warning.bold | #fff6b6 | |
text.warning.bold.pressed | React: themeGet('text.warning.bold.pressed')CSS: --text-warning-bold-pressed | text/warning/bold/pressed | Pressed state of color.background.warning.bold | #ffee70 | |
text.warning.inverse | React: themeGet('text.warning.inverse')CSS: --text-warning-inverse | text/warning/inverse | Use for inverse backgrounds communicating caution, such as in warning section messages. | #fffef8 | |
text.success.default | React: themeGet('text.success.default')CSS: --text-success | text/success/default | Use for text to communicate a favourable outcome, such as input field success messaging. | #4caf50 | |
text.success.inverse | React: themeGet('text.success.inverse')CSS: --text-success-inverse | text/success/inverse | Use for text on inverse success backgrounds that communicates a favourable outcome, such as input field success messaging. Use with background.success.inverse or surface.inverse. | #358238 | |
text.disabled | React: themeGet('text.disabled')CSS: --text-disabled | text/disabled | Use for text in a disabled state. | #5c5b5e | |
text.selected | React: themeGet('text.selected')CSS: --text-selected | text/selected | Use for text in selected or opened states, such as tabs and dropdown buttons. | #173166 | |
text.accent.blue.default | React: themeGet('text.accent.blue.default')CSS: --text-accent-blue | text/accent/blue/default | Use for blue text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags. | #397bff | |
text.accent.blue.bolder | React: themeGet('text.accent.blue.bolder')CSS: --text-accent-blue-bolder | text/accent/blue/bolder | Use for bold text on bold backgrounds when there is no meaning tied to the color, such as colored tags. | #b0caff | |
text.accent.red.default | React: themeGet('text.accent.red.default')CSS: --text-accent-red | text/accent/red/default | Use for red text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags. | #f44343 | |
text.accent.red.bolder | React: themeGet('text.accent.red.bolder')CSS: --text-accent-red-bolder | text/accent/red/bolder | Use for bold text on bold backgrounds when there is no meaning tied to the color, such as colored tags. | #feecec | |
text.accent.orange.default | React: themeGet('text.accent.orange.default')CSS: --text-accent-orange | text/accent/orange/default | Use for orange text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags. | #ff996c | |
text.accent.orange.bolder | React: themeGet('text.accent.orange.bolder')CSS: --text-accent-orange-bolder | text/accent/orange/bolder | Use for bold text on bold backgrounds when there is no meaning tied to the color, such as colored tags. | #ffd6c4 | |
text.accent.yellow.default | React: themeGet('text.accent.yellow.default')CSS: --text-accent-yellow | text/accent/yellow/default | Use for yellow text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags. | #ffee70 | |
text.accent.yellow.bolder | React: themeGet('text.accent.yellow.bolder')CSS: --text-accent-yellow-bolder | text/accent/yellow/bolder | Use for bold text on bold backgrounds when there is no meaning tied to the color, such as colored tags. | #fffbe2 | |
text.accent.green.default | React: themeGet('text.accent.green.default')CSS: --text-accent-green | text/accent/green/default | Use for green text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags. | #4caf50 | |
text.accent.green.bolder | React: themeGet('text.accent.green.bolder')CSS: --text-accent-green-bolder | text/accent/green/bolder | Use for bold text on bold backgrounds when there is no meaning tied to the color, such as colored tags. | #b7dfb9 | |
text.accent.purple.default | React: themeGet('text.accent.purple.default')CSS: --text-accent-purple | text/accent/purple/default | Use for purple text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags. | #9871e6 | |
text.accent.purple.bolder | React: themeGet('text.accent.purple.bolder')CSS: --text-accent-purple-bolder | text/accent/purple/bolder | Use for bold text on bold backgrounds when there is no meaning tied to the color, such as colored tags. | #ddcbff | |
text.accent.teal.default | React: themeGet('text.accent.teal.default')CSS: --text-accent-teal | text/accent/teal/default | Use for teal text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags. | #8dfcf1 | |
text.accent.teal.bolder | React: themeGet('text.accent.teal.bolder')CSS: --text-accent-teal-bolder | text/accent/teal/bolder | Use for bold text on bold backgrounds when there is no meaning tied to the color, such as colored tags. | #d1fef9 | |
text.accent.gray.default | React: themeGet('text.accent.gray.default')CSS: --text-accent-gray | text/accent/gray/default | Use for text on non-bold gray accent backgrounds, such as colored tags. | #8a888e | |
text.accent.gray.bolder | React: themeGet('text.accent.gray.bolder')CSS: --text-accent-gray-bolder | text/accent/gray/bolder | Use for bold text on bold backgrounds when there is no meaning tied to the color, such as colored tags. | #cfccd4 | |
link.default | React: themeGet('link.default')CSS: --link | link/default | Use for links in a default state. | #397bff | |
link.hovered | React: themeGet('link.hovered')CSS: --link-hovered | link/hovered | Use for links in a hovered state. | #397bff | |
link.pressed | React: themeGet('link.pressed')CSS: --link-pressed | link/pressed | Use for links in a pressed state. | #6195ff | |
link.visited | React: themeGet('link.visited')CSS: --link-visited | link/visited | Use for links in a visited state. | #ba97ff | |
icon.brand | React: themeGet('icon.brand')CSS: --icon-brand | icon/brand | Use for icons that reinforce our brand. | #397bff | |
icon.inverse | React: themeGet('icon.inverse')CSS: --icon-inverse | icon/inverse | Use for icons on bold backgrounds. | #121213 | |
icon.danger.default | React: themeGet('icon.danger.default')CSS: --icon-danger | icon/danger/default | Use for icons communicating critical information, such as those used in error handing. | #f44343 | |
icon.danger.inverse | React: themeGet('icon.danger.inverse')CSS: --icon-danger-inverse | icon/danger/inverse | Use for icons in inverse contexts that communicate critical information, such as input field error messaging. Use with background.danger.inverse or on surface.inverse. | #c33636 | |
icon.success.default | React: themeGet('icon.success.default')CSS: --icon-success | icon/success/default | Use for icons communicating a favourable outcome, such as those used in success section messages. | #4caf50 | |
icon.success.inverse | React: themeGet('icon.success.inverse')CSS: --icon-success-inverse | icon/success/inverse | Use for icons in inverse contexts communicating a favourable outcome, such as those used in success section messages. Use with background.success.inverse or surface.inverse. | #358238 | |
icon.warning.default | React: themeGet('icon.warning.default')CSS: --icon-warning | icon/warning/default | Use for icons communicating caution, such as those used in warning section messages. | #be633b | |
icon.warning.inverse | React: themeGet('icon.warning.inverse')CSS: --icon-warning-inverse | icon/warning/inverse | Use for icons when on bold warning backgrounds. | #f3f1f6 | |
icon.disabled | React: themeGet('icon.disabled')CSS: --icon-disabled | icon/disabled | Use for icons in a disabled state. | #8a888e | |
icon.accent.blue.default | React: themeGet('icon.accent.blue.default')CSS: --icon-accent-blue | icon/accent/blue/default | Use for blue text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags. | #397bff | |
icon.accent.blue.bolder | React: themeGet('icon.accent.blue.bolder')CSS: --icon-accent-blue-bolder | icon/accent/blue/bolder | Use on bold blue accent backgrounds. | #b0caff | |
icon.accent.red.default | React: themeGet('icon.accent.red.default')CSS: --icon-accent-red | icon/accent/red/default | Use for red text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags. | #f44343 | |
icon.accent.red.bolder | React: themeGet('icon.accent.red.bolder')CSS: --icon-accent-red-bolder | icon/accent/red/bolder | Use on bold red accent backgrounds. | #feecec | |
icon.accent.orange.default | React: themeGet('icon.accent.orange.default')CSS: --icon-accent-orange | icon/accent/orange/default | Use for orange text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags. | #ff996c | |
icon.accent.orange.bolder | React: themeGet('icon.accent.orange.bolder')CSS: --icon-accent-orange-bolder | icon/accent/orange/bolder | Use on bold orange accent backgrounds. | #ffd6c4 | |
icon.accent.yellow.default | React: themeGet('icon.accent.yellow.default')CSS: --icon-accent-yellow | icon/accent/yellow/default | Use for yellow text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags. | #ffee70 | |
icon.accent.yellow.bolder | React: themeGet('icon.accent.yellow.bolder')CSS: --icon-accent-yellow-bolder | icon/accent/yellow/bolder | Use on bold yellow accent backgrounds. | #fffbe2 | |
icon.accent.green.default | React: themeGet('icon.accent.green.default')CSS: --icon-accent-green | icon/accent/green/default | Use for green text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags. | #4caf50 | |
icon.accent.green.bolder | React: themeGet('icon.accent.green.bolder')CSS: --icon-accent-green-bolder | icon/accent/green/bolder | Use on bold green accent backgrounds. | #b7dfb9 | |
icon.accent.purple.default | React: themeGet('icon.accent.purple.default')CSS: --icon-accent-purple | icon/accent/purple/default | Use for purple text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags. | #9871e6 | |
icon.accent.purple.bolder | React: themeGet('icon.accent.purple.bolder')CSS: --icon-accent-purple-bolder | icon/accent/purple/bolder | Use on bold purple accent backgrounds. | #ddcbff | |
icon.accent.teal.default | React: themeGet('icon.accent.teal.default')CSS: --icon-accent-teal | icon/accent/teal/default | Use for teal text on non-bold backgrounds when there is no meaning tied to the color, such as colored tags. | #7fe3d9 | |
icon.accent.teal.bolder | React: themeGet('icon.accent.teal.bolder')CSS: --icon-accent-teal-bolder | icon/accent/teal/bolder | Use on bold teal accent backgrounds. | #d1fef9 | |
icon.accent.gray.default | React: themeGet('icon.accent.gray.default')CSS: --icon-accent-gray | icon/accent/gray/default | Use for text on non-bold gray accent backgrounds, such as colored tags. | #5c5b5e | |
icon.accent.gray.bolder | React: themeGet('icon.accent.gray.bolder')CSS: --icon-accent-gray-bolder | icon/accent/gray/bolder | Use for text on gray subtle accent backgrounds. | #cfccd4 | |
icon.default | React: themeGet('icon.default')CSS: --icon | icon/default | Use for icon-only buttons, or icons paired with color.text.default | #ffffff | |
border.brand | React: themeGet('border.brand')CSS: --border-brand | border/brand | Use for borders or visual indicators of elements that reinforce our brand, such as section dividers or card borders. | #397bff | |
border.inverse | React: themeGet('border.inverse')CSS: --border-inverse | border/inverse | Use for borders on bold backgrounds. | #090a0f | |
border.focused.default | React: themeGet('border.focused.default')CSS: --border-focused | border/focused/default | Use for focus rings of elements in a focus state. | #6195ff | |
border.focused.inverse | React: themeGet('border.focused.inverse')CSS: --border-focused-inverse | border/focused/inverse | Use for focus rings of elements in a focus state. | #173166 | |
border.danger.default | React: themeGet('border.danger.default')CSS: --border-danger | border/danger/default | Use for borders communicating critical information, such as the borders on invalid text fields. | #f44343 | |
border.danger.inverse | React: themeGet('border.danger.inverse')CSS: --border-danger-inverse | border/danger/inverse | Use for borders in inverse background contexts that communicate critical information, such as the borders on invalid text fields. Use with background.danger.inverse or on surface.inverse. | #c33636 | |
border.success.default | React: themeGet('border.success.default')CSS: --border-success | border/success/default | Use for borders communicating a favourable outcome, such as the borders on validated text fields. | #4caf50 | |
border.success.inverse | React: themeGet('border.success.inverse')CSS: --border-success-inverse | border/success/inverse | Use for borders in inverse contexts that communicate a favourable outcome, such as the borders on validated text fields. Use with background.success.inverse or surface.inverse. | #358238 | |
border.input.default | React: themeGet('border.input.default')CSS: --border-input | border/input/default | Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons. | #ffffff | |
border.input.hovered | React: themeGet('border.input.hovered')CSS: --border-input-hovered | border/input/hovered | Hovered state for border.input | #397bff | |
border.disabled | React: themeGet('border.disabled')CSS: --border-disabled | border/disabled | Use for borders of elements in a disabled state. | #b8b6bd78 | |
border.default | React: themeGet('border.default')CSS: --border | border/default | Use to visually group or separate UI elements, such as flat cards or side panel dividers. | #ffffff | |
border.bold | React: themeGet('border.bold')CSS: --border-bold | border/bold | A neutral border option that passes min 3:1 contrast ratios. | #a19fa5 | |
border.accent.blue | React: themeGet('border.accent.blue')CSS: --border-accent-blue | border/accent/blue | Use for blue borders on non-bold backgrounds when there is no meaning tied to the color. | #397bff | |
border.accent.red | React: themeGet('border.accent.red')CSS: --border-accent-red | border/accent/red | Use for red borders on non-bold backgrounds when there is no meaning tied to the color. | #f44343 | |
border.accent.orange | React: themeGet('border.accent.orange')CSS: --border-accent-orange | border/accent/orange | Use for orange borders on non-bold backgrounds when there is no meaning tied to the color. | #ff996c | |
border.accent.yellow | React: themeGet('border.accent.yellow')CSS: --border-accent-yellow | border/accent/yellow | Use for yellow borders on non-bold backgrounds when there is no meaning tied to the color. | #ffee70 | |
border.accent.green | React: themeGet('border.accent.green')CSS: --border-accent-green | border/accent/green | Use for green borders on non-bold backgrounds when there is no meaning tied to the color. | #4caf50 | |
border.accent.purple | React: themeGet('border.accent.purple')CSS: --border-accent-purple | border/accent/purple | Use for purple borders on non-bold backgrounds when there is no meaning tied to the color. | #a97dff | |
border.accent.teal | React: themeGet('border.accent.teal')CSS: --border-accent-teal | border/accent/teal | Use for teal borders on non-bold backgrounds when there is no meaning tied to the color. | #7fe3d9 | |
border.accent.gray | React: themeGet('border.accent.gray')CSS: --border-accent-gray | border/accent/gray | Use for borders on non-bold gray accent backgrounds. | #8a888e | |
border.subtle.default | React: themeGet('border.subtle.default')CSS: --border-subtle | border/subtle/default | undefined | #5c5b5e | |
border.subtle.inverse | React: themeGet('border.subtle.inverse')CSS: --border-subtle-inverse | border/subtle/inverse | undefined | #cfccd4 | |
border.table.default | React: themeGet('border.table.default')CSS: --border-table | border/table/default | Use for the default borders in table elements, such as the visual divider between table headers or footers and table content. | #b8b6bd33 | |
border.table.container | React: themeGet('border.table.container')CSS: --border-table-container | border/table/container | Use for the containing borders in table elements when the UI requires that different implementation values have different resolved values, such as the visual divider around table content. | #00000000 | |
background.brand.bold.default | React: themeGet('background.brand.bold.default')CSS: --background-brand-bold | background/brand/bold/default | Use for the background of elements used to reinforce our brand, but with more emphasis. | #336fe6 | |
background.brand.bold.hovered | React: themeGet('background.brand.bold.hovered')CSS: --background-brand-bold-hovered | background/brand/bold/hovered | Hovered state of color.background.brand.bold | #2256c5 | |
background.brand.bold.pressed | React: themeGet('background.brand.bold.pressed')CSS: --background-brand-bold-pressed | background/brand/bold/pressed | Pressed state of color.background.brand.bold | #224a99 | |
background.brand.default.[default] | React: themeGet('background.brand.default.default')CSS: --background-brand | background/brand/default/default | Use for the background of elements used to reinforce our brand. | #336fe6 | |
background.brand.default.hovered | React: themeGet('background.brand.default.hovered')CSS: --background-brand-hovered | background/brand/default/hovered | Hovered state of color.background.brand | #397bff | |
background.brand.default.pressed | React: themeGet('background.brand.default.pressed')CSS: --background-brand-pressed | background/brand/default/pressed | Pressed state of color.background.brand | #6195ff | |
background.disabled | React: themeGet('background.disabled')CSS: --background-disabled | background/disabled | Use for backgrounds of elements in a disabled state. | #b8b6bd1a | |
background.success.default | React: themeGet('background.success.default')CSS: --background-success | background/success/default | Use for backgrounds communicating a favourable outcome, such as success section messages. | #0f2310 | |
background.success.inverse | React: themeGet('background.success.inverse')CSS: --background-success-inverse | background/success/inverse | Use for inverse backgrounds communicating a favourable outcome, such as success section messages. Use with backgrounds for text.success.inverse or icon.success.inverse. | #edf7ee | |
background.danger.default.[default] | React: themeGet('background.danger.default.default')CSS: --background-danger | background/danger/default/default | Use for backgrounds communicating critical information, such as in error messages. | #310e0e | |
background.danger.default.hovered | React: themeGet('background.danger.default.hovered')CSS: --background-danger-hovered | background/danger/default/hovered | Hovered state for color.background.danger | #621b1b | |
background.danger.default.pressed | React: themeGet('background.danger.default.pressed')CSS: --background-danger-pressed | background/danger/default/pressed | Pressed state for color.background.danger | #922828 | |
background.danger.bold.default | React: themeGet('background.danger.bold.default')CSS: --background-danger-bold | background/danger/bold/default | A vibrant background option for communicating critical information, such as in danger buttons and error banners. | #f44343 | |
background.danger.bold.hovered | React: themeGet('background.danger.bold.hovered')CSS: --background-danger-bold-hovered | background/danger/bold/hovered | Hovered state of color.background.danger.bold | #f66969 | |
background.danger.bold.pressed | React: themeGet('background.danger.bold.pressed')CSS: --background-danger-bold-pressed | background/danger/bold/pressed | Pressed state of color.background.danger.bold | #fbb4b4 | |
background.danger.inverse | React: themeGet('background.danger.inverse')CSS: --background-danger-inverse | background/danger/inverse | Use for inverse backgrounds communicating critical information, such as in error messages. Use with backgrounds for text.danger.inverse or icon.danger.inverse. | #feecec | |
background.warning.default.[default] | React: themeGet('background.warning.default.default')CSS: --background-warning | background/warning/default/default | Use for backgrounds communicating caution, such as in warning section messages. | #484117 | |
background.warning.default.hovered | React: themeGet('background.warning.default.hovered')CSS: --background-warning-hovered | background/warning/default/hovered | Hovered state for color.background.warning | #90832f | |
background.warning.default.pressed | React: themeGet('background.warning.default.pressed')CSS: --background-warning-pressed | background/warning/default/pressed | Pressed state for color.background.warning | #c0ae3e | |
background.warning.bold.default | React: themeGet('background.warning.bold.default')CSS: --background-warning-bold | background/warning/bold/default | A vibrant background option for communicating caution, such as in warning buttons and warning banners. | #fff6b6 | |
background.warning.bold.hovered | React: themeGet('background.warning.bold.hovered')CSS: --background-warning-bold-hovered | background/warning/bold/hovered | Hovered state of color.background.warning.bold | #fff8c5 | |
background.warning.bold.pressed | React: themeGet('background.warning.bold.pressed')CSS: --background-warning-bold-pressed | background/warning/bold/pressed | Pressed state of color.background.warning.bold | #fffbe2 | |
background.warning.inverse | React: themeGet('background.warning.inverse')CSS: --background-warning-inverse | background/warning/inverse | Use for inverse backgrounds communicating caution, such as in warning section messages. | #fffef8 | |
background.accent.blue.subtlest | React: themeGet('background.accent.blue.subtlest')CSS: --background-accent-blue-subtlest | background/accent/blue/subtlest | Use for blue backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color. | #0c1933 | |
background.accent.blue.subtler | React: themeGet('background.accent.blue.subtler')CSS: --background-accent-blue-subtler | background/accent/blue/subtler | Use for blue backgrounds when there is no meaning tied to the color, such as coloured tags. | #224a99 | |
background.accent.blue.subtle | React: themeGet('background.accent.blue.subtle')CSS: --background-accent-blue-subtle | background/accent/blue/subtle | Use for vibrant blue backgrounds when there is no meaning tied to the color, such as coloured tags. | #2256c5 | |
background.accent.blue.bolder | React: themeGet('background.accent.blue.bolder')CSS: --background-accent-blue-bolder | background/accent/blue/bolder | Use for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements. | #397bff | |
background.accent.red.subtlest | React: themeGet('background.accent.red.subtlest')CSS: --background-accent-red-subtlest | background/accent/red/subtlest | Use for red backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color. | #310e0e | |
background.accent.red.subtler | React: themeGet('background.accent.red.subtler')CSS: --background-accent-red-subtler | background/accent/red/subtler | Use for red backgrounds when there is no meaning tied to the color, such as colored tags. | #621b1b | |
background.accent.red.subtle | React: themeGet('background.accent.red.subtle')CSS: --background-accent-red-subtle | background/accent/red/subtle | Use for vibrant red backgrounds when there is no meaning tied to the color, such as colored tags. | #922828 | |
background.accent.red.bolder | React: themeGet('background.accent.red.bolder')CSS: --background-accent-red-bolder | background/accent/red/bolder | Use for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements. | #f44343 | |
background.accent.orange.subtlest | React: themeGet('background.accent.orange.subtlest')CSS: --background-accent-orange-subtlest | background/accent/orange/subtlest | Use for orange backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color. | #2f190f | |
background.accent.orange.subtler | React: themeGet('background.accent.orange.subtler')CSS: --background-accent-orange-subtler | background/accent/orange/subtler | Use for orange backgrounds when there is no meaning tied to the color, such as colored tags. | #8e4a2c | |
background.accent.orange.subtle | React: themeGet('background.accent.orange.subtle')CSS: --background-accent-orange-subtle | background/accent/orange/subtle | Use for vibrant orange backgrounds when there is no meaning tied to the color, such as colored tags. | #be633b | |
background.accent.orange.bolder | React: themeGet('background.accent.orange.bolder')CSS: --background-accent-orange-bolder | background/accent/orange/bolder | Use for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements. | #ff996c | |
background.accent.yellow.subtlest | React: themeGet('background.accent.yellow.subtlest')CSS: --background-accent-yellow-subtlest | background/accent/yellow/subtlest | Use for yellow backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color. | #484117 | |
background.accent.yellow.subtler | React: themeGet('background.accent.yellow.subtler')CSS: --background-accent-yellow-subtler | background/accent/yellow/subtler | Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags. | #c0ae3e | |
background.accent.yellow.subtle | React: themeGet('background.accent.yellow.subtle')CSS: --background-accent-yellow-subtle | background/accent/yellow/subtle | Use for vibrant yellow backgrounds when there is no meaning tied to the color, such as colored tags. | #f0da4e | |
background.accent.yellow.bolder | React: themeGet('background.accent.yellow.bolder')CSS: --background-accent-yellow-bolder | background/accent/yellow/bolder | Use for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements. | #fff6b6 | |
background.accent.green.subtlest | React: themeGet('background.accent.green.subtlest')CSS: --background-accent-green-subtlest | background/accent/green/subtlest | Use for green backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color. | #0f2310 | |
background.accent.green.subtler | React: themeGet('background.accent.green.subtler')CSS: --background-accent-green-subtler | background/accent/green/subtler | Use for green backgrounds when there is no meaning tied to the color, such as colored tags. | #2e6930 | |
background.accent.green.subtle | React: themeGet('background.accent.green.subtle')CSS: --background-accent-green-subtle | background/accent/green/subtle | Use for vibrant green backgrounds when there is no meaning tied to the color, such as colored tags. | #358238 | |
background.accent.green.bolder | React: themeGet('background.accent.green.bolder')CSS: --background-accent-green-bolder | background/accent/green/bolder | Use for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements. | #4caf50 | |
background.accent.teal.subtlest | React: themeGet('background.accent.teal.subtlest')CSS: --background-accent-teal-subtlest | background/accent/teal/subtlest | Use for teal backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color. | #1c3330 | |
background.accent.teal.subtler | React: themeGet('background.accent.teal.subtler')CSS: --background-accent-teal-subtler | background/accent/teal/subtler | Use for teal backgrounds when there is no meaning tied to the color, such as colored tags. | #559791 | |
background.accent.teal.subtle | React: themeGet('background.accent.teal.subtle')CSS: --background-accent-teal-subtle | background/accent/teal/subtle | Use for vibrant teal backgrounds when there is no meaning tied to the color, such as colored tags. | #71cac1 | |
background.accent.teal.bolder | React: themeGet('background.accent.teal.bolder')CSS: --background-accent-teal-bolder | background/accent/teal/bolder | Use for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements. | #8dfcf1 | |
background.accent.purple.subtlest | React: themeGet('background.accent.purple.subtlest')CSS: --background-accent-purple-subtlest | background/accent/purple/subtlest | Use for purple backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color. | #221933 | |
background.accent.purple.subtler | React: themeGet('background.accent.purple.subtler')CSS: --background-accent-purple-subtler | background/accent/purple/subtler | Use for purple backgrounds when there is no meaning tied to the color, such as colored tags. | #654b99 | |
background.accent.purple.subtle | React: themeGet('background.accent.purple.subtle')CSS: --background-accent-purple-subtle | background/accent/purple/subtle | Use for vibrant purple backgrounds when there is no meaning tied to the color, such as colored tags. | #8764cc | |
background.accent.purple.bolder | React: themeGet('background.accent.purple.bolder')CSS: --background-accent-purple-bolder | background/accent/purple/bolder | Use for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements. | #a97dff | |
background.accent.gray.subtlest.default | React: themeGet('background.accent.gray.subtlest.default')CSS: --background-accent-gray-subtlest | background/accent/gray/subtlest/default | Use for gray backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color. | #1c1b1c | |
background.accent.gray.subtlest.hovered | React: themeGet('background.accent.gray.subtlest.hovered')CSS: --background-accent-gray-subtlest-hovered | background/accent/gray/subtlest/hovered | Hovered state of background.accent.gray.subtlest | #121213 | |
background.accent.gray.subtlest.pressed | React: themeGet('background.accent.gray.subtlest.pressed')CSS: --background-accent-gray-subtlest-pressed | background/accent/gray/subtlest/pressed | Pressed state of background.accent.gray.subtlest | #090a0f | |
background.accent.gray.subtler.default | React: themeGet('background.accent.gray.subtler.default')CSS: --background-accent-gray-subtler | background/accent/gray/subtler/default | Use for gray backgrounds when there is no meaning tied to the color, such as colored tags. | #2e2d2f | |
background.accent.gray.subtler.hovered | React: themeGet('background.accent.gray.subtler.hovered')CSS: --background-accent-gray-subtler-hovered | background/accent/gray/subtler/hovered | Hovered state of background.accent.gray.subtler | #1c1b1c | |
background.accent.gray.subtler.pressed | React: themeGet('background.accent.gray.subtler.pressed')CSS: --background-accent-gray-subtler-pressed | background/accent/gray/subtler/pressed | Pressed state of background.accent.gray.subtler | #121213 | |
background.accent.gray.subtle.default | React: themeGet('background.accent.gray.subtle.default')CSS: --background-accent-gray-subtle | background/accent/gray/subtle/default | Use for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags. | #8a888e | |
background.accent.gray.subtle.hovered | React: themeGet('background.accent.gray.subtle.hovered')CSS: --background-accent-gray-subtle-hovered | background/accent/gray/subtle/hovered | Hovered state of background.accent.gray.subtle | #5c5b5e | |
background.accent.gray.subtle.pressed | React: themeGet('background.accent.gray.subtle.pressed')CSS: --background-accent-gray-subtle-pressed | background/accent/gray/subtle/pressed | Pressed state of background.accent.gray.subtle | #2e2d2f | |
background.accent.gray.bolder.default | React: themeGet('background.accent.gray.bolder.default')CSS: --background-accent-gray-bolder | background/accent/gray/bolder/default | Use for gray backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements. | #b8b6bd | |
background.accent.gray.bolder.hovered | React: themeGet('background.accent.gray.bolder.hovered')CSS: --background-accent-gray-bolder-hovered | background/accent/gray/bolder/hovered | Hovered state of background.accent.gray.bolder | #a19fa5 | |
background.accent.gray.bolder.pressed | React: themeGet('background.accent.gray.bolder.pressed')CSS: --background-accent-gray-bolder-pressed | background/accent/gray/bolder/pressed | Pressed state of background.accent.gray.bolder | #8a888e | |
background.accent.gradient.orangeYellow | React: themeGet('background.accent.gradient.orangeYellow')CSS: --background-accent-gradient-orangeYellow | background/accent/gradient/orangeYellow | Use for accent gradients from orange to yellow | linear-gradient(90deg, #FF996C 0%, #FFF6B6 100%) | |
background.accent.gradient.yellowPurple | React: themeGet('background.accent.gradient.yellowPurple')CSS: --background-accent-gradient-yellowPurple | background/accent/gradient/yellowPurple | Use for accent gradients from yellow to purple | linear-gradient(90deg, #FFF6B6 0%, #A97DFF 100%) | |
background.accent.gradient.bluePurple | React: themeGet('background.accent.gradient.bluePurple')CSS: --background-accent-gradient-bluePurple | background/accent/gradient/bluePurple | Use for accent gradients from blue to purple | linear-gradient(90deg, #397BFF 0%, #A97DFF 100%) | |
background.accent.gradient.yellowBlue | React: themeGet('background.accent.gradient.yellowBlue')CSS: --background-accent-gradient-yellowBlue | background/accent/gradient/yellowBlue | Use for accent gradients from yellow to blue | linear-gradient(90deg, #FFF6B6 0%, #397BFF 100%) | |
background.accent.gradient.orangeTeal | React: themeGet('background.accent.gradient.orangeTeal')CSS: --background-accent-gradient-orangeTeal | background/accent/gradient/orangeTeal | Use for accent gradients from orange to teal | linear-gradient(90deg, #FF996C 0%, #8DFCF1 99%) | |
background.accent.gradient.orangePurple | React: themeGet('background.accent.gradient.orangePurple')CSS: --background-accent-gradient-orangePurple | background/accent/gradient/orangePurple | Use for accent gradients from orange to purple | linear-gradient(90deg, #FF996C 0%, #A97DFF 100%) | |
background.accent.gradient.blueOrange | React: themeGet('background.accent.gradient.blueOrange')CSS: --background-accent-gradient-blueOrange | background/accent/gradient/blueOrange | Use for accent gradients from blue to orange | linear-gradient(90deg, #397BFF 0%, #FF996C 99%) | |
background.accent.gradient.purpleTeal | React: themeGet('background.accent.gradient.purpleTeal')CSS: --background-accent-gradient-purpleTeal | background/accent/gradient/purpleTeal | Use for accent gradients from purple to teal | linear-gradient(90deg, #A97DFF 0%, #8DFCF1 99%) | |
background.accent.gradient.tealBlue | React: themeGet('background.accent.gradient.tealBlue')CSS: --background-accent-gradient-tealBlue | background/accent/gradient/tealBlue | Use for accent gradients from teal to blue | linear-gradient(90deg, #8DFCF1 0%, #397BFF 100%) | |
background.accent.gradient.tealYellow | React: themeGet('background.accent.gradient.tealYellow')CSS: --background-accent-gradient-tealYellow | background/accent/gradient/tealYellow | Use for accent gradients from teal to yellow | linear-gradient(90deg, #8DFCF1 0%, #FFF6B6 100%) | |
background.neutral.subtle.default | React: themeGet('background.neutral.subtle.default')CSS: --background-neutral-subtle | background/neutral/subtle/default | Use for the background of elements that appear to have no background in a resting state, such as subtle buttons and menu items. | #00000000 | |
background.neutral.subtle.hovered | React: themeGet('background.neutral.subtle.hovered')CSS: --background-neutral-subtle-hovered | background/neutral/subtle/hovered | Hovered state for color.background.neutral.subtle | #b8b6bd1a | |
background.neutral.subtle.pressed | React: themeGet('background.neutral.subtle.pressed')CSS: --background-neutral-subtle-pressed | background/neutral/subtle/pressed | Pressed state for color.background.neutral.subtle | #b8b6bd33 | |
background.selected.default.[default] | React: themeGet('background.selected.default.default')CSS: --background-selected | background/selected/default/default | Use for the background of elements in a selected state, such as in opened dropdown buttons. | #6195ff | |
background.selected.default.hovered | React: themeGet('background.selected.default.hovered')CSS: --background-selected-hovered | background/selected/default/hovered | Hovered state for color.background.selected | #397bff | |
background.selected.default.pressed | React: themeGet('background.selected.default.pressed')CSS: --background-selected-pressed | background/selected/default/pressed | Pressed state for color.background.selected | #336fe6 | |
background.selected.bold.default | React: themeGet('background.selected.bold.default')CSS: --background-selected-bold | background/selected/bold/default | Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. | #224a99 | |
background.selected.bold.hovered | React: themeGet('background.selected.bold.hovered')CSS: --background-selected-bold-hovered | background/selected/bold/hovered | Hovered state of color.background.selected.bold | #173166 | |
background.selected.bold.pressed | React: themeGet('background.selected.bold.pressed')CSS: --background-selected-bold-pressed | background/selected/bold/pressed | Pressed state of color.background.selected.bold | #0c1933 | |
surface.default | React: themeGet('surface.default')CSS: -- | surface/default | Use as the primary background for the UI. | #090a0f | |
surface.inverse | React: themeGet('surface.inverse')CSS: --inverse | surface/inverse | Use for surfaces that should be the inverse of the primary surface of the UI. | #ffffff | |
surface.raised.default | React: themeGet('surface.raised.default')CSS: --raised | surface/raised/default | Use for the background of raised cards, such as cards. Combine with elevation.shadow.raised | #121213 | |
surface.raised.hovered | React: themeGet('surface.raised.hovered')CSS: --raised-hovered | surface/raised/hovered | Use for the background of raised cards, such as cards. Combine with elevation.shadow.raised | #1c1b1c | |
surface.raised.pressed | React: themeGet('surface.raised.pressed')CSS: --raised-pressed | surface/raised/pressed | Use for the background of raised cards, such as cards. Combine with elevation.shadow.raised | #2e2d2f | |
elevation.surface.inverse.default | React: themeGet('elevation.surface.inverse.default')CSS: --surface-inverse | elevation/surface/inverse/default | Use for surfaces that should be the inverse of the primary surface of the UI. | #ffffff | |
elevation.surface.default.[default] | React: themeGet('elevation.surface.default.default')CSS: --surface | elevation/surface/default/default | Use as the primary background for the UI. | #090a0f | |
elevation.surface.default.hovered | React: themeGet('elevation.surface.default.hovered')CSS: --surface-hovered | elevation/surface/default/hovered | Hovered state of elevation.surface | #1c1b1c | |
elevation.surface.default.pressed | React: themeGet('elevation.surface.default.pressed')CSS: --surface-pressed | elevation/surface/default/pressed | Pressed state of elevation.surface | #2e2d2f | |
elevation.surface.raised.default | React: themeGet('elevation.surface.raised.default')CSS: --surface-raised | elevation/surface/raised/default | Use for the background of raised cards, such as cards. Combine with elevation.shadow.raised | #121213 | |
elevation.surface.raised.hovered | React: themeGet('elevation.surface.raised.hovered')CSS: --surface-raised-hovered | elevation/surface/raised/hovered | Use for the background of raised cards, such as cards. Combine with elevation.shadow.raised | #1c1b1c | |
elevation.surface.raised.pressed | React: themeGet('elevation.surface.raised.pressed')CSS: --surface-raised-pressed | elevation/surface/raised/pressed | Use for the background of raised cards, such as cards. Combine with elevation.shadow.raised | #2e2d2f | |
opacity.disabled | React: themeGet('opacity.disabled')CSS: --opacity-disabled | opacity/disabled | Apply to images when in a disabled state. | | |
opacity.loading | React: themeGet('opacity.loading')CSS: --opacity-loading | opacity/loading | Apply to content that sits under a loading spinner. | | |
skeleton.default | React: themeGet('skeleton.default')CSS: --skeleton | skeleton/default | Use for skeleton loading states | #b8b6bd1a | |
skeleton.subtle | React: themeGet('skeleton.subtle')CSS: --skeleton-subtle | skeleton/subtle | Use for the pulse or shimmer effect in skeleton loading states | #b8b6bd0f |
Typography
| Demo | Token name | Code | Figma usage | Description | Value |
|---|---|---|---|---|---|
Light the way | font.heading.xxsmall | React: themeGet('font.heading.xxsmall')CSS: --font-heading-xxsmall | 600 12px/16px "Area Normal Regular", "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.heading.xsmall | React: themeGet('font.heading.xsmall')CSS: --font-heading-xsmall | 600 14px/20px "Area Normal Regular", "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.heading.small | React: themeGet('font.heading.small')CSS: --font-heading-small | 600 16px/24px "Area Normal Regular", "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.heading.medium | React: themeGet('font.heading.medium')CSS: --font-heading-medium | 600 20px/24px "Area Normal Regular", "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.heading.large | React: themeGet('font.heading.large')CSS: --font-heading-large | 600 24px/28px "Area Normal Regular", "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.heading.xlarge | React: themeGet('font.heading.xlarge')CSS: --font-heading-xlarge | 600 28px/32px "Area Normal Regular", "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.heading.xxlarge | React: themeGet('font.heading.xxlarge')CSS: --font-heading-xxlarge | 600 36px/40px "Area Normal Regular", "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.body.default | React: themeGet('font.body.default')CSS: --font-body | 500 14px/20px "Area Normal Regular", -apple-system, BlinkMacSystemFont, Arial, "Segoe UI", avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.body.small | React: themeGet('font.body.small')CSS: --font-body-small | 500 12px/16px "Area Normal Regular", -apple-system, BlinkMacSystemFont, Arial, "Segoe UI", avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.body.medium | React: themeGet('font.body.medium')CSS: --font-body-medium | 500 14px/20px "Area Normal Regular", -apple-system, BlinkMacSystemFont, Arial, "Segoe UI", avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.body.large | React: themeGet('font.body.large')CSS: --font-body-large | 500 16px/24px "Area Normal Regular", -apple-system, BlinkMacSystemFont, Arial, "Segoe UI", avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.body.xlarge | React: themeGet('font.body.xlarge')CSS: --font-body-xlarge | 500 18px/28px "Area Normal Regular", -apple-system, BlinkMacSystemFont, Arial, "Segoe UI", avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.ui.default | React: themeGet('font.ui.default')CSS: --font-ui | 600 14px/16px "Area Normal Regular", -apple-system, BlinkMacSystemFont, Arial, "Segoe UI", avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.ui.small | React: themeGet('font.ui.small')CSS: --font-ui-small | 600 12px/16px "Area Normal Regular", -apple-system, BlinkMacSystemFont, Arial, "Segoe UI", avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.caption.default | React: themeGet('font.caption.default')CSS: --font-caption | normal 500 12px/20px "Area Normal Regular", -apple-system, BlinkMacSystemFont, Arial, "Segoe UI", avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.code.default | React: themeGet('font.code.default')CSS: --font-code | 400 14px SF Mono | ||
Light the way | font.code.xsmall | React: themeGet('font.code.xsmall')CSS: --font-code-xsmall | 400 12px SF Mono | ||
Light the way | font.code.small | React: themeGet('font.code.small')CSS: --font-code-small | 400 14px SF Mono | ||
Light the way | font.code.medium | React: themeGet('font.code.medium')CSS: --font-code-medium | 400 16px SF Mono | ||
Light the way | font.display.default | React: themeGet('font.display.default')CSS: --font-display | 300 62px "Area Normal Regular", "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif | ||
Light the way | font.display.medium | React: themeGet('font.display.medium')CSS: --font-display-medium | 300 47px "Area Normal Regular", "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif |