design-principles

What this skill does

# 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 color, icon style, or layout

#### Continuity
*The eye follows smooth paths.*

Applied to navigation:
```
[Home] → [Products] → [About] → [Contact]
         ↓
    [Category A]
    [Category B]
    [Category C]
```

Lines don't need to be visible—implied lines work.

#### Closure
*The mind completes incomplete shapes.*

Useful for:
- Logo design (WWF panda, FedEx arrow)
- Icon design (implied shapes)
- Cards that bleed off screen (implies more content)

#### Figure/Ground
*Clear separation between subject and background.*

Common failures:
- Text on busy image backgrounds
- Low contrast between layers
- Unclear what's clickable vs. static

### 3. The Rule of Thirds

**The Law**: Placing subjects at 1/3 intersections creates natural balance.

```
+-------+-------+-------+
|       |       |       |
|   ●   |       |       |  ← Focal point at intersection
+-------+-------+-------+
|       |       |       |
|       |       |       |
+-------+-------+-------+
|       |       |       |
|       |       |       |
+-------+-------+-------+
```

For web layouts:
- Hero text left-aligned, hitting left-third
- Key visuals placed at intersection points
- Whitespace fills remaining thirds

### 4. Golden Ratio (1:1.618)

**The Law**: Proportions found in nature feel inherently pleasing.

Applications:
- Content width to sidebar: `1:1.618`
- Heading to body size: `1.618:1`
- Spacing multipliers: `16px → 26px → 42px`

Tailwind approximation:
```
Base unit: 16px (text-base)
Medium:    24px (text-2xl ≈ 16 × 1.5)
Large:     40px (text-4xl ≈ 16 × 2.5)
```

### 5. Visual Balance

**The Law**: Compositions should feel stable, not falling.

**Symmetrical Balance**
- Equal weight on both sides
- Formal, stable, traditional
- Use for: corporate, luxury, authoritative

**Asymmetrical Balance**
- Unequal elements balanced by visual weight
- Dynamic, interesting, modern
- Use for: creative, startups, editorial

**Visual Weight Factors**:
| Element | Adds Weight |
|---------|-------------|
| Size | Larger = heavier |
| Color | Darker, saturated = heavier |
| Complexity | Detailed = heavier |
| Position | Lower = heavier |
| Isolation | Alone = heavier |

### 6. Alignment

**The Law**: Elements should share visual lines, even if not explicitly drawn.

**Strong Alignment**:
```
[Logo]
_________________________
[Navigation links          ]
_________________________

[Headline              ]
[Subhead               ]
[CTA Button]

(Everything shares left edge)
```

**Weak Alignment**:
```
    [Logo]
[Navigation links]
    [Headline]
   [Subhead   ]
    [CTA Button]

(No consistent edge)
```

### 7. Repetition

**The Law**: Consistent patterns create unity and learnability.

Elements to keep consistent:
- Border radius (all cards same)
- Shadow levels (same depth for same importance)
- Spacing units (multiples of 4px or 8px)
- Color application (primary always means action)
- Typography hierarchy (h2 always looks like h2)

### 8. Contrast

**The Law**: Difference creates interest and guides attention.

Types of contrast:
- Size contrast: Large headings, small captions
- Color contrast: Dark on light, warm accents
- Weight contrast: Bold headlines, regular body
- Style contrast: Serif headings, sans body
- Spacing contrast: Tight groups, generous separation

**Minimum contrast requirements**:
- Body text: 4.5:1 ratio (WCAG AA)
- Large text (18px+): 3:1 ratio
- UI components: 3:1 ratio

### 9. White Space (Negative Space)

**The Law**: What you leave empty is as important as what you fill.

**Functions of white space**:
1. **Breathing room**: Prevents cognitive overload
2. **Grouping**: Separates distinct content areas
3. **Emphasis**: Isolated elements command attention
4. **Luxury signal**: Generous space suggests premium

**Common failures**:
- Cramming elements to "fit more"
- Equal spacing everywhere (creates monotony)
- Fear of empty space

**Tailwind spacing guide**:
```
Tight (related):     gap-2 (8px)
Standard (siblings): gap-4 (16px)
Section (groups):    gap-8 (32px) or py-12
Page (major):        gap-16 (64px) or py-24
```

### 10. Unity

**The Law**: All elements should feel like they belong together.

**Achieving Unity**:
- Consistent color palette
- Unified typography system
- Repeated patterns and components
- Aligned grids
- Harmonious proportions

**Testing Unity**:
Take any element and place it elsewhere. Does it still feel like it belongs? If not, the system lacks unity.

## Quick Reference: Principles Applied

| Problem | Principle | Solution |
|---------|-----------|----------|
| "It feels cluttered" | White Space | Increase padding/margins |
| "I don't know where to look" | Hierarchy | Establish clear focal point |
| "It feels disconnected" | Unity/Repetition | Apply consistent patterns |
| "It feels boring" | Contrast | Add variation in size/color/weight |
| "Things seem randomly placed" | Alignment | Create shared edges |
| "The groups are confusing" | Proximity/Similarity | Cluster related items |
| "It feels off balance" | Balance | Redistribute visual weight |

## Resources

- **references/gestalt-principles.md**: Deep dive on perceptual grouping
- **references/visual-hierarchy.md**: Comprehensive hierarchy techniques
- **references/color-theory.md**: Color psychology and application
- **references/typography-fundamentals.md**: Type as design element
- **references/composition-rules.md**: Layout and arrangement
- **assets/principles-checklist.md**: Evaluation checklist