design-principles

# Design Principles

The fundamental laws governing visual perception and communication. These principles are not opinions—they're observations about how human vision and cognition work.

## When to Use This Skill

- Making visual design decisions
- Evaluating whether a design "works"
- Explaining why something feels off
- Teaching design fundamentals
- Debugging design problems

## Core Principles

### 1. Visual Hierarchy

**The Law**: Not all elements are equally important. Design must guide the eye.

**Establishing Hierarchy**:

| Tool | What It Does | Example |
|------|--------------|---------|
| Scale | Larger = more important | Hero headlines vs. body text |
| Weight | Heavier = more important | Bold headings vs. light body |
| Color | Saturated/contrasting = attention | Primary CTA vs. secondary |
| Position | Top-left (in LTR) = first seen | Logo placement |
| Space | More space = more importance | Generous padding around CTAs |
| Depth | Shadows/elevation = prominence | Floating action buttons |

**Testing Hierarchy**:
Blur the design at 50%. Can you still identify:
- The primary focal point?
- The secondary information?
- The action you should take?

### 2. Gestalt Principles

**The Law**: The brain organizes visual elements into meaningful groups.

#### Proximity
*Elements near each other are perceived as related.*

```
Good:  [Label]          [Label]
       [Input]          [Input]
       (8px gap)        (8px gap)

       (32px gap between groups)

       [Label]          [Label]
       [Input]          [Input]

Bad:   [Label]  [Label]  [Label]  [Label]
       [Input]  [Input]  [Input]  [Input]
       (equal spacing destroys grouping)
```

**In Tailwind**:
- Related items: `space-y-2` (8px)
- Unrelated groups: `space-y-8` (32px) or `divide-y`

#### Similarity
*Elements that look alike appear grouped.*

When multiple card types exist, make categories visually distinct:
- Same category: same border-radius, shadow, padding
- Different category: different c