Radius Scale
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-sm
0.25rem
4px
radius-md
0.375rem
6px
radius-lg
0.5rem
8px
radius-xl
0.75rem
12px
radius-2xl
1rem
16px
radius-3xl
1.5rem
24px
radius-full
9999px
full
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.