dashbook
Foundations / Radius

Radius.

One base token sets four of the six steps. sm, md, lg and xl derive from --radius, so changing the base re-proportions the system rather than leaving a mix of hardcoded corners.

One base, four derived steps

--radius is 0.75rem (12px). Each utility resolves from it: sm is -4px, md is -2px, lg is the base, xl is +4px. rounded-full is the one fixed step. Reach for a step, not a pixel value — a hardcoded corner stops tracking the base.

A card. rounded-xl, 16px.
Largest surfaces — cards, popovers, drawers
Controls — buttons, inputs, menu items
Scale
0

Opt-out. Table cells and edge-to-edge surfaces that should meet flush.

8px

calc(--radius - 4px). Chips, small tags, dense internal elements.

10px

calc(--radius - 2px). Buttons, inputs, tooltips, menu items.

12px

var(--radius). The base step — alerts, dialogs, empty states, sidebar.

16px

calc(--radius + 4px). The largest surfaces — cards, popovers, drawers.

9999px

Avatars, switches, progress tracks, pill badges. Fixed; ignores --radius.

When to deviate
  • Buttons. 10px (rounded-md). Already wired into the lib's button component.
  • Avatars. 9999px (rounded-full). Standard.
  • Pill badges. 9999px. Specifically for status tags ("Active", "Frozen", "3% cashback").
  • App icon. 36px corner radius — a property of the icon SVG itself, not applied via container. See Logo.
  • Marketing stat-grid card on the login page. Uses a bespoke corner, not a step on this scale — a marketing surface masquerading as product. Reach for a step instead.