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.

Space

ExampleToken titleToken
0pxpx
space none--sl-space-none
2px
space 2xs--sl-space-2xs
4px
space xs--sl-space-xs
8px
space sm--sl-space-sm
12px
space md--sl-space-md
16px
space lg--sl-space-lg
24px
space xl--sl-space-xl
30px
space 2xl--sl-space-2xl
40px
space 3xl--sl-space-3xl