Foundations
Foundations
Radius & elevation
Corners nest concentrically. Elevation is soft and single-layer — planes over stickers.
Concentric radii
Outer radius = inner radius + padding. Example: card with 16px padding and 8px buttons → card radius 24px (
rounded-2xl).Radius scale
xs
4px
sm
6px
md
8px
lg
12px
xl
16px
2xl
20px
Elevation
Elevation xs
shadow-xs
Elevation sm
shadow-sm
Elevation md
shadow-md
Elevation lg
shadow-lg
Nested card example
Inner panel
Smaller radius inside a larger shell.