Foundations / Spacing
Spacing
Space is not empty — it is the breath between ideas. The Champagne Paper spacing system uses a strict 4px base unit with 12 named tokens, ensuring every layout decision is deliberate and consistent.
Spacing Scale
Each bar's width represents the actual spacing value proportionally.
--space-14px · 0.25rem
--space-28px · 0.5rem
--space-312px · 0.75rem
--space-416px · 1rem
--space-520px · 1.25rem
--space-624px · 1.5rem
--space-832px · 2rem
--space-1040px · 2.5rem
--space-1248px · 3rem
--space-1664px · 4rem
--space-2496px · 6rem
--space-32128px · 8rem
Grid & Content Widths
| Name | Width |
|---|---|
| Full bleed | 100% |
| max-w-screen-2xl | 1536px |
| max-w-5xl | 1024px |
| max-w-3xl | 768px |
| max-w-prose | 672px |
| max-w-sm | 512px |
Grid Column Visualization
1
2
3
4
5
6
7
8
9
10
11
12
12-column grid · gutter: 24px (desktop) / 16px (mobile)
Density Modes
Three density modes for different contexts. Apply via parent container class, not individual component overrides.
Compact
Dashboards, data-dense views
Default
Standard UI, most surfaces
Spacious
Marketing pages, editorial content
| Mode | Padding |
|---|---|
| Compact | p-3 / gap-2 |
| Default | p-5 / gap-4 |
| Spacious | p-8 / gap-6 |
Breakpoints
sm:
640px
Small · Mobile landscape, small tablets md:
768px
Medium · Tablets lg:
1024px
Large · Laptops · Sidebar appears xl:
1280px
XL · Desktops · Right TOC appears 2xl:
1536px
2XL · Wide displays