Radius

10 tokens

Corner rounding, semantic first. The full and 9999 steps are the pill/circle case, so the preview clamps to the box, as it would in a real component.

Semantic radius

4 tokens

Preview	Token	CSS variable	Value	Source	Description
				0px	No corner rounding, sharp, square corners.
				10px	Standard corner rounding used for most containers.
				20px	Larger corner rounding for bigger or more prominent containers.
				9999px	Fully rounded corners, used for pills and avatars.

Primitive radius scale

6 tokens

Preview	Token	CSS variable	Value	Source	Description
				0px	Sharp, unrounded corners.
				10px	Standard container corner rounding.
				20px	Larger container corner rounding.
				30px	An additional corner-rounding step for larger surfaces.
				40px	An additional corner-rounding step for larger surfaces.
				9999px	Fully rounded corners, used for pills and circles.