Design Principles

Takeaways

Whitespace improves readability and comprehension
Strategic whitespace creates visual hierarchy
Consistent spacing creates rhythm and harmony
Whitespace can convey brand positioning and quality

The Power of Whitespace

Whitespace is not empty space; it's a powerful design element that improves readability, focus, and perceived elegance.

Overview

Whitespace (or negative space) refers to the empty space between and around elements in a design. Despite its name, it doesn't have to be white - it's simply the absence of content.

Effective use of whitespace can dramatically improve user experience by making content more readable, focusing attention, and creating a sense of elegance.

Benefits of Whitespace

Improves readability and comprehension
Creates visual hierarchy and organization
Enhances focus on key elements
Conveys a sense of sophistication and quality
Reduces cognitive load

Types of Whitespace

Type	Description	Application
Macro	Large spaces between major elements	Page margins, section separators
Micro	Small spaces between minor elements	Line spacing, letter spacing, padding
Active	Intentionally shaped to guide attention	Asymmetrical layouts, strategic emptiness
Passive	Standard spacing for readability	Paragraph margins, grid gutters

Implementation Guidelines

Use consistent spacing with a defined scale
Increase whitespace for higher-end brands/products
Balance whitespace with information density needs
Consider whitespace as a design element, not an afterthought

Code Example

/* Example of a whitespace scale using CSS variables */
:root {
  --space-xs: 0.25rem;  /* 4px */
  --space-sm: 0.5rem;   /* 8px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 2rem;     /* 32px */
  --space-xl: 4rem;     /* 64px */
}

.card {
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

.card-title {
  margin-bottom: var(--space-sm);
  letter-spacing: 0.05em; /* Micro whitespace */
  line-height: 1.5;       /* Micro whitespace */
}