Radius
The fixed 2/6/8/12/full shape roles and the concentric nesting rule.
Last updated
VegaStack uses five shape roles: 2px, 6px, 8px, 12px, and full. Components consume the
token-backed rounded-* utilities; arbitrary radii and rounded-xl are lint failures.
--radius-xs
0.125rem · 2px
--radius-sm
0.375rem
--radius-md
0.5rem
--radius-lg
0.75rem
Resolved tokens
| Token | Light | Dark |
|---|---|---|
--radius-xs | 0.125rem | 0.125rem |
--radius-sharp | 2px | 2px |
--radius-sm | 0.375rem | 0.375rem |
--radius-md | 0.5rem | 0.5rem |
--radius-lg | 0.75rem | 0.75rem |
--radius | 0.75rem | 0.75rem |
--radius-xs and --radius-sharp are both 2px but carry different intent: xs is micro
geometry; sharp is the rationed marketing gesture. --radius aliases the 12px --radius-lg
container role. Full pills use rounded-full; there is no competing global radius token for them.
Which role goes where
- 2px — micro geometry and the opt-in sharp marketing treatment.
- 6px (
rounded-sm) — inset controls, menu items, compact chips, and nested surfaces. - 8px (
rounded-md) — default buttons, inputs, selects, and control groups. - 12px (
rounded-lg) — cards, dialogs, popovers, menus, and other outer containers. - Full (
rounded-full) — avatars, status dots, and genuine pill controls only.
Concentric nesting
Closely nested edges must be mathematically concentric. If an outer surface has radius R and the
inset distance is d, the inner radius is max(0, R - d). The normal VegaStack pair is a 12px
outer surface with a 6px inset control, or an 8px control with a 6px inner indicator. Do not choose
two radii independently because they merely “look close.”
Overriding shape
Override the named DTCG variables in consumer CSS only when re-theming the whole role. Keep the ordering and concentric relationship intact; do not add another global tier.