Skip to content
#ask-design-system

Core

Typography

Stable

Type sizes and line heights from design tokens. Font families reference token values — ensure brand fonts are loaded in consuming apps.

Figma
Headline
Degular Display (token)
Header / body / label
Haffer (token)

Headline

Headline LG

Checkatrade headline sample

--typography-headline-font-size-lg / --typography-headline-line-height-lg

Headline MD

Checkatrade headline sample

--typography-headline-font-size-md / --typography-headline-line-height-md

Headline SM

Checkatrade headline sample

--typography-headline-font-size-sm / --typography-headline-line-height-sm

Header

Header XL

Section header sample

--typography-header-font-size-xl / --typography-header-line-height-xl

Header LG

Section header sample

--typography-header-font-size-lg / --typography-header-line-height-lg

Header MD

Section header sample

--typography-header-font-size-md / --typography-header-line-height-md

Header SM

Section header sample

--typography-header-font-size-sm / --typography-header-line-height-sm

Header XS

Section header sample

--typography-header-font-size-xs / --typography-header-line-height-xs

Header XXS

Section header sample

--typography-header-font-size-xxs / --typography-header-line-height-xxs

Body

Body XXL

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

--typography-body-font-size-xxl / --typography-body-line-height-xxl

Body XL

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

--typography-body-font-size-xl / --typography-body-line-height-xl

Body LG

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

--typography-body-font-size-lg / --typography-body-line-height-lg

Body MD

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

--typography-body-font-size-md / --typography-body-line-height-md

Body SM

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

--typography-body-font-size-sm / --typography-body-line-height-sm

Body XS

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

--typography-body-font-size-xs / --typography-body-line-height-xs

Label

Label action LG

Label & control text

--typography-label-font-size-action-lg / --typography-label-line-height-action-lg

Label action MD

Label & control text

--typography-label-font-size-action-md / --typography-label-line-height-action-md

Label action SM

Label & control text

--typography-label-font-size-action-sm / --typography-label-line-height-action-sm

Label control MD

Label & control text

--typography-label-font-size-control-md / --typography-label-line-height-control-md