Design tokens are the new way to apply visual foundations in Atlassian product experiences. We’re rolling out tokens to standardize colors, elevations, spacing, and other styles in Atlassian products.
Design tokens are name and value pairings that represent small, repeatable design decisions. A token can be a color, font style, unit of white space, or even a motion animation designed for a specific need.
For example, instead of choosing one of many shades of green for an icon, we can apply a design token that is consistent with all similar usages across our products: color.icon.success.
A theme is a collection of token values designed to achieve a certain look or style. Themes are how we switch color schemes and styles everywhere using a single set of tokens.
Light mode, dark mode, and high-contrast mode are all examples of theming. Non-color themes are also possible: think cozy/comfortable/compact views, reduced motion, or custom typography styles.
Features like global theming (dark mode), responsive design, and user customization are possible with tokens.
Design tokens simplify the design and development by streamlining decision making and handover between crafts.
As Atlassian's visual language evolves, changes can be made once across the system and products. No more finding and replacing hard-coded values everywhere.
We have automated tooling to help designers and developers start using tokens faster.
Tokens are how we'll implement our newest visual foundations. This will deliver visual consistency and other improvements to Atlassian UI.
How to read design token names
Knowing how to read token names will help you find the right token faster when working in designs and in code.
A design token’s name describes how it should be used, and each part communicates one piece of its usage.
Foundation: The type of visual design attribute or foundational style, such as color, elevation, or space.
Property: The UI element the token is being applied to, such as a border, background, shadow, or other property.
Modifier: Additional details about the token’s purpose, such as its color role, emphasis, or interaction state. Not every token has a modifier. For example, color.text is our default body text color.
Note that token names might look different in different environments and tools:
Find all of our available design tokens and their usage descriptions in all tokens.
Search and filter the token list, or use our token picker for extra help.
Choose tokens based on meaning where applicable, not specific values.
Do
Use design tokens with names and descriptions that fit your specific situation.
Don’t
Don't use a token just because the colors appear to match. This can break the experience in other themes.
Check our foundations for color, elevation, and spacing for additional usage guidance.
Use these examples to get a better understanding of how different tokens work.
Here’s an example of color design tokens in use: the default text color and the background color for a "danger" button on hover.
There are dedicated color tokens for text, links, icons, backgrounds, borders, blankets, charts, and skeleton loaders.
For more on color token usage, see our color foundation.
Elevation tokens apply to the perceived surface level and shadow.
For more on how and when to apply elevations, see our elevation foundation.
Opacity tokens apply transparency to an element. Use opacity.disabled for interactive images that are disabled (such as disabled avatar), and opacity.loading to content sitting underneath a loading spinner.
Space tokens reduce decision making and allow for consistent spacing between elements in a page layout. These tokens are designed to be use for horizontal and vertical spacing, in a variety of contexts.
For more on how our spacing system, and how to use space in your designs, see our spacing foundation.
We use this feedback to improve our documentation.
FAQs
Design tokens are a set of variables that define design properties such as colors, typography, spacing, etc., in a design system. They are abstract representations of visual design decisions.
What are the components of design system tokens? ›
Component tokens represent the elements and values that comprise a component, such as containers, label text, icons, and states. Whenever possible, component tokens should point to a system or reference token, rather than hard values such as hex codes.
What are the best practices for design system tokens? ›
Design Token Naming Principles
Make use of context: Include context about the token's usage, such as the component to which it applies or its role in the design system. Keep it brief: Aim for names that are brief and memorable, as well as easy to type and read. Avoid names that are too long or too complicated.
What is the difference between design tokens and styles? ›
Styles vs Tokens
Styles and tokens are both ways to store and manage design elements in Figma. However, they have different strengths and weaknesses. Styles are more flexible and can be used to store a wider variety of values. For example, you can use styles to store colors, fonts, spacing, and even animations.
What is the difference between variables and design tokens? ›
Besides some technical differences, the main feature when it comes to variables is that when you want to use design tokens, a style isn't guaranteed to work as a source of truth, while a variable can do so, which is one of the core goals of having a design system.
What is the anatomy of a design token? ›
Anatomy. Each design token has a unique name and its corresponding value. This name/value pairing is similar to a dictionary data structure found in engineering, where a key is associated with a value, and the key/value pair can be used to store and retrieve data.
Where are design tokens stored? ›
Design tokens are usually stored in a central repository. And because of this, we can easily update the values of a design token and have that change reflected across all of our products. Furthermore, this means that we can deliver design change tasks at a much faster pace.
What are the example of tokens in system software? ›
In programming languages like C language- keywords (int, char, float, const, goto, continue, etc.) identifiers (user-defined names), operators (+, -, *, /), delimiters/punctuators like comma (,), semicolon(;), braces ({ }), etc. , strings can be considered as tokens.
What are design tokens in Figma? ›
Design tokens are a method for managing design properties and values across a design system. Each token stores a piece of information—such as color, sizing, spacing, font, animations, and so on. To make them easier to refer to, each token also gets a name.
Who created the design token? ›
The concept of design tokens was created by Salesforce and the name coined by Jina Anee. As Jina puts it: “Design tokens are visual atoms of the design system — specifically, they are named entities that store visual design attributes.
Semantic tokens are derived from primitive tokens, but they're named based on their purpose or meaning within the UI, rather than their appearance. They breathe life into the design by ensuring that elements carry the same meaning and function across different contexts.
What are the basics of design tokens? ›
Design tokens represent the small, repeated design decisions that make up a design system's visual style. Tokens replace static values, such as hex codes for color, with self-explanatory names. A Material Design token consists of 2 parts: A code-like name, such as md.
What are the 5 types of tokens? ›
There are five types of java tokens: keywords, identifiers, literals, operators, and separators. structure of the Java program, The classification is based on their work type; some are used to define names, and others for arithmetic operations.
What are UI design tokens? ›
Design tokens (a.k.a. atomic design tokens) are small but central elements of entire design systems. They carry common information about your UI like colors, spaces, or font sizes across teams, apps, and platforms. In other words, they're the single source of truth for individual design choices.
What is an example of a token? ›
a memento; souvenir; keepsake: The seashell was a token of their trip. something used to indicate authenticity, authority, etc.; emblem; badge: Judicial robes are a token of office.
What is an example of a token system? ›
For example, imagine a child loves reading and is happy to read daily. Their teacher then implements a token system where they earn points for every book they read, which can later be cashed in for prizes from a prize box.
What is a token in computer system? ›
Computing. Token, an object (in software or in hardware) which represents the right to perform some operation: Session token, a unique identifier of an interaction session. Security token or hardware token, authentication token or cryptographic token, a physical device for computer authentication.
