Borders
Borders in our app act like the fine lines in a well-executed trade—subtle yet essential. The border widths are carefully chosen to create definition and structure without overwhelming the design. From defining buttons to outlining containers, each width plays its part in making the interface feel balanced and easy to navigate. By maintaining consistency across all elements, our borders provide a polished, professional look that complements the overall user experience.
Tokens
token-name
semantic token
px
rem
border-none
numeric-values/none
0px
0rem
border-2x-small
numeric-values/5
0.5px
0.03125rem
border-x-small
numeric-values/10
1px
0.0625rem
border-small
numeric-values/20
1.5px
0.03125rem
border-medium
numeric-values/20
2px
0.125rem
border-large
numeric-values/40
4px
0.25rem
border-x-large
numeric-values/60
6px
0.375rem
border-2x-large
numeric-values/80
8px
0.5rem
