# 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.

- Source: https://flashdsm.com/glossary/token-drift
- Site: Flash DS (https://flashdsm.com)
- Updated: 2026-08-06

---

## 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 DS

Flash DS 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