Design Audit

Design Audit is a professional tool for auditing the design of any website directly in your browser. ────────────────────────────── WHAT IT DOES ────────────────────────────── Open the side panel and browse. Design Audit inspects each page you visit and builds a consolidated picture of the design system actually in use — design tokens, colors, type, icons, layout, spacing, and accessibility. Results accumulate across pages, so auditing a whole site is a matter of navigating it. When you are done, export a complete HTML report with eight tabs, or individual SVG sheets per category, ready to drop into Figma. ────────────────────────────── SEVEN AUDITS ────────────────────────────── DESIGN TOKENS Extracts the design tokens (CSS custom properties) each page defines and measures how much of its color, type, spacing, radius and shadow styling actually uses them. Lists the hardcoded values that already have a matching token, the quickest fixes, and marks every color, type and spacing value in the other audits as on-system or off-system. COLORS Extracts every color in use — text, background, and border — and reconstructs the real palette. Shows usage frequency so you can tell the intentional palette from the accidents. TYPOGRAPHY Maps every font family, size, weight, line height, and letter spacing. Surfaces the type scale that exists in practice and the variants that drifted from it. ICONS Collects SVG icons, icon fonts, and image icons, with a rendered preview of each one. Detects mixed libraries and inconsistent sizing. GRID AND LAYOUT Analyzes the container system, grid patterns, flexbox usage, and the spacing scale behind them. Shows whether a real layout system is in place or whether it was improvised. SPACING Extracts the spacing scale in use across margins, paddings, and gaps. Measures adherence to a 4px grid and flags near-duplicate values that should be unified. ACCESSIBILITY (WCAG 2.1 AA) Runs an audit with axe-core, the same engine used by compliance teams. Groups findings by severity and category, links each one to the relevant WCAG success criterion with an explanation of what it means and why it matters, and highlights the offending elements directly on the page. ────────────────────────────── HOW IT WORKS ────────────────────────────── 1. Click the extension icon to open the side panel 2. Browse the site you want to audit — pages are collected automatically 3. Review the results in the panel as they accumulate 4. Export the consolidated HTML report or individual SVG sheets You can also refresh all audits manually at any time, and capture full-page or viewport screenshots. ────────────────────────────── PRIVACY ────────────────────────────── Audit data is stored locally in your browser and never leaves your device. All analysis runs locally on the page you are viewing. The extension keeps the addresses of the pages you audit, locally, so results can be combined and listed in your report; nothing is recorded while the side panel is closed. It does not collect form contents, passwords, or personal data. There are no accounts and no login. The only network requests the extension makes are to download the stylesheets of the page you are auditing (for example from a CDN), without cookies, so its design tokens can be read; nothing is sent anywhere. ────────────────────────────── EXPORTS ────────────────────────────── - Consolidated HTML report with eight tabs (Overview plus the seven audits) - One SVG sheet per audit category, sized for Figma import - The HTML report is fully self-contained and opens offline, with no server required ────────────────────────────── 100% FREE ────────────────────────────── All seven audits, the consolidated HTML report and every SVG export are free, with no account, no login and no page limit. If Design Audit helps your work, you can support it with an optional PayPal donation from the "Support me" link in the panel. ────────────────────────────── REQUIREMENTS ────────────────────────────── - Chrome 114 or later (required for the Side Panel API) - Works on any https:// site - Chrome internal pages (chrome://) cannot be analyzed, as required by the browser