Every brand makes thousands of design decisions: which shade of blue represents trust, how much padding separates content blocks, which font weight signals importance. Traditionally, these decisions lived in static brand guidelines that designers interpreted and developers implemented, often inconsistently. Design tokens formalise these decisions as platform-agnostic variables that can be consumed by any technology stack, ensuring that a brand looks and feels identical whether rendered on a website, a mobile app, an email template, or a digital billboard.
What Design Tokens Are
A design token is a named value that represents a specific design decision. Rather than specifying "use hex colour #1A73E8 for primary buttons," a token system defines a variable called "color-primary-action" with that value. The token name describes the intent, not the implementation, which means the same token can resolve to different values on different platforms or in different contexts while maintaining semantic consistency.
Tokens operate at multiple levels of abstraction. Global tokens define raw values like specific colours, font sizes, and spacing units. Alias tokens map these raw values to semantic purposes like "color-text-primary" or "spacing-section-gap." Component tokens apply semantic values to specific UI elements like "button-background-default." This layered approach provides both flexibility and consistency. For a broader perspective on how design systems drive conversion, our earlier analysis covers the strategic foundations.
Implementation Architecture
The most effective token systems store their source of truth in a format-agnostic format, typically JSON or YAML, and use build tools to transform tokens into platform-specific outputs. A single token definition might generate CSS custom properties for web, Swift constants for iOS, Kotlin values for Android, and SCSS variables for email templates.
Style Dictionary, developed by Amazon, and Figma's Variables API are the most widely adopted tools for this transformation pipeline. The key architectural decision is where the source of truth lives: in a design tool like Figma, in a code repository, or in a dedicated token management platform. Each approach has trade-offs around designer accessibility, version control, and automation capability.
Naming Conventions That Scale
Token naming is the most consequential decision in a token system because names are the interface that designers and developers interact with daily. Effective naming conventions follow a consistent taxonomy: category, property, variant, and state. For example, "color-background-surface-hover" clearly communicates what the token controls and when it applies.
Avoid encoding specific values in token names. A token called "blue-500" breaks when the brand evolves and that shade changes. A token called "color-primary" remains meaningful regardless of what colour it resolves to. This principle of semantic naming over literal naming is what makes token systems maintainable over years rather than months.
Tokens and Accessibility
Design tokens can encode accessibility requirements directly into the system. Contrast ratio relationships between foreground and background tokens can be validated automatically, ensuring that every colour combination in the system meets WCAG standards. This is a significant improvement over manual accessibility audits because compliance is built into the design decisions themselves rather than checked after the fact.
This systematic approach to accessibility connects to the broader principle that accessibility-driven design creates competitive advantage by reaching wider audiences while reducing legal risk. Tokens make accessibility a default rather than an afterthought.
Measuring Token Adoption
The value of a token system is directly proportional to its adoption rate. Tokens that exist but are not used provide no benefit. Effective teams track token coverage, the percentage of design decisions in production code that reference tokens rather than hard-coded values, as a key health metric. Leading organisations achieve 90 percent or higher token coverage, which dramatically reduces the effort required for brand updates and ensures visual consistency across all touchpoints.
Understanding how colour psychology shapes brand strategy provides important context for the design decisions that tokens ultimately encode and distribute across platforms.
Frequently Asked Questions
- What are design tokens?
- Design tokens are named variables that represent specific design decisions such as colours, spacing, typography, and other visual properties. They are stored in a platform-agnostic format and transformed into platform-specific code, ensuring brand consistency across web, mobile, email, and other interfaces.
- How do design tokens differ from CSS variables?
- CSS variables are one output format for design tokens, but tokens are broader. A single token definition can generate CSS custom properties, Swift constants, Android values, and email template variables simultaneously. Tokens represent the design decision itself, while CSS variables are one technical implementation of that decision.
- How do you implement design tokens?
- Start by auditing existing design decisions and categorising them into global, alias, and component tokens. Store the source of truth in JSON or YAML, use tools like Style Dictionary to transform tokens into platform-specific outputs, and integrate the build pipeline into your development workflow. Measure adoption by tracking token coverage in production code.