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 value | Token title | Token |
|---|---|---|
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 |
Lorem ipsum 700 | text typeset font Weight bold | --sl-text-typeset-font-Weight-bold |
Lorem ipsum 10px | text typeset font Size xs | --sl-text-typeset-font-Size-xs |
Lorem ipsum 12px | text typeset font Size sm | --sl-text-typeset-font-Size-sm |
Lorem ipsum 14px | text typeset font Size md | --sl-text-typeset-font-Size-md |
Lorem ipsum 16px | text typeset font Size lg | --sl-text-typeset-font-Size-lg |
Lorem ipsum 18px | text typeset font Size xl | --sl-text-typeset-font-Size-xl |
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 |
12px | text typeset line Height xs | --sl-text-typeset-line-Height-xs |
14px | text typeset line Height xs | --sl-text-typeset-line-Height-xs |
16px | text typeset line Height sm | --sl-text-typeset-line-Height-sm |
20px | text typeset line Height md | --sl-text-typeset-line-Height-md |
24px | text typeset line Height lg | --sl-text-typeset-line-Height-lg |
28px | text typeset line Height xl | --sl-text-typeset-line-Height-xl |
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 |
| text typeset paragraph Spacing none | --sl-text-typeset-paragraph-Spacing-none |
| text typeset paragraph Spacing xs | --sl-text-typeset-paragraph-Spacing-xs |
| text typeset paragraph Spacing sm | --sl-text-typeset-paragraph-Spacing-sm |
| text typeset paragraph Spacing md | --sl-text-typeset-paragraph-Spacing-md |
| text typeset paragraph Spacing lg | --sl-text-typeset-paragraph-Spacing-lg |
| text typeset paragraph Spacing xl | --sl-text-typeset-paragraph-Spacing-xl |
| text typeset paragraph Spacing 2xl | --sl-text-typeset-paragraph-Spacing-2xl |
| text typeset paragraph Spacing 3xl | --sl-text-typeset-paragraph-Spacing-3xl |
| text typeset paragraph Spacing 4xl | --sl-text-typeset-paragraph-Spacing-4xl |
| text typeset paragraph Spacing 5xl | --sl-text-typeset-paragraph-Spacing-5xl |
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 |
Lorem ipsum none | text typeset text Case none | --sl-text-typeset-text-Case-none |
Lorem ipsum uppercase | text typeset text Case uppercase | --sl-text-typeset-text-Case-uppercase |
Lorem ipsum lowercase | text typeset text Case lowercase | --sl-text-typeset-text-Case-lowercase |
Lorem ipsum capitalize | text typeset text Case capitalize | --sl-text-typeset-text-Case-capitalize |
Lorem ipsum 0% | text typeset letter Spacing none | --sl-text-typeset-letter-Spacing-none |
Lorem ipsum -2% | text typeset letter Spacing xs | --sl-text-typeset-letter-Spacing-xs |
Lorem ipsum -1% | text typeset letter Spacing sm | --sl-text-typeset-letter-Spacing-sm |
Lorem ipsum 0% | text typeset letter Spacing md | --sl-text-typeset-letter-Spacing-md |
Lorem ipsum 1% | text typeset letter Spacing lg | --sl-text-typeset-letter-Spacing-lg |
Lorem ipsum 2% | text typeset letter Spacing xl | --sl-text-typeset-letter-Spacing-xl |