For years, design systems were synonymous with static style guides—collections of hex codes and pixel values captured in a PDF or a Figma file. As our products have scaled from single-page apps to sprawling multi-platform ecosystems, the traditional "palette" has become a bottleneck.
In a modern enterprise environment, hardcoding values like #3B82F6 (Blue 500) into your components is a liability. It provides no context, offers zero flexibility for theming, and makes sweeping visual updates nearly impossible across a large codebase.
Primitive tokens represent the raw values of your brand. They are the "what"—Blue 500, Spacing 16, Radius 8. While they are a necessary foundation, they lack intent. When a designer uses "Blue 500" for a primary button, a link, and a notification icon, they have created a rigid link between three disparate UI patterns.
"Tokens are not just variables; they are the contract between design and engineering that defines how a brand feels across any medium."
The semantic layer introduces the "how" and "where". Instead of using a primitive color directly, we map that primitive to a semantic token that describes its function. This abstraction allows us to change the underlying value without touching the component implementation.
Example JSON structure for a nested semantic token system.
The success of a token system lives and dies by its naming convention. A robust taxonomy follows a predictable pattern: [System].[Category].[Element].[State]. For example, color.bg.canvas.subtle tells a developer exactly what the token is for, even without seeing the value.
By building this architecture, we enable features like Dark Mode and High Contrast themes at the system level. The components remain agnostic of the specific color values, merely asking for "the canvas background" and receiving the appropriate value based on the user's current context.
Implementing this at scale requires a single source of truth. Whether you use Style Dictionary, Theo, or a custom build tool, your tokens must be exported into the specific formats your engineers need—SCSS, CSS Variables, Swift, or Compose.
This systemic approach transforms design from a series of manual handoffs into a continuous, automated pipeline where a single change in the brand architecture propagates instantly across every surface of the product.