September 12, 2023
Design Tokens in a Design System
Design Tokens are the foundation of a consistent and scalable Design System. They standardize key properties like color, typography and spacing, making your design work faster, cleaner, and easier to maintain.
Design tokens are essential pieces of a design system. Trying to manage a design system without even basic design tokens is pretty much impossible. Without them, you'd always be making decisions, and in a team or company, these would often get changed or overwritten by others.
A Design Token is a reliable standard for everyone. For instance, the Design Token "Red" might hold a value like #EE4B2B, which is different from #FF0000, even though they're both shades of red.
The idea is that when we use the Design Token "Red," we're all on the same page that it refers to #EE4B2B. If it gets updated to another red in the future, everything tagged with "Red" gets updated automatically. This keeps our work consistent and coherent, allowing for easy theming and scalability.
Here's a simple definition of Design Tokens:
Design tokens are named items that store basic design values like colors or sizes. They're the building blocks of a design system. Since they're stored in a format that works across different platforms, they can easily replace hard-coded values.
Design Token Tiers
Tokens are typically split into different levels, each serving specific purposes and adding unique features to the design system.
1 — Primitive Tokens
These tokens hold basic values with context-free names and primarily define the visual appearance of the final product by setting reusable properties. You might hear them called Foundational, Global, Core, or Fundamental tokens—they all refer to the same idea.
Apple | ||
|---|---|---|
color brand | #f00f00 | #F5F5F5 |
color success | #2ACC19 | #24B714 |
font family sans serif | Geist | Inter |
font family serif | Times | Playfair Display |
border radius-lg | 24px | 20px |
border radius-md | 16px | 12px |
2 — Semantic Tokens
They build on Tier 1 tokens to clarify their use and purpose in specific contexts, making them widely used across different projects and products. They represent choices or intentions that appear in multiple places.
Apple | ||
|---|---|---|
button-color | color brand | color success |
button-font family | font family sans serif | font family serif |
Depending on how complex a project is, you might add more token tiers, but I’m not a fan of going that deep—like adding a whole new tier called Component Tokens. I prefer to keep things simple with just two clear layers: Primitive and Semantic.
Differences between Primitive and Semantic Tokens
Primitive Design Tokens
Foundational Elements: These are the basic building blocks of a design system, covering core design attributes like colors, typography, spacing, shadows, and other essential design properties.
Raw Values: They hold raw, indivisible design values. For instance, a primitive token might define a color as "red" = "#FF2800" or a font size as "font-size-large" = "24px".
Core Consistency: They ensure consistency across the design system by standardizing basic visual properties throughout the project.
Semantic Design Tokens
Layer of Abstraction: Semantic tokens take primitive tokens and give them a meaningful or contextual twist, often related to their use or size. For example, "border-medium" could be a semantic token pointing to a specific border width.
Contextual Naming: These tokens use terms like "small," "medium," "large," or "primary," "secondary," to hint at sizes, weights, or importance. For instance, "spacing-large" might tie back to a specific spacing value from the primitive tokens.
Adaptability and Theming: They make it a breeze to apply consistent styles across different themes or modes (like light and dark) without tweaking the underlying primitives. For example, "background-default" might mean different colors in various themes but stays consistent in meaning.
Enhanced Communication: By using terms that describe their role or size, semantic tokens help designers and developers communicate better, making the design system more understandable and easier to work with.
Component-Specific Design: These are tailored to specific UI components, defining design properties for items like buttons, cards, modals, etc. For example, a button might have component tokens like "button-border-radius" or "button-padding".
Customization and Flexibility: They allow components to be easily customized or themed while sticking to consistent design principles. Different button styles (primary, secondary, danger) can all be handled through Semantic tokens.
Adapting Design Tokens to your Design System
Not everything we’ve talked about applies to every project. Design Tokens can look totally different depending on the product, and not every Design System works the same way. The key is to shape your tokens around what your project actually needs—and tweak things to make it work best.
Sometimes the line between tokens gets blurry. The tiered structure people suggest isn’t always consistent. Some projects need tons of tokens for just one component, while others get by with just Foundation and Semantic.
That said, having too many tokens can make the system a pain to manage. But if you go too minimal, you might lose the flexibility your design system needs to grow.
