Tools: I built a CLI that catches design inconsistencies — like Lighthouse, but for your design system

The problem ## What design-auditor does ## What it checks ## 🔤 Typography ## 🎨 Colors ## 📐 Spacing ## 🧩 Components ## Real output example ## Why a real browser matters ## Save reports for CI or tracking design drift ## Who this is for ## Try it You run Lighthouse to catch performance issues. You run axe to catch accessibility issues. But what catches the moment your site ends up with 54 shades of blue and 22 different line-heights? I built design-auditor for exactly that. You’re three sprints in. The designer is happy. The client is happy. Then someone opens the site on a large monitor and notices the buttons have four different border-radiuses. The headings are using six font sizes that don’t follow any scale. There are at least five “grays” that are almost — but not quite — the same. None of this breaks anything. Linters don’t catch it. Lighthouse doesn’t catch it. PR reviewers miss it because it lives in computed styles, not source code. This is design drift. And it’s invisible until it isn’t. It opens your URL in a real browser (via Playwright), reads every element’s computed styles, and runs them through a set of design system rules. No config. No installation. One command. Every color renders as a live color swatch right in your terminal. Most CSS audit tools parse your source files. design-auditor uses Playwright to open the actual page and runs getComputedStyle() on every element. That means it catches: It sees what your user sees — not what your source code says. The JSON output is structured for dashboards, CI pipelines, or just tracking how your design consistency changes over time across deploys. This tool is most useful if you’re: It’s especially powerful for landing pages and marketing sites — the places where design consistency matters most visually, but automated tooling is usually absent. GitHub: https://github.com/PashaSchool/design-auditor Website: https://pashaschool.github.io/design-auditor/ I’m actively developing this — feedback on what checks would be most useful to you is very welcome. What design inconsistencies do you find hardest to catch in code review? Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse CODE_BLOCK: npx design-auditor https://yoursite.com Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: npx design-auditor https://yoursite.com CODE_BLOCK: npx design-auditor https://yoursite.com CODE_BLOCK: ──────────────────────────────────────────────────────────── TYPOGRAPHY ──────────────────────────────────────────────────────────── ✅ Font families: 2 — OK ⚠️ Font sizes: 11 unique — recommended ≤ 8 ❌ Line-heights: 22 unique — no vertical rhythm detected COLORS ──────────────────────────────────────────────────────────── ❌ 54 unique colors found — recommended < 20 ❌ 40 similar color pairs — palette can be consolidated ██ #f0f6fc ≈ ██ #f6f8fa (ΔE=2.6) ██ #24292f ≈ ██ #1f2328 (ΔE=2.9) COMPONENTS ──────────────────────────────────────────────────────────── ❌ 28/50 buttons smaller than 44px touch target (56%) ⚠️ Buttons: 11 padding variations — recommended ≤ 3 ✅ Interactive states: :hover and :focus present ──────────────────────────────────────────────────────────── SUMMARY: 6 ❌ 5 ⚠️ 7 ✅ ──────────────────────────────────────────────────────────── Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: ──────────────────────────────────────────────────────────── TYPOGRAPHY ──────────────────────────────────────────────────────────── ✅ Font families: 2 — OK ⚠️ Font sizes: 11 unique — recommended ≤ 8 ❌ Line-heights: 22 unique — no vertical rhythm detected COLORS ──────────────────────────────────────────────────────────── ❌ 54 unique colors found — recommended < 20 ❌ 40 similar color pairs — palette can be consolidated ██ #f0f6fc ≈ ██ #f6f8fa (ΔE=2.6) ██ #24292f ≈ ██ #1f2328 (ΔE=2.9) COMPONENTS ──────────────────────────────────────────────────────────── ❌ 28/50 buttons smaller than 44px touch target (56%) ⚠️ Buttons: 11 padding variations — recommended ≤ 3 ✅ Interactive states: :hover and :focus present ──────────────────────────────────────────────────────────── SUMMARY: 6 ❌ 5 ⚠️ 7 ✅ ──────────────────────────────────────────────────────────── CODE_BLOCK: ──────────────────────────────────────────────────────────── TYPOGRAPHY ──────────────────────────────────────────────────────────── ✅ Font families: 2 — OK ⚠️ Font sizes: 11 unique — recommended ≤ 8 ❌ Line-heights: 22 unique — no vertical rhythm detected COLORS ──────────────────────────────────────────────────────────── ❌ 54 unique colors found — recommended < 20 ❌ 40 similar color pairs — palette can be consolidated ██ #f0f6fc ≈ ██ #f6f8fa (ΔE=2.6) ██ #24292f ≈ ██ #1f2328 (ΔE=2.9) COMPONENTS ──────────────────────────────────────────────────────────── ❌ 28/50 buttons smaller than 44px touch target (56%) ⚠️ Buttons: 11 padding variations — recommended ≤ 3 ✅ Interactive states: :hover and :focus present ──────────────────────────────────────────────────────────── SUMMARY: 6 ❌ 5 ⚠️ 7 ✅ ──────────────────────────────────────────────────────────── COMMAND_BLOCK: npx design-auditor https://yoursite.com --save-report # → design-audit-yoursite-com-2026-02-28.json Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: npx design-auditor https://yoursite.com --save-report # → design-audit-yoursite-com-2026-02-28.json COMMAND_BLOCK: npx design-auditor https://yoursite.com --save-report # → design-audit-yoursite-com-2026-02-28.json COMMAND_BLOCK: # No install needed npx design-auditor https://yoursite.com # Specific modules only npx design-auditor https://yoursite.com --only colors,typography # Local dev server npx design-auditor http://localhost:3000 --local Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: # No install needed npx design-auditor https://yoursite.com # Specific modules only npx design-auditor https://yoursite.com --only colors,typography # Local dev server npx design-auditor http://localhost:3000 --local COMMAND_BLOCK: # No install needed npx design-auditor https://yoursite.com # Specific modules only npx design-auditor https://yoursite.com --only colors,typography # Local dev server npx design-auditor http://localhost:3000 --local - How many font families are actually in use (recommended: ≤ 3) - Whether font sizes follow a modular scale - Line-height consistency — does your site have a baseline grid, or chaos? - Total unique colors across the page - Perceptual color clustering using delta-E (CIE76) — catches #f0f6fc and #f6f8fa as “basically the same color” - WCAG AA contrast validation for every text/background pair - Whether colors are tokenized in CSS variables or hardcoded everywhere - Detects your rhythm unit (font-size × line-height) - Checks if spacing follows a 4px or 8px grid - Flags outliers like 13px, 17px, 22px — the “magic numbers” that creep in - Touch target sizes (WCAG 2.5.5 minimum: 44×44px) - Button padding variations — are you using sm/md/lg or 11 random sizes? - Border-radius consistency - Z-index organization - Styles injected by JavaScript at runtime - CSS custom properties resolved to their actual values - Styles from third-party scripts and embeds - A freelancer or agency doing QA before handing off a site to a client - A frontend dev on a team where design system adoption is inconsistent - Anyone who’s inherited a codebase and wants to understand the “shape” of its CSS before touching it