Design tokens are the atomic building blocks of a design system—named entities that store visual design attributes like colors, typography, spacing, and elevation values. They serve as a contract between design and engineering, ensuring that a color called "primary-500" means exactly the same thing in Figma, React, iOS, and Android. At Nexis Limited, we use design tokens as the foundation of every design system we build.
What Are Design Tokens?
A design token is a key-value pair that abstracts a design decision. Instead of hardcoding #2563EB throughout a codebase, we define a token called color-primary-500 with that value. This abstraction provides a single point of change—updating the token value propagates the new color everywhere it is referenced. Tokens typically cover colors, font families, font sizes, font weights, line heights, spacing scales, border radii, shadow definitions, and animation durations.
Token Taxonomy
We organize tokens into three tiers. Global tokens define the raw palette—every color, every spacing value, every font size available in the system. These are context-free and named descriptively, such as blue-600 or space-4. Alias tokens (also called semantic tokens) map global tokens to specific purposes, such as color-action-primary pointing to blue-600 or color-text-error pointing to red-500. Component tokens are the most specific, defining values for individual components like button-background-hover.
This hierarchy is crucial because it separates what a value is from how it is used. Changing the brand's primary color requires updating only the alias token mapping, not every component that references it.
Token Formats and Tooling
We author tokens in a platform-agnostic format, typically JSON or the emerging W3C Design Token Community Group format. Style Dictionary, an open-source build tool by Amazon, transforms these source tokens into platform-specific outputs: CSS custom properties for web, XML resources for Android, Swift constants for iOS, and SCSS variables for legacy systems. This single-source-of-truth approach eliminates the drift that occurs when values are maintained independently per platform.
Implementing Tokens in CSS
On the web, tokens are consumed as CSS custom properties. The global tokens are declared on the :root selector, while semantic tokens reference them using var() functions. Components reference only semantic tokens, never global ones directly. This indirection layer is what enables theming—switching from a light theme to a dark theme simply means swapping the semantic token values to point at different global tokens.
Multi-Brand and Multi-Theme Support
Design tokens make multi-brand products architecturally straightforward. A white-label SaaS product can serve different clients by loading brand-specific token sets at runtime. Each brand defines its own global tokens while sharing the same semantic and component token structure. Similarly, dark mode is implemented by defining an alternate set of semantic tokens that map to darker global values, toggled via a CSS class or data attribute on the root element.
Syncing Tokens Between Figma and Code
Tools like Tokens Studio for Figma allow designers to manage tokens directly within their design tool and sync them to a Git repository. This creates a bidirectional workflow where token changes in code can be reviewed by designers, and design changes can be translated into pull requests. We integrate this into our CI/CD pipeline, automatically generating updated CSS and validating token coverage on every commit.
Design tokens eliminate guesswork and inconsistency between design and development. Contact us to learn how we implement token-driven design systems. Browse our portfolio for examples of multi-theme products we have built.