Design Audit
Comprehensive audit framework combining typographic analysis, structural review, and Web Interface Guidelines compliance.
Part A: Typography & Structure Audit
Typographic Job Matrix
| Category |
Objective |
Metrics |
| Display |
Catch attention, evoke resonance |
Interest, gut feeling, memorability |
| Body |
Clear, comfortable information |
Legibility, comfort, "gets out of the way" |
Body Text Legibility
Four critical decisions (use "Break It and Fix It" — push to broken extreme, then adjust):
- Font (sturdiness): Typographic color and "active texture" — sturdy shapes, not muddy gray
- Size: Comfortable at standard viewing distance; test boundaries
- Measure/line length: Too narrow = frantic rhythm; too wide = eye loses return to left margin
- Leading: Narrower measure → tighter leading; wider measure → looser leading
Display Text & Shape Harmony
Display text must share Visual DNA with body text:
- Stems: Slanted or straight? Same backbone as body?
- Arcs/joins: Shared sharpness or curves?
- Positive/negative space: Counters match word/line spacing weight?
- Weight benchmarking: Display thin vs body stems; display heavy vs x-height
Structural Audit (Alignment & Proximity)
- Strong alignment axis: Find the primary axis. Audit for visual alignment (can snap to grid but still look "off")
- Proximity: Headings associate with their content blocks, not each other. Related items closer than unrelated
- Edge tension: Elements closer to page edges than to each other cause mess
Resonance
- Adjective mapping: Describe gut feeling (elegant, trustworthy, casual, official)
- Competitive benchmarking: Familiar (expected) vs memorably unexpected
Diagnostic Tools
- Squint test: Judge volumes of space and typographic color without reading
- Inversion: Turn layout upside down to judge weight, alignment, balance
- Distance study: Step back — what is first, second, third? Match to intent
- Toggle/side-by-side: Never audit one solution alone; compare variations
Part B: Web Interface Guidelines
Accessibility (CRITICAL)
- Icon-only buttons need
aria-label
- Form controls need
<label> or aria-label
- Interactive elements need keyboard handlers
<button> for actions, <a>/<Link> for navigation (not <div onClick>)- Images need
alt (or alt="" if decorative)
aria-live="polite" for async updates (toasts, validation)- Headings hierarchical
<h1>–<h6>; include skip link
Focus States
- Visible focus:
focus-visible:ring-* or equivalent
- Never
outline-none without focus replacement
- Use
:focus-visible over :focus
- Group focus with
:focus-within for compound controls
Forms
autocomplete and meaningful name on inputs- Correct
type (email, tel, url, number) and inputmode
- Never block paste (
onPaste + preventDefault)
- Labels clickable (
htmlFor or wrapping control)
- Errors inline next to fields; focus first error on submit
- Warn before navigation with unsaved changes
Animation
- Honor
prefers-reduced-motion
- Animate
transform/opacity only
- Never
transition: all — list properties explicitly
- Animations interruptible
Typography Rules
… not ...; curly quotes " " not straight "font-variant-numeric: tabular-nums for number columnstext-wrap: balance or text-pretty on headings
Content Handling
- Text containers handle long content:
truncate, line-clamp-*, or break-words
- Flex children need
min-w-0 for truncation
- Handle empty states
Images
<img> needs explicit width and height (prevents CLS)- Below-fold:
loading="lazy"; above-fold: priority or fetchpriority="high"
Performance
- Large lists (>50 items): virtualize
- No layout reads in render
<link rel="preconnect"> for CDN domains- Critical fonts:
<link rel="preload" as="font"> with font-display: swap
Navigation & State
- URL reflects state — filters, tabs, pagination in query params
- Links use
<a>/<Link> (Cmd/Ctrl+click support)
- Destructive actions need confirmation or undo
Touch & Interaction
touch-action: manipulation (prevents double-tap zoom delay)overscroll-behavior: contain in modals/drawersautoFocus sparingly
Dark Mode & Theming
color-scheme: dark on <html> for dark themes<meta name="theme-color"> matches page background
Locale & i18n
- Use
Intl.DateTimeFormat and Intl.NumberFormat, not hardcoded formats
- Detect language via
Accept-Language, not IP
Anti-Patterns (FLAG THESE)
user-scalable=no or maximum-scale=1onPaste with preventDefaulttransition: alloutline-none without focus-visible replacement<div>/<span> with click handlers (should be <button>)- Images without dimensions
- Large arrays
.map() without virtualization
- Form inputs without labels
- Hardcoded date/number formats
Output Format
Group by file. Use file:line format. Terse findings.
## src/Button.tsx
src/Button.tsx:42 - icon button missing aria-label
src/Button.tsx:55 - animation missing prefers-reduced-motion
## src/Modal.tsx
src/Modal.tsx:12 - missing overscroll-behavior: contain
## src/Card.tsx
✓ pass
1---2name: design-audit3description: Design audit and review — typography audit, structural analysis, Web Interface Guidelines compliance, accessibility, UX anti-patterns, and brand resonance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or evaluate design quality.4---56# Design Audit78Comprehensive audit framework combining typographic analysis, structural review, and Web Interface Guidelines compliance.910---1112## Part A: Typography & Structure Audit1314### Typographic Job Matrix1516| Category | Objective | Metrics |17|----------|-----------|---------|18| **Display** | Catch attention, evoke resonance | Interest, gut feeling, memorability |19| **Body** | Clear, comfortable information | Legibility, comfort, "gets out of the way" |2021### Body Text Legibility2223Four critical decisions (use "Break It and Fix It" — push to broken extreme, then adjust):24251. **Font (sturdiness)**: Typographic color and "active texture" — sturdy shapes, not muddy gray262. **Size**: Comfortable at standard viewing distance; test boundaries273. **Measure/line length**: Too narrow = frantic rhythm; too wide = eye loses return to left margin284. **Leading**: Narrower measure → tighter leading; wider measure → looser leading2930### Display Text & Shape Harmony3132Display text must share **Visual DNA** with body text:33- **Stems**: Slanted or straight? Same backbone as body?34- **Arcs/joins**: Shared sharpness or curves?35- **Positive/negative space**: Counters match word/line spacing weight?36- **Weight benchmarking**: Display thin vs body stems; display heavy vs x-height3738### Structural Audit (Alignment & Proximity)3940- **Strong alignment axis**: Find the primary axis. Audit for visual alignment (can snap to grid but still look "off")41- **Proximity**: Headings associate with their content blocks, not each other. Related items closer than unrelated42- **Edge tension**: Elements closer to page edges than to each other cause mess4344### Resonance4546- **Adjective mapping**: Describe gut feeling (elegant, trustworthy, casual, official)47- **Competitive benchmarking**: Familiar (expected) vs memorably unexpected4849### Diagnostic Tools5051- **Squint test**: Judge volumes of space and typographic color without reading52- **Inversion**: Turn layout upside down to judge weight, alignment, balance53- **Distance study**: Step back — what is first, second, third? Match to intent54- **Toggle/side-by-side**: Never audit one solution alone; compare variations5556---5758## Part B: Web Interface Guidelines5960### Accessibility (CRITICAL)6162- Icon-only buttons need `aria-label`63- Form controls need `<label>` or `aria-label`64- Interactive elements need keyboard handlers65- `<button>` for actions, `<a>`/`<Link>` for navigation (not `<div onClick>`)66- Images need `alt` (or `alt=""` if decorative)67- `aria-live="polite"` for async updates (toasts, validation)68- Headings hierarchical `<h1>`–`<h6>`; include skip link6970### Focus States7172- Visible focus: `focus-visible:ring-*` or equivalent73- Never `outline-none` without focus replacement74- Use `:focus-visible` over `:focus`75- Group focus with `:focus-within` for compound controls7677### Forms7879- `autocomplete` and meaningful `name` on inputs80- Correct `type` (`email`, `tel`, `url`, `number`) and `inputmode`81- Never block paste (`onPaste` + `preventDefault`)82- Labels clickable (`htmlFor` or wrapping control)83- Errors inline next to fields; focus first error on submit84- Warn before navigation with unsaved changes8586### Animation8788- Honor `prefers-reduced-motion`89- Animate `transform`/`opacity` only90- Never `transition: all` — list properties explicitly91- Animations interruptible9293### Typography Rules9495- `…` not `...`; curly quotes `"` `"` not straight `"`96- `font-variant-numeric: tabular-nums` for number columns97- `text-wrap: balance` or `text-pretty` on headings9899### Content Handling100101- Text containers handle long content: `truncate`, `line-clamp-*`, or `break-words`102- Flex children need `min-w-0` for truncation103- Handle empty states104105### Images106107- `<img>` needs explicit `width` and `height` (prevents CLS)108- Below-fold: `loading="lazy"`; above-fold: `priority` or `fetchpriority="high"`109110### Performance111112- Large lists (>50 items): virtualize113- No layout reads in render114- `<link rel="preconnect">` for CDN domains115- Critical fonts: `<link rel="preload" as="font">` with `font-display: swap`116117### Navigation & State118119- URL reflects state — filters, tabs, pagination in query params120- Links use `<a>`/`<Link>` (Cmd/Ctrl+click support)121- Destructive actions need confirmation or undo122123### Touch & Interaction124125- `touch-action: manipulation` (prevents double-tap zoom delay)126- `overscroll-behavior: contain` in modals/drawers127- `autoFocus` sparingly128129### Dark Mode & Theming130131- `color-scheme: dark` on `<html>` for dark themes132- `<meta name="theme-color">` matches page background133134### Locale & i18n135136- Use `Intl.DateTimeFormat` and `Intl.NumberFormat`, not hardcoded formats137- Detect language via `Accept-Language`, not IP138139### Anti-Patterns (FLAG THESE)140141- `user-scalable=no` or `maximum-scale=1`142- `onPaste` with `preventDefault`143- `transition: all`144- `outline-none` without focus-visible replacement145- `<div>`/`<span>` with click handlers (should be `<button>`)146- Images without dimensions147- Large arrays `.map()` without virtualization148- Form inputs without labels149- Hardcoded date/number formats150151---152153## Output Format154155Group by file. Use `file:line` format. Terse findings.156157```text158## src/Button.tsx159160src/Button.tsx:42 - icon button missing aria-label161src/Button.tsx:55 - animation missing prefers-reduced-motion162163## src/Modal.tsx164165src/Modal.tsx:12 - missing overscroll-behavior: contain166167## src/Card.tsx168169✓ pass170```
ihj04982