Skip the navigation

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