Shapes

Minimal radii. A scale each site can re-theme, with two special values outside it.

Radii stay minimal so nothing looks like an app, and they derive by reference, not by copy, so the relationship between tokens can't drift when a site re-themes.

Scale

sm, 4px

Cards, images, most elements

md, 8px

Intermediate use; NavPill items (via --nav-item-radius)

lg, 16px

NavPill (via --nav-radius), Modal panel. Softer than a pill, less app-like.

xl, 24px

BentoGrid: outer corners

Specials

inner, 4px

BentoGrid inner corners. Its own value on purpose: it matches sm today but doesn't derive from it; if a site re-themes its radii, the grid's inner divisions stay crisp at 4px.

full, 9999px

Circles and full pills: ImageGallery arrows, badges. Not used by the NavPill (16px on purpose).

BentoGrid dual radius

Outer corners: 24px (xl). Inner corners where cells meet: 4px (inner). The grid reads as one cohesive surface: soft outer edges, crisp inner divisions.

Derivation

Component tokens that repeat a scale value derive by reference, not by copy: --nav-radius: var(--radius-lg), --nav-item-radius: var(--radius-md). The relationship can't drift. The documented exception is --radius-inner (the bento's own value).