Radius
Pills for every one-line control, 14 and 11 for the card, 10 for overlays, 6 for tags.
Scale
Tag
| Class | Radius | Used by |
|---|---|---|
rounded-pill | 999px | button, input, select, segmented control, chip, badge |
shell | 14px | card |
panel | 11px | card panel |
rounded-overlay | 10px | menu, popover, dialog, textarea, code block |
rounded-tag | 6px | menu item, tag in a row, kbd |
Tokens
6 tokens
--radius-pill- 999px
--radius-shell- 14px
--radius-panel- 11px
--radius-overlay- 10px
--radius-row-focus- calc(var(--radius-panel) - var(--line-width))
--radius-tag- 6px