Spacing

The 4-pt spacing scale and the semantic space tokens that drive layout rhythm.

Scale

ep-10.25rem · 4px

ep-20.5rem · 8px

ep-30.75rem · 12px

ep-41rem · 16px

ep-51.25rem · 20px

ep-61.5rem · 24px

ep-82rem · 32px

ep-102.5rem · 40px

ep-123rem · 48px

ep-164rem · 64px

ep-205rem · 80px

ep-246rem · 96px

Semantic aliases

Named aliases reference the numeric scale — prefer them in component code so intent (not the raw step) is what you read.

ep-xxsvar(--ep-space-1) · 4px

ep-xsvar(--ep-space-2) · 8px

ep-smvar(--ep-space-3) · 12px

ep-mdvar(--ep-space-4) · 16px

ep-lgvar(--ep-space-6) · 24px

ep-xlvar(--ep-space-8) · 32px

ep-xxlvar(--ep-space-12) · 48px

ep-3xlvar(--ep-space-16) · 64px

ep-4xlvar(--ep-space-24) · 96px

Usage

All spacing uses Tailwind classes with the ep- prefix:

Raw (current norm)

mt-4 → 16px margin-top (raw, recommended)

px-6 → 24px padding-x (raw, recommended)

gap-2 → 8px gap in flex/grid (raw, recommended)

p-3 → 12px padding all sides (raw, recommended)

ep- prefix (design-system semantic)

mt-ep-4 → 16px margin-top (ep- prefix variant)

px-ep-6 → 24px padding-x (ep- prefix variant)

gap-ep-2 → 8px gap in flex/grid (ep- prefix variant)

p-ep-3 → 12px padding all sides (ep- prefix variant)

Raw Tailwind spacing classes are the current norm across the codebase (e.g., mt-4, px-6, gap-2). The ep- prefix is the design-system semantic alternative (mt-ep-4, px-ep-6, gap-ep-2) — both work, raw is dominant.