Tools

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

2026-03-03 0 views admin
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 ? It will become hidden in your post, but will still be visible via the comment's permalink. as well , this person and/or

Code Block

Copy

npx design-auditor https://yoursite.com 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 ✅ ──────────────────────────────────────────────────────────── 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 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 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

🏷️ Tags

toolsutilitiessecurity toolsbuiltcatchesdesigninconsistencieslighthousesystem

More from Tools

Tools: AI Code Review for Enterprise Teams: Security, Compliance, and Scale in 2026

Tools: AI Code Review for Enterprise Teams: Security, Compliance, and Scale in 2026

2026-03-13 0
Tools: AI Code Review for Security - Finding Vulnerabilities With AI in 2026

Tools: AI Code Review for Security - Finding Vulnerabilities With AI in 2026

2026-03-13 0
Tools: how to create azure resources via azure cli

Tools: how to create azure resources via azure cli

2026-03-13 0
Tools: Hands-On IAM with WSO2 Asgardeo: Configuring SSO, MFA, and Adaptive Authentication

Tools: Hands-On IAM with WSO2 Asgardeo: Configuring SSO, MFA, and Adaptive Authentication

2026-03-13 0

Trending

1

CVE-2025-61481: Critical Remote Code Execution Vulnerability in MikroTik RouterOS & SwitchOS

2025-10-27 • 189 views
2

CVE-2025-43939: Dell Unity OS Command Injection (High)

2025-10-30 • 148 views
3

Google disputes false claims of massive Gmail data breach

2025-10-30 • 130 views
4

Microsoft: DNS outage impacts Azure and Microsoft 365 services

2025-10-30 • 88 views
5

3.5B Accounts, 1 Critical Flaw: Meta Closes WhatsApp Data-Harvesting

2025-11-25 • 81 views