dashbook
Foundations / Radius

Radius.

The default is zero. Squared corners are the brand mannerism — architectural, deliberate, opinionated. Buttons are the one place we relent.

The architectural-zero stance

Most product surfaces — cards, sections, inputs, popovers — use --radius: 0. This is the look. If you find yourself reaching for rounded corners, ask why; the answer is usually 'don't.'

A card. Zero radius.
Default — every product surface
Buttons — the exception (and only buttons)
Scale
0

Default. Cards, panels, sections, inputs, table cells.

4px

Internal chips inside buttons, small tags.

6px

Buttons. The one place radii bend the architectural rule.

8px

Avoid. Reserved for the marketing stat-grid card on the login page (one exception).

9999px

Avatars, icon-button hit-targets, pill badges.

When to deviate
  • Buttons. 6px (--radius-md). Already wired into the lib's button component.
  • Avatars. 9999px (--radius-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. The only product surface with rounded corners — and that's a marketing surface masquerading as product. Don't replicate.