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:

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:

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

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