Alias typography tokens
Alias type tokens have a combination of the type global tokens and are divided in groups of typographic hierarchy.
Headings
Example Description Token name
- StringHeading XXL Used for component and layout headings.$font-heading-xxl
- StringHeading XL Used for component and layout headings.$font-heading-xl
- StringHeading L Used for component and layout headings.$font-heading-l
- StringHeading M Used for component and layout headings.$font-heading-m
- StringHeading S Used for component and layout headings.$font-heading-s
Subheadings
Example Description Token name
- StringSubheading L Used for component and layout subheadings.$font-subheading-l
- StringSubheading S Used for component and layout subheadings.$font-subheading-s
Body
Example Description Token name
- StringBody Used for body copy. Generally used for comfortable long-form reading in layouts.$font-body-l
- StringBody underline Used as a visual cue to indicate something is a link.$font-body-l-link
- StringBody small Used for body copy. Generally used for components.$font-body-s
- StringBody small underline Used as a visual cue to indicate something is a link.$font-body-s-link
Body (Strong)
Example Description Token name
- StringBody bold Used for strong emphasis in body copy.$font-body-strong-l
- StringBody bold underline Used for strong emphasis in body copy.$font-body-strong-l-link
- StringBody small bold Used for strong emphasis in body copy.$font-body-strong-s
- StringBody small bold underline Used for strong emphasis in body copy.$font-body-strong-s-link
Caption
Example Description Token name
- StringCaption Used for captions, labels, disclaimers or helper text. Use sparingly.$font-caption
- StringCaption Underline Used as a visual cue to indicate something is a link.$font-caption-link
Caption (Strong)
Example Description Token name
- StringCaption bold Used for captions, labels, disclaimers or helper text. Use sparingly.$font-caption-strong
Interactive
Example Description Token name
- StringInteractive L Used for labels in large sized button components + numeric counter.$font-interactive-l
- StringInteractive M Used for labels in medium sized button components.$font-interactive-m
- StringInteractive S Used for labels in small sized button components.$font-interactive-s
- StringInteractive XS Used for labels in extra small sized button components.$font-interactive-xs
Headings
Example Description Token name
- StringHeading XXL Used for component and layout headings.$font-heading-xxl
- StringHeading XL Used for component and layout headings.$font-heading-xl
- StringHeading L Used for component and layout headings.$font-heading-l
- StringHeading M Used for component and layout headings.$font-heading-m
- StringHeading S Used for component and layout headings.$font-heading-s
Subheadings
Example Description Token name
- StringSubheading L Used for component and layout subheadings.$font-subheading-l
- StringSubheading S Used for component and layout subheadings.$font-subheading-s
Body
Example Description Token name
- StringBody Used for body copy. Generally used for comfortable long-form reading in layouts.$font-body-l
- StringBody underline Used as a visual cue to indicate something is a link.$font-body-l-link
- StringBody small Used for body copy. Generally used for components.$font-body-s
- StringBody small underline Used as a visual cue to indicate something is a link.$font-body-s-link
Body (Strong)
Example Description Token name
- StringBody bold Used for strong emphasis in body copy.$font-body-strong-l
- StringBody bold underline Used for strong emphasis in body copy.$font-body-strong-l-link
- StringBody small bold Used for strong emphasis in body copy.$font-body-strong-s
- StringBody small bold underline Used for strong emphasis in body copy.$font-body-strong-s-link
Caption
Example Description Token name
- StringCaption Used for captions, labels, disclaimers or helper text. Use sparingly.$font-caption
- StringCaption Underline Used as a visual cue to indicate something is a link.$font-caption-link
Caption (Strong)
Example Description Token name
- StringCaption bold Used for captions, labels, disclaimers or helper text. Use sparingly.$font-caption-strong
Interactive
Example Description Token name
- StringInteractive L Used for labels in large sized button components + numeric counter.$font-interactive-l
- StringInteractive M Used for labels in medium sized button components.$font-interactive-m
- StringInteractive S Used for labels in small sized button components.$font-interactive-s
- StringInteractive XS Used for labels in extra small sized button components.$font-interactive-xs