Spacing

Spacing system

Context-aware spacing with CSS clamp(). Fluid between mobile and desktop.

Section padding

.section-v-hero160→224px (top) / 64→96px (bot)

.section-v-lg96→160px

.section-v-md72→112px

.section-v-sm56→80px

CSS

All use clamp(min, preferred, max) for fluid scaling. Example: section-v-lg = clamp(6rem, 12vw, 10rem)

Halve padding when same-color sections stack.

Without joint

192px total gap

With .section-joint

96px total gap

.section-joint-tHalved top padding

.section-joint-bHalved bottom padding

.section-joint-vHalved top + bottom

.section-tight-tZero top padding

.section-tight-bZero bottom padding

.v-space-sm

32px

.v-space-md

64px

.v-space-lg

64→128px

.v-space-xl

96→192px

1440px

.section-container · max-width

32px guttermargin: 0 auto32px gutter

Max width1440px (section-container)

Side gutters2rem (32px) padding-inline

Prose max65ch (max-w-prose)

Body intro max42ch

.section-paddingLegacy alias → .section-v-lg

.section-padding-heroLegacy alias → .section-v-hero

.page-bodyInterior page body: pt clamp(3rem,5vw,4.5rem) / pb clamp(5rem,8vw,8rem)

.page-proseEditorial prose grid: display grid, gap 1.5rem