Orbit
Radius
Source
Border radius tokens for rounding corners consistently. Pass token names to borderRadius or a single-corner prop.
Match the radius to the size of the surface: smaller controls take s, cards take m, and large surfaces take l or xl. Use full for any element that should read as a pill or circle.
Scale
Each token and its resolved value.
none
0
Square edges
s
8px
Inputs, small controls
m
12px
Cards, panels
l
16px
Large surfaces, modals
xl
32px
Hero and feature surfaces
full
9999px
Pills, avatars, circles
Usage
Single-corner props such as borderTopLeftRadius accept the same tokens for asymmetric shapes.
Card
<Box borderRadius="m" padding="l" backgroundColor="background-card">
Card
</Box>