FoundationsShipped

Radius

Outer shell 20, inner element 14, innermost 8. Corners step down as they nest, and every corner resolves to one of six values.

--r-xs · 4

--r-sm · 8

--r-md · 14

--r-lg · 20

--r-device · 34

--r-pill · 99

Show code

<div class="d-stack"><div class="d-box r-xs"></div><code>--r-xs · 4</code></div>
<div class="d-stack"><div class="d-box r-sm"></div><code>--r-sm · 8</code></div>
<div class="d-stack"><div class="d-box r-md"></div><code>--r-md · 14</code></div>
<div class="d-stack"><div class="d-box r-lg"></div><code>--r-lg · 20</code></div>
<div class="d-stack"><div class="d-box r-device"></div><code>--r-device · 34</code></div>
<div class="d-stack"><div class="d-box r-pill"></div><code>--r-pill · 99</code></div>

Token	Value	Role	Status
`--r-xs`	`4px`	Tool UI only: swatch chips, tiny insets.	In tools
`--r-sm`	`8px`	Inner elements: inputs, leaves, images inside a card, focus rings.	Shipped
`--r-md`	`14px`	Cards, popovers, case-nav tiles, ad images.	Shipped
`--r-lg`	`20px`	Outer shells: figures, fx-wrap, video, dialogs.	Shipped
`--r-device`	`34px`	Phone frames. Screen radius derives from it (minus border).	Shipped
`--r-pill`	`99px`	Buttons, chips, badges, the video control bar.	Shipped

Nesting

A figure (--r-lg) holding images steps them to --r-md; a card (--r-md) holding a leaf steps it to --r-sm. A device frame derives its screen radius from its own token: calc(var(--r-device) - 2px), so changing one value moves the whole phone.