Radius
One --radius token, the ramp derived from it, and the concentric nesting rule.
Last updated
Radius is one token, --radius (0.625rem / 10px), and Tailwind's ramp is derived from it the
way shadcn derives it — sm 0.6x, md 0.8x, lg 1x, xl 1.4x, 2xl 1.8x, 3xl 2.2x, 4xl
2.6x. Retune the container shape of the whole system by changing that one value.
--radius-sm
0.6 × --radius · 6px
--radius-md
0.8 × --radius · 8px
--radius-lg
1 × --radius · 10px
--radius-xl
1.4 × --radius · 14px
The 12px cap and the rounded-xl ban are gone. A card and a dialog are rounded-xl (14px), a
button and an input are rounded-lg (10px), a menu row is rounded-md (8px) — upstream's own
choices, and a pasted shadcn snippet keeps the shape it was drawn with.
Which role goes where
rounded-sm(6px) — inner indicators and the smallest inset geometry.rounded-md(8px) — menu rows, compact chips, nested surfaces.rounded-lg(10px) — buttons, inputs, selects, control groups, popovers, menus.rounded-xl(14px) — cards, dialogs and other outer containers.rounded-full— avatars, status dots, badges and genuine pill controls.
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 14px
outer card with a 10px inset control, or a 10px 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.