Radius

One token sets every corner. Small controls go round, containers stay tight, and nested corners follow their container.

rounded-sm5px

rounded-lg8px

rounded-xl11px

rounded-fullpill

Fig. 1 The four corners in the system, all derived from one 8px token.

Small things go round

Anything you press or toggle on its own is a pill: buttons, badges, chips, and switches. Anything that holds content keeps a tight 8px corner, so a field, a card, and a menu all feel like one family.

Published

Fig. 2 Pills for actions, 8px for places that hold content.

Nested corners

When a surface sits inside a padded container, its radius is the outer radius minus the padding. The Tabs track is 8px with 4px of padding, so its selected segment is 5px and the two curves stay parallel.

Do

A 5px segment inside the 8px track: the curves run side by side.

Don’t

A square segment inside a round track leaves the corners pulling against each other.

Fig. 3 The same tabs, cornered two ways.

Where each corner goes

Rows inside a padded containerrounded-sm5px

Fields, cards, menus, popovers, toastsrounded-lg8px

Dialogs and drawersrounded-xl11px

Buttons, badges, chips, and switchesrounded-fullpill

Fig. 4 Each radius and the surfaces that use it.

Build it

Change one token to make the whole system tighter or softer. The other steps scale with it.

styles/jzb-theme.css

For a nested surface, subtract the padding from the outer radius:

nested-radius.tsx