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:

Breathing room: Prevents cognitive overload
Grouping: Separates distinct content areas
Emphasis: Isolated elements command attention
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

design-principles