Foundation
Spacing & Layout
A 4-point scale, generous by default. HODL leans on whitespace to feel premium.
Scale
Use these values for margin, padding, gap. Avoid arbitrary numbers.
2px
space-2
4px
space-4
6px
space-6
8px
space-8
12px
space-12
16px
space-16
20px
space-20
24px
space-24
32px
space-32
40px
space-40
48px
space-48
64px
space-64
80px
space-80
96px
space-96
128px
space-128
Containers
container · sm640px
container · md768px
container · lg1024px
container · xl1280px
container · 2xl1440px
Mobile vs Desktop
Mobile (≤ 768)
page padding16px
section gap48px
card padding16px
grid gutter12px
Desktop (≥ 1024)
page padding40–64px
section gap96–128px
card padding24–32px
grid gutter24px