Foundations
Radius
Stance corner radius tokens from 4px to fully rounded, when to use each one for controls, surfaces and pills, and how to nest rounded corners.
Radii are restrained and geometric. Controls use md (8px), surfaces use lg to xl, and pills are reserved for chips, switches and marketing calls to action.
--st-radius-none0--st-radius-xs0.25rem--st-radius-sm0.375rem--st-radius-md0.5rem--st-radius-lg0.75rem--st-radius-xl1rem--st-radius-2xl1.5rem--st-radius-full9999pxNesting
When nesting rounded surfaces, the inner radius is the outer radius minus the padding between them, so curves stay concentric.