What is design-token drift?

Short answer

Design-token drift is the gap between the tokens a codebase declares and the values it actually uses. The clearest form is exact drift: a raw value, such as #8458d8, written directly in a component when a token with exactly that value already exists. Near-match drift is a raw value perceptually close to a token, probably meant to be it. Both mean a future change to the token will not reach every place it should.

Exact drift

Exact drift is deterministic: the raw value and the token's resolved value are identical, so there is no judgement involved. It is always safe to replace with the token, as long as the token is resolved in the same theme and mode.

In Saer's scan of Lunary, #8458d8 is written 72 times where color-primary already holds that exact value.

Near-match drift

A near-match is a raw value close to a token but not equal to it, measured as a perceptual distance (Saer uses OKLab). It is an inference: #080b12 next to color-bg (#0a0a0a) may be a copy error or a deliberate shade. Report it with the distance and let a person decide; never mix it with exact drift.

  • Dead tokens: declared, never used.
  • Conflicts: the same variable defined with different values in the same context, with nothing in the code to say which wins.
  • Missing tokens: one raw value repeated many times that no token covers.

What Saer does about this

Today
  • Exact drift, near-matches, dead and conflicting declarations for colour: in the beta.
Not yet
  • Tailwind default scales for versions Saer has no pinned fixture for are reported as unresolved, not guessed.

Every capability and its state: what Saer checks.

See it on your own codebase.

Request early access