Maddox Engine
Design systems drift silently: a hardcoded hex that happens to render identically to a real token, a duration that doesn't match a motion contract, a component shipped without its disabled state. Maddox Engine scans real source code against a project's own tokens and catches it before it ships, in CI, on every pull request.
Livewww.maddoxengine.comPixel Diffs Don't Catch Source Drift
Visual-regression tools like Chromatic and Percy compare rendered pixels and rely on a human to judge whether a change is intentional. That misses the failure mode entirely: a hardcoded #1a1a1a that renders identically to the real --color-black-soft token produces zero pixel diff, nothing for a screenshot-diffing tool to flag, even though it's provably not sourced from the design system.
Maddox checks the value against the project's own tokens, not just whether pixels changed — it can scan local source, or a live deployed page's rendered HTML/CSS, to catch drift a stale build or a silently-dropped token would hide from a source-only check. It's complementary to visual regression, not a replacement for it: Chromatic tells you what changed, Maddox tells you whether it's still on-system.
Colors, Motion, and Component States
Every hex literal in source is matched against real @theme tokens by exact value, then by RGB distance for near-misses. Motion durations and easings are checked against real motion tokens, duration against duration, ease against ease, never cross-compared against unrelated numeric values like opacity or spring stiffness.
Component-state completeness is checked against an explicit, user-authored contract naming which states each kind of component must cover: disabled, loading, error, and so on. Nothing is inferred. A drift health score weights the result: a full match counts fully, a near-miss counts half, an unrecognized value or missing state counts for nothing.
One Source of Truth, Wherever It Actually Lives
A @theme CSS block is the default, but real teams keep tokens elsewhere: a Tokens Studio export from Figma, or a Figma file's own Variables pulled directly via its REST API (Enterprise plans only). All three can be combined — Figma Variables take precedence over Tokens Studio, which takes precedence over @theme CSS, matching the order a real design-to-code pipeline actually runs in.
Every near-miss finding also gets a suggested fix: the exact token reference to swap in for the drifted value. For color, font-size, and spacing findings, that fix can be applied straight to the source file with one flag, not just printed as a suggestion to act on by hand.
CI Gate, Not Just a Report
A GitHub Action runs the scan on every pull request, posts the findings as a comment, and can fail the build itself once a drift score falls below a set threshold, sequenced so the comment always posts before the build is allowed to fail. A hosted dashboard tracks scan history and the health-score trend over time, with findings grouped by the real route they belong to. The scanning engine itself is open source, published on npm.