Design System Compliance
Audits live computed styles for near-duplicate colors, off-grid spacing, and type-scale drift — catches design-token erosion no pixel diff or source lint sees.
One of 122 modules in the GateTest scan suite. Catches the issue before it reaches code review, and on paid tiers opens a pull request with the fix already written.
52 distinct colors in use, 20 recommended — palette drifting from shared tokens
Why we catch it
Surfacing the user-visible problems static analysis usually pretends don't exist.
The Design System Compliance module sits in this category alongside 6 related modules. Together they form one of the layers of a GateTest scan — checks fire in parallel, findings cluster by root cause, and on paid tiers the AI auto-fix loop reads each finding, writes the fix, validates against the scanner, and opens a PR.
How GateTest covers design system compliance
- Runs against a live URL where a browser is available. The CLI and the GitHub Action, against a live URL. It needs a real browser, and the hosted website scan ($29 full report) does not have one yet — the hosted report marks this check as not run rather than pretending; it lights up there when the browser worker ships. No additional configuration.
- Free CLI.
npm i -g @gatetest/cli && gatetest --crawl https://your-site.example --module designSystemComplianceagainst a site you own. No paywall on the scanning itself. - AI auto-fix PR. Live-URL findings come with plain-English fix instructions. Auto-fix pull requests are for repository findings on the Scan + Fix and Forensic tiers.
- Honest confidence rating. Findings come with high / medium / low confidence so noisy patterns don't block the gate. The confidence-calibrator trainer reads customer suppressions and tightens rules over time.
Scan your repo for design system compliance
Free preview of the headline findings. Pay per scan, not per seat — one-time scans never auto-renew.
Frequently asked questions
What does the Design System Compliance module catch?
Audits live computed styles for near-duplicate colors, off-grid spacing, and type-scale drift — catches design-token erosion no pixel diff or source lint sees. Example finding: 52 distinct colors in use, 20 recommended — palette drifting from shared tokens
Does GateTest fix Design System Compliance issues automatically?
Live-URL findings ship with plain-English fix instructions and, where the platform allows it, a generated config file. Auto-fix pull requests are written for repository findings on the Scan + Fix ($199) and Forensic ($399) tiers.
Which tiers include the Design System Compliance module?
The CLI and the GitHub Action, against a live URL. It needs a real browser, and the hosted website scan ($29 full report) does not have one yet — the hosted report marks this check as not run rather than pretending; it lights up there when the browser worker ships.
Can I run the Design System Compliance module from the CLI for free?
Yes — install with `npm i -g @gatetest/cli` and run `gatetest --crawl https://your-site.example --module designSystemCompliance`. The local CLI is free; paid tiers add AI auto-fix and the cross-finding correlation work.