Saer reconstructs your declared tokens, following every var() chain to a real value in each theme, then compares every raw value in the code with them. A raw value identical to a token is exact drift: deterministic, with its files. A value perceptually close to one is a near-match, reported with its distance and kept apart, because close is not the same as equal. On the founder's app: 22 hard-coded colours equal to a token, written 436 times, and 78 near-matches.
What counts as drift
- Exact drift:
#8458d8written 72 times in Lunary wherecolor-primaryalready holds that exact value. - Near-matches: a raw value within a small perceptual distance (OKLab) of a token. Saer shows the pair and the distance and leaves the decision to you.
- Dead tokens and conflicting definitions: declared and never used, or defined differently in two places with nothing in the code to say which wins.
Beyond colour, the same comparison runs for type sizes, spacing, radius and the other foundations: Lunary had 6 exact type-size drift findings and 23 in spacing. Explore every token in the case study.
Works with how you declare tokens
Tailwind v3 configs, Tailwind v4 @theme blocks and CSS custom properties, including dark mode and other theme contexts, in pnpm, npm and yarn monorepos.
saer scan
# exact drift, near-matches and dead tokens in .saer/report.htmlWhat Saer does about this
- Colour (in the beta): exact drift, near-matches, dead and conflicting declarations, across themes.
- Typography and the other foundations: exact drift and, labelled experimental, off-scale values with the nearest step.
- A pull request check that fails when new drift is introduced: planned.
Every capability and its state: what Saer checks.
See it on your own codebase.
Request early access