Theme
Elevation and radius
Three elevations, each a contact shadow and an ambient one, denser on dark surfaces where a light shadow would not read. Corner radii from a hairline to a pill.
Elevation
| Token | Value | Preview | Use |
|---|---|---|---|
shadow.sm | 0px 1px 2px -1px oklch(0% 0 0 / 0.6), 0px 1px 3px 0px oklch(0% 0 0 / 0.6) | Raised a little: a card, a tag. | |
shadow.md | 0px 2px 6px 0px oklch(0% 0 0 / 0.6), 0px 6px 20px -2px oklch(0% 0 0 / 0.6) | Floating: a popover, a menu. | |
shadow.lg | 0px 8px 8px -8px oklch(0% 0 0 / 0.6), 0px 10px 30px -4px oklch(0% 0 0 / 0.6) | Above everything: a dialog, a sheet, a toast. |
Radius
| Token | Value | Preview | Use |
|---|---|---|---|
radius.xs | 0.125rem | A checkbox box, inline code. | |
radius.sm | 0.25rem | ||
radius.md | 0.5rem | ||
radius.control | 0.625rem | Buttons, text fields, selects and segmented controls. | |
radius.lg | 0.75rem | ||
radius.xl | 1rem | Screenshot frames and marketing cards. | |
radius.full | 9999px | A pill or a circle. |