Tokens
Design Tokens
The atomic building blocks of our design system.
Spacing
We use a 4px grid system for spacing.
space-1
space-2
space-3
space-4
space-5
space-6
space-8
space-10
space-12
Border Radius
Rounded corners define softness and surface hierarchy.
--radius-sm
4px
--radius-md
8px
--radius-lg
12px
--radius-xl
20px
--radius-full
9999px
Shadows
Use elevation to communicate interactivity and depth.
Small
--shadow-sm
Medium
--shadow-md
Large
--shadow-lg
Z-Index
Layer tokens keep overlays and system feedback predictable.
Base
z-0
Dropdown
z-10
Modal
z-20
Toast
z-30