| name | Visual Audit |
| department | artisan |
| description | Structured visual design critique with specific actionable feedback |
| version | 1 |
| triggers | ["visual","design review","UI audit","hierarchy","contrast","spacing","typography","color","layout"] |
Visual Audit
Purpose
Perform a structured visual design critique of an interface, producing specific actionable feedback on hierarchy, contrast, spacing, typography, color, and overall coherence.
Inputs
- Screenshots, mockups, or live implementation of the interface
- Design system or style guide (if it exists)
- Target context (marketing page, app dashboard, settings screen, etc.)
- Accessibility requirements (WCAG AA, AAA, or custom)
Process
Step 1: Squint Test
View the interface at arm's length (or blur it mentally). Identify:
- What's the loudest element? Is it the right one?
- Can you identify the primary action within 3 seconds?
- Is there a clear visual reading order?
- Are there any areas of visual "soup" (too much competing for attention)?
Step 2: Hierarchy Audit
Check the information hierarchy:
- Heading levels: Are there clear H1 → H2 → H3 distinctions via size and weight?
- Primary vs secondary actions: Is the primary action visually dominant (filled button) vs secondary (ghost/outline)?
- Content grouping: Are related items visually grouped (proximity) and distinct groups separated (spacing)?
- Emphasis distribution: Is anything fighting for attention that shouldn't be?
Step 3: Typography Audit
Check the type system:
- Scale consistency: Are font sizes from a defined scale (not arbitrary)?
- Line height: Is body text at 1.4-1.6x line height for readability?
- Measure: Are line lengths between 45-75 characters for body text?
- Weight usage: Is font weight used semantically (bold for emphasis, not decoration)?
- Font pairing: Are typefaces intentionally paired (one serif + one sans, or a single family)?
Step 4: Color and Contrast Audit
Check color usage:
- Contrast ratios: All text meets WCAG AA (4.5:1 normal text, 3:1 large text)
- Color meaning: Color is not the sole indicator of status (add icons, text, patterns)
- Palette coherence: Colors come from a defined palette, not ad-hoc hex values
- Dark mode: If supported, contrast ratios are verified in dark mode too
- Saturation balance: No oversaturated elements that vibrate or strain eyes
Step 5: Spacing and Alignment Audit
Check spatial consistency:
- Grid adherence: Elements align to a defined grid (4px, 8px base)
- Consistent spacing: Same-level items use the same spacing value
- Breathing room: Content doesn't feel cramped; whitespace is used intentionally
- Alignment lines: Elements that should align actually align (check left edges, baselines)
Step 6: Component Consistency Audit
Check for visual consistency:
- Button styles: All buttons of the same type look the same
- Card patterns: Cards share border radius, shadow, padding
- Icon style: Icons are from one set (outlined, filled, or mixed intentionally)
- Form elements: Inputs, selects, and textareas share a visual language
Output Format
# Visual Audit Report
## Overall Assessment
**Score:** [1-10]
**Summary:** [2-3 sentences on the interface's visual effectiveness]
## Squint Test Results
- **Primary focus:** [What draws the eye first — is this correct?]
- **Reading order:** [Clear / Unclear / Competing elements]
- **Visual noise:** [Low / Medium / High]
## Findings
### [CRITICAL] [Category] — [Finding]
**Current:** [What's happening now]
**Issue:** [Why it's a problem — cite specific principle]
**Fix:** [Specific change — exact values where possible]
### [IMPROVEMENT] [Category] — [Finding]
**Current:** [What's happening now]
**Suggestion:** [Specific improvement with rationale]
## Contrast Report
| Element | Foreground | Background | Ratio | Pass AA |
|---------|-----------|------------|-------|---------|
| Body text | #333 | #fff | 12.6:1 | Yes |
| Muted text | #999 | #fff | 2.8:1 | NO |
## Quick Wins
1. [Change that would have the biggest visual impact for the least effort]
2. [Second quick win]
3. [Third quick win]
Quality Checks
Evolution Notes