Spacing System

Consistent spacing creates visual rhythm, improves layout balance, and makes interfaces feel intentional. The UI Lab spacing system provides a modular scale derived from a base unit, ensuring predictable, harmonious layouts across all components and pages.

Spacing Scale

The spacing scale uses a base unit of 4px, with multipliers creating a proportional progression:

Why This Scale?

Mathematical Foundation

The spacing scale follows a 1.5x ratio between steps, creating proportional relationships:

• 4px → 6px → 8px → 12px → 16px → 24px → 32px → 48px...

This ratio:

• Creates visual harmony
• Feels natural to the eye
• Maintains mathematical relationships
• Reduces decision fatigue

Base Unit (4px)

Using 4px as the base unit:

• Aligns with most modern design systems
• Works well on all screen sizes
• Divides evenly into common sizes
• Supports sub-pixel rendering

Spacing Categories

Padding (Internal Spacing)

Space inside components between content and edges:

Component Padding

Margin (External Spacing)

Space outside components creating relationships between elements:

Element Margins

• Between buttons: space-2 (8px) horizontal
• Between input and label: space-1 (4px)
• Between heading and paragraph: space-2 (8px)
• Between form sections: space-6 (24px)
• Between page sections: space-12 (48px) to space-16 (64px)

Gap (Grid/Flex Spacing)

Space between items in grids and flex containers:

Grid Gaps

• Compact layout: space-2 (8px)
• Standard layout: space-4 (16px)
• Loose layout: space-6 (24px)
• Section grid: space-8 (32px)

Layout Patterns

Horizontal Spacing (Inline)

Spacing between elements on the same line:

[Button] ← space-2 → [Button] ← space-4 → [Input]

Common patterns:

• Form elements: space-2 (8px)
• Navigation items: space-4 (16px)
• Card controls: space-2 (8px)

Vertical Spacing (Block)

Space between stacked elements:

[Heading]
← space-3 →
[Description]
← space-6 →
[Content Block]

Common patterns:

• Between heading and content: space-2 to space-3
• Between content sections: space-6
• Between major sections: space-12 to space-16

Nested Spacing

Space hierarchy within components:

[Card] ← space-4 padding
  [Title] ← space-2 margin-bottom
  [Description] ← space-4 margin-bottom
  [Content]

Component Spacing Guidelines

Buttons

Padding: 8px (horizontal) × 6px (vertical)
Gap between buttons: 8px
Margin below group: 16px

Form Elements

Label to input: 4px
Input height: 40px (includes padding)
Between form fields: 24px
Between form sections: 48px

Cards

Padding: 16px (default), 24px (large)
Content gaps: 12px to 16px
Margin around cards: 16px to 24px

Lists

Gap between items: 8px (compact), 16px (normal)
Padding within items: 12px
Between list sections: 24px

Navigation

Gap between nav items: 16px
Padding in nav items: 12px (horizontal) × 8px (vertical)
Nav height: 56px (mobile), 64px (desktop)

Responsive Spacing

Spacing adapts for different screen sizes while maintaining the scale:

Desktop (1024px+)

• Use spacing scale as documented
• Generous margins on containers (space-6 to space-8)
• Full implementation of spacing hierarchy

Tablet (768px - 1023px)

• Reduce horizontal padding on containers
• Maintain vertical spacing hierarchy
• Adjust margins for narrower viewports

Mobile (< 768px)

• Reduce large spacing (space-16+) slightly
• Tighter horizontal padding (space-3 minimum)
• Maintain standard spacing for touch targets
• Increase vertical spacing for readability

Touch Target Sizing

Spacing considerations for touch interfaces:

Minimum Touch Target

• 44px × 44px recommended
• 40px × 40px minimum acceptable
• Includes padding around interactive element

Gap Between Touch Targets

• Minimum: 8px (space-2)
• Recommended: 12px (space-3)
• Prevents accidental taps

Example: Button with Spacing

Button size: 40px
Button padding: 8px
Gap to next button: 8px
Total space for two buttons: 40px + 8px + 8px + 40px = 96px

CSS Variable Usage

All spacing values are available as CSS variables:

/* Using spacing tokens */
margin: var(--space-4);
padding: var(--space-3) var(--space-4);
gap: var(--space-2);

