Spacing

The spacing system creates visual rhythm and hierarchy through consistent, predictable intervals. Based on a 4px base unit, the scale ensures harmonious relationships between all interface elements while maintaining flexibility for diverse layout needs.

Principles

Mathematical Foundation

Base Unit: 4px provides the foundation for all spacing decisions
Doubling Scale: Each step doubles the previous value for clear hierarchy
Touch-Friendly: Minimum 44px touch targets ensure mobile accessibility
Responsive: Spacing scales appropriately across different screen sizes

Consistency Benefits

Visual Harmony: Consistent spacing creates a cohesive, professional appearance
Faster Development: Predefined spacing reduces decision fatigue
Easier Maintenance: Systematic spacing makes updates more predictable
Better UX: Consistent patterns help users navigate more intuitively

Spacing Scale

--space-1

4px

Icon padding, fine adjustments, micro-spacing

--space-2

8px

Form element spacing, small component gaps

--space-3

12px

Button padding, compact layouts

--space-4

16px

Card padding, standard component spacing

--space-5

20px

Section spacing, medium gaps

--space-6

24px

Section spacing, component group separation

--space-8

32px

Layout spacing, major section breaks

--space-10

40px

Large layout margins, hero section spacing

--space-12

48px

Extra large spacing, page section breaks

--space-16

64px

Maximum spacing, major layout divisions

Spacing in Practice

Card Component

Sample Card Title

This card demonstrates proper spacing between elements. Notice the consistent gaps that create visual hierarchy.

Spacing used: 20px/30px card padding; 12px title spacing; 16px text spacing; 12px between buttons

Form Layout

Spacing used: 16px between fields; 8px between labels and inputs

Margin vs Padding Guidelines

When to Use Margin

Component Separation: Space between different components
Layout Spacing: Gaps in grid systems and flexbox layouts
Text Flow: Space between paragraphs and headings
External Spacing: Distance from container edges

<!-- Margin Examples -->
<div style="margin-bottom: 16px">Paragraph 1</div>
<div style="margin-bottom: 24px">Paragraph 2</div>
<div style="margin-top: 32px">Section break</div>

When to Use Padding

Internal Spacing: Space inside components and containers
Touch Targets: Expanding clickable areas for buttons
Content Breathing Room: Space around text within cards
Background Areas: When background color/border needs to extend

<!-- Padding Examples -->
<div style="padding: 24px">Card content</div>
<button style="padding: 8px 16px">Button</button>
<div style="padding-top: 32px; padding-bottom: 16px">Section</div>

Implementation Guidelines

Spacing Tokens and Semantics

/* Example token definitions */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
}

/* Example usage */
.stack { display: grid; row-gap: var(--space-4); }
.pad-4 { padding: var(--space-4); }
.mt-8x { margin-top: var(--space-8); }

Best Practices

Use consistent spacing values from the scale
Prefer semantic layout classes (e.g., grid-cols-responsive-*) over ad-hoc utilities
Use larger spacing for more important separations
Test spacing at different screen sizes
Maintain visual rhythm throughout the interface
Use margin for external spacing and padding for internal spacing