Design tokens
Design tokens are the single source of truth to name and store design decisions.Neutral selected-state tokens
When the platform-dst-tokens-finesse feature flag is enabled, color tokens for selected states use neutral colors instead of blue.
All tokens
Border
Width
| Token and description | Value |
|---|---|
The default width for all standard component borders and dividers. | |
The width used to indicate a selected element, such as an active tab or a chosen item. | |
The width used for the focus ring on interactive elements. |
Color
Background
| Token and description | Light value | Dark value |
|---|---|---|
Use for for backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color. Introduced v1.6.0 | ||
Use for for backgrounds when there is no meaning tied to the color, such as colored tags. Introduced v1.6.0 | ||
Use for vibrant for backgrounds when there is no meaning tied to the color, such as colored tags. Introduced v1.6.0 | ||
Use for for backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements. Introduced v1.6.0 | ||
Use for red backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color. Introduced v0.7.0 | ||
Use for red backgrounds when there is no meaning tied to the color, such as colored tags. Introduced v0.7.0 | ||
Use for vibrant red backgrounds when there is no meaning tied to the color, such as colored tags. Introduced v0.7.0 | ||
Use for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements. Introduced v0.7.0 | ||
Use for orange backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color. Introduced v0.7.0 | ||
Use for orange backgrounds when there is no meaning tied to the color, such as colored tags. Introduced v0.7.0 | ||
Use for vibrant orange backgrounds when there is no meaning tied to the color, such as colored tags. Introduced v0.7.0 | ||
Use for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements. Introduced v0.7.0 | ||
Use for yellow backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color. Introduced v0.7.0 | ||
Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags. Introduced v0.7.0 | ||
Use for vibrant yellow backgrounds when there is no meaning tied to the color, such as colored tags. Introduced v0.7.0 | ||
Use for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements. Introduced v0.7.0 | ||
Use for green backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color. Introduced v0.7.0 | ||
Use for green backgrounds when there is no meaning tied to the color, such as colored tags. Introduced v0.7.0 | ||
Use for vibrant green backgrounds when there is no meaning tied to the color, such as colored tags. Introduced v0.7.0 | ||
Use for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements. Introduced v0.7.0 | ||
Use for teal backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color. Introduced v0.7.0 | ||
Use for teal backgrounds when there is no meaning tied to the color, such as colored tags. Introduced v0.7.0 | ||
Use for vibrant teal backgrounds when there is no meaning tied to the color, such as colored tags. Introduced v0.7.0 | ||
Use for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements. Introduced v0.7.0 | ||
Use for blue backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color. Introduced v0.7.0 | ||
Use for blue backgrounds when there is no meaning tied to the color, such as colored tags. Introduced v0.7.0 | ||
Use for vibrant blue backgrounds when there is no meaning tied to the color, such as colored tags. Introduced v0.7.0 | ||
Use for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements. Introduced v0.7.0 | ||
Use for purple backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color. Introduced v0.7.0 | ||
Use for purple backgrounds when there is no meaning tied to the color, such as colored tags. Introduced v0.7.0 | ||
Use for vibrant purple backgrounds when there is no meaning tied to the color, such as colored tags. Introduced v0.7.0 | ||
Use for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements. Introduced v0.7.0 | ||
Use for magenta backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color. Introduced v0.7.0 | ||
Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags. Introduced v0.7.0 | ||
Use for vibrant magenta backgrounds when there is no meaning tied to the color, such as colored tags. Introduced v0.7.0 | ||
Use for magenta backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements. Introduced v0.7.0 | ||
Use for gray backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color. Introduced v0.7.0 | ||
Use for gray backgrounds when there is no meaning tied to the color, such as colored tags. Introduced v0.7.0 | ||
Use for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags. Introduced v0.7.0 | ||
Use for gray backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements. Introduced v0.7.0 | ||
Use for highlighted added code lines. | ||
Use for added code lines. | ||
Use for the default background of code blocks and code diffs. | ||
Use for the background of code gutters. | ||
Use for highlighted unchanged code lines. | ||
Use for highlighted removed code lines. | ||
Use for removed code lines. | ||
Use for backgrounds of elements in a disabled state. | ||
Use for background of form UI elements, such as text fields, checkboxes, and radio buttons. Introduced v0.6.0 | ||
Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards. Introduced v0.8.3 | ||
The default background for neutral elements, such as default buttons. Introduced v0.6.0 | ||
Use for the background of elements that appear to have no background in a resting state, such as subtle buttons and menu items. Introduced v0.6.0 | ||
A vibrant background option for neutral UI elements, such as announcement banners. Introduced v0.6.0 | ||
Use for the background of elements in a selected state, such as in opened dropdown buttons. Introduced v0.6.2 | ||
Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. Introduced v0.6.2 | ||
Use for the background of elements used to reinforce our brand, but with less emphasis. Introduced v1.13.0 | ||
Use for the background of elements used to reinforce our brand, but with more emphasis. Introduced v0.6.0 | ||
Use for the background of elements used to reinforce our brand, that need to stand out a lot. Introduced v1.13.0 | ||
Use for backgrounds communicating critical information, such in error section messages. Introduced v0.6.0 | ||
Use for backgrounds of danger lozenges and badges to ensure accessibility and desired visual appearance. Introduced v8.1.0 | ||
Background colour for non-interactive elements communicating critical danger information (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.danger.bold or color.background.danger.subtler for interactive states. | ||
A vibrant background option for communicating critical information, such as in danger buttons and error banners. Introduced v0.6.0 | ||
Use for backgrounds communicating caution, such as in warning section messages. Introduced v0.6.0 | ||
Use for backgrounds of warning lozenges and badges to ensure accessibility and desired visual appearance. Introduced v8.1.0 | ||
Background colour for non-interactive elements communicating caution (e.g. status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.warning.bold or color.background.warning.subtler for interactive states. | ||
A vibrant background option for communicating caution, such as in warning buttons and warning banners. Introduced v0.6.0 | ||
Use for backgrounds communicating a favorable outcome, such as in success section messages. Introduced v0.6.0 | ||
Use for backgrounds of success lozenges and badges to ensure accessibility and desired visual appearance. Introduced v8.1.0 | ||
Background colour for non-interactive elements communicating success (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.success.bold or color.background.success.subtler for interactive states. | ||
A vibrant background option for communicating a favorable outcome, such as in checked toggles. Introduced v0.6.0 | ||
Use for backgrounds communicating change or something new, such as in discovery section messages. Introduced v0.6.0 | ||
Use for backgrounds of discovery lozenges and badges to ensure accessibility and desired visual appearance. Introduced v8.1.0 | ||
Background colour for non-interactive elements communicating discovery (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.discovery.bold or color.background.discovery.subtler for interactive states. | ||
A vibrant background option communicating change or something new, such as in onboarding spotlights. Introduced v0.6.0 | ||
Use for backgrounds communicating information or something in-progress, such as in information section messages. Introduced v0.6.0 | ||
Use for backgrounds of information lozenges and badges to ensure accessibility and desired visual appearance. Introduced v8.1.0 | ||
Background colour for non-interactive elements communicating information (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.information.bold or color.background.information.subtler for interactive states. | ||
A vibrant background option for communicating information or something in-progress. Introduced v0.6.0 |
Border
| Token and description | Light value | Dark value |
|---|---|---|
Use to visually group or separate UI elements, such as flat cards or side panel dividers. | ||
Use for lime borders on non-bold backgrounds when there is no meaning tied to the color. | ||
Use for decorative lime borders that do not need to meet 3:1 contrast requirements. | ||
Use for red borders on non-bold backgrounds when there is no meaning tied to the color. | ||
Use for decorative red borders that do not need to meet 3:1 contrast requirements. | ||
Use for orange borders on non-bold backgrounds when there is no meaning tied to the color. | ||
Use for decorative orange borders that do not need to meet 3:1 contrast requirements. | ||
Use for yellow borders on non-bold backgrounds when there is no meaning tied to the color. | ||
Use for decorative yellow borders that do not need to meet 3:1 contrast requirements. | ||
Use for green borders on non-bold backgrounds when there is no meaning tied to the color. | ||
Use for decorative green borders that do not need to meet 3:1 contrast requirements. | ||
Use for teal borders on non-bold backgrounds when there is no meaning tied to the color. | ||
Use for decorative teal borders that do not need to meet 3:1 contrast requirements. | ||
Use for blue borders on non-bold backgrounds when there is no meaning tied to the color. | ||
Use for decorative blue borders that do not need to meet 3:1 contrast requirements. | ||
Use for purple borders on non-bold backgrounds when there is no meaning tied to the color. | ||
Use for decorative purple borders that do not need to meet 3:1 contrast requirements. | ||
Use for magenta borders on non-bold backgrounds when there is no meaning tied to the color. | ||
Use for decorative magenta borders that do not need to meet 3:1 contrast requirements. | ||
Use for borders on non-bold gray accent backgrounds. | ||
Use for decorative gray borders that do not need to meet 3:1 contrast requirements. | ||
Use for code block and code diff borders. | ||
Use for borders of elements in a disabled state. | ||
Use for focus rings of elements in a focus state. | ||
Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons. | ||
Use for the border of search inputs. | ||
Use for borders on bold backgrounds. | ||
Use for borders or visual indicators of elements in a selected or opened state, such as in tabs or menu items. | ||
Use for borders or visual indicators of elements that reinforce our brand, such as logos or primary buttons. | ||
Use for borders communicating critical information, such as the borders on invalid text fields. | ||
Use for decorative danger borders that do not need to meet 3:1 contrast requirements. | ||
Use for borders communicating caution. | ||
Use for decorative warning borders that do not need to meet 3:1 contrast requirements. | ||
Use for borders communicating a favorable outcome, such as the borders on validated text fields. | ||
Use for decorative success borders that do not need to meet 3:1 contrast requirements. | ||
Use for borders communicating change or something new, such as the borders in onboarding spotlights. | ||
Use for decorative discovery borders that do not need to meet 3:1 contrast requirements. | ||
Use for borders communicating information or something in-progress. | ||
Use for decorative information borders that do not need to meet 3:1 contrast requirements. | ||
A neutral border option that passes min 3:1 contrast ratios. |
Text
| Token and description | Light value | Dark value |
|---|---|---|
Use for primary text, such as body copy, sentence case headers, and buttons. | ||
Use for lime text on subtlest and subtler lime accent backgrounds when there is no meaning tied to the color. | ||
Use for lime text on subtle lime accent backgrounds when there is no meaning tied to the color. | ||
Use for red text on subtlest and subtler red accent backgrounds when there is no meaning tied to the color. | ||
Use for red text on subtle red accent backgrounds when there is no meaning tied to the color. | ||
Use for orange text on subtlest and subtler orange accent backgrounds when there is no meaning tied to the color. | ||
Use for orange text on subtle orange accent backgrounds when there is no meaning tied to the color. | ||
Use for yellow text on subtlest and subtler yellow accent backgrounds when there is no meaning tied to the color. | ||
Use for yellow text on subtle yellow accent backgrounds when there is no meaning tied to the color. | ||
Use for green text on subtlest and subtler green accent backgrounds when there is no meaning tied to the color. | ||
Use for green text on subtle green accent backgrounds when there is no meaning tied to the color. | ||
Use for teal text on subtlest and subtler teal accent backgrounds when there is no meaning tied to the color. | ||
Use for teal text on subtle teal accent backgrounds when there is no meaning tied to the color. | ||
Use for blue text on subtlest and subtler blue accent backgrounds when there is no meaning tied to the color. | ||
Use for blue text on subtle blue accent backgrounds when there is no meaning tied to the color. | ||
Use for purple text on subtlest and subtler purple accent backgrounds when there is no meaning tied to the color. | ||
Use for purple text on subtle purple accent backgrounds when there is no meaning tied to the color. | ||
Use for magenta text on subtlest and subtler magenta accent backgrounds when there is no meaning tied to the color. | ||
Use for magenta text on subtle magenta accent backgrounds when there is no meaning tied to the color. | ||
Use for text on non-bold gray accent backgrounds, such as colored tags. | ||
Use for text and icons on gray subtle accent backgrounds. | ||
Use for an additional syntax-highlighting text color. | ||
Use for an additional syntax-highlighting text color. | ||
Use for comments in syntax-highlighted code. | ||
Use for default text in code blocks and code diffs. | ||
Use for functions in syntax-highlighted code. | ||
Use for line numbers and other code gutter text. | ||
Use for language keywords in syntax-highlighted code. | ||
Use for numeric values in syntax-highlighted code. | ||
Use for operators and punctuation in syntax-highlighted code. | ||
Use for string values in syntax-highlighted code. | ||
Use for tags in syntax-highlighted code. | ||
Use for text in a disabled state. | ||
Use for text on bold backgrounds. | ||
Use for text in selected or opened states, such as tabs and dropdown buttons. | ||
Use for text that reinforces our brand. | ||
Use for critical text, such as input field error messaging. | ||
Use for text on top of danger semantic labels to ensure accessibility and desired visual appearance. | ||
Use for text to emphasize caution, such as in moved lozenges. | ||
Use for text when on bold warning backgrounds. | ||
Use for text on top of warning semantic labels to ensure accessibility and desired visual appearance. | ||
Use for text to communicate a favorable outcome, such as input field success messaging. | ||
Use for text on top of success semantic labels to ensure accessibility and desired visual appearance. | ||
Use for text to emphasize change or something new, such as in new lozenges. | ||
Use for text on top of discovery semantic labels to ensure accessibility and desired visual appearance. | ||
Use for informative text or to communicate something is in progress, such as in-progress lozenges. | ||
Use for text on top of information semantic labels to ensure accessibility and desired visual appearance. | ||
Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text. | ||
Use for secondary text, such as navigation, subtle button links, input field labels, and all caps subheadings. |
Icon
| Token and description | Light value | Dark value |
|---|---|---|
Use for icon-only buttons, or icons paired with color.text | ||
Use for lime icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons. | ||
Use for red icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons. | ||
Use for orange icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons. | ||
Use for yellow icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons. | ||
Use for green icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons. | ||
Use for teal icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons. | ||
Use for blue icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons. | ||
Use for purple icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons. | ||
Use for magenta icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons. | ||
Use for icons on non-bold gray accent backgrounds, such as file type icons. | ||
Use for icons in a disabled state. | ||
Use for icons on bold backgrounds. | ||
Use for icons in selected or opened states, such as those used in dropdown buttons. | ||
Use for icons that reinforce our brand. | ||
Use for icons communicating critical information, such as those used in error handing. | ||
Use for icons communicating caution, such as those used in warning section messages. | ||
Use for icons when on bold warning backgrounds. | ||
Use for icons communicating a favorable outcome, such as those used in success section messaged. | ||
Use for icons communicating change or something new, such as discovery section messages. | ||
Use for icons communicating information or something in-progress, such as information section messages. | ||
Use for icons paired with color.text.subtlest | ||
Use for icons paired with color.text.subtle |
Link
| Token and description | Light value | Dark value |
|---|---|---|
Use for links in a default or hovered state. Add an underline for hovered states. Introduced v0.6.0 | ||
Use for visited links. Introduced v1.23.0 |
Interaction
| Token and description | Light value | Dark value |
|---|---|---|
Use as a background overlay for elements in a hovered state when their background color cannot change, such as avatars. | ||
Use as a background overlay for elements in a pressed state when their background color cannot change, such as avatars. |
Skeleton
| Token and description | Light value | Dark value |
|---|---|---|
Use for skeleton loading states | ||
Use for the pulse or shimmer effect in skeleton loading states |
Blanket
| Token and description | Light value | Dark value |
|---|---|---|
Use for the screen overlay that appears with modal dialogs | ||
Use as an overlay to communicate selected states when a simple background color change isn't possible, such as in Editor block elements | ||
Use as an overlay to communicate danger states when a simple background color change isn't possible, such as deletion of Editor block elements |
Chart
| Token and description | Light value | Dark value |
|---|---|---|
For data visualisation only. Follow numbered sequence. Introduced v0.13.3 | ||
For data visualisation only. Follow numbered sequence. Introduced v0.13.3 | ||
For data visualisation only. Follow numbered sequence. Introduced v0.13.3 | ||
For data visualisation only. Follow numbered sequence. Introduced v0.13.3 | ||
For data visualisation only. Follow numbered sequence. Introduced v0.13.3 | ||
For data visualisation only. Follow numbered sequence. Introduced v0.13.3 | ||
For data visualisation only. Follow numbered sequence. Introduced v0.13.3 | ||
For data visualisation only. Follow numbered sequence. Introduced v0.13.3 | ||
For data visualisation only. Introduced v1.8.0 | ||
For data visualisation only. Introduced v1.8.0 | ||
For data visualisation only. Introduced v1.8.0 | ||
A secondary color for data visualisation or to communicate 'to-do' statues. Introduced v0.13.3 | ||
For data visualisation only. Introduced v0.13.3 | ||
For data visualisation only. Introduced v0.13.3 | ||
For data visualisation only. Introduced v0.13.3 | ||
For data visualisation only. Introduced v0.13.3 | ||
For data visualisation only. Introduced v0.13.3 | ||
For data visualisation only. Introduced v0.13.3 | ||
For data visualisation only. Introduced v0.13.3 | ||
For data visualisation only. Introduced v0.13.3 | ||
For data visualisation only. Introduced v0.13.3 | ||
For data visualisation only. Introduced v0.13.3 | ||
For data visualisation only. Introduced v0.13.3 | ||
For data visualisation only. Introduced v0.13.3 | ||
For data visualisation only. Introduced v0.13.3 | ||
For data visualisation only. Introduced v0.13.3 | ||
For data visualisation only. Introduced v0.13.3 | ||
For data visualisation only. Introduced v0.13.3 | ||
For data visualisation only. Introduced v0.13.3 | ||
For data visualisation only. Introduced v0.13.3 | ||
For data visualisation only. Introduced v0.13.3 | ||
For data visualisation only. Introduced v0.13.3 | ||
For data visualisation only. Introduced v0.13.3 | ||
For data visualisation only. Introduced v0.13.3 | ||
For data visualisation only. Introduced v0.13.3 | ||
For data visualisation only. Introduced v0.13.3 | ||
For data visualisation only. Introduced v0.13.3 | ||
For data visualisation only. Introduced v0.13.3 | ||
For data visualisation only. Introduced v0.13.3 | ||
Our primary color for data visualisation. Use when only one color is required. Introduced v0.13.3 | ||
For data visualisation communicating negative information, such as 'off track'. Introduced v0.13.3 | ||
A stronger emphasis option of color.chart.danger. Introduced v0.13.3 | ||
For data visualisation communicating caution, such as 'at risk' statuses. Introduced v0.13.3 | ||
A stronger emphasis option of color.chart.warning. Introduced v0.13.3 | ||
For data visualisation communicating positive information, such as 'on track'. Introduced v0.13.3 | ||
A stronger emphasis option of color.chart.success. Introduced v0.13.3 | ||
For data visualisation communicating 'new' statuses. Introduced v0.13.3 | ||
A stronger emphasis option of color.chart.discovery. Introduced v0.13.3 | ||
For data visualisation communicating low priority or in-progress statuses. Introduced v0.13.3 | ||
A stronger emphasis option of color.chart.information. Introduced v0.13.3 |
Rovo
| Token and description | Light value | Dark value |
|---|---|---|
Background color for Rovo brand emphasis. Introduced v8.2.0 | ||
Use for Rovo lime borders. | ||
Use for Rovo saffron borders. | ||
Use for Rovo blue borders. | ||
Use for Rovo purple borders. | ||
Use for Rovo lime icons. | ||
Use for Rovo saffron icons. | ||
Use for Rovo blue icons. | ||
Use for Rovo purple icons. |
Elevation
Surface
| Token and description | Light value | Dark value |
|---|---|---|
Use as the primary background for the UI. Introduced v0.6.0 | ||
Use as a neutral container surface background. Introduced v13.3.0 | ||
Use for the background of elements that sit on top of they UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons. Also use for the background of raised cards in a dragged state. Combine with elevation.shadow.overlay. Introduced v0.6.0 | ||
Use for the background of cards that can be moved, such as Jira cards on a Kanban board. Combine with elevation.shadow.raised. Introduced v0.6.0 | ||
A secondary background for the UI commonly used for grouping items, such as Jira cards in columns. |
Rovo
| Token and description | Light value | Dark value |
|---|---|---|
Use for Rovo overlay surface backgrounds. Introduced v13.3.0 |
Shadow
| Token and description | Light value | Dark value |
|---|---|---|
Use to create a shadow when content scrolls under other content. | ||
Use only when elevation.shadow.overflow is not technically feasible to implement. Pair with elevation.shadow.overflow.spread to replicate the overflow shadow. | ||
Use only when elevation.shadow.overflow is not technically feasible to implement. Pair with elevation.shadow.overflow.perimeter to replicate the overflow shadow. | ||
Use for the box shadow of elements that sit on top of the UI, such as modals, dropdown menus, flags, and inline dialogs. Combine with elevation.surface.overlay Also use for the box shadow of raised cards in a dragged state. | ||
Use for the box shadow of raised card elements, such as Jira cards on a Kanban board. Combine with elevation.surface.raised |
Font
Heading
| Token and description | Preview |
|---|---|
For overlapping brand with app promotions, such as marketplace content. Migrate instances of H900 to Heading XXL. Token is applied using CSSfont, not font-size. | Heading XXL |
For overlapping brand with app promotions, such as marketplace content. Migrate instances of H800 to Heading XL. Token is applied using CSSfont, not font-size. | Heading XL |
App page titles, such as forms. Migrate instances of H700 to Heading L. Token is applied using CSSfont, not font-size. | Heading L |
Headers in large components, such as modal dialogs. Migrate instances of H600 to Heading M. Token is applied using CSSfont, not font-size. | Heading M |
For headers in small components where space is limited. Migrate instances of H500 to Heading S. Token is applied using CSSfont, not font-size. | Heading S |
For headers in small components where space is limited. Migrate instances of H400 to Heading XS. Token is applied using CSSfont, not font-size. | Heading XS |
For headers in fine print or tight spaces. Use sparingly. Migrate instances of H100, H200 and H300 to Heading XXS. Token is applied using CSSfont, not font-size. | Heading XXS |
Body
| Token and description | Preview |
|---|---|
For long-form text, such as in blogs. Token is applied using CSSfont, not font-size. | Body L |
Use in short descriptions or labels. The default size for text in components. Migrate instances of Paragraph Default and UI Text to Body M. Token is applied using CSSfont, not font-size. | Body |
Use in secondary level content such as fine print or semantic messaging. Use sparingly. Migrate instances of Small text to Body S. Token is applied using CSSfont, not font-size. | Body S |
Metric
| Token and description | Preview |
|---|---|
Use to emphasize a number within a large donut. Token is applied using CSSfont, not font-size. | Metric L |
Use to emphasize a number within a medium donut. Token is applied using CSSfont, not font-size. | Metric M |
Use to emphasize a number and words in single-value tiles, or small donuts. Token is applied using CSSfont, not font-size. | Metric S |
Code
| Token and description | Preview |
|---|---|
For representing code only, either inline or in code blocks. Token is applied using CSSfont, not font-size. | Code |
Weight
| Token and description | Preview |
|---|---|
Default font weight for body text styles. | Regular |
For all text that may appear beside iconography, such as in a button. | Medium |
Use with caution as fallback fonts do not support this font weight and will default to bold weight. | Semibold |
Use sparingly for emphasising text, such as in a lozenge. | Bold |
Family
| Token and description | Preview |
|---|---|
For our default UI heading text. | Heading |
For our default UI body text. | Body |
For representing code only. | Code |
For our brand heading text. Uses Charlie Display. | Heading |
For our brand body text. Uses Charlie Text. | Body |
Motion
| Token and description | Value |
|---|---|
Use for avatar group enter transitions. | ScaleIn80to100 FadeIn0to100 150ms EasePracticalOut |
Use for avatar group exit transitions. | ScaleOut100to80 FadeOut100to0 100ms EasePracticalIn |
Use for hover state on avatar elements. | transform 250ms EaseSpring |
Use for blanket enter transitions. | FadeIn0to100 250ms EaseBoldInOut |
Use for blanket exit transitions. | FadeOut100to0 200ms EasePracticalIn |
Use for button hover state transitions. | background-color border-color 150ms EasePracticalOut |
Use for button pressed state transitions. | background-color border-color 150ms EasePracticalOut |
Use for instant feedback with no perceptible delay, such as list item hover, selected and focus states. | 0ms |
Use for medium entrance transitions, such as modal enter and flag enter. | 250ms |
Use for medium exit transitions, such as modal exit and flag exit. | 200ms |
Use for interactive state emphasis and small entrances, such as button hover and pressed states, popup enter, and avatar appear. | 150ms |
Use for large transitions, such as panel enter/exit, page transitions, and full-screen overlays. | 400ms |
Use for subtle pressed states and quick exits, such as component press feedback, popup dismiss, and avatar transitions. | 100ms |
Use for large transitions, such as onboarding steps and full-screen overlays. | 600ms |
Use for instant feedback, such as list item hover, selected and focus states. | 50ms |
Starts slowly and accelerates away. Best for exit transitions where elements leaving the screen should feel like they are getting out of the way. | cubic-bezier(0.6, 0, 0.8, 0.6) |
The bold in-out curve pairs naturally with scale and repositioning of elements. It controls both the start and end of the motion. | cubic-bezier(0.4, 0, 0, 1) |
A practical, everyday enter curve. Less dramatic than the bold variant, good for subtle transitions like content swaps, tab changes, and list reordering. | cubic-bezier(0.4, 1, 0.6, 1) |
Elements arrive quickly and decelerate to a stop. The fast start grabs attention and the gentle landing feels controlled. | cubic-bezier(0, 0.4, 0, 1) |
Use for flag enter transitions. | SlideIn50PercentLeft FadeIn0to100 250ms EaseBoldOut |
Use for flag exit transitions. | SlideOut15PercentLeft FadeOut100to0 200ms EasePracticalIn |
Use for repositioning flag elements. | transform 250ms EaseBoldInOut |
Use for input hover, focus, and error state transitions. | background-color border-color box-shadow 150ms EasePracticalOut |
Use for fade-in transitions where an element goes from fully transparent to fully opaque. | FadeIn0to100 |
Use for fade-out transitions where an element goes from fully opaque to fully transparent. | FadeOut100to0 |
Use to expand an inline grid column from 80% to full size on enter. | GridColumnIn80to100 |
Use to collapse an inline grid column from full size to zero on exit. | GridColumnOut100to0 |
Use for medium scale-in transitions where an element grows from 80% to full size on enter. | ScaleIn80to100 |
Use for small scale-in transitions where an element grows from 95% to full size on enter. | ScaleIn95to100 |
Use for medium scale-out transitions where an element shrinks from full size to 80% on exit. | ScaleOut100to80 |
Use for small scale-out transitions where an element shrinks from full size to 95% on exit. | ScaleOut100to95 |
Use for short slide-in transitions where an element enters from below its final position by 8px. | SlideInBottom8px |
Use for slide-in transitions where an element enters from the left of its final position by 50%. | SlideIn50PercentLeft |
Use for short slide-in transitions where an element enters from the left of its final position by 8px. | SlideInLeft8px |
Use for short slide-in transitions where an element enters from the right of its final position by 8px. | SlideInRight8px |
Use for short slide-in transitions where an element enters from above its final position by 8px. | SlideInTop8px |
Use for short slide-out transitions where an element exits downward by 8px from its starting position. | SlideOutBottom4px |
Use for slide-out transitions where an element exits to the left of its starting position by 15%. | SlideOut15PercentLeft |
Use for short slide-out transitions where an element exits to the left by 8px from its starting position. | SlideOutLeft4px |
Use for short slide-out transitions where an element exits to the right by 8px from its starting position. | SlideOutRight4px |
Use for short slide-out transitions where an element exits upward by 8px from its starting position. | SlideOutTop4px |
Use for label enter transitions (e.g. tag component). | GridColumnIn80to100 FadeIn0to100 150ms EasePracticalOut |
Use for label exit transitions (e.g. tag component). | GridColumnOut100to0 FadeOut100to0 100ms EasePracticalIn |
Use for list item hover state transitions. | background-color border-color color text-decoration-color 50ms EasePracticalOut |
Use for list item pressed state transitions. | background-color border-color color text-decoration-color 100ms EasePracticalOut |
Use for list item selected state transitions. | background-color border-color color text-decoration-color 100ms EasePracticalOut |
Use for modal enter transitions. | ScaleIn95to100 250ms EaseBoldInOut |
Use for modal exit transitions. | ScaleOut100to95 200ms EasePracticalIn |
Use for panel content enter. | FadeIn0to100 150ms EasePracticalOut |
Use for panel content exit. | FadeOut100to0 50ms EasePracticalIn |
Use for panel enter transitions. | SlideIn100PercentRight 250ms EaseBoldOut |
Use for panel enter from the left. | SlideIn100PercentLeft 250ms EaseBoldOut |
Use for panel enter from the right. | SlideIn100PercentRight 250ms EaseBoldOut |
Use for panel exit transitions. | SlideOut100PercentRight 200ms EaseBoldOut |
Use for panel exit towards the left. | SlideOut100PercentLeft 200ms EaseBoldOut |
Use for panel exit towards the right. | SlideOut100PercentRight 200ms EaseBoldOut |
Use for popup enter from the bottom. | SlideInBottom8px FadeIn0to100 150ms EasePracticalOut |
Use for popup enter from the left. | SlideInLeft8px FadeIn0to100 150ms EasePracticalOut |
Use for popup enter from the right. | SlideInRight8px FadeIn0to100 150ms EasePracticalOut |
Use for popup enter from the top: popup, tooltip, dropdown, inline message, inline dialog. | SlideInTop8px FadeIn0to100 150ms EasePracticalOut |
Use for popup exit toward the bottom. | SlideOutBottom4px FadeOut100to0 100ms EasePracticalIn |
Use for popup exit toward the left. | SlideOutLeft4px FadeOut100to0 100ms EasePracticalIn |
Use for popup exit toward the right. | SlideOutRight4px FadeOut100to0 100ms EasePracticalIn |
Use for popup exit toward the top. | SlideOutTop4px FadeOut100to0 100ms EasePracticalIn |
Use for side nav enter from the left. | SlideIn100PercentLeft 250ms EaseBoldOut |
Use for side nav enter from the right. | SlideIn100PercentRight 250ms EaseBoldOut |
Use for side nav exit towards the left. | SlideOut100PercentLeft 200ms EaseBoldOut |
Use for side nav exit towards the right. | SlideOut100PercentRight 200ms EaseBoldOut |
Use for spotlight enter transitions. | ScaleIn95to100 FadeIn0to100 250ms EaseBoldInOut |
Use for spotlight exit transitions. | ScaleOut100to95 FadeOut100to0 200ms EasePracticalIn |
Use for tab text color and neutral indicator opacity transitions. | color opacity 150ms EasePracticalOut |
Use for tab indicators entering from the left. | SlideInRight8px FadeIn0to100 150ms EaseBoldOut |
Use for tab indicators entering from the right. | SlideInLeft8px FadeIn0to100 150ms EaseBoldOut |
Use for tab indicators exiting toward the left. | SlideOutLeft8px FadeOut100to0 100ms EasePracticalIn |
Use for tab indicators exiting toward the right. | SlideOutRight8px FadeOut100to0 100ms EasePracticalIn |
Opacity
| Token and description | Light value | Dark value |
|---|---|---|
Apply to images when in a disabled state. | ||
Apply to content that sits under a loading spinner. |
Radius
| Token and description | Value |
|---|---|
Use for small detail elements: badges, checkboxes, avatar labels, keyboard shortcuts. | |
Use for supporting elements: labels, lozenges, timestamps, tags, dates, tooltip containers, imagery inside a table, compact buttons. | |
Use for interactive elements: buttons, inputs, text areas, selects, navigation items, smart links. | |
Use for containment elements: cards, in-page containers, floating UI, dropdown menus. | |
Use for large page elements: full-page containers, large containers, modals, Kanban columns, tables. | |
Use for video player containers. | |
Use for circular elements (user/people related): avatars, names, user-related UI, emoji reactions. | |
Use this specific radius token exclusively for the tile component system. |
Space
| Token | Value |
|---|---|
Equates to `0`. Use for resetting default spacing styles. | |
Use for small and compact pieces of UI. | |
Use for small and compact pieces of UI. | |
Use for small and compact pieces of UI. | |
Use for small and compact pieces of UI. | |
Use for larger and less dense pieces of UI. | |
Use for larger and less dense pieces of UI. | |
Use for larger and less dense pieces of UI. | |
Use for larger and less dense pieces of UI. | |
Use for the largest pieces of UI and for layout elements. | |
Use for the largest pieces of UI and for layout elements. | |
Use for the largest pieces of UI and for layout elements. | |
Use for the largest pieces of UI and for layout elements. | |
Use for the largest pieces of UI and for layout elements. | |
Use to negate parent whitespace or overlap small pieces of UI. | |
Use to negate parent whitespace or overlap small pieces of UI. | |
Use to negate parent whitespace or overlap small pieces of UI. | |
Use to negate parent whitespace or overlap small pieces of UI. | |
Use to negate parent whitespace or overlap larger pieces of UI. | |
Use to negate parent whitespace or overlap larger pieces of UI. | |
Use to negate parent whitespace or overlap larger pieces of UI. | |
Use to negate parent whitespace or overlap larger pieces of UI. | |
Use to negate parent whitespace or overlap the largest pieces of UI. |
Utility
| Token and description | Light value | Dark value |
|---|---|---|
Transparent token used for backwards compatibility between new and old theming solutions | ||
A dynamic token that represents the current surface color set by a parent element. It defaults to the 'elevation.surface' token value. |