v1.0.0  ·  Open Source  ·  MIT

Your design system
has bugs.
Find them.

design-auditor crawls any website with a real browser and checks typography, colors, spacing, and components against design system best practices.

$ npx design-auditor https://yoursite.com
9 modules 30+ checks WCAG AA/AAA 0 config needed Node.js 18+
View on GitHub npm package
bash — design-auditor
// what it checks

9 modules. 30+ checks.
Zero config.

Every rule is grounded in established standards — WCAG 2.1, 8pt grid, modular scale, delta-E color science, and 60-30-10 color theory.

Aa
Typography
  • Font family count (max 3)
  • Unique sizes & modular scale
  • Line-height consistency
Colors
  • Delta-E similar color clusters
  • WCAG AA & AAA contrast
  • CSS variable coverage
Spacing
  • 4px / 8px grid detection
  • Margin & padding outliers
  • Vertical rhythm analysis
Components
  • Touch targets (≥ 44px)
  • :hover & :focus states
  • Border-radius & shadow system
H₁
Headings
  • Single H1 per page
  • No skipped levels (H1→H2→H3)
  • Visual size hierarchy
Images
  • Alt text coverage (WCAG 1.1.1)
  • Aspect ratio consistency
Links
  • :focus & :visited states
  • WCAG 1.4.1 visual indicator
  • Color consistency
Breakpoints
  • Media query detection
  • Mobile-first strategy
  • Framework recognition (Tailwind…)
↔
Reading Width
  • Line length (45–75 chars optimal)
  • Body text readability score
// how it works

Real browser.
Real computed styles.

Unlike static CSS analysis, design-auditor uses Playwright — so it catches JavaScript-injected styles, CSS custom properties resolved at runtime, and third-party scripts.

01
Enter URL
Any public or local dev server. No config, no API keys, no sign-up.
npx design-auditor
02
Browser opens
Playwright launches Chromium, navigates to the page, and waits for full render.
Chromium / Playwright
03
Styles extracted
getComputedStyle() runs on every element. Actual rendered values — no guessing.
getComputedStyle()
04
Rules applied
9 modules run their checks. Each produces pass / warn / error violations.
30+ rules
05
Report printed
Score 0–100 per module. Grade A–F overall. Optional JSON for CI pipelines.
Terminal + JSON
// security

Scanned & verified.

All dependencies are continuously monitored for vulnerabilities using Snyk. We take security seriously so you don't have to worry.

Snyk Security Status
// quick start

No install.
Just run it.

Node.js 18+ required. Playwright browser downloads automatically on first run.

common usage
# Any public website
npx design-auditor https://yoursite.com

# Save full report as JSON
npx design-auditor https://yoursite.com --save-report

# Local dev server mode
npx design-auditor http://localhost:3000 --local
selective auditing 
# Run specific modules only
npx design-auditor https://yoursite.com \
  --only typography,colors

# Install globally
npm install -g design-auditor
design-auditor https://yoursite.com
// ready?

Audit your site in 30 seconds.

Free. Open source. No telemetry. No account. Just run it.

Star on GitHub View on npm →