creatordesign system
GitHub
Spacing & radius
Foundation · Creator Design System

Spacing & radius

4px base unit, 8px rhythm, closed ladders. If the value you need isn't on the ladder, the ladder is wrong — fix the ladder.

space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-6
24px
space-8
32px
space-12
48px
space-16
64px
space-24
96px
space-32
128px

--space-* · section rhythm is fluid: --section-sm/md/lg

grid-4
grid-4
grid-4
grid-4
content
rail 18rem

.grid-2/3/4/6 · .grid-rail · .grid-editorial (text · wide · full) · .gap-* · .flow — gap is the only spacing mechanism; siblings never carry margins

Radius

A closed ladder plus four named intents. Custom radii are forbidden — if nothing fits, the ladder is wrong.

sm · 4

md · 8

lg · 12

xl · 16

2xl · 24

3xl · 32

full

--radius-control = md · --radius-card = xl · --radius-media = lg · --radius-sheet = 2xl — custom radii are forbidden

ContainerWidthUsed by
--w-prose44remarticles, lessons
--w-narrow56remforms, sign-in
--w-site71remthe default column
--w-wide82remgalleries, 4-up grids

--gutter clamp(16px → 32px) — the nav island and the content column derive their edges from the same two tokens