Layout & Spacing

Spacing System

8px-grid spacing system with section rhythm, component gaps, and Tailwind mapping for consistent layouts.

Token Set beginner

How To Use This Guide

Use this when you need a reusable variable set or spacing/color system you can paste into a project.

At A Glance

Level: beginner
Type: Token Set
Updated: 2026-03-22

The 8px Grid

Every spacing value is a multiple of 8px. This creates visual consistency without thinking — any two elements on the grid will align naturally.

4px  (0.25rem) — tight: icon gaps, badge padding
8px  (0.5rem)  — compact: inline spacing, small gaps
16px (1rem)    — default: component padding, list gaps
24px (1.5rem)  — comfortable: card padding, section gaps
32px (2rem)    — spacious: between groups
48px (3rem)    — section separation (mobile)
64px (4rem)    — section separation (desktop)
96px (6rem)    — major section breaks
128px (8rem)   — hero/footer breathing room

Tailwind Mapping

/* Map to Tailwind spacing scale */
:root {
  --space-1:  0.25rem;  /* 4px  → p-1, gap-1 */
  --space-2:  0.5rem;   /* 8px  → p-2, gap-2 */
  --space-4:  1rem;     /* 16px → p-4, gap-4 */
  --space-6:  1.5rem;   /* 24px → p-6, gap-6 */
  --space-8:  2rem;     /* 32px → p-8, gap-8 */
  --space-12: 3rem;     /* 48px → py-12 */
  --space-16: 4rem;     /* 64px → py-16 */
  --space-24: 6rem;     /* 96px → py-24 */
  --space-32: 8rem;     /* 128px → py-32 */
}

Section Rhythm

Consistent vertical spacing between page sections creates readable flow:

Hero        → py-24 lg:py-32   (96-128px)
Features    → py-16 lg:py-24   (64-96px)
Testimonials → py-16 lg:py-24  (64-96px)
CTA         → py-16 lg:py-20   (64-80px)
Footer      → py-12 lg:py-16   (48-64px)

Inner Spacing

Section heading → mb-8 lg:mb-12  (32-48px gap to content)
Card padding    → p-6 lg:p-8     (24-32px)
Grid gap        → gap-4 lg:gap-6 (16-24px)
Inline items    → gap-2 lg:gap-3 (8-12px)

System Prompt for Layout Spacing

You are laying out a Tailwind CSS website page.

Spacing Rules:
1. ALL spacing must be multiples of 8px (Tailwind: 2, 4, 6, 8, 12, 16, 24, 32).
2. Section vertical padding: py-16 (mobile) → py-24 (desktop). Hero gets py-24 → py-32.
3. Container: max-w-7xl mx-auto px-4 sm:px-6 lg:px-8
4. Grid gaps: gap-4 (mobile) → gap-6 (desktop) for cards.
5. Between section heading and content: mb-8 → mb-12.
6. Card internal padding: p-6 → p-8.
7. Never use spacing values outside the 8px grid (no p-5, p-7, py-10, gap-5).
8. Responsive scaling: mobile uses one step smaller than desktop.

Exceptions:
- 4px (p-1) is OK for tight icon spacing and badge padding
- Text line-height handles its own vertical rhythm

Density Modes

| Mode | Base Unit | Section py | Card p | Grid gap | Feel | |------|-----------|------------|--------|----------|------| | Compact | 4px | py-8 lg:py-12 | p-4 | gap-3 | Dashboard, data-heavy | | Default | 8px | py-16 lg:py-24 | p-6 | gap-4 lg:gap-6 | Marketing, landing | | Spacious | 8px | py-24 lg:py-32 | p-8 lg:p-10 | gap-6 lg:gap-8 | Premium, editorial |

Checklist

[ ] All spacing values are multiples of 8px
[ ] Section py scales from mobile to desktop (py-16 → py-24)
[ ] Container uses max-w-7xl mx-auto px-4 sm:px-6 lg:px-8
[ ] Grid gaps: gap-4 mobile, gap-6 desktop
[ ] Heading-to-content gap: mb-8 to mb-12
[ ] Density mode documented (compact / default / spacious)
[ ] No off-grid values (p-5, p-7, p-10, gap-5, etc.)
[ ] Responsive: mobile = one step tighter than desktop