Core visual design principles that underpin all great design. Master gestalt psychology, visual hierarchy, composition, color theory, and typography fundamentals...
The fundamental laws governing visual perception and communication. These principles are not opinions—they're observations about how human vision and cognition work.
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 Law: The brain organizes visual elements into meaningful groups.
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:
space-y-2 (8px)space-y-8 (32px) or divide-yElements that look alike appear grouped.
When multiple card types exist, make categories visually distinct:
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.
The mind completes incomplete shapes.
Useful for:
Clear separation between subject and background.
Common failures:
The Law: Placing subjects at 1/3 intersections creates natural balance.
+-------+-------+-------+
| | | |
| ● | | | ← Focal point at intersection
+-------+-------+-------+
| | | |
| | | |
+-------+-------+-------+
| | | |
| | | |
+-------+-------+-------+
For web layouts:
The Law: Proportions found in nature feel inherently pleasing.
Applications:
1:1.6181.618:116px → 26px → 42pxTailwind approximation:
Base unit: 16px (text-base)
Medium: 24px (text-2xl ≈ 16 × 1.5)
Large: 40px (text-4xl ≈ 16 × 2.5)
The Law: Compositions should feel stable, not falling.
Symmetrical Balance
Asymmetrical Balance
Visual Weight Factors:
| Element | Adds Weight |
|---|---|
| Size | Larger = heavier |
| Color | Darker, saturated = heavier |
| Complexity | Detailed = heavier |
| Position | Lower = heavier |
| Isolation | Alone = heavier |
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)
The Law: Consistent patterns create unity and learnability.
Elements to keep consistent:
The Law: Difference creates interest and guides attention.
Types of contrast:
Minimum contrast requirements:
The Law: What you leave empty is as important as what you fill.
Functions of white space:
Common failures:
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
The Law: All elements should feel like they belong together.
Achieving Unity:
Testing Unity: Take any element and place it elsewhere. Does it still feel like it belongs? If not, the system lacks unity.
| 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 |
