Paste HTML, or point the scanner at a URL, and it checks every element's computed styles against a design-system spec: allowed colors, type scale, spacing scale, radii and shadows, plus a fixed set of accessibility checks. It also understands component-level patterns, for example flagging a raw <button> that isn't using the approved .btn class.
The default spec below is generated from this design system's own tokens. Admins can add, edit or remove specs from the Manage panel.
How it works
- Property-level checks — one CSS value on one element at a time (color, font size, spacing, radius, shadow), flagged if it drifts from the spec beyond its tolerance.
- Component-level checks — a spec can declare a component's approved selector (for example
.btn), legacy or deprecated selectors to flag, required styles that must hold on every instance, and named variants. - Accessibility checks — a fixed set of WCAG-oriented checks run regardless of the spec.
This is selector-based, not visual: it can't recognize a look-alike component that has no matching selector in the spec at all.
Vendored as a dependency-free, drop-in plugin (DesignSystemScanner.mount(host, options)). The same engine also runs as a standalone web app and a Chrome extension in its source project.