Border Radius
Corner radius tokens from subtle rounding to fully circular elements.
Radius Scale
Border radius tokens from sharp corners to fully rounded pill shapes. Each token maps to a specific use case in the component library.
none0pxradius/none
xxxs2pxradius/xxxs
xxs4pxradius/xxs
xs6pxradius/xs
sm8pxradius/sm
md10pxradius/md
lg12pxradius/lg
xl16pxradius/xl
2xl20pxradius/2xl
3xl24pxradius/3xl
pill999pxradius/pill
Usage Guidelines
none–xxs — Subtle rounding for small inline elements and borders.
xs–sm — Buttons, inputs, and small cards.
md–lg — Cards, panels, and content containers.
xl–3xl — Modals, large surfaces, and hero elements.
pill — Tags, badges, and fully rounded buttons.