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

Value	Token title	Token
lg `20px`	size lg	`--sl-size-lg`
md `16px`	size md	`--sl-size-md`
sm `14px`	size sm	`--sl-size-sm`
xl `24px`	size xl	`--sl-size-xl`
xs `12px`	size xs	`--sl-size-xs`
2xl `32px`	size 2xl	`--sl-size-2xl`
2xs `8px`	size 2xs	`--sl-size-2xs`
3xl `48px`	size 3xl	`--sl-size-3xl`
3xs `4px`	size 3xs	`--sl-size-3xs`
4xl `64px`	size 4xl	`--sl-size-4xl`
4xs `2px`	size 4xs	`--sl-size-4xs`
none `0px`	size none	`--sl-size-none`