Design Review Audit

Pre-Launch Visual Craft Audit — Static B2B Marketing Site

Final audit in the pre-production protocol. Verifies that the visual design meets production craft standards — that the system is coherent, choices are intentional, and the result does not look like default AI-generated output.

Scope: all pages, all interactive states, and design system documentation.

Core principle: craft is invisible when it works. When you look at a well-crafted interface, you don't think "nice borders" — you just understand the structure. This audit verifies that the design system works silently: hierarchy emerges, elevation is felt, typography communicates before anyone reads a word.

When to run: after all previous audits (04–12) are complete and issues resolved. Design review is the final gate before launch.

Severity Levels

Layer 1 — Design System Integrity

Before evaluating visual output, verify that design decisions are encoded in a coherent system. A site can look right by accident; a site built on a system looks right consistently.

1.1 CSS Token Architecture

Every color must trace back to CSS custom properties. No loose hex values in component styles.

Required token categories:

What to check:

• All color values are custom property references — no hardcoded hex in component styles
• Text hierarchy has at least four distinct levels
• Background tokens form an elevation scale — surfaces stack logically
• Semantic colors defined and used only for status — not repurposed as decoration

1.2 Spacing System

Random spacing is the clearest signal of no system. Every value must be a multiple of a defined base unit.

What to check:

• Base spacing unit defined (typically 4px or 8px)
• All spacing values are multiples of the base
• Scale covers four contexts: micro (icon gaps), component (button padding), section (between groups), major (between page areas)
• No arbitrary values like margin: 13px or padding: 7px 11px

1.3 Depth Strategy

One approach must be chosen and committed to. Mixing strategies produces incoherence.

What to check:

• One depth approach used consistently across all components
• Elevation jumps are whisper-quiet — barely noticeable in isolation, clear when stacked
• No mixing shadow-based and border-only depth in same interface
• Same hue for surfaces — shift only lightness for elevation, not different hues

1.4 Border Radius Scale

Radius communicates personality. Sharper = technical. Rounder = friendly. Must be consistent.

What to check:

• Scale defined with at least three levels: small (inputs, buttons), medium (cards), large (modals)
• Components of the same type share the same radius
• No large radius on small elements (pill button on sharp-cornered card = incoherence)

1.5 Typography System

Typography is the design itself — weight and personality shape how the product feels before anyone reads.

What to check:

• At minimum two typefaces: display/heading + body — not a single family for everything
• Pairing is intentional — contrast in personality, complementary in weight
• No generic fonts as primary display: Arial, Inter alone, Roboto, system-ui
• Four distinguishable hierarchy levels: headlines (size + weight + tight tracking), body (readable), labels (medium weight, small sizes), data/numbers (tabular figures)
• Hierarchy created by combining size, weight, AND letter-spacing — not size alone

Layer 2 — Visual Craft Checks

Four diagnostic tests that catch defaulted decisions. Run all four.

2.1 Swap Test

If you replaced the typeface with Inter/Roboto, would the design feel meaningfully different? If you replaced the layout with centered-column-with-cards, would it feel different? If you replaced the primary color with standard corporate blue, would it feel different?

Where swapping wouldn't matter = a defaulted decision to review.

2.2 Squint Test

Blur your eyes and look at each page. You should perceive hierarchy — what's above what, where sections divide, where the primary action is — without reading text.

What to check:

• Hierarchy perceptible with blurred vision on homepage
• Primary CTA is most visually prominent interactive element
• Nothing jumps out harshly — no border dominates the composition
• Section divisions felt, not announced

2.3 Signature Test

Identify five specific design elements — not "the overall feel" but actual components or decisions — where the chosen aesthetic direction is expressed concretely.

What to check:

• Five specific elements nameable where design direction appears
• Signature elements consistent across pages
• A visitor seeing one page would recognize the same system on another

2.4 Token Test

Open the CSS and read custom property names aloud.

--ink-deep, --parchment, --copper-accent evoke a world. --gray-700, --surface-2, --blue-500 evoke a template.

If tokens could belong to any project, naming hasn't been designed.

Layer 3 — Component and Interaction States

A design that looks right in default state but breaks on interaction feels unfinished.

3.1 Interactive Element States

Note: State definitions for accessibility (focus ring contrast, keyboard navigation) are covered in Audit 06. This section verifies visual craft quality of states.

Required states for every interactive element:

What to check:

• Every button has all five states
• Demo submit button has disabled state during request
• Selector buttons have active/selected state distinct from default and hover
• Form inputs have focus state with clear visual feedback
• Focus rings visible against all backgrounds where element appears

3.2 Data-Dependent States

Note: Error message copy quality is covered in Audit 12 — Copywriting. This section verifies visual states exist.

What to check:

• Demo response area has loading, empty (initial), and error states
• Contact form has success and error states
• No blank areas where a state should be designed

3.3 Surface Elevation

What to check:

• Navigation/header sits visually above page content
• Dropdowns/popovers sit above their parent surface
• Cards differentiated from page background
• Demo interactive area is the focal point of its section
• Sidebars use same background as content, separated by border — not different color
• Inputs slightly darker than surroundings (inset treatment)
• No two surfaces at different conceptual levels share the same visual treatment

Layer 4 — Design System Documentation

If a design system documentation file (e.g., DESIGN.md) is used for generating new screens or maintaining consistency, verify it is complete and accurate.

Full DESIGN.md structure requirements and screen generation best practices: see references/design-system-docs.md

Quick structure check — five required sections:

1. Visual theme and atmosphere — specific mood, density, tonal direction
2. Color palette and roles — each color with descriptive name, hex, functional role
3. Typography rules — families, weights, tracking per hierarchy level
4. Component styling — buttons, cards, inputs, navigation treatments
5. Layout principles — base spacing unit, grid structure, max content width

Audit Output Format

Design Review Audit — [Project Name]
Date: [Date]
Summary

Critical issues: X
High priority: X
Medium priority: X
Low priority: X
Swap test: [Pass / Fail — which elements defaulted]
Squint test: [Pass / Fail]
Signature test: [Pass / Fail — elements identified or missing]
Token test: [Pass / Fail]
Overall design readiness: [Ready / Needs work / Critical problems]

Critical Issues
[Issue title]

Layer: [System integrity / Visual craft / Component states / Documentation]
Test: [If Layer 2 — which diagnostic test]
Page: [page name or all pages]
Issue: [What is wrong]
Fix: [Specific correction]

High Priority
[Same format]
Medium Priority
[Same format]
Low Priority
[Same format]
Recommended Fix Order

Token architecture — hardcoded values break system coherence
Missing interaction states — unfinished craft feel
Depth strategy consistency — mixed approaches create incoherence
Typography hierarchy — hierarchy by size alone is flat
Diagnostic test failures — defaulted decisions
Documentation gaps — consistency for future screens

Full pre-launch checklist with anti-patterns: see references/checklist.md