Radius & Shadows
The corner radius steps and layered shadow scale.
Radius
Six steps. --radius-md (8px) is the system default; --radius aliases it so
a theme can shift the default personality in one line.
--radius-xs
--radius-sm
--radius-md
--radius-lg
--radius-xl
--radius-full
| Token | Where |
|---|---|
--radius-xs | Checkboxes, small chips |
--radius-sm | Badges, small buttons, menu items |
--radius-md | Buttons, inputs, default |
--radius-lg | Cards, popovers |
--radius-xl | Dialogs, large surfaces |
--radius-full | Pills, avatars |
Shadows
Layered and low-opacity. Elevation communicates hierarchy: the higher a surface floats, the larger and softer its shadow. In dark mode the same tokens resolve to deeper shadows, since ambient contrast drops.
--shadow-xs
--shadow-sm
--shadow-md
--shadow-lg
--shadow-xl
| Token | Where |
|---|---|
--shadow-xs | Inputs, subtle lift |
--shadow-sm | Buttons, cards at rest |
--shadow-md | Dropdowns, popovers |
--shadow-lg | Dialogs, command menus |
--shadow-xl | Full-screen overlays, spotlight surfaces |