We’re making our visual foundations more consistent, accessible, and scalable using design tokens.
Design tokens are in beta.
Expect some changes as we iterate over the coming months. For early access and public release updates, see our developer community announcement. For Atlassians, see details.
Read this page to learn what changes to colors and other styles you can expect when you start using tokens.
For code changes, see tokens API changelog.
Tokens and theming are launching our new color system. Our new system is more accessible and visually consistent than the old colors.
The colors values and names have changed across our ramps. Instead of using a letter followed by numbers (such as,
G200), the new system uses the full color name followed by numbers (such as
For instance, N100 is not the same as Neutral100. You may notice colors changing in light mode as you adopt design tokens.
Learn more about the new colors.
Yellows are darker to provide options that follow WCAG AA guidelines for text, icons, borders, and backgrounds (WCAG 1.4.11, WCAG 1.4.3).
Selected states use blue instead of the dark gray to reinforce our brand and make the selection less visually dominating.
There are now three options for neutral text:
color.text: For primary text, such as headings, subheadings, body text, and on colored backgrounds.
color.text.subtle: For secondary text, such as navigation, input field labels, and all caps subheadings.
color.text.subtlest: For tertiary text, such as meta-data, breadcrumbs, input field placeholder, and helper text.
Form inputs, such as text field, text area, radio, checkbox, select, and dropdown menu, are now more consistent in appearance. We have dedicated tokens to use on form inputs:
Our elevation system has also been updated to be more consistent when using shadows and surfaces.
There are now five elevation levels, which differ slightly across light and dark mode.
Learn more about our new elevations.
Note that surfaces look different in dark mode to create contrast and make up for the more subtle shadows on dark surfaces. It's important to pair raised, overlay, and overflow surface colors with shadows for this reason. Refer to our elevation guidelines for token pairing guidance.
Not everything that uses an elevation with a shadow today will continue to do so.
Rather than adding more visual complexity with elevations, consider using a simple border or background to group content. Elevations should be reserved for things that are draggable or lay on top of other surfaces.
Navigation components will no longer use an elevation with a shadow. Instead, use the flat, default elevation with a default border to separate it.
Was this page helpful?
We use this feedback to improve our documentation.