Spacing, radius & shadow
A 4px base grid for every gap and padding, a radius scale that softens as surfaces grow, and warm-tinted shadows for elevation.
Spacing
Use var(--spacing-N).
--spacing-14px--spacing-28px--spacing-312px--spacing-416px--spacing-520px--spacing-624px--spacing-832px--spacing-1040px--spacing-1248px--spacing-1664px--spacing-2080px--spacing-2496pxRadius
Inputs and buttons use md; cards and modals use xl; pills use full.
none · 0px
xs · 4px
sm · 6px
md · 8px
lg · 12px
xl · 16px
2xl · 24px
full · full
Shadow
Use var(--shadow-*). Cards use M, toasts L, modals XL.
Shadow/XS
Shadow/S
Shadow/M
Shadow/L
Shadow/XL
Shadow/INNER