Design token
A design token stores a named design decision. Multiple components can use it, allowing a value to be changed in a defined place.
Give design values meaningful names
A design token is a named design decision, such as a colour, spacing or font size. Instead of entering the same value in many places, components refer to a shared name. A token can also reference another token.
In a simplified example, color-text-primary represents the normal text colour. A customer list and order dialog use this name. When its assigned value changes, the relevant build or update process can carry that change into both views.
A name and value alone do not form a complete UI component. They define neither how a button works nor a form's business rules. Likewise, a change in a design file only reaches application code if an exchange between the tools has actually been set up.
Sources
Related terms
- Design systemA design system combines design rules, reusable components and usage guidance. It also needs maintenance and traceable changes.
- UI componentA UI component is a reusable part of a user interface. Its purpose determines the presentation and interaction behaviour it needs.
- Design handoffA design handoff passes a design on for implementation. States, behaviour and outstanding decisions need to be clear.
- Component variantA component variant is a defined form of a shared building block. It differs from a temporary interaction state.
- Component libraryA component library brings together reusable interface elements. Behaviour, variants and the right version also matter when using them.
Articles on this topic
Your project with ASES
Describe your project to us. We will get back to you with an initial assessment.