/* Combining values */
margin: var(--space-6) var(--space-4);      /* Vertical, Horizontal */
padding: var(--space-4) var(--space-6);     /* All sides */

Practical Examples

/* Card with internal spacing */
.card {
  padding: var(--space-6);
}

.card-title {
  margin-bottom: var(--space-3);
}

/* Form with proper spacing */
.form-group {
  margin-bottom: var(--space-6);
}

.form-label {
  margin-bottom: var(--space-1);
  display: block;
}

/* Grid with gap */
.grid {
  display: grid;
  gap: var(--space-4);
}

/* Flex with spacing */
.flex {
  display: flex;
  gap: var(--space-2);
}

Tailwind CSS Classes

Spacing is fully integrated with Tailwind:

<!-- Padding -->
<div class="p-4">Padded content</div>
<div class="px-4 py-3">Horizontal and vertical padding</div>

<!-- Margin -->
<div class="m-4">Margin all sides</div>
<div class="mb-6">Margin bottom</div>
<div class="mx-auto">Centered with margin</div>

<!-- Gap -->
<div class="flex gap-2">Flex with small gap</div>
<div class="grid gap-4">Grid with standard gap</div>

<!-- Combinations -->
<button class="px-4 py-2 mb-6">Button with spacing</button>

Spacing Principles

1. Use the Scale

Always choose from the spacing scale. Don't use arbitrary values.

/* Good */
margin: var(--space-4);

/* Avoid */
margin: 15px;
margin: 1.2rem;

2. Create Visual Rhythm

Use consistent spacing to guide the eye through the interface.

Large content
← space-12 →
Related section
← space-6 →
Item
← space-2 →
Item

3. Respect Containment

Space within containers uses smaller units; space between containers uses larger units.

Container A ← space-6 → Container B
  Content ← space-3 → Content
    Item ← space-1 → Item

4. Consider Content

Adjust spacing based on content density:

• Dense data: Tighter spacing (space-1 to space-2)
• Standard content: Standard spacing (space-4)
• Editorial content: Generous spacing (space-6 to space-8)

5. Test Readability

Spacing should improve readability and hierarchy, not hinder it.

Common Mistakes

Using Arbitrary Values

/* ❌ Don't */
margin: 13px;
padding: 18px;

/* ✓ Do */
margin: var(--space-3);
padding: var(--space-4);

Inconsistent Spacing

/* ❌ Avoid */
.card1 { padding: 16px; }
.card2 { padding: 20px; }
.card3 { padding: 12px; }

/* ✓ Do */
.card { padding: var(--space-4); }

Over-Spacing Content

/* ❌ Too much space */
.content {
  margin-bottom: var(--space-16);
}

/* ✓ Appropriate spacing */
.content {
  margin-bottom: var(--space-6);
}

Spacing in Different Contexts

Marketing/Landing Pages

• Generous spacing: space-6 to space-12
• Large gaps between sections
• Breathing room around content

Data-Heavy Interfaces

• Tighter spacing: space-2 to space-3
• Compact layouts
• Dense information display

Mobile Apps

• Conservative spacing: space-3 to space-4
• Touch-friendly (minimum 44px targets)
• Limited vertical space

Editorial Content

• Relaxed spacing: space-4 to space-6
• Generous line height
• Large paragraph gaps

Accessibility Considerations

Touch Target Spacing

• Ensure 44px minimum touch targets
• Maintain 8px+ gaps between targets
• Affects users on mobile and touch devices

Visual Spacing for Clarity

• Use spacing to group related content
• Separate different sections clearly
• Aid users with cognitive disabilities

Motor Control

• Adequate spacing between clickable elements
• Reduces accidental interactions
• Especially important for aging users

Integration with Other Design Tokens

Spacing works with other design tokens:

With Colors

Use spacing to separate content with different color backgrounds

.success-card {
  background-color: var(--success-50);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}

With Typography

Spacing around text maintains hierarchy

h2 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-3);
}

p {
  font-size: var(--font-size-md);
  margin-bottom: var(--space-4);
}

With Shadows/Elevation

Spacing creates visual separation along with depth

.elevated-card {
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  margin: var(--space-4);
}

Further Reading

• Spacing & Rhythm in Design
• Touch Target Best Practices
• Modular Scale Theory
• Material Design Spacing