git:20260930.8810039 to git:20260930.62e5f6a

---

name: design-principles

description: "Core visual design principles (visual hierarchy, Gestalt grouping, composition, balance, contrast, white space, color, typography) with UI fixes, a checklist, and deep-dive references. Use when making or defending a layout, type, or color decision, or when a design feels off and you need to name why."

---

# 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:

- 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)

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)

```

### 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 |

| 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)

- 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