Whitespace Is Not Empty
Whitespace is an active design element. It creates hierarchy, groups related items, separates unrelated items, and gives the eye a place to rest. More whitespace usually means more perceived quality.
Proximity Principle
Items closer together are perceived as related. This is the most powerful layout tool you have. The space between a heading and its paragraph should be smaller than the space between sections.
Section gap: 48-64px (clear separation)
Heading to body: 8-16px (clearly connected)
Paragraph gap: 16-24px (related but distinct)
List item gap: 8-12px (tightly grouped)
Grid Systems
When to Use a Grid
- Content-heavy layouts (dashboards, feeds, catalogs)
- Marketing pages with repeating patterns
- Multi-column layouts
When to Break the Grid
- Hero sections (let them breathe)
- Feature highlights (asymmetry creates emphasis)
- Transitional moments (between major sections)
Common Grid Structures
- 12-column — Maximum flexibility, standard for web
- 8-column — Good for content-focused layouts
- Modular grid — Both columns and rows for dense UIs
- Baseline grid — Vertical rhythm based on line-height
Layout Patterns Beyond Cards-in-a-Grid
Bento Grid
Mixed-size cells in a grid. Creates visual hierarchy through size difference rather than position alone. Use larger cells for primary content, smaller for supporting.
Split Screen
50/50 or 60/40 vertical split. Image one side, content the other. Works well for product pages and comparison layouts.
Overlapping Layers
Elements that break out of their containers and overlap neighboring sections. Creates depth and energy. Use sparingly.
Asymmetric Balance
Intentionally uneven layouts that still feel balanced through visual weight distribution. A large image balanced by a small block of text with generous whitespace.
Full-Bleed Sections
Content that extends to viewport edges, alternating with contained content. Creates rhythm and breaks monotony.
Editorial Layout
Magazine-style layouts with mixed column widths, pull quotes, marginal notes, and varied image sizes. Best for long-form content.
Responsive Strategy
Content-First, Not Breakpoint-First
Instead of designing for specific screen sizes, ask: "At what width does this content start to look bad?" That's your breakpoint.
Responsive Patterns
- Stack — Multi-column to single-column (most common)
- Reorder — Change visual order for different contexts
- Reveal/hide — Show additional context on larger screens
- Transform — Navigation becomes drawer, table becomes card list
Container Queries > Media Queries
Components should respond to their container, not the viewport. A card in a sidebar should behave differently than the same card in a main content area, regardless of viewport width.