Breathing room, blessed with hairlines
Spacing · Radii · Shadows
Spacing — 8pt scale
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-20
80px
space-24
96px
space-32
128px
default rhythm
Card pad: 24/32
Section: 80–128
Gutter: 24
Radii — generous but not slick
4
--radius-sm
8
--radius-md
14
--radius-lg
20
--radius-xl
28
--radius-2xl
∞
--radius-pill
Chips & tags: 4 · Buttons & inputs: 8 (not pill — we're not a fintech) · Cards: 14–20 · Dish tiles: 20–28 · Pills reserved for 福 Points badges and "NEW" tags only.
Shadows — warm, brown-undertoned
XS
--shadow-xs
SM
--shadow-sm
MD
--shadow-md
LG
--shadow-lg
XL
--shadow-xl
Hairlines — our preferred divider
Hairline subtle
1px var(--coconut-200)
Hairline gold
1px var(--brand-gold-soft)
Hairline on green
1px rgba(215,181,148,.3)