Foundation

Radii

Tight corner tokens for calm product surfaces.

Use small radii by default; reserve pill radius for explicit chips and badges.
foundation
DOM renderImage render
RadiiDefault
Corner scale0 / 4 / 6 / 10 / 14 / 20 / pill
radius-00
radius-24px
radius-36px
radius-410px
radius-514px
radius-620px
radius-pill9999px

Playground

Foundation examples are token specimens. The route stays registry-led so every foundation can be rendered, linked, and screenshotted through the same catalog surface.

Loading playground

Rendered matrix

Every state maps to the same foundation render route through the state query param.

Default

Corner tokens from square edges through explicit pill shapes.
Corner scale0 / 4 / 6 / 10 / 14 / 20 / pill
radius-00
radius-24px
radius-36px
radius-410px
radius-514px
radius-620px
radius-pill9999px
Render state

Controls

Small radii keep dense controls calm while pills remain explicit.
Radius use by scopeControl hierarchy
Atomscheckboxes and marksradius-2
Controlsinputs and buttonsradius-3
Cardscompact panelsradius-4
Surfaceslarger grouped regionsradius-5
Pillschips and badgesradius-pill
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription