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