Shape
Shape values help differentiate UI elements from one another.
Border radii change the shape of UI elements. Border widths emphasize elements by providing contrast against the background. Using a border can help provide an UI element pass minimum contrast accessibility standards (3:1 contrast ratio).
We've scoped these down into a collection you can use: border radius tokens and border width tokens..
Border Width
Name
Figma usage
Current value
--border-width-0
0px
0rem
--border-width-1
1px
0.063rem
--border-width-2
2px
0.125rem
--border-width-3
3px
0.188rem
--border-width-4
4px
0.25rem
--border-width-5
5px
0.313rem
--border-width-6
6px
0.375rem
Border Radius
Name
Figma usage
Current value
--border-radius-1px
1px
0.063rem
--border-radius-2px
2px
0.125rem
--border-radius-0
0
0rem
--border-radius-1
4px
0.25rem
--border-radius-2
8px
0.5rem
--border-radius-3
12px
0.75rem
--border-radius-4
16px
1rem
--border-radius-5
20px
1.25rem
--border-radius-6
24px
1.5rem
--border-radius-7
28px
1.75rem
--border-radius-8
32px
2rem