What is Token Drift?
Token drift is the gradual divergence between a design system's recorded values and the ones a product actually uses across Figma, code and AI output.
Definition
Token drift is the gradual divergence between the design decisions recorded in a design system and the values actually used in a product, which happens when a surface such as a Figma file, a stylesheet or AI-generated code stops referencing the shared source and accumulates its own values.
Also written as: Design system drift, Design drift
How it starts
Drift never announces itself. It arrives as small, individually reasonable decisions.
A designer needs a slightly lighter border for a dense table and picks one in the file rather than proposing a token. An engineer ships margin-top: 18px at eleven at night because the scale has 16 and 20 and neither looks right. Someone copies a component from another project along with its hardcoded shadow.
None of these is worth blocking a pull request over. Six months of them is a codebase where the "primary blue" has four values.
The AI acceleration
This got faster recently, and it is worth being precise about why.
An AI coding assistant asked to build a settings page has, by default, no access to your design system. It produces plausible values from what it has seen elsewhere: #3B82F6 for a primary, 16px for a gap, a shadow that resembles yours without matching it.
The output looks correct in review. It uses reasonable values. It just uses different reasonable values than yours, and it does so at whatever rate your team generates code, which is considerably faster than a human writing CSS by hand.
How to detect it
- Grep the codebase for hex colours. In a healthy system nearly all of them live in the token definitions.
- Count distinct spacing values in use against the steps in your scale.
- Compare the colours in your Figma file against the tokens in your repository.
- Take a component generated by an AI assistant and check every value in it against the system.
The counts are usually worse than the team expects, which is a useful thing to learn early.
How to prevent it
Make the system reachable from every surface that consumes it. Drift is mostly a distribution failure. If a person or a model has to leave what they are doing to find the right value, sometimes they will not.
Give agents the tokens directly. A Model Context Protocol server that serves live token values means a model reads your primary rather than guessing at one.
Check generated code against the system. Linting for hardcoded values that have a token equivalent turns drift into something visible in review rather than something discovered a year later.
Make one direction authoritative. When Figma and code disagree, someone must be able to say which is right. A review step, where a design change becomes a diff a human approves before it reaches the repository, is the usual answer.
Where this fits with Flash DSM
Flash DSM serves live tokens to AI coding agents over MCP, provides a check_violations tool that returns hardcoded values with their token replacements, and turns Figma publishes into reviewable diffs that open as pull requests.
Related terms
- https://flashdsm.com/glossary/design-token
- https://flashdsm.com/glossary/design-system
- https://flashdsm.com/glossary/mcp-design-tokens