Radius
The corner radius scale for the BSS Design System. Built around small, crisp corners that reduce visual weight (anchored at 6, 12, and 16), the scale has seven steps plus one pill value. All values are referenced via --r-* tokens in app/_v2/tokens.css. Arbitrary px values are not allowed.
Scale
xs(4) · sm(6) · ctl(8) · md(10) · lg(12) · xl(16) · 2xl(20) · pill(9999). Higher values produce rounder corners; pill is a full semicircle.
XS
--r-xs
4px
Inline code, small chips
SM
--r-sm
6px
Tooltips, small controls
CTL
--r-ctl
8px
Buttons, inputs, selects
MD
--r-md
10px
Tables, small surfaces
LG
--r-lg
12px
Cards, menus, panels
XL
--r-xl
16px
Modals, sheets, popovers
2XL
--r-2xl
20px
Hero blocks, banners
Pill
--r-pill
9999px
Badges, chips, avatars, toggles
Usage
Recommended token per component. Choose the token that matches the component's role to maintain a consistent visual hierarchy.
| Component | Token | Value |
|---|---|---|
| Button (all sizes) | --r-ctl | 8px |
| Input / Select | --r-ctl | 8px |
| Table (container) | --r-md | 10px |
| Card / Menu | --r-lg | 12px |
| Modal / Sheet | --r-xl | 16px |
| Hero / Banner | --r-2xl | 20px |
| Tooltip | --r-sm | 6px |
| Badge / Tag / Chip / Avatar | --r-pill | 9999px |