Design System Audit
The OverlayQA Design System Audit scans any page for design token inconsistencies across colors, typography, spacing, borders, and shadows. It scores your page's token consistency, highlights affected elements directly on the page, and lets you create issues or ignore findings in bulk.
Start an Audit
Open the OverlayQA sidebar, click the Workflows button, and select Design System Audit. The audit panel opens with two tabs: Tokens and Components.
Run the Scan
Click Scan Page Tokens to start the audit. The scan extracts CSS tokens, analyzes consistency, and scores results in a few seconds.
Understanding the Score
The audit produces a consistency score from 0 to 100. Scores 70 and above are rated Good (green). Scores between 40 and 69 are rated Needs Work (amber). Scores below 40 are rated Critical (red).
What Gets Analyzed
- Colors: Background colors, text colors, and border colors. Flags values not mapped to a design token.
- Typography: Font family, font size, font weight, and line height.
- Spacing: Padding, margin, and gap values.
- Borders: Border width, border color, and border radius.
- Shadows: Box shadow definitions.
- Custom properties: CSS custom properties and their usage patterns.
Actions on Findings
Each finding can be ignored on the current page, ignored across the project, or converted to an OverlayQA issue. Bulk actions let you create issues, ignore, or export multiple findings at once to Jira, Linear, or Notion.
Figma Comparison
When Figma is connected, the audit compares live CSS values against the Figma design, showing designed vs. live values with pass/fail indicators.