---
description: Spacing scale — responsive whitespace tokens for mobile and desktop
variables:
  - key: spacing.base-unit
    type: number
    label: Base Unit
    value: ""
    section: spacing
  - key: spacing.max-width-sm
    type: number
    label: Max Width — Small
    value: ""
    section: spacing
  - key: spacing.max-width-md
    type: number
    label: Max Width — Medium
    value: ""
    section: spacing
  - key: spacing.max-width
    type: number
    label: Max Width — Standard
    value: ""
    section: spacing
  - key: spacing.max-width-lg
    type: number
    label: Max Width — Large
    value: ""
    section: spacing
  - key: spacing.max-width-xl
    type: number
    label: Max Width — Extra Large
    value: ""
    section: spacing
  - key: spacing.max-width-2xl
    type: number
    label: Max Width — Breakout
    value: ""
    section: spacing
  - key: spacing.max-width-full
    type: number
    label: Max Width — Full
    value: ""
    section: spacing
  - key: spacing.section-gap.mobile
    type: number
    label: Section Gap — Mobile
    value: ""
    section: spacing
  - key: spacing.section-gap.desktop
    type: number
    label: Section Gap — Desktop
    value: ""
    section: spacing
  - key: spacing.container-padding.mobile
    type: number
    label: Container Padding — Mobile
    value: ""
    section: spacing
  - key: spacing.container-padding.desktop
    type: number
    label: Container Padding — Desktop
    value: ""
    section: spacing
  - key: spacing.card-padding.mobile
    type: number
    label: Card Padding — Mobile
    value: ""
    section: spacing
  - key: spacing.card-padding.desktop
    type: number
    label: Card Padding — Desktop
    value: ""
    section: spacing
  - key: spacing.element-gap.mobile
    type: number
    label: Element Gap — Mobile
    value: ""
    section: spacing
  - key: spacing.element-gap.desktop
    type: number
    label: Element Gap — Desktop
    value: ""
    section: spacing
---

# Spacing

Responsive whitespace tokens. Each gap has a mobile and desktop value — the builder picks the right one based on viewport.

## Width tiers

Most sites use multiple content widths to create visual rhythm. The four tiers:

- `max-width-sm` (640px) — single-column reading, forms, narrow modals
- `max-width-md` (800px) — focused CTA blocks, centered forms
- `max-width` (960px) — standard body text container, lists, FAQs
- `max-width-lg` (1120px) — feature grids, wide two-column sections
- `max-width-xl` (1280px) — image-heavy editorial, card compositions
- `max-width-2xl` (1440px) — breakout zones, full radial layouts, portfolio grids
- `max-width-full` (1920px) — full-bleed ceiling; fills normal screens, constrains on ultrawides

Steps are ~160px each. If the site uses fewer distinct widths, set adjacent tiers to the same value. The builder maps each zone to its tier based on the layout role doc's Content Width Strategy.
