Border Radius
Consistent border radius tokens create visual cohesion across components. Use smaller radii for compact elements and larger for cards and modals.
sm0.25rem
md0.5rem
lg0.75rem
xl1rem
full9999px
| Token | Use For |
|---|---|
| --ds-radius-sm | Badges, chips, inline tags, small inputs |
| --ds-radius-md | Buttons, inputs, tooltips |
| --ds-radius-lg | Cards, modals, panels, dropdowns |
| --ds-radius-xl | Large containers, hero sections |
| --ds-radius-full | Avatars, pills, circular buttons |