Design Token

Origin & evolution

Design tokens were named at Salesforce in 2014. Jina Anne and Jon Levine were building the Lightning Design System🧰Design SystemDesign SystemThe root design system entityView reference → and hit a structural problem: a single design decision, made once, was being recreated by hand across iOS, Android, and web, in different languages, drifting out of sync each time. They gave the abstraction a name, the design token, a stored variable that holds a decision and distributes it everywhere. Jina Anne has been firm that a token is a methodology, not just a variable; reducing it to a CSS custom property misses the point in the same way that calling responsive design "just media queries" does.

The idea spread through tooling and shared vocabulary. In 2017 Nathan Curtis published Tokens in Design Systems, which gave the community a way to talk about token tiers and naming. Around the same time Danny Banks open-sourced Style Dictionary, a build step that takes one set of tokens and transforms it into whatever format a platform needs, Swift, XML, CSS, JSON. That broke the manual-copy problem the Salesforce team had started from.

Standardisation followed. The Design Tokens Community Group, a W3C group of designers, developers, and tool makers, set out to define a vendor-neutral file format so tokens could move between Figma, Style Dictionary, and any other tool. Its Format Module reached its first stable version in October 2025, settling on a JSON shape with typed values and composite tokens. The live debate now is layering: how many tiers (primitive, semantic, component) a system needs before the indirection costs more than it saves.

How it works in practice

A fintech team ships a web app, an iOS app, and a marketing site. Their brand blue is defined once as a primitive token, colour.blue.500 mapping to #1d4ed8. A semantic token, colour.action.primary, points at it, and the primary button's background binds to the semantic token, never the raw hex. When the brand refreshes and blue shifts two shades darker, one primitive value changes. Style Dictionary regenerates the platform files, and every primary button across three codebases updates in the next build. No engineer searches for hex strings. The semantic layer also lets dark mode swap colour.action.primary to a brighter blue for contrast without redefining the button at all.

Design token vs. its neighbours

• Design component🧱Design ComponentDesign SystemA reusable UI componentView reference → is the assembled, reusable unit (a button, a card) that has structure and behaviour. A token is a single value the component consumes. One button reads a dozen tokens; one token feeds hundreds of components. The graph models this as design_component_styled_by_design_tokenDesign Componentstyled byDesign Tokenhierarchy.
• Brand colour🌈Brand ColourBrand IdentityA brand colour definitionView reference → is the brand-level intention ("our blue"), a marketing and identity decision. A token is the technical implementation of that intention, the addressable variable engineering binds to. The edge design_token_reflects_brand_colourDesign TokenreflectsBrand Colourcross-domain keeps the intention and its implementation linked but distinct.
• Style guide documents decisions for humans to read. A token encodes the same decision for machines to consume at build time. A style guide tells a designer the heading is 32px; a token makes that 32px the literal source the heading renders from.

In the graph

In the Unified Product Graph, a design token sits in the Experience, Design & Brand region's design-system domain, owned by its parent system through design_system_defines_design_tokenDesign SystemdefinesDesign Tokenhierarchy. It connects downward to the components that consume it (design_component_styled_by_design_tokenDesign Componentstyled byDesign Tokenhierarchy) and sideways to the brand intention it encodes (design_token_reflects_brand_colourDesign TokenreflectsBrand Colourcross-domain), and it can be exposed as a service via design_token_tokenised_as_serviceDesign Tokentokenised asServicecross-domain when a platform publishes its tokens for other products to consume. That structure makes the token's reach queryable: change one value and the graph shows every component, surface, and downstream product the change touches, which is the audit the manual-copy era could never produce.