Audit design review

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

Level	Description	Action
Critical	Design system incoherent or key states missing	Fix before launch
High	Defaulted decisions detectable by diagnostic tests	Fix before launch
Medium	Minor inconsistencies in token usage or spacing	Fix within first week
Low	Documentation gaps or naming improvements	Fix when convenient

---

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:

Category	Coverage	Example pattern
Foreground	Text hierarchy — four levels	--text-primary, --text-secondary, --text-tertiary, --text-muted
Background	Surface elevation scale	--surface-base, --surface-raised, --surface-overlay
Border	Separation hierarchy	--border-subtle, --border-standard, --border-emphasis
Brand	Primary identity + variants	--brand-primary, --brand-accent
Semantic	Status communication	--color-success, --color-warning, --color-error

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.

Approach	Character	When to use
Borders only	Clean, technical	Dense, data-heavy interfaces
Subtle shadows	Soft, approachable	Products needing warmth
Layered shadows	Premium, dimensional	Cards needing visual presence
Surface color shifts	Background tints	When shadows feel too heavy

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:

State	Trigger	Common failure
Default	Normal	Usually handled
Hover	Cursor over	Color change only, no other feedback
Active	Being pressed	Missing entirely
Focus	Keyboard nav	Disabled or too subtle
Disabled	Not available	Same as default — no difference

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.

State	When	Common failure
Loading	Waiting for response	No indication — page appears frozen
Empty	No data / initial view	Not designed — broken layout
Error	Request failed	Generic browser error or silent failure

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