Design Principles

---
name: design-principles
description: Core visual design principles that underpin all great design. Master gestalt psychology, visual hierarchy, composition, color theory, and typography fundamentals. Use when making design decisions or evaluating designs against proven 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 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