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`
Lorem ipsum `12px`	text typeset line Height xs	`--sl-text-typeset-line-Height-xs`
Lorem ipsum `14px`	text typeset line Height xs	`--sl-text-typeset-line-Height-xs`
Lorem ipsum `16px`	text typeset line Height sm	`--sl-text-typeset-line-Height-sm`
Lorem ipsum `20px`	text typeset line Height md	`--sl-text-typeset-line-Height-md`
Lorem ipsum `24px`	text typeset line Height lg	`--sl-text-typeset-line-Height-lg`
Lorem ipsum `28px`	text typeset line Height xl	`--sl-text-typeset-line-Height-xl`
Lorem ipsum `34px`	text typeset line Height 2xl	`--sl-text-typeset-line-Height-2xl`
Lorem ipsum `42px`	text typeset line Height 3xl	`--sl-text-typeset-line-Height-3xl`
Lorem ipsum `58px`	text typeset line Height 4xl	`--sl-text-typeset-line-Height-4xl`
Lorem ipsum `64px`	text typeset line Height 5xl	`--sl-text-typeset-line-Height-5xl`
`0px`	text typeset paragraph Spacing none	`--sl-text-typeset-paragraph-Spacing-none`
`14px`	text typeset paragraph Spacing xs	`--sl-text-typeset-paragraph-Spacing-xs`
`18px`	text typeset paragraph Spacing sm	`--sl-text-typeset-paragraph-Spacing-sm`
`22px`	text typeset paragraph Spacing md	`--sl-text-typeset-paragraph-Spacing-md`
`24px`	text typeset paragraph Spacing lg	`--sl-text-typeset-paragraph-Spacing-lg`
`28px`	text typeset paragraph Spacing xl	`--sl-text-typeset-paragraph-Spacing-xl`
`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`
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`