Radius

Four levels. Small for inline elements, large for interactive surfaces.

4px
radius-sm

8px
radius-md

12px
radius-lg

16px
radius-xl

Usage

.badge { border-radius: var(--radius-sm); }
.button { border-radius: var(--radius-md); }
.card { border-radius: var(--radius-lg); }
.dialog { border-radius: var(--radius-xl); }

Rules

1. Use smaller radii for inline elements.
2. Use larger radii for interactive surfaces.
3. Never hardcode a radius value.