Border radius tokens define the roundness of UI elements to maintain visual consistency across the design system. Each token maps to a specific use case.
Name
Size(16px base)
Pixels
radius-none
0
0px
radius-xxs
0.125rem
2px
radius-xs
0.375rem
6px
radius-m
0.5rem
8px
radius-l
1rem
16px
radius-xl
1.5rem
24px
radius-full
Full
9999px
Component Usage
Buttons use radius-xl (12px). Cards and panels use radius-2xl (16px). Modals and dialogs use radius-3xl (24px). Avatars and circular elements use radius-full.