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