Design Tokens
Design Token
A shared, named value for design elements such as colors and font sizes.
In Simple Terms
Design tokens are named pieces of data that store colors, font sizes, and other design values used in apps and websites. For example, giving a specific name to "primary red" or "corner radius" lets designers and developers work using that same name. When you want to change a color or size later, updating that one piece of data instantly updates it everywhere it's used across the screen.
Behind the Name
The name comes from pairing "design" with "token" -- a token being a symbol or the smallest basic unit of something. Think of it like a variable in programming: you give a color, size, or other design value a name, and that name can be shared and reused consistently across a project. It's also sometimes written in the plural form, "Design Tokens."
Take a Closer Look!
Design tokens are a system for managing values like colors, font sizes, and spacing -- the building blocks of a website or app's visual design -- as shared, named data.
Put simply, it's a way of storing design rules as small pieces that a program can read and use directly.
When designers and developers each specify colors and sizes separately as raw numbers, small inconsistencies tend to creep into the design.
With design tokens, a button's red color might be registered once under a name like "color-primary," and both sides reference that same name when building the product.
This makes it much easier to keep a consistent look across the whole team's work.
If a brand's signature color changes, updating the value of the corresponding token automatically applies that change everywhere the token is used.
Buttons and text across the entire app switch to the new color automatically, which cuts down significantly on manual fixes and mistakes.
This approach is widely used in large-scale system development and projects involving many different screens.