visual-design

name	visual-design
description	Use when designing or coding a new interface that needs a distinctive aesthetic direction, when reviewing visuals for hierarchy/brand alignment, or when an existing UI feels generic ("AI slop") and needs production-grade visual polish.
metadata	{"references":["references/aesthetic-principles.md","references/brand-alignment.md","references/visual-hierarchy.md"]}

Visual Design

Workflow

1. Commit to one aesthetic direction (see table below). Pick one — do not blend three.
2. Document brand inputs: values, voice, existing tokens, audience, competitors.
3. Define hierarchy plan: primary CTA, secondary content, tertiary, decoration — ranked.
4. Choose type pair: distinctive display + refined body. Avoid Inter/Roboto/Arial/Space Grotesk defaults.
5. Build tokens: colors (dominant + sharp accent), spacing scale, radii, shadows, motion timings.
6. Implement: real code (HTML/CSS or framework), not mockups.
7. Quality gate (before shipping):
   • Run npx pa11y <url> — zero contrast failures (WCAG AA: 4.5:1 body, 3:1 large text).
   • Visual consistency: same spacing scale across all pages, same radius vocabulary, no orphan one-off colors.
   • First-impression check: screenshot the hero, ask "would this be memorable in a Dribbble feed?"
   • Reduced-motion: confirm prefers-reduced-motion disables non-essential animation.

Aesthetic direction picker (one)