Design Tokens

Design tokens are named entities that store visual and functional information. They take the place of hardcoded values, such as hex values for color or pixel values for spacing.

Border

ExampleToken titleToken
6px
border width 2xl--sl-border-width-2xl
0.5px
2xs--sl-2xs
{border.width.xs}
4px
border width lg--sl-border-width-lg
3px
border width md--sl-border-width-md
0px
border width none--sl-border-width-none
2px
border width sm--sl-border-width-sm
5px
border width xl--sl-border-width-xl
1px
border width xs--sl-border-width-xs
16px
4px
border radius 2xs--sl-border-radius-2xs
18px
border radius 3xl--sl-border-radius-3xl
2px
border radius 3xs--sl-border-radius-3xs
50rem
border radius full--sl-border-radius-full
12px
border radius lg--sl-border-radius-lg
10px
border radius md--sl-border-radius-md
0px
border radius none--sl-border-radius-none
8px
border radius sm--sl-border-radius-sm
14px
border radius xl--sl-border-radius-xl
6px
border radius xs--sl-border-radius-xs