Design System
Radius
Border radius tokens provide consistent rounding for UI elements. Different radius values are used for different component types.
Radius Scale
Border radius values range from none (sharp corners) to full (circular). Most components use medium radius for a balanced appearance.
| Token | Value | Preview |
|---|---|---|
--radius-none | 0 | |
--radius-sm | 0.25rem (4px) | |
--radius-md | 0.5rem (8px) | |
--radius-lg | 0.75rem (12px) | |
--radius-xl | 1rem (16px) | |
--radius-2xl | 1.5rem (24px) | |
--radius-full | 9999px |
Usage Guidelines
Small (sm)
Used for small elements like badges, tags, and small buttons.
Medium (md)
Default for most components including buttons, inputs, and cards.
Large (lg)
Used for larger containers like modals and panels.
Full
Used for circular elements like avatars and toggle switches.