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.

Size

ValueToken titleToken
0px
size none--sl-size-none
2px
size 4xs--sl-size-4xs
4px
size 3xs--sl-size-3xs
8px
size 2xs--sl-size-2xs
12px
size xs--sl-size-xs
14px
size sm--sl-size-sm
16px
size md--sl-size-md
20px
size lg--sl-size-lg
24px
size xl--sl-size-xl
32px
size 2xl--sl-size-2xl
48px
size 3xl--sl-size-3xl
64px
size 4xl--sl-size-4xl
{size.2xl}px
--sl-undefined