What are design tokens?
Design tokens are name-value pairs that represent small, repeatable design decisions. A token can specify a colour, font style, spacing unit, size, or other design elements.
Each design token consists of a name paired with either another token (called an alias) or a raw value (such as HEX colours, RGBA colours, pixels, or percentages).
For example, rather than choosing from many shades of red for some text, we can use a design token that ensures consistency across all our products: color-icon-critical.
Why we use design tokens
Design tokens help simplify and unify design and development decisions in part by codifying attributes and use in their names. For example, the name of the design token color-text-subtle quickly communicates it's a colour to be used for text, and is likely less prominent in appearance than other available options.
Token names might look different in different frameworks and tools. The term “Default” is only used in Figma and is removed in code.
More specifically, we use design tokens to:
- Catalogue and codify design decisions. Building a shared language across design and development.
- Enable teams across various products and tech stacks to build efficiently and consistently.
- As EcoOnline’s visual language evolves, changes can be made once across the system and products. No more finding and replacing hard-coded values everywhere.
- Tokens are how we'll implement our newest visual foundations. This will deliver visual consistency and other improvements to EcoOnline UI.
- Help make new design decisions easier by leveraging existing intent and purpose.
- Support efforts like themes and modes.
Design tokens hierarchy
It is important to understand the hierarchy of our tokens, what each level is used for and how they relate to each other, in order to implement them correctly across design or in code.
Prism’s intended use of design tokens is to try to always use system tokens.
- Core tokens are named raw values. In principle, core tokens should not be used directly. They exist to provide the foundational options to be referenced in other tokens. Using system tokens ensures that your implementation remains in sync with design evolution, theming, and modes.
- System tokens suggest their intended usage, whilst still maintaining flexibility to be used in similar but not same scenarios and/or components. They can either reference a core token or another system token.
- *Component tokens - do not exist yet but may be considered for a singular component where one-off or specific use cases are needed as part of the system.
Use system tokens in UI design.
Core tokens are for internal reference only, used when defining or extending the system.
Token naming
How to read tokens
Knowing how to read token names will help you to use the correct token faster. A consistent convention makes it easier to understand what tokens do, how they should be used, and how new tokens could be added in the future.
Token are unlikely to ever include every category in their name.
Naming convention
The naming convention enables you to choose a design token that matches your design intent. Token names start with broad context, then go into more specific detail.
|
Category |
Description |
Example |
Notes |
|---|---|---|---|
|
prefix |
The prefix helps to avoid collisions and improve scanning styles to identify those belonging to Prism Design Tokens. |
pdt |
|
|
concept/component |
Tokens can group types of tokens by concept or component. |
core , button |
|
|
type |
The type of visual style concern or attribute. |
color, spacing, radius |
|
|
group |
Tokens can be grouped per type by adding one or more concepts. |
input |
|
|
property |
The style attribute to which the token is being applied to |
bg (background), text, border, icon (icons only) |
text is for use on text and/or icons for when icons need to match the text it’s paired with. |
|
role/variant |
The purpose or intent |
layer, neutral, alpha, brand, critical |
|
|
scale |
A size/emphasis modifier |
medium, bold, 50 |
|
|
state |
In which interaction state the token should be used |
default, hovered, pressed |
|