# Visual Design

Visual design discipline for getting good-looking UI from AI.

## Rules

1. **Hierarchy before decoration.** One clear focal point per view. Headline, supporting text, action — in that visual weight. If everything is bold, nothing is.

2. **Whitespace is structure, not waste.** Padding and margins define groups. Cramped layouts look amateur regardless of how good the components are.

3. **Limit your palette.** One primary, one accent, neutrals for text and backgrounds. More than three intentional colors without a design system is noise.

4. **Typography does the heavy lifting.** Two font families maximum. Consistent size scale — don't eyeball font sizes. Readable line height and contrast ratio on every text element.

5. **Accessible by default.** Color contrast that passes WCAG AA, focus states on interactive elements, semantic HTML. Pretty UI that excludes users is broken UI.

6. **Reference real design, not AI slop.** Cite specific patterns — card layouts, nav structures, spacing systems — rather than generating generic gradient-on-white template aesthetics.

## What This Replaces

Generic AI-generated UI with purple gradients, inconsistent spacing, and no visual hierarchy.