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
1px
--sl-size-010
2px
--sl-size-025
4px
--sl-size-050
6px
--sl-size-075
8px
--sl-size-100
10px
--sl-size-125
12px
--sl-size-150
14px
--sl-size-175
16px
--sl-size-200
20px
--sl-size-250
24px
--sl-size-300
28px
--sl-size-350
32px
--sl-size-400
36px
--sl-size-450
40px
--sl-size-500
48px
--sl-size-600
56px
--sl-size-700
64px
--sl-size-800
80px
--sl-size-1000