Design tokens turned taste into named values, which is the only form of taste a pipeline can check.
A house style used to live in a PDF. Someone named the brand colours, printed the hex values, and emailed the file around. The colours were correct until somebody eyedropped the wrong screenshot, and then they were approximately correct, and then they were whatever the last engineer remembered.
Design tokens are the answer to that problem. A token is a named value — color.interactive.primary, spacing.base.400, font.size.body — stored once in a format the whole stack can read. The name carries the intent; the value carries the decision. Change the value in one place and every surface that consumes it inherits the change automatically.
Where the format comes from
The W3C Design Tokens Community Group published a specification draft defining a standard interchange format: JSON with a defined schema, typed values and a $type field that tells a consuming tool whether a token is a colour, a dimension, a duration or a font family. Before that draft, every tool invented its own schema and nothing talked to anything else without a conversion script.
- W3C Design Tokens Community Group specification draftongoing, initiated ca. 2019
- Style Dictionaryfirst released by Amazon's design infrastructure team; predates W3C draft
- Figma Variables panelshipped June 2023
The practical starting point for most teams was Style Dictionary, a Node.js library released by Amazon's design infrastructure team that takes a token source file and transforms it into CSS custom properties, Swift constants, Android XML, JavaScript objects — whatever targets a platform requires. A single source, multiple outputs. That is the structural promise of the token approach: one definition of color.surface.elevated and no argument about whether it is #1C1C1E or #1c1c1e anywhere downstream.
Figma surfaced tokens to designers properly with its Variables panel, shipped in June 2023, which let a Figma file hold string, number, colour and boolean variables tied to named modes — light, dark, compact, accessible. A component in the design file and the same component in production can now reference the same token name, which does not guarantee they match but at least gives the mismatch a visible address.
Change the value in one place and every surface that consumes it inherits the change automatically.
What enforcement actually looks like
Naming a value is not enforcement. Enforcement is when the build fails because a value was not named.
That happens through linting. Tools like Stylelint, configured with rules that flag raw hex values or unitless numbers in CSS, make a bare #6E56CF illegal in a stylesheet unless it has already been declared as a custom property. The same logic runs in design: Figma's own branching and variable-binding features make it structurally harder to place a hard-coded fill where a variable belongs, though harder is not impossible.
The more complete version threads tokens from a single repository — typically a JSON or YAML file in version control — through a build step that generates the CSS custom properties, and then runs a linter that rejects anything that bypasses the system. Vercel's build infrastructure and similar CI environments make this a gate rather than a guideline. The colour is either declared in the token source or the deployment does not proceed.
Teams working at scale — Linear, Stripe, and the larger design-systems groups at Google — have run variations of this approach for years. The W3C draft is attempting to standardise what those teams converged on independently, which is the usual order of things: practice first, specification second.
What tokens cannot do
Tokens enforce consistency. They do not enforce quality. A token named color.brand.primary set to a value that clashes with every background is consistent and wrong. The taste still has to come from somewhere; the token system just ensures that once a good decision is made, it propagates cleanly and cannot be silently overridden by whoever last had a deadline.
That is a meaningful improvement. A house style that lives in a PDF is advisory. A house style that lives in a token repository, runs through Style Dictionary, gets linted at build time, and exits as deployed CSS is structural. The decision was made once. The pipeline holds it.