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.

Text

Example text valueToken titleToken

Lorem ipsum

16px

text typeset font Size lg--sl-text-typeset-font-Size-lg

Lorem ipsum

14px

text typeset font Size md--sl-text-typeset-font-Size-md

Lorem ipsum

12px

text typeset font Size sm--sl-text-typeset-font-Size-sm

Lorem ipsum

18px

text typeset font Size xl--sl-text-typeset-font-Size-xl

Lorem ipsum

10px

text typeset font Size xs--sl-text-typeset-font-Size-xs

Lorem ipsum

24px

text typeset font Size 2xl--sl-text-typeset-font-Size-2xl

Lorem ipsum

32px

text typeset font Size 3xl--sl-text-typeset-font-Size-3xl

Lorem ipsum

48px

text typeset font Size 4xl--sl-text-typeset-font-Size-4xl

Lorem ipsum

54px

text typeset font Size 5xl--sl-text-typeset-font-Size-5xl

Lorem ipsum

none

text typeset text Case none--sl-text-typeset-text-Case-none

Lorem ipsum

lowercase

text typeset text Case lowercase--sl-text-typeset-text-Case-lowercase

Lorem ipsum

uppercase

text typeset text Case uppercase--sl-text-typeset-text-Case-uppercase

Lorem ipsum

capitalize

text typeset text Case capitalize--sl-text-typeset-text-Case-capitalize

Lorem ipsum

700

text typeset font Weight bold--sl-text-typeset-font-Weight-bold

Lorem ipsum

400

text typeset font Weight regular--sl-text-typeset-font-Weight-regular

Lorem ipsum

600

text typeset font Weight demibold--sl-text-typeset-font-Weight-demibold

24px

text typeset line Height lg--sl-text-typeset-line-Height-lg

20px

text typeset line Height md--sl-text-typeset-line-Height-md

16px

text typeset line Height sm--sl-text-typeset-line-Height-sm

28px

text typeset line Height xl--sl-text-typeset-line-Height-xl

14px

text typeset line Height xs--sl-text-typeset-line-Height-xs

34px

text typeset line Height 2xl--sl-text-typeset-line-Height-2xl

42px

text typeset line Height 3xl--sl-text-typeset-line-Height-3xl

58px

text typeset line Height 4xl--sl-text-typeset-line-Height-4xl

64px

text typeset line Height 5xl--sl-text-typeset-line-Height-5xl

12px

text typeset line Height xs--sl-text-typeset-line-Height-xs

Lorem ipsum

1%

text typeset letter Spacing lg--sl-text-typeset-letter-Spacing-lg

Lorem ipsum

0%

text typeset letter Spacing md--sl-text-typeset-letter-Spacing-md

Lorem ipsum

-1%

text typeset letter Spacing sm--sl-text-typeset-letter-Spacing-sm

Lorem ipsum

2%

text typeset letter Spacing xl--sl-text-typeset-letter-Spacing-xl

Lorem ipsum

-2%

text typeset letter Spacing xs--sl-text-typeset-letter-Spacing-xs

Lorem ipsum

0%

text typeset letter Spacing none--sl-text-typeset-letter-Spacing-none

Lorem ipsum

none

text typeset text Decoration none--sl-text-typeset-text-Decoration-none

Lorem ipsum

underline

text typeset text Decoration underline--sl-text-typeset-text-Decoration-underline

Lorem ipsum

strikethrough

text typeset text Decoration strikethrough--sl-text-typeset-text-Decoration-strikethrough

24px

text typeset paragraph Spacing lg--sl-text-typeset-paragraph-Spacing-lg

22px

text typeset paragraph Spacing md--sl-text-typeset-paragraph-Spacing-md

18px

text typeset paragraph Spacing sm--sl-text-typeset-paragraph-Spacing-sm

28px

text typeset paragraph Spacing xl--sl-text-typeset-paragraph-Spacing-xl

14px

text typeset paragraph Spacing xs--sl-text-typeset-paragraph-Spacing-xs

34px

text typeset paragraph Spacing 2xl--sl-text-typeset-paragraph-Spacing-2xl

42px

text typeset paragraph Spacing 3xl--sl-text-typeset-paragraph-Spacing-3xl

58px

text typeset paragraph Spacing 4xl--sl-text-typeset-paragraph-Spacing-4xl

64px

text typeset paragraph Spacing 5xl--sl-text-typeset-paragraph-Spacing-5xl

0px

text typeset paragraph Spacing none--sl-text-typeset-paragraph-Spacing-none