Typography Tokens

Typography tokens define the base typographic physics and rhythm of the system. These values are the lowest-level building blocks from which semantic text styles (e.g. body, headline, label) are composed. They should be stable, predictable, and platform-agnostic.

Organization of Typography Tokens

Typography tokens are organized into groups to emphasize how they relate to each other and to their role in the typographic hierarchy and clarify the purpose of related properties.

Display

Large, attention-grabbing text used for prominent headings and key messages.

Headline

Primary text style for main headings and important content.

Title

Secondary text style for subheadings and less prominent content.

Body

Text style for main content and paragraphs, designed for readability and legibility.

Label

Text style for labels, buttons, and smaller UI elements that require clear and concise text.

Caption

Small text style for captions, annotations, and less important information.

Monospace

Monospaced text style for displaying code snippets and technical information.

Responsive to Screen Sizes

Most typography tokens are provided as responsive by default as adapting to different screen sizes ensures optimal readability and user experience across our products.

We use "mobile-first" approach, meaning that typography styles are defined for the smallest screen size first and then progressively enhanced for larger screens.

In case some property should remain the same across all screen sizes, we skip defining separate tokens or copy same values for larger screens. This approach keeps the door open for future adjustments without enforcing unnecessary differentiation up front.

Naming Convention

We adhere to property names defined in React Native's Text Style Props specifications.

<property>.<group>?.<value>

Default Typography Tokens

important

The following set of tokens represent the default options that should cover most use cases in our design system. No values are strictly enforced here, however, we recommend using these as a starting point for your products.

Preview

Sort by

propertygroup

fontFamily

Token name	Value
fontFamily.display	accent
fontFamily.headline	accent
fontFamily.title	accent
fontFamily.body	default
fontFamily.strong	default
fontFamily.label	default
fontFamily.controls	default
fontFamily.navigation	default
fontFamily.caption	default
fontFamily.monospace	monospace

fontSize / display

Token name	default	tablet	desktop
fontSize.display.large	56px	64px	64px
fontSize.display.medium	48px	56px	56px
fontSize.display.small	40px	48px	48px

fontSize / headline

Token name	default	tablet	desktop
fontSize.headline.h1	40px	40px	40px
fontSize.headline.h2	32px	32px	32px
fontSize.headline.h3	24px	24px	24px
fontSize.headline.h4	20px	20px	20px
fontSize.headline.h5	18px	18px	18px

fontSize / title

Token name	default	tablet	desktop
fontSize.title.large	16px	16px	16px
fontSize.title.medium	14px	14px	14px
fontSize.title.small	12px	12px	12px

fontSize / label

Token name	default	tablet	desktop
fontSize.label.large	16px	16px	16px
fontSize.label.medium	14px	14px	14px
fontSize.label.small	12px	12px	12px

fontSize / controls

Token name	default	tablet	desktop
fontSize.controls.large	16px	16px	16px
fontSize.controls.medium	14px	14px	14px
fontSize.controls.small	12px	12px	12px

fontSize / navigation

Token name	default	tablet	desktop
fontSize.navigation.large	16px	16px	16px
fontSize.navigation.medium	14px	14px	14px
fontSize.navigation.small	12px	12px	12px

fontSize / body

Token name	default	tablet	desktop
fontSize.body.large	16px	16px	16px
fontSize.body.medium	14px	14px	14px
fontSize.body.small	12px	12px	12px

fontSize / strong

Token name	default	tablet	desktop
fontSize.strong.large	16px	16px	16px
fontSize.strong.medium	14px	14px	14px
fontSize.strong.small	12px	12px	12px

fontSize / caption

Token name	default	tablet	desktop
fontSize.caption.large	16px	16px	16px
fontSize.caption.medium	14px	14px	14px
fontSize.caption.small	12px	12px	12px

fontSize / monospace

Token name	default	tablet	desktop
fontSize.monospace.large	16px	16px	16px
fontSize.monospace.medium	14px	14px	14px
fontSize.monospace.small	12px	12px	12px

fontStyle

Token name	Value
fontStyle.italic	italic
fontStyle.normal	normal

fontWeight / display

Token name	Value
fontWeight.display.large	500
fontWeight.display.medium	500
fontWeight.display.small	500

fontWeight / headline

Token name	Value
fontWeight.headline.h1	800
fontWeight.headline.h2	800
fontWeight.headline.h3	800
fontWeight.headline.h4	800
fontWeight.headline.h5	800

fontWeight / title

Token name	Value
fontWeight.title.large	700
fontWeight.title.medium	700
fontWeight.title.small	700

fontWeight / label

Token name	Value
fontWeight.label.large	500
fontWeight.label.medium	500
fontWeight.label.small	500

fontWeight / controls

Token name	Value
fontWeight.controls.large	500
fontWeight.controls.medium	500
fontWeight.controls.small	500

fontWeight / navigation

Token name	Value
fontWeight.navigation.large	500
fontWeight.navigation.medium	500
fontWeight.navigation.small	500

fontWeight / body

Token name	Value
fontWeight.body.large	400
fontWeight.body.medium	400
fontWeight.body.small	400

fontWeight / strong

Token name	Value
fontWeight.strong.large	700
fontWeight.strong.medium	700
fontWeight.strong.small	700

fontWeight / caption

Token name	Value
fontWeight.caption.large	500
fontWeight.caption.medium	500
fontWeight.caption.small	500

fontWeight / monospace

Token name	Value
fontWeight.monospace.large	400
fontWeight.monospace.medium	400
fontWeight.monospace.small	400

letterSpacing / display

Token name	Value
letterSpacing.display.large	0px
letterSpacing.display.medium	0px
letterSpacing.display.small	0px

letterSpacing / headline

Token name	Value
letterSpacing.headline.h1	0px
letterSpacing.headline.h2	0px
letterSpacing.headline.h3	0px
letterSpacing.headline.h4	0px
letterSpacing.headline.h5	0px

letterSpacing / title

Token name	Value
letterSpacing.title.large	0px
letterSpacing.title.medium	0px
letterSpacing.title.small	0px

letterSpacing / label

Token name	Value
letterSpacing.label.large	0px
letterSpacing.label.medium	0px
letterSpacing.label.small	0px

letterSpacing / controls

Token name	Value
letterSpacing.controls.large	0px
letterSpacing.controls.medium	0px
letterSpacing.controls.small	0px

letterSpacing / navigation

Token name	Value
letterSpacing.navigation.large	0px
letterSpacing.navigation.medium	0px
letterSpacing.navigation.small	0px

letterSpacing / body

Token name	Value
letterSpacing.body.large	0px
letterSpacing.body.medium	0px
letterSpacing.body.small	0px

letterSpacing / strong

Token name	Value
letterSpacing.strong.large	0px
letterSpacing.strong.medium	0px
letterSpacing.strong.small	0px

letterSpacing / caption

Token name	Value
letterSpacing.caption.large	0px
letterSpacing.caption.medium	0px
letterSpacing.caption.small	0px

letterSpacing / monospace

Token name	Value
letterSpacing.monospace.large	0px
letterSpacing.monospace.medium	0px
letterSpacing.monospace.small	0px

lineHeight / display

Token name	default	tablet	desktop
lineHeight.display.large	56px	64px	64px
lineHeight.display.medium	48px	56px	56px
lineHeight.display.small	40px	48px	48px

lineHeight / headline

Token name	default	tablet	desktop
lineHeight.headline.h1	40px	40px	40px
lineHeight.headline.h2	32px	32px	32px
lineHeight.headline.h3	24px	24px	24px
lineHeight.headline.h4	20px	20px	20px
lineHeight.headline.h5	18px	18px	18px

lineHeight / title

Token name	default	tablet	desktop
lineHeight.title.large	24px	24px	24px
lineHeight.title.medium	20px	20px	20px
lineHeight.title.small	16px	16px	16px

lineHeight / label

Token name	default	tablet	desktop
lineHeight.label.large	24px	24px	24px
lineHeight.label.medium	20px	20px	20px
lineHeight.label.small	16px	16px	16px

lineHeight / controls

Token name	default	tablet	desktop
lineHeight.controls.large	24px	24px	24px
lineHeight.controls.medium	20px	20px	20px
lineHeight.controls.small	16px	16px	16px

lineHeight / navigation

Token name	default	tablet	desktop
lineHeight.navigation.large	24px	24px	24px
lineHeight.navigation.medium	20px	20px	20px
lineHeight.navigation.small	16px	16px	16px

lineHeight / body

Token name	default	tablet	desktop
lineHeight.body.large	24px	24px	24px
lineHeight.body.medium	20px	20px	20px
lineHeight.body.small	16px	16px	16px

lineHeight / strong

Token name	default	tablet	desktop
lineHeight.strong.large	24px	24px	24px
lineHeight.strong.medium	20px	20px	20px
lineHeight.strong.small	16px	16px	16px

lineHeight / caption

Token name	default	tablet	desktop
lineHeight.caption.large	24px	24px	24px
lineHeight.caption.medium	20px	20px	20px
lineHeight.caption.small	16px	16px	16px

lineHeight / monospace

Token name	default	tablet	desktop
lineHeight.monospace.large	24px	24px	24px
lineHeight.monospace.medium	20px	20px	20px
lineHeight.monospace.small	16px	16px	16px

CSS Custom Properties

/**
 * [IMPORTANT]: Private properties marked ---- are not intended for direct usage
 */

:root,
:host {  
  ----fontFamily--default: Inter;
  ----fontFamily--accent: Inter;
  ----fontFamily--monospace: monospace;
  ----fontSize--0: 0px;
  ----fontSize--2: 2px;
  ----fontSize--4: 4px;
  ----fontSize--6: 6px;
  ----fontSize--8: 8px;
  ----fontSize--10: 10px;
  ----fontSize--12: 12px;
  ----fontSize--14: 14px;
  ----fontSize--16: 16px;
  ----fontSize--18: 18px;
  ----fontSize--20: 20px;
  ----fontSize--22: 22px;
  ----fontSize--24: 24px;
  ----fontSize--26: 26px;
  ----fontSize--28: 28px;
  ----fontSize--30: 30px;
  ----fontSize--32: 32px;
  ----fontSize--34: 34px;
  ----fontSize--36: 36px;
  ----fontSize--38: 38px;
  ----fontSize--40: 40px;
  ----fontSize--42: 42px;
  ----fontSize--44: 44px;
  ----fontSize--46: 46px;
  ----fontSize--48: 48px;
  ----fontSize--50: 50px;
  ----fontSize--52: 52px;
  ----fontSize--54: 54px;
  ----fontSize--56: 56px;
  ----fontSize--58: 58px;
  ----fontSize--60: 60px;
  ----fontSize--62: 62px;
  ----fontSize--64: 64px;
  ----fontSize--66: 66px;
  ----fontSize--68: 68px;
  ----fontSize--70: 70px;
  ----fontSize--72: 72px;
  ----fontSize--74: 74px;
  ----fontSize--76: 76px;
  ----fontSize--78: 78px;
  ----fontSize--80: 80px;
  ----fontSize--82: 82px;
  ----fontSize--84: 84px;
  ----fontSize--86: 86px;
  ----fontSize--88: 88px;
  ----fontSize--90: 90px;
  ----fontSize--92: 92px;
  ----fontSize--94: 94px;
  ----fontSize--96: 96px;
  ----fontSize--98: 98px;
  ----fontSize--100: 100px;
  ----fontSize--102: 102px;
  ----fontSize--104: 104px;
  ----fontSize--106: 106px;
  ----fontSize--108: 108px;
  ----fontSize--110: 110px;
  ----fontSize--112: 112px;
  ----fontSize--114: 114px;
  ----fontSize--116: 116px;
  ----fontSize--118: 118px;
  ----fontSize--120: 120px;
  ----fontSize--122: 122px;
  ----fontSize--124: 124px;
  ----fontSize--126: 126px;
  ----fontSize--128: 128px;
  ----fontWeight--100: 100;
  ----fontWeight--200: 200;
  ----fontWeight--300: 300;
  ----fontWeight--400: 400;
  ----fontWeight--500: 500;
  ----fontWeight--600: 600;
  ----fontWeight--700: 700;
  ----fontWeight--800: 800;
  ----fontWeight--900: 900;
  ----fontWeight--950: 950;
  ----letterSpacing--0: 0px;
  ----letterSpacing--1: 1px;
  ----letterSpacing--2: 2px;
  ----letterSpacing--neg2: -2px;
  ----letterSpacing--neg1_980: -1.98px;
  ----letterSpacing--neg1_960: -1.96px;
  ----letterSpacing--neg1_940: -1.94px;
  ----letterSpacing--neg1_920: -1.92px;
  ----letterSpacing--neg1_900: -1.9px;
  ----letterSpacing--neg1_880: -1.88px;
  ----letterSpacing--neg1_860: -1.86px;
  ----letterSpacing--neg1_840: -1.84px;
  ----letterSpacing--neg1_820: -1.82px;
  ----letterSpacing--neg1_800: -1.8px;
  ----letterSpacing--neg1_780: -1.78px;
  ----letterSpacing--neg1_760: -1.76px;
  ----letterSpacing--neg1_740: -1.74px;
  ----letterSpacing--neg1_720: -1.72px;
  ----letterSpacing--neg1_700: -1.7px;
  ----letterSpacing--neg1_680: -1.68px;
  ----letterSpacing--neg1_660: -1.66px;
  ----letterSpacing--neg1_640: -1.64px;
  ----letterSpacing--neg1_620: -1.62px;
  ----letterSpacing--neg1_600: -1.6px;
  ----letterSpacing--neg1_580: -1.58px;
  ----letterSpacing--neg1_560: -1.56px;
  ----letterSpacing--neg1_540: -1.54px;
  ----letterSpacing--neg1_520: -1.52px;
  ----letterSpacing--neg1_500: -1.5px;
  ----letterSpacing--neg1_480: -1.48px;
  ----letterSpacing--neg1_460: -1.46px;
  ----letterSpacing--neg1_440: -1.44px;
  ----letterSpacing--neg1_420: -1.42px;
  ----letterSpacing--neg1_400: -1.4px;
  ----letterSpacing--neg1_380: -1.38px;
  ----letterSpacing--neg1_360: -1.36px;
  ----letterSpacing--neg1_340: -1.34px;
  ----letterSpacing--neg1_320: -1.32px;
  ----letterSpacing--neg1_300: -1.3px;
  ----letterSpacing--neg1_280: -1.28px;
  ----letterSpacing--neg1_260: -1.26px;
  ----letterSpacing--neg1_240: -1.24px;
  ----letterSpacing--neg1_220: -1.22px;
  ----letterSpacing--neg1_200: -1.2px;
  ----letterSpacing--neg1_180: -1.18px;
  ----letterSpacing--neg1_160: -1.16px;
  ----letterSpacing--neg1_140: -1.14px;
  ----letterSpacing--neg1_120: -1.12px;
  ----letterSpacing--neg1_100: -1.1px;
  ----letterSpacing--neg1_080: -1.08px;
  ----letterSpacing--neg1_060: -1.06px;
  ----letterSpacing--neg1_040: -1.04px;
  ----letterSpacing--neg1_020: -1.02px;
  ----letterSpacing--neg1: -1px;
  ----letterSpacing--neg0_980: -0.98px;
  ----letterSpacing--neg0_960: -0.96px;
  ----letterSpacing--neg0_940: -0.94px;
  ----letterSpacing--neg0_920: -0.92px;
  ----letterSpacing--neg0_900: -0.9px;
  ----letterSpacing--neg0_880: -0.88px;
  ----letterSpacing--neg0_860: -0.86px;
  ----letterSpacing--neg0_840: -0.84px;
  ----letterSpacing--neg0_820: -0.82px;
  ----letterSpacing--neg0_800: -0.8px;
  ----letterSpacing--neg0_780: -0.78px;
  ----letterSpacing--neg0_760: -0.76px;
  ----letterSpacing--neg0_740: -0.74px;
  ----letterSpacing--neg0_720: -0.72px;
  ----letterSpacing--neg0_700: -0.7px;
  ----letterSpacing--neg0_680: -0.68px;
  ----letterSpacing--neg0_660: -0.66px;
  ----letterSpacing--neg0_640: -0.64px;
  ----letterSpacing--neg0_620: -0.62px;
  ----letterSpacing--neg0_600: -0.6px;
  ----letterSpacing--neg0_580: -0.58px;
  ----letterSpacing--neg0_560: -0.56px;
  ----letterSpacing--neg0_540: -0.54px;
  ----letterSpacing--neg0_520: -0.52px;
  ----letterSpacing--neg0_500: -0.5px;
  ----letterSpacing--neg0_480: -0.48px;
  ----letterSpacing--neg0_460: -0.46px;
  ----letterSpacing--neg0_440: -0.44px;
  ----letterSpacing--neg0_420: -0.42px;
  ----letterSpacing--neg0_400: -0.4px;
  ----letterSpacing--neg0_380: -0.38px;
  ----letterSpacing--neg0_360: -0.36px;
  ----letterSpacing--neg0_340: -0.34px;
  ----letterSpacing--neg0_320: -0.32px;
  ----letterSpacing--neg0_300: -0.3px;
  ----letterSpacing--neg0_280: -0.28px;
  ----letterSpacing--neg0_260: -0.26px;
  ----letterSpacing--neg0_240: -0.24px;
  ----letterSpacing--neg0_220: -0.22px;
  ----letterSpacing--neg0_200: -0.2px;
  ----letterSpacing--neg0_180: -0.18px;
  ----letterSpacing--neg0_160: -0.16px;
  ----letterSpacing--neg0_140: -0.14px;
  ----letterSpacing--neg0_120: -0.12px;
  ----letterSpacing--neg0_100: -0.1px;
  ----letterSpacing--neg0_080: -0.08px;
  ----letterSpacing--neg0_060: -0.06px;
  ----letterSpacing--neg0_040: -0.04px;
  ----letterSpacing--neg0_020: -0.02px;
  ----letterSpacing--0_020: 0.02px;
  ----letterSpacing--0_040: 0.04px;
  ----letterSpacing--0_060: 0.06px;
  ----letterSpacing--0_080: 0.08px;
  ----letterSpacing--0_100: 0.1px;
  ----letterSpacing--0_120: 0.12px;
  ----letterSpacing--0_140: 0.14px;
  ----letterSpacing--0_160: 0.16px;
  ----letterSpacing--0_180: 0.18px;
  ----letterSpacing--0_200: 0.2px;
  ----letterSpacing--0_220: 0.22px;
  ----letterSpacing--0_240: 0.24px;
  ----letterSpacing--0_260: 0.26px;
  ----letterSpacing--0_280: 0.28px;
  ----letterSpacing--0_300: 0.3px;
  ----letterSpacing--0_320: 0.32px;
  ----letterSpacing--0_340: 0.34px;
  ----letterSpacing--0_360: 0.36px;
  ----letterSpacing--0_380: 0.38px;
  ----letterSpacing--0_400: 0.4px;
  ----letterSpacing--0_420: 0.42px;
  ----letterSpacing--0_440: 0.44px;
  ----letterSpacing--0_460: 0.46px;
  ----letterSpacing--0_480: 0.48px;
  ----letterSpacing--0_500: 0.5px;
  ----letterSpacing--0_520: 0.52px;
  ----letterSpacing--0_540: 0.54px;
  ----letterSpacing--0_560: 0.56px;
  ----letterSpacing--0_580: 0.58px;
  ----letterSpacing--0_600: 0.6px;
  ----letterSpacing--0_620: 0.62px;
  ----letterSpacing--0_640: 0.64px;
  ----letterSpacing--0_660: 0.66px;
  ----letterSpacing--0_680: 0.68px;
  ----letterSpacing--0_700: 0.7px;
  ----letterSpacing--0_720: 0.72px;
  ----letterSpacing--0_740: 0.74px;
  ----letterSpacing--0_760: 0.76px;
  ----letterSpacing--0_780: 0.78px;
  ----letterSpacing--0_800: 0.8px;
  ----letterSpacing--0_820: 0.82px;
  ----letterSpacing--0_840: 0.84px;
  ----letterSpacing--0_860: 0.86px;
  ----letterSpacing--0_880: 0.88px;
  ----letterSpacing--0_900: 0.9px;
  ----letterSpacing--0_920: 0.92px;
  ----letterSpacing--0_940: 0.94px;
  ----letterSpacing--0_960: 0.96px;
  ----letterSpacing--0_980: 0.98px;
  ----letterSpacing--1_020: 1.02px;
  ----letterSpacing--1_040: 1.04px;
  ----letterSpacing--1_060: 1.06px;
  ----letterSpacing--1_080: 1.08px;
  ----letterSpacing--1_100: 1.1px;
  ----letterSpacing--1_120: 1.12px;
  ----letterSpacing--1_140: 1.14px;
  ----letterSpacing--1_160: 1.16px;
  ----letterSpacing--1_180: 1.18px;
  ----letterSpacing--1_200: 1.2px;
  ----letterSpacing--1_220: 1.22px;
  ----letterSpacing--1_240: 1.24px;
  ----letterSpacing--1_260: 1.26px;
  ----letterSpacing--1_280: 1.28px;
  ----letterSpacing--1_300: 1.3px;
  ----letterSpacing--1_320: 1.32px;
  ----letterSpacing--1_340: 1.34px;
  ----letterSpacing--1_360: 1.36px;
  ----letterSpacing--1_380: 1.38px;
  ----letterSpacing--1_400: 1.4px;
  ----letterSpacing--1_420: 1.42px;
  ----letterSpacing--1_440: 1.44px;
  ----letterSpacing--1_460: 1.46px;
  ----letterSpacing--1_480: 1.48px;
  ----letterSpacing--1_500: 1.5px;
  ----letterSpacing--1_520: 1.52px;
  ----letterSpacing--1_540: 1.54px;
  ----letterSpacing--1_560: 1.56px;
  ----letterSpacing--1_580: 1.58px;
  ----letterSpacing--1_600: 1.6px;
  ----letterSpacing--1_620: 1.62px;
  ----letterSpacing--1_640: 1.64px;
  ----letterSpacing--1_660: 1.66px;
  ----letterSpacing--1_680: 1.68px;
  ----letterSpacing--1_700: 1.7px;
  ----letterSpacing--1_720: 1.72px;
  ----letterSpacing--1_740: 1.74px;
  ----letterSpacing--1_760: 1.76px;
  ----letterSpacing--1_780: 1.78px;
  ----letterSpacing--1_800: 1.8px;
  ----letterSpacing--1_820: 1.82px;
  ----letterSpacing--1_840: 1.84px;
  ----letterSpacing--1_860: 1.86px;
  ----letterSpacing--1_880: 1.88px;
  ----letterSpacing--1_900: 1.9px;
  ----letterSpacing--1_920: 1.92px;
  ----letterSpacing--1_940: 1.94px;
  ----letterSpacing--1_960: 1.96px;
  ----letterSpacing--1_980: 1.98px;
  ----lineHeight--0: 0px;
  ----lineHeight--2: 2px;
  ----lineHeight--4: 4px;
  ----lineHeight--6: 6px;
  ----lineHeight--8: 8px;
  ----lineHeight--10: 10px;
  ----lineHeight--12: 12px;
  ----lineHeight--14: 14px;
  ----lineHeight--16: 16px;
  ----lineHeight--18: 18px;
  ----lineHeight--20: 20px;
  ----lineHeight--22: 22px;
  ----lineHeight--24: 24px;
  ----lineHeight--26: 26px;
  ----lineHeight--28: 28px;
  ----lineHeight--30: 30px;
  ----lineHeight--32: 32px;
  ----lineHeight--34: 34px;
  ----lineHeight--36: 36px;
  ----lineHeight--38: 38px;
  ----lineHeight--40: 40px;
  ----lineHeight--42: 42px;
  ----lineHeight--44: 44px;
  ----lineHeight--46: 46px;
  ----lineHeight--48: 48px;
  ----lineHeight--50: 50px;
  ----lineHeight--52: 52px;
  ----lineHeight--54: 54px;
  ----lineHeight--56: 56px;
  ----lineHeight--58: 58px;
  ----lineHeight--60: 60px;
  ----lineHeight--62: 62px;
  ----lineHeight--64: 64px;
  ----lineHeight--66: 66px;
  ----lineHeight--68: 68px;
  ----lineHeight--70: 70px;
  ----lineHeight--72: 72px;
  ----lineHeight--74: 74px;
  ----lineHeight--76: 76px;
  ----lineHeight--78: 78px;
  ----lineHeight--80: 80px;
  ----lineHeight--82: 82px;
  ----lineHeight--84: 84px;
  ----lineHeight--86: 86px;
  ----lineHeight--88: 88px;
  ----lineHeight--90: 90px;
  ----lineHeight--92: 92px;
  ----lineHeight--94: 94px;
  ----lineHeight--96: 96px;
  ----lineHeight--98: 98px;
  ----lineHeight--100: 100px;
  ----lineHeight--102: 102px;
  ----lineHeight--104: 104px;
  ----lineHeight--106: 106px;
  ----lineHeight--108: 108px;
  ----lineHeight--110: 110px;
  ----lineHeight--112: 112px;
  ----lineHeight--114: 114px;
  ----lineHeight--116: 116px;
  ----lineHeight--118: 118px;
  ----lineHeight--120: 120px;
  ----lineHeight--122: 122px;
  ----lineHeight--124: 124px;
  ----lineHeight--126: 126px;
  ----lineHeight--128: 128px;
  
  /**
   * Typography tokens:
   */
  
  /** fontFamily: */
  --fontFamily--display: var(----fontFamily--accent);
  --fontFamily--headline: var(----fontFamily--accent);
  --fontFamily--title: var(----fontFamily--accent);
  --fontFamily--body: var(----fontFamily--default);
  --fontFamily--strong: var(----fontFamily--default);
  --fontFamily--label: var(----fontFamily--default);
  --fontFamily--controls: var(----fontFamily--default);
  --fontFamily--navigation: var(----fontFamily--default);
  --fontFamily--caption: var(----fontFamily--default);
  --fontFamily--monospace: var(----fontFamily--monospace);
  
  /** fontSize / display: */
  --fontSize--display-large: var(----fontSize--56);
  --fontSize--display-medium: var(----fontSize--48);
  --fontSize--display-small: var(----fontSize--40);
  
  /** lineHeight / display: */
  --lineHeight--display-large: var(----lineHeight--56);
  --lineHeight--display-medium: var(----lineHeight--48);
  --lineHeight--display-small: var(----lineHeight--40);
  
  /** fontWeight / display: */
  --fontWeight--display-large: var(----fontWeight--500);
  --fontWeight--display-medium: var(----fontWeight--500);
  --fontWeight--display-small: var(----fontWeight--500);
  
  /** letterSpacing / display: */
  --letterSpacing--display-large: var(----letterSpacing--0);
  --letterSpacing--display-medium: var(----letterSpacing--0);
  --letterSpacing--display-small: var(----letterSpacing--0);
  
  /** fontSize / headline: */
  --fontSize--headline-h1: var(----fontSize--40);
  --fontSize--headline-h2: var(----fontSize--32);
  --fontSize--headline-h3: var(----fontSize--24);
  --fontSize--headline-h4: var(----fontSize--20);
  --fontSize--headline-h5: var(----fontSize--18);
  
  /** lineHeight / headline: */
  --lineHeight--headline-h1: var(----lineHeight--40);
  --lineHeight--headline-h2: var(----lineHeight--32);
  --lineHeight--headline-h3: var(----lineHeight--24);
  --lineHeight--headline-h4: var(----lineHeight--20);
  --lineHeight--headline-h5: var(----lineHeight--18);
  
  /** fontWeight / headline: */
  --fontWeight--headline-h1: var(----fontWeight--800);
  --fontWeight--headline-h2: var(----fontWeight--800);
  --fontWeight--headline-h3: var(----fontWeight--800);
  --fontWeight--headline-h4: var(----fontWeight--800);
  --fontWeight--headline-h5: var(----fontWeight--800);
  
  /** letterSpacing / headline: */
  --letterSpacing--headline-h1: var(----letterSpacing--0);
  --letterSpacing--headline-h2: var(----letterSpacing--0);
  --letterSpacing--headline-h3: var(----letterSpacing--0);
  --letterSpacing--headline-h4: var(----letterSpacing--0);
  --letterSpacing--headline-h5: var(----letterSpacing--0);
  
  /** fontSize / title: */
  --fontSize--title-large: var(----fontSize--16);
  --fontSize--title-medium: var(----fontSize--14);
  --fontSize--title-small: var(----fontSize--12);
  
  /** lineHeight / title: */
  --lineHeight--title-large: var(----lineHeight--24);
  --lineHeight--title-medium: var(----lineHeight--20);
  --lineHeight--title-small: var(----lineHeight--16);
  
  /** fontWeight / title: */
  --fontWeight--title-large: var(----fontWeight--700);
  --fontWeight--title-medium: var(----fontWeight--700);
  --fontWeight--title-small: var(----fontWeight--700);
  
  /** letterSpacing / title: */
  --letterSpacing--title-large: var(----letterSpacing--0);
  --letterSpacing--title-medium: var(----letterSpacing--0);
  --letterSpacing--title-small: var(----letterSpacing--0);
  
  /** fontSize / label: */
  --fontSize--label-large: var(----fontSize--16);
  --fontSize--label-medium: var(----fontSize--14);
  --fontSize--label-small: var(----fontSize--12);
  
  /** lineHeight / label: */
  --lineHeight--label-large: var(----lineHeight--24);
  --lineHeight--label-medium: var(----lineHeight--20);
  --lineHeight--label-small: var(----lineHeight--16);
  
  /** fontWeight / label: */
  --fontWeight--label-large: var(----fontWeight--500);
  --fontWeight--label-medium: var(----fontWeight--500);
  --fontWeight--label-small: var(----fontWeight--500);
  
  /** letterSpacing / label: */
  --letterSpacing--label-large: var(----letterSpacing--0);
  --letterSpacing--label-medium: var(----letterSpacing--0);
  --letterSpacing--label-small: var(----letterSpacing--0);
  
  /** fontSize / controls: */
  --fontSize--controls-large: var(----fontSize--16);
  --fontSize--controls-medium: var(----fontSize--14);
  --fontSize--controls-small: var(----fontSize--12);
  
  /** lineHeight / controls: */
  --lineHeight--controls-large: var(----lineHeight--24);
  --lineHeight--controls-medium: var(----lineHeight--20);
  --lineHeight--controls-small: var(----lineHeight--16);
  
  /** fontWeight / controls: */
  --fontWeight--controls-large: var(----fontWeight--500);
  --fontWeight--controls-medium: var(----fontWeight--500);
  --fontWeight--controls-small: var(----fontWeight--500);
  
  /** letterSpacing / controls: */
  --letterSpacing--controls-large: var(----letterSpacing--0);
  --letterSpacing--controls-medium: var(----letterSpacing--0);
  --letterSpacing--controls-small: var(----letterSpacing--0);
  
  /** fontSize / navigation: */
  --fontSize--navigation-large: var(----fontSize--16);
  --fontSize--navigation-medium: var(----fontSize--14);
  --fontSize--navigation-small: var(----fontSize--12);
  
  /** lineHeight / navigation: */
  --lineHeight--navigation-large: var(----lineHeight--24);
  --lineHeight--navigation-medium: var(----lineHeight--20);
  --lineHeight--navigation-small: var(----lineHeight--16);
  
  /** fontWeight / navigation: */
  --fontWeight--navigation-large: var(----fontWeight--500);
  --fontWeight--navigation-medium: var(----fontWeight--500);
  --fontWeight--navigation-small: var(----fontWeight--500);
  
  /** letterSpacing / navigation: */
  --letterSpacing--navigation-large: var(----letterSpacing--0);
  --letterSpacing--navigation-medium: var(----letterSpacing--0);
  --letterSpacing--navigation-small: var(----letterSpacing--0);
  
  /** fontSize / body: */
  --fontSize--body-large: var(----fontSize--16);
  --fontSize--body-medium: var(----fontSize--14);
  --fontSize--body-small: var(----fontSize--12);
  
  /** lineHeight / body: */
  --lineHeight--body-large: var(----lineHeight--24);
  --lineHeight--body-medium: var(----lineHeight--20);
  --lineHeight--body-small: var(----lineHeight--16);
  
  /** fontWeight / body: */
  --fontWeight--body-large: var(----fontWeight--400);
  --fontWeight--body-medium: var(----fontWeight--400);
  --fontWeight--body-small: var(----fontWeight--400);
  
  /** letterSpacing / body: */
  --letterSpacing--body-large: var(----letterSpacing--0);
  --letterSpacing--body-medium: var(----letterSpacing--0);
  --letterSpacing--body-small: var(----letterSpacing--0);
  
  /** fontSize / strong: */
  --fontSize--strong-large: var(----fontSize--16);
  --fontSize--strong-medium: var(----fontSize--14);
  --fontSize--strong-small: var(----fontSize--12);
  
  /** lineHeight / strong: */
  --lineHeight--strong-large: var(----lineHeight--24);
  --lineHeight--strong-medium: var(----lineHeight--20);
  --lineHeight--strong-small: var(----lineHeight--16);
  
  /** fontWeight / strong: */
  --fontWeight--strong-large: var(----fontWeight--700);
  --fontWeight--strong-medium: var(----fontWeight--700);
  --fontWeight--strong-small: var(----fontWeight--700);
  
  /** letterSpacing / strong: */
  --letterSpacing--strong-large: var(----letterSpacing--0);
  --letterSpacing--strong-medium: var(----letterSpacing--0);
  --letterSpacing--strong-small: var(----letterSpacing--0);
  
  /** fontSize / caption: */
  --fontSize--caption-large: var(----fontSize--16);
  --fontSize--caption-medium: var(----fontSize--14);
  --fontSize--caption-small: var(----fontSize--12);
  
  /** lineHeight / caption: */
  --lineHeight--caption-large: var(----lineHeight--24);
  --lineHeight--caption-medium: var(----lineHeight--20);
  --lineHeight--caption-small: var(----lineHeight--16);
  
  /** fontWeight / caption: */
  --fontWeight--caption-large: var(----fontWeight--500);
  --fontWeight--caption-medium: var(----fontWeight--500);
  --fontWeight--caption-small: var(----fontWeight--500);
  
  /** letterSpacing / caption: */
  --letterSpacing--caption-large: var(----letterSpacing--0);
  --letterSpacing--caption-medium: var(----letterSpacing--0);
  --letterSpacing--caption-small: var(----letterSpacing--0);
  
  /** fontSize / monospace: */
  --fontSize--monospace-large: var(----fontSize--16);
  --fontSize--monospace-medium: var(----fontSize--14);
  --fontSize--monospace-small: var(----fontSize--12);
  
  /** lineHeight / monospace: */
  --lineHeight--monospace-large: var(----lineHeight--24);
  --lineHeight--monospace-medium: var(----lineHeight--20);
  --lineHeight--monospace-small: var(----lineHeight--16);
  
  /** fontWeight / monospace: */
  --fontWeight--monospace-large: var(----fontWeight--400);
  --fontWeight--monospace-medium: var(----fontWeight--400);
  --fontWeight--monospace-small: var(----fontWeight--400);
  
  /** letterSpacing / monospace: */
  --letterSpacing--monospace-large: var(----letterSpacing--0);
  --letterSpacing--monospace-medium: var(----letterSpacing--0);
  --letterSpacing--monospace-small: var(----letterSpacing--0);
  
  /** fontStyle: */
  --fontStyle--italic: var(----fontStyle--italic);
  --fontStyle--normal: var(----fontStyle--normal);
}

@media (min-width: 960px) {
  :root,
  :host {
    /** fontSize / display: */
    --fontSize--display-large: var(----fontSize--64);
    --fontSize--display-medium: var(----fontSize--56);
    --fontSize--display-small: var(----fontSize--48);
    
    /** lineHeight / display: */
    --lineHeight--display-large: var(----lineHeight--64);
    --lineHeight--display-medium: var(----lineHeight--56);
    --lineHeight--display-small: var(----lineHeight--48);
    
    /** fontSize / headline: */
    --fontSize--headline-h1: var(----fontSize--40);
    --fontSize--headline-h2: var(----fontSize--32);
    --fontSize--headline-h3: var(----fontSize--24);
    --fontSize--headline-h4: var(----fontSize--20);
    --fontSize--headline-h5: var(----fontSize--18);
    
    /** lineHeight / headline: */
    --lineHeight--headline-h1: var(----lineHeight--40);
    --lineHeight--headline-h2: var(----lineHeight--32);
    --lineHeight--headline-h3: var(----lineHeight--24);
    --lineHeight--headline-h4: var(----lineHeight--20);
    --lineHeight--headline-h5: var(----lineHeight--18);
    
    /** fontSize / title: */
    --fontSize--title-large: var(----fontSize--16);
    --fontSize--title-medium: var(----fontSize--14);
    --fontSize--title-small: var(----fontSize--12);
    
    /** lineHeight / title: */
    --lineHeight--title-large: var(----lineHeight--24);
    --lineHeight--title-medium: var(----lineHeight--20);
    --lineHeight--title-small: var(----lineHeight--16);
    
    /** fontSize / label: */
    --fontSize--label-large: var(----fontSize--16);
    --fontSize--label-medium: var(----fontSize--14);
    --fontSize--label-small: var(----fontSize--12);
    
    /** lineHeight / label: */
    --lineHeight--label-large: var(----lineHeight--24);
    --lineHeight--label-medium: var(----lineHeight--20);
    --lineHeight--label-small: var(----lineHeight--16);
    
    /** fontSize / controls: */
    --fontSize--controls-large: var(----fontSize--16);
    --fontSize--controls-medium: var(----fontSize--14);
    --fontSize--controls-small: var(----fontSize--12);
    
    /** lineHeight / controls: */
    --lineHeight--controls-large: var(----lineHeight--24);
    --lineHeight--controls-medium: var(----lineHeight--20);
    --lineHeight--controls-small: var(----lineHeight--16);
    
    /** fontSize / navigation: */
    --fontSize--navigation-large: var(----fontSize--16);
    --fontSize--navigation-medium: var(----fontSize--14);
    --fontSize--navigation-small: var(----fontSize--12);
    
    /** lineHeight / navigation: */
    --lineHeight--navigation-large: var(----lineHeight--24);
    --lineHeight--navigation-medium: var(----lineHeight--20);
    --lineHeight--navigation-small: var(----lineHeight--16);
    
    /** fontSize / body: */
    --fontSize--body-large: var(----fontSize--16);
    --fontSize--body-medium: var(----fontSize--14);
    --fontSize--body-small: var(----fontSize--12);
    
    /** lineHeight / body: */
    --lineHeight--body-large: var(----lineHeight--24);
    --lineHeight--body-medium: var(----lineHeight--20);
    --lineHeight--body-small: var(----lineHeight--16);
    
    /** fontSize / strong: */
    --fontSize--strong-large: var(----fontSize--16);
    --fontSize--strong-medium: var(----fontSize--14);
    --fontSize--strong-small: var(----fontSize--12);
    
    /** lineHeight / strong: */
    --lineHeight--strong-large: var(----lineHeight--24);
    --lineHeight--strong-medium: var(----lineHeight--20);
    --lineHeight--strong-small: var(----lineHeight--16);
    
    /** fontSize / caption: */
    --fontSize--caption-large: var(----fontSize--16);
    --fontSize--caption-medium: var(----fontSize--14);
    --fontSize--caption-small: var(----fontSize--12);
    
    /** lineHeight / caption: */
    --lineHeight--caption-large: var(----lineHeight--24);
    --lineHeight--caption-medium: var(----lineHeight--20);
    --lineHeight--caption-small: var(----lineHeight--16);
    
    /** fontSize / monospace: */
    --fontSize--monospace-large: var(----fontSize--16);
    --fontSize--monospace-medium: var(----fontSize--14);
    --fontSize--monospace-small: var(----fontSize--12);
    
    /** lineHeight / monospace: */
    --lineHeight--monospace-large: var(----lineHeight--24);
    --lineHeight--monospace-medium: var(----lineHeight--20);
    --lineHeight--monospace-small: var(----lineHeight--16);
  }
}

@media (min-width: 1440px) {
  :root,
  :host {
    /** fontSize / display: */
    --fontSize--display-large: var(----fontSize--64);
    --fontSize--display-medium: var(----fontSize--56);
    --fontSize--display-small: var(----fontSize--48);
    
    /** lineHeight / display: */
    --lineHeight--display-large: var(----lineHeight--64);
    --lineHeight--display-medium: var(----lineHeight--56);
    --lineHeight--display-small: var(----lineHeight--48);
    
    /** fontSize / headline: */
    --fontSize--headline-h1: var(----fontSize--40);
    --fontSize--headline-h2: var(----fontSize--32);
    --fontSize--headline-h3: var(----fontSize--24);
    --fontSize--headline-h4: var(----fontSize--20);
    --fontSize--headline-h5: var(----fontSize--18);
    
    /** lineHeight / headline: */
    --lineHeight--headline-h1: var(----lineHeight--40);
    --lineHeight--headline-h2: var(----lineHeight--32);
    --lineHeight--headline-h3: var(----lineHeight--24);
    --lineHeight--headline-h4: var(----lineHeight--20);
    --lineHeight--headline-h5: var(----lineHeight--18);
    
    /** fontSize / title: */
    --fontSize--title-large: var(----fontSize--16);
    --fontSize--title-medium: var(----fontSize--14);
    --fontSize--title-small: var(----fontSize--12);
    
    /** lineHeight / title: */
    --lineHeight--title-large: var(----lineHeight--24);
    --lineHeight--title-medium: var(----lineHeight--20);
    --lineHeight--title-small: var(----lineHeight--16);
    
    /** fontSize / label: */
    --fontSize--label-large: var(----fontSize--16);
    --fontSize--label-medium: var(----fontSize--14);
    --fontSize--label-small: var(----fontSize--12);
    
    /** lineHeight / label: */
    --lineHeight--label-large: var(----lineHeight--24);
    --lineHeight--label-medium: var(----lineHeight--20);
    --lineHeight--label-small: var(----lineHeight--16);
    
    /** fontSize / controls: */
    --fontSize--controls-large: var(----fontSize--16);
    --fontSize--controls-medium: var(----fontSize--14);
    --fontSize--controls-small: var(----fontSize--12);
    
    /** lineHeight / controls: */
    --lineHeight--controls-large: var(----lineHeight--24);
    --lineHeight--controls-medium: var(----lineHeight--20);
    --lineHeight--controls-small: var(----lineHeight--16);
    
    /** fontSize / navigation: */
    --fontSize--navigation-large: var(----fontSize--16);
    --fontSize--navigation-medium: var(----fontSize--14);
    --fontSize--navigation-small: var(----fontSize--12);
    
    /** lineHeight / navigation: */
    --lineHeight--navigation-large: var(----lineHeight--24);
    --lineHeight--navigation-medium: var(----lineHeight--20);
    --lineHeight--navigation-small: var(----lineHeight--16);
    
    /** fontSize / body: */
    --fontSize--body-large: var(----fontSize--16);
    --fontSize--body-medium: var(----fontSize--14);
    --fontSize--body-small: var(----fontSize--12);
    
    /** lineHeight / body: */
    --lineHeight--body-large: var(----lineHeight--24);
    --lineHeight--body-medium: var(----lineHeight--20);
    --lineHeight--body-small: var(----lineHeight--16);
    
    /** fontSize / strong: */
    --fontSize--strong-large: var(----fontSize--16);
    --fontSize--strong-medium: var(----fontSize--14);
    --fontSize--strong-small: var(----fontSize--12);
    
    /** lineHeight / strong: */
    --lineHeight--strong-large: var(----lineHeight--24);
    --lineHeight--strong-medium: var(----lineHeight--20);
    --lineHeight--strong-small: var(----lineHeight--16);
    
    /** fontSize / caption: */
    --fontSize--caption-large: var(----fontSize--16);
    --fontSize--caption-medium: var(----fontSize--14);
    --fontSize--caption-small: var(----fontSize--12);
    
    /** lineHeight / caption: */
    --lineHeight--caption-large: var(----lineHeight--24);
    --lineHeight--caption-medium: var(----lineHeight--20);
    --lineHeight--caption-small: var(----lineHeight--16);
    
    /** fontSize / monospace: */
    --fontSize--monospace-large: var(----fontSize--16);
    --fontSize--monospace-medium: var(----fontSize--14);
    --fontSize--monospace-small: var(----fontSize--12);
    
    /** lineHeight / monospace: */
    --lineHeight--monospace-large: var(----lineHeight--24);
    --lineHeight--monospace-medium: var(----lineHeight--20);
    --lineHeight--monospace-small: var(----lineHeight--16);
  }
}

Figma JSON

{
  "Scales": {
    "__scales": {
      "fontFamily": {
        "default": {
          "$type": "text",
          "$value": "Inter"
        },
        "accent": {
          "$type": "text",
          "$value": "Inter"
        },
        "monospace": {
          "$type": "text",
          "$value": "monospace"
        }
      },
      "fontSize": {
        "0": {
          "$type": "dimension",
          "$value": 0
        },
        "2": {
          "$type": "dimension",
          "$value": 2
        },
        "4": {
          "$type": "dimension",
          "$value": 4
        },
        "6": {
          "$type": "dimension",
          "$value": 6
        },
        "8": {
          "$type": "dimension",
          "$value": 8
        },
        "10": {
          "$type": "dimension",
          "$value": 10
        },
        "12": {
          "$type": "dimension",
          "$value": 12
        },
        "14": {
          "$type": "dimension",
          "$value": 14
        },
        "16": {
          "$type": "dimension",
          "$value": 16
        },
        "18": {
          "$type": "dimension",
          "$value": 18
        },
        "20": {
          "$type": "dimension",
          "$value": 20
        },
        "22": {
          "$type": "dimension",
          "$value": 22
        },
        "24": {
          "$type": "dimension",
          "$value": 24
        },
        "26": {
          "$type": "dimension",
          "$value": 26
        },
        "28": {
          "$type": "dimension",
          "$value": 28
        },
        "30": {
          "$type": "dimension",
          "$value": 30
        },
        "32": {
          "$type": "dimension",
          "$value": 32
        },
        "34": {
          "$type": "dimension",
          "$value": 34
        },
        "36": {
          "$type": "dimension",
          "$value": 36
        },
        "38": {
          "$type": "dimension",
          "$value": 38
        },
        "40": {
          "$type": "dimension",
          "$value": 40
        },
        "42": {
          "$type": "dimension",
          "$value": 42
        },
        "44": {
          "$type": "dimension",
          "$value": 44
        },
        "46": {
          "$type": "dimension",
          "$value": 46
        },
        "48": {
          "$type": "dimension",
          "$value": 48
        },
        "50": {
          "$type": "dimension",
          "$value": 50
        },
        "52": {
          "$type": "dimension",
          "$value": 52
        },
        "54": {
          "$type": "dimension",
          "$value": 54
        },
        "56": {
          "$type": "dimension",
          "$value": 56
        },
        "58": {
          "$type": "dimension",
          "$value": 58
        },
        "60": {
          "$type": "dimension",
          "$value": 60
        },
        "62": {
          "$type": "dimension",
          "$value": 62
        },
        "64": {
          "$type": "dimension",
          "$value": 64
        },
        "66": {
          "$type": "dimension",
          "$value": 66
        },
        "68": {
          "$type": "dimension",
          "$value": 68
        },
        "70": {
          "$type": "dimension",
          "$value": 70
        },
        "72": {
          "$type": "dimension",
          "$value": 72
        },
        "74": {
          "$type": "dimension",
          "$value": 74
        },
        "76": {
          "$type": "dimension",
          "$value": 76
        },
        "78": {
          "$type": "dimension",
          "$value": 78
        },
        "80": {
          "$type": "dimension",
          "$value": 80
        },
        "82": {
          "$type": "dimension",
          "$value": 82
        },
        "84": {
          "$type": "dimension",
          "$value": 84
        },
        "86": {
          "$type": "dimension",
          "$value": 86
        },
        "88": {
          "$type": "dimension",
          "$value": 88
        },
        "90": {
          "$type": "dimension",
          "$value": 90
        },
        "92": {
          "$type": "dimension",
          "$value": 92
        },
        "94": {
          "$type": "dimension",
          "$value": 94
        },
        "96": {
          "$type": "dimension",
          "$value": 96
        },
        "98": {
          "$type": "dimension",
          "$value": 98
        },
        "100": {
          "$type": "dimension",
          "$value": 100
        },
        "102": {
          "$type": "dimension",
          "$value": 102
        },
        "104": {
          "$type": "dimension",
          "$value": 104
        },
        "106": {
          "$type": "dimension",
          "$value": 106
        },
        "108": {
          "$type": "dimension",
          "$value": 108
        },
        "110": {
          "$type": "dimension",
          "$value": 110
        },
        "112": {
          "$type": "dimension",
          "$value": 112
        },
        "114": {
          "$type": "dimension",
          "$value": 114
        },
        "116": {
          "$type": "dimension",
          "$value": 116
        },
        "118": {
          "$type": "dimension",
          "$value": 118
        },
        "120": {
          "$type": "dimension",
          "$value": 120
        },
        "122": {
          "$type": "dimension",
          "$value": 122
        },
        "124": {
          "$type": "dimension",
          "$value": 124
        },
        "126": {
          "$type": "dimension",
          "$value": 126
        },
        "128": {
          "$type": "dimension",
          "$value": 128
        }
      },
      "fontWeight": {
        "100": {
          "$type": "dimension",
          "$value": 100
        },
        "200": {
          "$type": "dimension",
          "$value": 200
        },
        "300": {
          "$type": "dimension",
          "$value": 300
        },
        "400": {
          "$type": "dimension",
          "$value": 400
        },
        "500": {
          "$type": "dimension",
          "$value": 500
        },
        "600": {
          "$type": "dimension",
          "$value": 600
        },
        "700": {
          "$type": "dimension",
          "$value": 700
        },
        "800": {
          "$type": "dimension",
          "$value": 800
        },
        "900": {
          "$type": "dimension",
          "$value": 900
        },
        "950": {
          "$type": "dimension",
          "$value": 950
        }
      },
      "letterSpacing": {
        "0": {
          "$type": "dimension",
          "$value": 0
        },
        "1": {
          "$type": "dimension",
          "$value": 1
        },
        "2": {
          "$type": "dimension",
          "$value": 2
        },
        "neg2": {
          "$type": "dimension",
          "$value": -2
        },
        "neg1_980": {
          "$type": "dimension",
          "$value": -1.98
        },
        "neg1_960": {
          "$type": "dimension",
          "$value": -1.96
        },
        "neg1_940": {
          "$type": "dimension",
          "$value": -1.94
        },
        "neg1_920": {
          "$type": "dimension",
          "$value": -1.92
        },
        "neg1_900": {
          "$type": "dimension",
          "$value": -1.9
        },
        "neg1_880": {
          "$type": "dimension",
          "$value": -1.88
        },
        "neg1_860": {
          "$type": "dimension",
          "$value": -1.86
        },
        "neg1_840": {
          "$type": "dimension",
          "$value": -1.84
        },
        "neg1_820": {
          "$type": "dimension",
          "$value": -1.82
        },
        "neg1_800": {
          "$type": "dimension",
          "$value": -1.8
        },
        "neg1_780": {
          "$type": "dimension",
          "$value": -1.78
        },
        "neg1_760": {
          "$type": "dimension",
          "$value": -1.76
        },
        "neg1_740": {
          "$type": "dimension",
          "$value": -1.74
        },
        "neg1_720": {
          "$type": "dimension",
          "$value": -1.72
        },
        "neg1_700": {
          "$type": "dimension",
          "$value": -1.7
        },
        "neg1_680": {
          "$type": "dimension",
          "$value": -1.68
        },
        "neg1_660": {
          "$type": "dimension",
          "$value": -1.66
        },
        "neg1_640": {
          "$type": "dimension",
          "$value": -1.64
        },
        "neg1_620": {
          "$type": "dimension",
          "$value": -1.62
        },
        "neg1_600": {
          "$type": "dimension",
          "$value": -1.6
        },
        "neg1_580": {
          "$type": "dimension",
          "$value": -1.58
        },
        "neg1_560": {
          "$type": "dimension",
          "$value": -1.56
        },
        "neg1_540": {
          "$type": "dimension",
          "$value": -1.54
        },
        "neg1_520": {
          "$type": "dimension",
          "$value": -1.52
        },
        "neg1_500": {
          "$type": "dimension",
          "$value": -1.5
        },
        "neg1_480": {
          "$type": "dimension",
          "$value": -1.48
        },
        "neg1_460": {
          "$type": "dimension",
          "$value": -1.46
        },
        "neg1_440": {
          "$type": "dimension",
          "$value": -1.44
        },
        "neg1_420": {
          "$type": "dimension",
          "$value": -1.42
        },
        "neg1_400": {
          "$type": "dimension",
          "$value": -1.4
        },
        "neg1_380": {
          "$type": "dimension",
          "$value": -1.38
        },
        "neg1_360": {
          "$type": "dimension",
          "$value": -1.36
        },
        "neg1_340": {
          "$type": "dimension",
          "$value": -1.34
        },
        "neg1_320": {
          "$type": "dimension",
          "$value": -1.32
        },
        "neg1_300": {
          "$type": "dimension",
          "$value": -1.3
        },
        "neg1_280": {
          "$type": "dimension",
          "$value": -1.28
        },
        "neg1_260": {
          "$type": "dimension",
          "$value": -1.26
        },
        "neg1_240": {
          "$type": "dimension",
          "$value": -1.24
        },
        "neg1_220": {
          "$type": "dimension",
          "$value": -1.22
        },
        "neg1_200": {
          "$type": "dimension",
          "$value": -1.2
        },
        "neg1_180": {
          "$type": "dimension",
          "$value": -1.18
        },
        "neg1_160": {
          "$type": "dimension",
          "$value": -1.16
        },
        "neg1_140": {
          "$type": "dimension",
          "$value": -1.14
        },
        "neg1_120": {
          "$type": "dimension",
          "$value": -1.12
        },
        "neg1_100": {
          "$type": "dimension",
          "$value": -1.1
        },
        "neg1_080": {
          "$type": "dimension",
          "$value": -1.08
        },
        "neg1_060": {
          "$type": "dimension",
          "$value": -1.06
        },
        "neg1_040": {
          "$type": "dimension",
          "$value": -1.04
        },
        "neg1_020": {
          "$type": "dimension",
          "$value": -1.02
        },
        "neg1": {
          "$type": "dimension",
          "$value": -1
        },
        "neg0_980": {
          "$type": "dimension",
          "$value": -0.98
        },
        "neg0_960": {
          "$type": "dimension",
          "$value": -0.96
        },
        "neg0_940": {
          "$type": "dimension",
          "$value": -0.94
        },
        "neg0_920": {
          "$type": "dimension",
          "$value": -0.92
        },
        "neg0_900": {
          "$type": "dimension",
          "$value": -0.9
        },
        "neg0_880": {
          "$type": "dimension",
          "$value": -0.88
        },
        "neg0_860": {
          "$type": "dimension",
          "$value": -0.86
        },
        "neg0_840": {
          "$type": "dimension",
          "$value": -0.84
        },
        "neg0_820": {
          "$type": "dimension",
          "$value": -0.82
        },
        "neg0_800": {
          "$type": "dimension",
          "$value": -0.8
        },
        "neg0_780": {
          "$type": "dimension",
          "$value": -0.78
        },
        "neg0_760": {
          "$type": "dimension",
          "$value": -0.76
        },
        "neg0_740": {
          "$type": "dimension",
          "$value": -0.74
        },
        "neg0_720": {
          "$type": "dimension",
          "$value": -0.72
        },
        "neg0_700": {
          "$type": "dimension",
          "$value": -0.7
        },
        "neg0_680": {
          "$type": "dimension",
          "$value": -0.68
        },
        "neg0_660": {
          "$type": "dimension",
          "$value": -0.66
        },
        "neg0_640": {
          "$type": "dimension",
          "$value": -0.64
        },
        "neg0_620": {
          "$type": "dimension",
          "$value": -0.62
        },
        "neg0_600": {
          "$type": "dimension",
          "$value": -0.6
        },
        "neg0_580": {
          "$type": "dimension",
          "$value": -0.58
        },
        "neg0_560": {
          "$type": "dimension",
          "$value": -0.56
        },
        "neg0_540": {
          "$type": "dimension",
          "$value": -0.54
        },
        "neg0_520": {
          "$type": "dimension",
          "$value": -0.52
        },
        "neg0_500": {
          "$type": "dimension",
          "$value": -0.5
        },
        "neg0_480": {
          "$type": "dimension",
          "$value": -0.48
        },
        "neg0_460": {
          "$type": "dimension",
          "$value": -0.46
        },
        "neg0_440": {
          "$type": "dimension",
          "$value": -0.44
        },
        "neg0_420": {
          "$type": "dimension",
          "$value": -0.42
        },
        "neg0_400": {
          "$type": "dimension",
          "$value": -0.4
        },
        "neg0_380": {
          "$type": "dimension",
          "$value": -0.38
        },
        "neg0_360": {
          "$type": "dimension",
          "$value": -0.36
        },
        "neg0_340": {
          "$type": "dimension",
          "$value": -0.34
        },
        "neg0_320": {
          "$type": "dimension",
          "$value": -0.32
        },
        "neg0_300": {
          "$type": "dimension",
          "$value": -0.3
        },
        "neg0_280": {
          "$type": "dimension",
          "$value": -0.28
        },
        "neg0_260": {
          "$type": "dimension",
          "$value": -0.26
        },
        "neg0_240": {
          "$type": "dimension",
          "$value": -0.24
        },
        "neg0_220": {
          "$type": "dimension",
          "$value": -0.22
        },
        "neg0_200": {
          "$type": "dimension",
          "$value": -0.2
        },
        "neg0_180": {
          "$type": "dimension",
          "$value": -0.18
        },
        "neg0_160": {
          "$type": "dimension",
          "$value": -0.16
        },
        "neg0_140": {
          "$type": "dimension",
          "$value": -0.14
        },
        "neg0_120": {
          "$type": "dimension",
          "$value": -0.12
        },
        "neg0_100": {
          "$type": "dimension",
          "$value": -0.1
        },
        "neg0_080": {
          "$type": "dimension",
          "$value": -0.08
        },
        "neg0_060": {
          "$type": "dimension",
          "$value": -0.06
        },
        "neg0_040": {
          "$type": "dimension",
          "$value": -0.04
        },
        "neg0_020": {
          "$type": "dimension",
          "$value": -0.02
        },
        "0_020": {
          "$type": "dimension",
          "$value": 0.02
        },
        "0_040": {
          "$type": "dimension",
          "$value": 0.04
        },
        "0_060": {
          "$type": "dimension",
          "$value": 0.06
        },
        "0_080": {
          "$type": "dimension",
          "$value": 0.08
        },
        "0_100": {
          "$type": "dimension",
          "$value": 0.1
        },
        "0_120": {
          "$type": "dimension",
          "$value": 0.12
        },
        "0_140": {
          "$type": "dimension",
          "$value": 0.14
        },
        "0_160": {
          "$type": "dimension",
          "$value": 0.16
        },
        "0_180": {
          "$type": "dimension",
          "$value": 0.18
        },
        "0_200": {
          "$type": "dimension",
          "$value": 0.2
        },
        "0_220": {
          "$type": "dimension",
          "$value": 0.22
        },
        "0_240": {
          "$type": "dimension",
          "$value": 0.24
        },
        "0_260": {
          "$type": "dimension",
          "$value": 0.26
        },
        "0_280": {
          "$type": "dimension",
          "$value": 0.28
        },
        "0_300": {
          "$type": "dimension",
          "$value": 0.3
        },
        "0_320": {
          "$type": "dimension",
          "$value": 0.32
        },
        "0_340": {
          "$type": "dimension",
          "$value": 0.34
        },
        "0_360": {
          "$type": "dimension",
          "$value": 0.36
        },
        "0_380": {
          "$type": "dimension",
          "$value": 0.38
        },
        "0_400": {
          "$type": "dimension",
          "$value": 0.4
        },
        "0_420": {
          "$type": "dimension",
          "$value": 0.42
        },
        "0_440": {
          "$type": "dimension",
          "$value": 0.44
        },
        "0_460": {
          "$type": "dimension",
          "$value": 0.46
        },
        "0_480": {
          "$type": "dimension",
          "$value": 0.48
        },
        "0_500": {
          "$type": "dimension",
          "$value": 0.5
        },
        "0_520": {
          "$type": "dimension",
          "$value": 0.52
        },
        "0_540": {
          "$type": "dimension",
          "$value": 0.54
        },
        "0_560": {
          "$type": "dimension",
          "$value": 0.56
        },
        "0_580": {
          "$type": "dimension",
          "$value": 0.58
        },
        "0_600": {
          "$type": "dimension",
          "$value": 0.6
        },
        "0_620": {
          "$type": "dimension",
          "$value": 0.62
        },
        "0_640": {
          "$type": "dimension",
          "$value": 0.64
        },
        "0_660": {
          "$type": "dimension",
          "$value": 0.66
        },
        "0_680": {
          "$type": "dimension",
          "$value": 0.68
        },
        "0_700": {
          "$type": "dimension",
          "$value": 0.7
        },
        "0_720": {
          "$type": "dimension",
          "$value": 0.72
        },
        "0_740": {
          "$type": "dimension",
          "$value": 0.74
        },
        "0_760": {
          "$type": "dimension",
          "$value": 0.76
        },
        "0_780": {
          "$type": "dimension",
          "$value": 0.78
        },
        "0_800": {
          "$type": "dimension",
          "$value": 0.8
        },
        "0_820": {
          "$type": "dimension",
          "$value": 0.82
        },
        "0_840": {
          "$type": "dimension",
          "$value": 0.84
        },
        "0_860": {
          "$type": "dimension",
          "$value": 0.86
        },
        "0_880": {
          "$type": "dimension",
          "$value": 0.88
        },
        "0_900": {
          "$type": "dimension",
          "$value": 0.9
        },
        "0_920": {
          "$type": "dimension",
          "$value": 0.92
        },
        "0_940": {
          "$type": "dimension",
          "$value": 0.94
        },
        "0_960": {
          "$type": "dimension",
          "$value": 0.96
        },
        "0_980": {
          "$type": "dimension",
          "$value": 0.98
        },
        "1_020": {
          "$type": "dimension",
          "$value": 1.02
        },
        "1_040": {
          "$type": "dimension",
          "$value": 1.04
        },
        "1_060": {
          "$type": "dimension",
          "$value": 1.06
        },
        "1_080": {
          "$type": "dimension",
          "$value": 1.08
        },
        "1_100": {
          "$type": "dimension",
          "$value": 1.1
        },
        "1_120": {
          "$type": "dimension",
          "$value": 1.12
        },
        "1_140": {
          "$type": "dimension",
          "$value": 1.14
        },
        "1_160": {
          "$type": "dimension",
          "$value": 1.16
        },
        "1_180": {
          "$type": "dimension",
          "$value": 1.18
        },
        "1_200": {
          "$type": "dimension",
          "$value": 1.2
        },
        "1_220": {
          "$type": "dimension",
          "$value": 1.22
        },
        "1_240": {
          "$type": "dimension",
          "$value": 1.24
        },
        "1_260": {
          "$type": "dimension",
          "$value": 1.26
        },
        "1_280": {
          "$type": "dimension",
          "$value": 1.28
        },
        "1_300": {
          "$type": "dimension",
          "$value": 1.3
        },
        "1_320": {
          "$type": "dimension",
          "$value": 1.32
        },
        "1_340": {
          "$type": "dimension",
          "$value": 1.34
        },
        "1_360": {
          "$type": "dimension",
          "$value": 1.36
        },
        "1_380": {
          "$type": "dimension",
          "$value": 1.38
        },
        "1_400": {
          "$type": "dimension",
          "$value": 1.4
        },
        "1_420": {
          "$type": "dimension",
          "$value": 1.42
        },
        "1_440": {
          "$type": "dimension",
          "$value": 1.44
        },
        "1_460": {
          "$type": "dimension",
          "$value": 1.46
        },
        "1_480": {
          "$type": "dimension",
          "$value": 1.48
        },
        "1_500": {
          "$type": "dimension",
          "$value": 1.5
        },
        "1_520": {
          "$type": "dimension",
          "$value": 1.52
        },
        "1_540": {
          "$type": "dimension",
          "$value": 1.54
        },
        "1_560": {
          "$type": "dimension",
          "$value": 1.56
        },
        "1_580": {
          "$type": "dimension",
          "$value": 1.58
        },
        "1_600": {
          "$type": "dimension",
          "$value": 1.6
        },
        "1_620": {
          "$type": "dimension",
          "$value": 1.62
        },
        "1_640": {
          "$type": "dimension",
          "$value": 1.64
        },
        "1_660": {
          "$type": "dimension",
          "$value": 1.66
        },
        "1_680": {
          "$type": "dimension",
          "$value": 1.68
        },
        "1_700": {
          "$type": "dimension",
          "$value": 1.7
        },
        "1_720": {
          "$type": "dimension",
          "$value": 1.72
        },
        "1_740": {
          "$type": "dimension",
          "$value": 1.74
        },
        "1_760": {
          "$type": "dimension",
          "$value": 1.76
        },
        "1_780": {
          "$type": "dimension",
          "$value": 1.78
        },
        "1_800": {
          "$type": "dimension",
          "$value": 1.8
        },
        "1_820": {
          "$type": "dimension",
          "$value": 1.82
        },
        "1_840": {
          "$type": "dimension",
          "$value": 1.84
        },
        "1_860": {
          "$type": "dimension",
          "$value": 1.86
        },
        "1_880": {
          "$type": "dimension",
          "$value": 1.88
        },
        "1_900": {
          "$type": "dimension",
          "$value": 1.9
        },
        "1_920": {
          "$type": "dimension",
          "$value": 1.92
        },
        "1_940": {
          "$type": "dimension",
          "$value": 1.94
        },
        "1_960": {
          "$type": "dimension",
          "$value": 1.96
        },
        "1_980": {
          "$type": "dimension",
          "$value": 1.98
        }
      },
      "lineHeight": {
        "0": {
          "$type": "dimension",
          "$value": 0
        },
        "2": {
          "$type": "dimension",
          "$value": 2
        },
        "4": {
          "$type": "dimension",
          "$value": 4
        },
        "6": {
          "$type": "dimension",
          "$value": 6
        },
        "8": {
          "$type": "dimension",
          "$value": 8
        },
        "10": {
          "$type": "dimension",
          "$value": 10
        },
        "12": {
          "$type": "dimension",
          "$value": 12
        },
        "14": {
          "$type": "dimension",
          "$value": 14
        },
        "16": {
          "$type": "dimension",
          "$value": 16
        },
        "18": {
          "$type": "dimension",
          "$value": 18
        },
        "20": {
          "$type": "dimension",
          "$value": 20
        },
        "22": {
          "$type": "dimension",
          "$value": 22
        },
        "24": {
          "$type": "dimension",
          "$value": 24
        },
        "26": {
          "$type": "dimension",
          "$value": 26
        },
        "28": {
          "$type": "dimension",
          "$value": 28
        },
        "30": {
          "$type": "dimension",
          "$value": 30
        },
        "32": {
          "$type": "dimension",
          "$value": 32
        },
        "34": {
          "$type": "dimension",
          "$value": 34
        },
        "36": {
          "$type": "dimension",
          "$value": 36
        },
        "38": {
          "$type": "dimension",
          "$value": 38
        },
        "40": {
          "$type": "dimension",
          "$value": 40
        },
        "42": {
          "$type": "dimension",
          "$value": 42
        },
        "44": {
          "$type": "dimension",
          "$value": 44
        },
        "46": {
          "$type": "dimension",
          "$value": 46
        },
        "48": {
          "$type": "dimension",
          "$value": 48
        },
        "50": {
          "$type": "dimension",
          "$value": 50
        },
        "52": {
          "$type": "dimension",
          "$value": 52
        },
        "54": {
          "$type": "dimension",
          "$value": 54
        },
        "56": {
          "$type": "dimension",
          "$value": 56
        },
        "58": {
          "$type": "dimension",
          "$value": 58
        },
        "60": {
          "$type": "dimension",
          "$value": 60
        },
        "62": {
          "$type": "dimension",
          "$value": 62
        },
        "64": {
          "$type": "dimension",
          "$value": 64
        },
        "66": {
          "$type": "dimension",
          "$value": 66
        },
        "68": {
          "$type": "dimension",
          "$value": 68
        },
        "70": {
          "$type": "dimension",
          "$value": 70
        },
        "72": {
          "$type": "dimension",
          "$value": 72
        },
        "74": {
          "$type": "dimension",
          "$value": 74
        },
        "76": {
          "$type": "dimension",
          "$value": 76
        },
        "78": {
          "$type": "dimension",
          "$value": 78
        },
        "80": {
          "$type": "dimension",
          "$value": 80
        },
        "82": {
          "$type": "dimension",
          "$value": 82
        },
        "84": {
          "$type": "dimension",
          "$value": 84
        },
        "86": {
          "$type": "dimension",
          "$value": 86
        },
        "88": {
          "$type": "dimension",
          "$value": 88
        },
        "90": {
          "$type": "dimension",
          "$value": 90
        },
        "92": {
          "$type": "dimension",
          "$value": 92
        },
        "94": {
          "$type": "dimension",
          "$value": 94
        },
        "96": {
          "$type": "dimension",
          "$value": 96
        },
        "98": {
          "$type": "dimension",
          "$value": 98
        },
        "100": {
          "$type": "dimension",
          "$value": 100
        },
        "102": {
          "$type": "dimension",
          "$value": 102
        },
        "104": {
          "$type": "dimension",
          "$value": 104
        },
        "106": {
          "$type": "dimension",
          "$value": 106
        },
        "108": {
          "$type": "dimension",
          "$value": 108
        },
        "110": {
          "$type": "dimension",
          "$value": 110
        },
        "112": {
          "$type": "dimension",
          "$value": 112
        },
        "114": {
          "$type": "dimension",
          "$value": 114
        },
        "116": {
          "$type": "dimension",
          "$value": 116
        },
        "118": {
          "$type": "dimension",
          "$value": 118
        },
        "120": {
          "$type": "dimension",
          "$value": 120
        },
        "122": {
          "$type": "dimension",
          "$value": 122
        },
        "124": {
          "$type": "dimension",
          "$value": 124
        },
        "126": {
          "$type": "dimension",
          "$value": 126
        },
        "128": {
          "$type": "dimension",
          "$value": 128
        }
      },
      "fontStyle": {
        "italic": {
          "$type": "text",
          "$value": "italic"
        },
        "normal": {
          "$type": "text",
          "$value": "normal"
        }
      }
    }
  },
  "Typography": {
    "fontFamily": {
      "display": {
        "$type": "text",
        "$value": {
          "default": "{__scales/fontFamily/accent}",
          "tablet": "{__scales/fontFamily/accent}",
          "desktop": "{__scales/fontFamily/accent}"
        }
      },
      "headline": {
        "$type": "text",
        "$value": {
          "default": "{__scales/fontFamily/accent}",
          "tablet": "{__scales/fontFamily/accent}",
          "desktop": "{__scales/fontFamily/accent}"
        }
      },
      "title": {
        "$type": "text",
        "$value": {
          "default": "{__scales/fontFamily/accent}",
          "tablet": "{__scales/fontFamily/accent}",
          "desktop": "{__scales/fontFamily/accent}"
        }
      },
      "body": {
        "$type": "text",
        "$value": {
          "default": "{__scales/fontFamily/default}",
          "tablet": "{__scales/fontFamily/default}",
          "desktop": "{__scales/fontFamily/default}"
        }
      },
      "strong": {
        "$type": "text",
        "$value": {
          "default": "{__scales/fontFamily/default}",
          "tablet": "{__scales/fontFamily/default}",
          "desktop": "{__scales/fontFamily/default}"
        }
      },
      "label": {
        "$type": "text",
        "$value": {
          "default": "{__scales/fontFamily/default}",
          "tablet": "{__scales/fontFamily/default}",
          "desktop": "{__scales/fontFamily/default}"
        }
      },
      "controls": {
        "$type": "text",
        "$value": {
          "default": "{__scales/fontFamily/default}",
          "tablet": "{__scales/fontFamily/default}",
          "desktop": "{__scales/fontFamily/default}"
        }
      },
      "navigation": {
        "$type": "text",
        "$value": {
          "default": "{__scales/fontFamily/default}",
          "tablet": "{__scales/fontFamily/default}",
          "desktop": "{__scales/fontFamily/default}"
        }
      },
      "caption": {
        "$type": "text",
        "$value": {
          "default": "{__scales/fontFamily/default}",
          "tablet": "{__scales/fontFamily/default}",
          "desktop": "{__scales/fontFamily/default}"
        }
      },
      "monospace": {
        "$type": "text",
        "$value": {
          "default": "{__scales/fontFamily/monospace}",
          "tablet": "{__scales/fontFamily/monospace}",
          "desktop": "{__scales/fontFamily/monospace}"
        }
      }
    },
    "fontSize": {
      "display": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/56}",
            "tablet": "{__scales/fontSize/64}",
            "desktop": "{__scales/fontSize/64}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/48}",
            "tablet": "{__scales/fontSize/56}",
            "desktop": "{__scales/fontSize/56}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/40}",
            "tablet": "{__scales/fontSize/48}",
            "desktop": "{__scales/fontSize/48}"
          }
        }
      },
      "headline": {
        "h1": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/40}",
            "tablet": "{__scales/fontSize/40}",
            "desktop": "{__scales/fontSize/40}"
          }
        },
        "h2": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/32}",
            "tablet": "{__scales/fontSize/32}",
            "desktop": "{__scales/fontSize/32}"
          }
        },
        "h3": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/24}",
            "tablet": "{__scales/fontSize/24}",
            "desktop": "{__scales/fontSize/24}"
          }
        },
        "h4": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/20}",
            "tablet": "{__scales/fontSize/20}",
            "desktop": "{__scales/fontSize/20}"
          }
        },
        "h5": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/18}",
            "tablet": "{__scales/fontSize/18}",
            "desktop": "{__scales/fontSize/18}"
          }
        }
      },
      "title": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/16}",
            "tablet": "{__scales/fontSize/16}",
            "desktop": "{__scales/fontSize/16}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/14}",
            "tablet": "{__scales/fontSize/14}",
            "desktop": "{__scales/fontSize/14}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/12}",
            "tablet": "{__scales/fontSize/12}",
            "desktop": "{__scales/fontSize/12}"
          }
        }
      },
      "label": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/16}",
            "tablet": "{__scales/fontSize/16}",
            "desktop": "{__scales/fontSize/16}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/14}",
            "tablet": "{__scales/fontSize/14}",
            "desktop": "{__scales/fontSize/14}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/12}",
            "tablet": "{__scales/fontSize/12}",
            "desktop": "{__scales/fontSize/12}"
          }
        }
      },
      "controls": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/16}",
            "tablet": "{__scales/fontSize/16}",
            "desktop": "{__scales/fontSize/16}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/14}",
            "tablet": "{__scales/fontSize/14}",
            "desktop": "{__scales/fontSize/14}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/12}",
            "tablet": "{__scales/fontSize/12}",
            "desktop": "{__scales/fontSize/12}"
          }
        }
      },
      "navigation": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/16}",
            "tablet": "{__scales/fontSize/16}",
            "desktop": "{__scales/fontSize/16}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/14}",
            "tablet": "{__scales/fontSize/14}",
            "desktop": "{__scales/fontSize/14}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/12}",
            "tablet": "{__scales/fontSize/12}",
            "desktop": "{__scales/fontSize/12}"
          }
        }
      },
      "body": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/16}",
            "tablet": "{__scales/fontSize/16}",
            "desktop": "{__scales/fontSize/16}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/14}",
            "tablet": "{__scales/fontSize/14}",
            "desktop": "{__scales/fontSize/14}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/12}",
            "tablet": "{__scales/fontSize/12}",
            "desktop": "{__scales/fontSize/12}"
          }
        }
      },
      "strong": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/16}",
            "tablet": "{__scales/fontSize/16}",
            "desktop": "{__scales/fontSize/16}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/14}",
            "tablet": "{__scales/fontSize/14}",
            "desktop": "{__scales/fontSize/14}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/12}",
            "tablet": "{__scales/fontSize/12}",
            "desktop": "{__scales/fontSize/12}"
          }
        }
      },
      "caption": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/16}",
            "tablet": "{__scales/fontSize/16}",
            "desktop": "{__scales/fontSize/16}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/14}",
            "tablet": "{__scales/fontSize/14}",
            "desktop": "{__scales/fontSize/14}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/12}",
            "tablet": "{__scales/fontSize/12}",
            "desktop": "{__scales/fontSize/12}"
          }
        }
      },
      "monospace": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/16}",
            "tablet": "{__scales/fontSize/16}",
            "desktop": "{__scales/fontSize/16}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/14}",
            "tablet": "{__scales/fontSize/14}",
            "desktop": "{__scales/fontSize/14}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontSize/12}",
            "tablet": "{__scales/fontSize/12}",
            "desktop": "{__scales/fontSize/12}"
          }
        }
      }
    },
    "lineHeight": {
      "display": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/56}",
            "tablet": "{__scales/lineHeight/64}",
            "desktop": "{__scales/lineHeight/64}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/48}",
            "tablet": "{__scales/lineHeight/56}",
            "desktop": "{__scales/lineHeight/56}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/40}",
            "tablet": "{__scales/lineHeight/48}",
            "desktop": "{__scales/lineHeight/48}"
          }
        }
      },
      "headline": {
        "h1": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/40}",
            "tablet": "{__scales/lineHeight/40}",
            "desktop": "{__scales/lineHeight/40}"
          }
        },
        "h2": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/32}",
            "tablet": "{__scales/lineHeight/32}",
            "desktop": "{__scales/lineHeight/32}"
          }
        },
        "h3": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/24}",
            "tablet": "{__scales/lineHeight/24}",
            "desktop": "{__scales/lineHeight/24}"
          }
        },
        "h4": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/20}",
            "tablet": "{__scales/lineHeight/20}",
            "desktop": "{__scales/lineHeight/20}"
          }
        },
        "h5": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/18}",
            "tablet": "{__scales/lineHeight/18}",
            "desktop": "{__scales/lineHeight/18}"
          }
        }
      },
      "title": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/24}",
            "tablet": "{__scales/lineHeight/24}",
            "desktop": "{__scales/lineHeight/24}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/20}",
            "tablet": "{__scales/lineHeight/20}",
            "desktop": "{__scales/lineHeight/20}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/16}",
            "tablet": "{__scales/lineHeight/16}",
            "desktop": "{__scales/lineHeight/16}"
          }
        }
      },
      "label": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/24}",
            "tablet": "{__scales/lineHeight/24}",
            "desktop": "{__scales/lineHeight/24}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/20}",
            "tablet": "{__scales/lineHeight/20}",
            "desktop": "{__scales/lineHeight/20}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/16}",
            "tablet": "{__scales/lineHeight/16}",
            "desktop": "{__scales/lineHeight/16}"
          }
        }
      },
      "controls": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/24}",
            "tablet": "{__scales/lineHeight/24}",
            "desktop": "{__scales/lineHeight/24}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/20}",
            "tablet": "{__scales/lineHeight/20}",
            "desktop": "{__scales/lineHeight/20}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/16}",
            "tablet": "{__scales/lineHeight/16}",
            "desktop": "{__scales/lineHeight/16}"
          }
        }
      },
      "navigation": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/24}",
            "tablet": "{__scales/lineHeight/24}",
            "desktop": "{__scales/lineHeight/24}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/20}",
            "tablet": "{__scales/lineHeight/20}",
            "desktop": "{__scales/lineHeight/20}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/16}",
            "tablet": "{__scales/lineHeight/16}",
            "desktop": "{__scales/lineHeight/16}"
          }
        }
      },
      "body": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/24}",
            "tablet": "{__scales/lineHeight/24}",
            "desktop": "{__scales/lineHeight/24}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/20}",
            "tablet": "{__scales/lineHeight/20}",
            "desktop": "{__scales/lineHeight/20}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/16}",
            "tablet": "{__scales/lineHeight/16}",
            "desktop": "{__scales/lineHeight/16}"
          }
        }
      },
      "strong": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/24}",
            "tablet": "{__scales/lineHeight/24}",
            "desktop": "{__scales/lineHeight/24}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/20}",
            "tablet": "{__scales/lineHeight/20}",
            "desktop": "{__scales/lineHeight/20}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/16}",
            "tablet": "{__scales/lineHeight/16}",
            "desktop": "{__scales/lineHeight/16}"
          }
        }
      },
      "caption": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/24}",
            "tablet": "{__scales/lineHeight/24}",
            "desktop": "{__scales/lineHeight/24}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/20}",
            "tablet": "{__scales/lineHeight/20}",
            "desktop": "{__scales/lineHeight/20}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/16}",
            "tablet": "{__scales/lineHeight/16}",
            "desktop": "{__scales/lineHeight/16}"
          }
        }
      },
      "monospace": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/24}",
            "tablet": "{__scales/lineHeight/24}",
            "desktop": "{__scales/lineHeight/24}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/20}",
            "tablet": "{__scales/lineHeight/20}",
            "desktop": "{__scales/lineHeight/20}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/lineHeight/16}",
            "tablet": "{__scales/lineHeight/16}",
            "desktop": "{__scales/lineHeight/16}"
          }
        }
      }
    },
    "fontWeight": {
      "display": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/500}",
            "tablet": "{__scales/fontWeight/500}",
            "desktop": "{__scales/fontWeight/500}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/500}",
            "tablet": "{__scales/fontWeight/500}",
            "desktop": "{__scales/fontWeight/500}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/500}",
            "tablet": "{__scales/fontWeight/500}",
            "desktop": "{__scales/fontWeight/500}"
          }
        }
      },
      "headline": {
        "h1": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/800}",
            "tablet": "{__scales/fontWeight/800}",
            "desktop": "{__scales/fontWeight/800}"
          }
        },
        "h2": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/800}",
            "tablet": "{__scales/fontWeight/800}",
            "desktop": "{__scales/fontWeight/800}"
          }
        },
        "h3": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/800}",
            "tablet": "{__scales/fontWeight/800}",
            "desktop": "{__scales/fontWeight/800}"
          }
        },
        "h4": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/800}",
            "tablet": "{__scales/fontWeight/800}",
            "desktop": "{__scales/fontWeight/800}"
          }
        },
        "h5": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/800}",
            "tablet": "{__scales/fontWeight/800}",
            "desktop": "{__scales/fontWeight/800}"
          }
        }
      },
      "title": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/700}",
            "tablet": "{__scales/fontWeight/700}",
            "desktop": "{__scales/fontWeight/700}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/700}",
            "tablet": "{__scales/fontWeight/700}",
            "desktop": "{__scales/fontWeight/700}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/700}",
            "tablet": "{__scales/fontWeight/700}",
            "desktop": "{__scales/fontWeight/700}"
          }
        }
      },
      "label": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/500}",
            "tablet": "{__scales/fontWeight/500}",
            "desktop": "{__scales/fontWeight/500}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/500}",
            "tablet": "{__scales/fontWeight/500}",
            "desktop": "{__scales/fontWeight/500}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/500}",
            "tablet": "{__scales/fontWeight/500}",
            "desktop": "{__scales/fontWeight/500}"
          }
        }
      },
      "controls": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/500}",
            "tablet": "{__scales/fontWeight/500}",
            "desktop": "{__scales/fontWeight/500}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/500}",
            "tablet": "{__scales/fontWeight/500}",
            "desktop": "{__scales/fontWeight/500}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/500}",
            "tablet": "{__scales/fontWeight/500}",
            "desktop": "{__scales/fontWeight/500}"
          }
        }
      },
      "navigation": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/500}",
            "tablet": "{__scales/fontWeight/500}",
            "desktop": "{__scales/fontWeight/500}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/500}",
            "tablet": "{__scales/fontWeight/500}",
            "desktop": "{__scales/fontWeight/500}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/500}",
            "tablet": "{__scales/fontWeight/500}",
            "desktop": "{__scales/fontWeight/500}"
          }
        }
      },
      "body": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/400}",
            "tablet": "{__scales/fontWeight/400}",
            "desktop": "{__scales/fontWeight/400}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/400}",
            "tablet": "{__scales/fontWeight/400}",
            "desktop": "{__scales/fontWeight/400}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/400}",
            "tablet": "{__scales/fontWeight/400}",
            "desktop": "{__scales/fontWeight/400}"
          }
        }
      },
      "strong": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/700}",
            "tablet": "{__scales/fontWeight/700}",
            "desktop": "{__scales/fontWeight/700}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/700}",
            "tablet": "{__scales/fontWeight/700}",
            "desktop": "{__scales/fontWeight/700}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/700}",
            "tablet": "{__scales/fontWeight/700}",
            "desktop": "{__scales/fontWeight/700}"
          }
        }
      },
      "caption": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/500}",
            "tablet": "{__scales/fontWeight/500}",
            "desktop": "{__scales/fontWeight/500}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/500}",
            "tablet": "{__scales/fontWeight/500}",
            "desktop": "{__scales/fontWeight/500}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/500}",
            "tablet": "{__scales/fontWeight/500}",
            "desktop": "{__scales/fontWeight/500}"
          }
        }
      },
      "monospace": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/400}",
            "tablet": "{__scales/fontWeight/400}",
            "desktop": "{__scales/fontWeight/400}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/400}",
            "tablet": "{__scales/fontWeight/400}",
            "desktop": "{__scales/fontWeight/400}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/fontWeight/400}",
            "tablet": "{__scales/fontWeight/400}",
            "desktop": "{__scales/fontWeight/400}"
          }
        }
      }
    },
    "letterSpacing": {
      "display": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        }
      },
      "headline": {
        "h1": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        },
        "h2": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        },
        "h3": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        },
        "h4": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        },
        "h5": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        }
      },
      "title": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        }
      },
      "label": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        }
      },
      "controls": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        }
      },
      "navigation": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        }
      },
      "body": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        }
      },
      "strong": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        }
      },
      "caption": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        }
      },
      "monospace": {
        "large": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        },
        "medium": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        },
        "small": {
          "$type": "dimension",
          "$value": {
            "default": "{__scales/letterSpacing/0}",
            "tablet": "{__scales/letterSpacing/0}",
            "desktop": "{__scales/letterSpacing/0}"
          }
        }
      }
    },
    "fontStyle": {
      "italic": {
        "$type": "text",
        "$value": {
          "default": "{__scales/fontStyle/italic}",
          "tablet": "{__scales/fontStyle/italic}",
          "desktop": "{__scales/fontStyle/italic}"
        }
      },
      "normal": {
        "$type": "text",
        "$value": {
          "default": "{__scales/fontStyle/normal}",
          "tablet": "{__scales/fontStyle/normal}",
          "desktop": "{__scales/fontStyle/normal}"
        }
      }
    }
  }
}

We recommend using the Luckino Variables Import/Export JSON CSS plugin to import these tokens.

TypeScript

const scales = {
  "fontFamily": {
    "default": "Inter",
    "accent": "Inter",
    "monospace": "monospace"
  },
  "fontSize": {
    "0": 0,
    "2": 2,
    "4": 4,
    "6": 6,
    "8": 8,
    "10": 10,
    "12": 12,
    "14": 14,
    "16": 16,
    "18": 18,
    "20": 20,
    "22": 22,
    "24": 24,
    "26": 26,
    "28": 28,
    "30": 30,
    "32": 32,
    "34": 34,
    "36": 36,
    "38": 38,
    "40": 40,
    "42": 42,
    "44": 44,
    "46": 46,
    "48": 48,
    "50": 50,
    "52": 52,
    "54": 54,
    "56": 56,
    "58": 58,
    "60": 60,
    "62": 62,
    "64": 64,
    "66": 66,
    "68": 68,
    "70": 70,
    "72": 72,
    "74": 74,
    "76": 76,
    "78": 78,
    "80": 80,
    "82": 82,
    "84": 84,
    "86": 86,
    "88": 88,
    "90": 90,
    "92": 92,
    "94": 94,
    "96": 96,
    "98": 98,
    "100": 100,
    "102": 102,
    "104": 104,
    "106": 106,
    "108": 108,
    "110": 110,
    "112": 112,
    "114": 114,
    "116": 116,
    "118": 118,
    "120": 120,
    "122": 122,
    "124": 124,
    "126": 126,
    "128": 128
  },
  "fontStyle": {
    "italic": "italic",
    "normal": "normal"
  },
  "fontWeight": {
    "100": 100,
    "200": 200,
    "300": 300,
    "400": 400,
    "500": 500,
    "600": 600,
    "700": 700,
    "800": 800,
    "900": 900,
    "950": 950
  },
  "letterSpacing": {
    "0": 0,
    "1": 1,
    "2": 2,
    "neg2": -2,
    "neg1_980": -1.98,
    "neg1_960": -1.96,
    "neg1_940": -1.94,
    "neg1_920": -1.92,
    "neg1_900": -1.9,
    "neg1_880": -1.88,
    "neg1_860": -1.86,
    "neg1_840": -1.84,
    "neg1_820": -1.82,
    "neg1_800": -1.8,
    "neg1_780": -1.78,
    "neg1_760": -1.76,
    "neg1_740": -1.74,
    "neg1_720": -1.72,
    "neg1_700": -1.7,
    "neg1_680": -1.68,
    "neg1_660": -1.66,
    "neg1_640": -1.64,
    "neg1_620": -1.62,
    "neg1_600": -1.6,
    "neg1_580": -1.58,
    "neg1_560": -1.56,
    "neg1_540": -1.54,
    "neg1_520": -1.52,
    "neg1_500": -1.5,
    "neg1_480": -1.48,
    "neg1_460": -1.46,
    "neg1_440": -1.44,
    "neg1_420": -1.42,
    "neg1_400": -1.4,
    "neg1_380": -1.38,
    "neg1_360": -1.36,
    "neg1_340": -1.34,
    "neg1_320": -1.32,
    "neg1_300": -1.3,
    "neg1_280": -1.28,
    "neg1_260": -1.26,
    "neg1_240": -1.24,
    "neg1_220": -1.22,
    "neg1_200": -1.2,
    "neg1_180": -1.18,
    "neg1_160": -1.16,
    "neg1_140": -1.14,
    "neg1_120": -1.12,
    "neg1_100": -1.1,
    "neg1_080": -1.08,
    "neg1_060": -1.06,
    "neg1_040": -1.04,
    "neg1_020": -1.02,
    "neg1": -1,
    "neg0_980": -0.98,
    "neg0_960": -0.96,
    "neg0_940": -0.94,
    "neg0_920": -0.92,
    "neg0_900": -0.9,
    "neg0_880": -0.88,
    "neg0_860": -0.86,
    "neg0_840": -0.84,
    "neg0_820": -0.82,
    "neg0_800": -0.8,
    "neg0_780": -0.78,
    "neg0_760": -0.76,
    "neg0_740": -0.74,
    "neg0_720": -0.72,
    "neg0_700": -0.7,
    "neg0_680": -0.68,
    "neg0_660": -0.66,
    "neg0_640": -0.64,
    "neg0_620": -0.62,
    "neg0_600": -0.6,
    "neg0_580": -0.58,
    "neg0_560": -0.56,
    "neg0_540": -0.54,
    "neg0_520": -0.52,
    "neg0_500": -0.5,
    "neg0_480": -0.48,
    "neg0_460": -0.46,
    "neg0_440": -0.44,
    "neg0_420": -0.42,
    "neg0_400": -0.4,
    "neg0_380": -0.38,
    "neg0_360": -0.36,
    "neg0_340": -0.34,
    "neg0_320": -0.32,
    "neg0_300": -0.3,
    "neg0_280": -0.28,
    "neg0_260": -0.26,
    "neg0_240": -0.24,
    "neg0_220": -0.22,
    "neg0_200": -0.2,
    "neg0_180": -0.18,
    "neg0_160": -0.16,
    "neg0_140": -0.14,
    "neg0_120": -0.12,
    "neg0_100": -0.1,
    "neg0_080": -0.08,
    "neg0_060": -0.06,
    "neg0_040": -0.04,
    "neg0_020": -0.02,
    "0_020": 0.02,
    "0_040": 0.04,
    "0_060": 0.06,
    "0_080": 0.08,
    "0_100": 0.1,
    "0_120": 0.12,
    "0_140": 0.14,
    "0_160": 0.16,
    "0_180": 0.18,
    "0_200": 0.2,
    "0_220": 0.22,
    "0_240": 0.24,
    "0_260": 0.26,
    "0_280": 0.28,
    "0_300": 0.3,
    "0_320": 0.32,
    "0_340": 0.34,
    "0_360": 0.36,
    "0_380": 0.38,
    "0_400": 0.4,
    "0_420": 0.42,
    "0_440": 0.44,
    "0_460": 0.46,
    "0_480": 0.48,
    "0_500": 0.5,
    "0_520": 0.52,
    "0_540": 0.54,
    "0_560": 0.56,
    "0_580": 0.58,
    "0_600": 0.6,
    "0_620": 0.62,
    "0_640": 0.64,
    "0_660": 0.66,
    "0_680": 0.68,
    "0_700": 0.7,
    "0_720": 0.72,
    "0_740": 0.74,
    "0_760": 0.76,
    "0_780": 0.78,
    "0_800": 0.8,
    "0_820": 0.82,
    "0_840": 0.84,
    "0_860": 0.86,
    "0_880": 0.88,
    "0_900": 0.9,
    "0_920": 0.92,
    "0_940": 0.94,
    "0_960": 0.96,
    "0_980": 0.98,
    "1_020": 1.02,
    "1_040": 1.04,
    "1_060": 1.06,
    "1_080": 1.08,
    "1_100": 1.1,
    "1_120": 1.12,
    "1_140": 1.14,
    "1_160": 1.16,
    "1_180": 1.18,
    "1_200": 1.2,
    "1_220": 1.22,
    "1_240": 1.24,
    "1_260": 1.26,
    "1_280": 1.28,
    "1_300": 1.3,
    "1_320": 1.32,
    "1_340": 1.34,
    "1_360": 1.36,
    "1_380": 1.38,
    "1_400": 1.4,
    "1_420": 1.42,
    "1_440": 1.44,
    "1_460": 1.46,
    "1_480": 1.48,
    "1_500": 1.5,
    "1_520": 1.52,
    "1_540": 1.54,
    "1_560": 1.56,
    "1_580": 1.58,
    "1_600": 1.6,
    "1_620": 1.62,
    "1_640": 1.64,
    "1_660": 1.66,
    "1_680": 1.68,
    "1_700": 1.7,
    "1_720": 1.72,
    "1_740": 1.74,
    "1_760": 1.76,
    "1_780": 1.78,
    "1_800": 1.8,
    "1_820": 1.82,
    "1_840": 1.84,
    "1_860": 1.86,
    "1_880": 1.88,
    "1_900": 1.9,
    "1_920": 1.92,
    "1_940": 1.94,
    "1_960": 1.96,
    "1_980": 1.98
  },
  "lineHeight": {
    "0": 0,
    "2": 2,
    "4": 4,
    "6": 6,
    "8": 8,
    "10": 10,
    "12": 12,
    "14": 14,
    "16": 16,
    "18": 18,
    "20": 20,
    "22": 22,
    "24": 24,
    "26": 26,
    "28": 28,
    "30": 30,
    "32": 32,
    "34": 34,
    "36": 36,
    "38": 38,
    "40": 40,
    "42": 42,
    "44": 44,
    "46": 46,
    "48": 48,
    "50": 50,
    "52": 52,
    "54": 54,
    "56": 56,
    "58": 58,
    "60": 60,
    "62": 62,
    "64": 64,
    "66": 66,
    "68": 68,
    "70": 70,
    "72": 72,
    "74": 74,
    "76": 76,
    "78": 78,
    "80": 80,
    "82": 82,
    "84": 84,
    "86": 86,
    "88": 88,
    "90": 90,
    "92": 92,
    "94": 94,
    "96": 96,
    "98": 98,
    "100": 100,
    "102": 102,
    "104": 104,
    "106": 106,
    "108": 108,
    "110": 110,
    "112": 112,
    "114": 114,
    "116": 116,
    "118": 118,
    "120": 120,
    "122": 122,
    "124": 124,
    "126": 126,
    "128": 128
  }
} as const;

export const tokens = {
  "default": {
    "fontFamily": {
      "display": scales.fontFamily.accent,
      "headline": scales.fontFamily.accent,
      "title": scales.fontFamily.accent,
      "body": scales.fontFamily.default,
      "strong": scales.fontFamily.default,
      "label": scales.fontFamily.default,
      "controls": scales.fontFamily.default,
      "navigation": scales.fontFamily.default,
      "caption": scales.fontFamily.default,
      "monospace": scales.fontFamily.monospace
    },
    "fontWeight": {
      "display": {
        "large": scales.fontWeight[500],
        "medium": scales.fontWeight[500],
        "small": scales.fontWeight[500]
      },
      "headline": {
        "h1": scales.fontWeight[800],
        "h2": scales.fontWeight[800],
        "h3": scales.fontWeight[800],
        "h4": scales.fontWeight[800],
        "h5": scales.fontWeight[800]
      },
      "title": {
        "large": scales.fontWeight[700],
        "medium": scales.fontWeight[700],
        "small": scales.fontWeight[700]
      },
      "label": {
        "large": scales.fontWeight[500],
        "medium": scales.fontWeight[500],
        "small": scales.fontWeight[500]
      },
      "controls": {
        "large": scales.fontWeight[500],
        "medium": scales.fontWeight[500],
        "small": scales.fontWeight[500]
      },
      "navigation": {
        "large": scales.fontWeight[500],
        "medium": scales.fontWeight[500],
        "small": scales.fontWeight[500]
      },
      "body": {
        "large": scales.fontWeight[400],
        "medium": scales.fontWeight[400],
        "small": scales.fontWeight[400]
      },
      "strong": {
        "large": scales.fontWeight[700],
        "medium": scales.fontWeight[700],
        "small": scales.fontWeight[700]
      },
      "caption": {
        "large": scales.fontWeight[500],
        "medium": scales.fontWeight[500],
        "small": scales.fontWeight[500]
      },
      "monospace": {
        "large": scales.fontWeight[400],
        "medium": scales.fontWeight[400],
        "small": scales.fontWeight[400]
      }
    },
    "letterSpacing": {
      "display": {
        "large": scales.letterSpacing[0],
        "medium": scales.letterSpacing[0],
        "small": scales.letterSpacing[0]
      },
      "headline": {
        "h1": scales.letterSpacing[0],
        "h2": scales.letterSpacing[0],
        "h3": scales.letterSpacing[0],
        "h4": scales.letterSpacing[0],
        "h5": scales.letterSpacing[0]
      },
      "title": {
        "large": scales.letterSpacing[0],
        "medium": scales.letterSpacing[0],
        "small": scales.letterSpacing[0]
      },
      "label": {
        "large": scales.letterSpacing[0],
        "medium": scales.letterSpacing[0],
        "small": scales.letterSpacing[0]
      },
      "controls": {
        "large": scales.letterSpacing[0],
        "medium": scales.letterSpacing[0],
        "small": scales.letterSpacing[0]
      },
      "navigation": {
        "large": scales.letterSpacing[0],
        "medium": scales.letterSpacing[0],
        "small": scales.letterSpacing[0]
      },
      "body": {
        "large": scales.letterSpacing[0],
        "medium": scales.letterSpacing[0],
        "small": scales.letterSpacing[0]
      },
      "strong": {
        "large": scales.letterSpacing[0],
        "medium": scales.letterSpacing[0],
        "small": scales.letterSpacing[0]
      },
      "caption": {
        "large": scales.letterSpacing[0],
        "medium": scales.letterSpacing[0],
        "small": scales.letterSpacing[0]
      },
      "monospace": {
        "large": scales.letterSpacing[0],
        "medium": scales.letterSpacing[0],
        "small": scales.letterSpacing[0]
      }
    },
    "fontStyle": {
      "italic": scales.fontStyle.italic,
      "normal": scales.fontStyle.normal
    }
  },
  "large": {
    "fontSize": {
      "display": {
        "default": scales.fontSize[56],
        "tablet": scales.fontSize[64],
        "desktop": scales.fontSize[64]
      },
      "title": {
        "default": scales.fontSize[16],
        "tablet": scales.fontSize[16],
        "desktop": scales.fontSize[16]
      },
      "label": {
        "default": scales.fontSize[16],
        "tablet": scales.fontSize[16],
        "desktop": scales.fontSize[16]
      },
      "controls": {
        "default": scales.fontSize[16],
        "tablet": scales.fontSize[16],
        "desktop": scales.fontSize[16]
      },
      "navigation": {
        "default": scales.fontSize[16],
        "tablet": scales.fontSize[16],
        "desktop": scales.fontSize[16]
      },
      "body": {
        "default": scales.fontSize[16],
        "tablet": scales.fontSize[16],
        "desktop": scales.fontSize[16]
      },
      "strong": {
        "default": scales.fontSize[16],
        "tablet": scales.fontSize[16],
        "desktop": scales.fontSize[16]
      },
      "caption": {
        "default": scales.fontSize[16],
        "tablet": scales.fontSize[16],
        "desktop": scales.fontSize[16]
      },
      "monospace": {
        "default": scales.fontSize[16],
        "tablet": scales.fontSize[16],
        "desktop": scales.fontSize[16]
      }
    },
    "lineHeight": {
      "display": {
        "default": scales.lineHeight[56],
        "tablet": scales.lineHeight[64],
        "desktop": scales.lineHeight[64]
      },
      "title": {
        "default": scales.lineHeight[24],
        "tablet": scales.lineHeight[24],
        "desktop": scales.lineHeight[24]
      },
      "label": {
        "default": scales.lineHeight[24],
        "tablet": scales.lineHeight[24],
        "desktop": scales.lineHeight[24]
      },
      "controls": {
        "default": scales.lineHeight[24],
        "tablet": scales.lineHeight[24],
        "desktop": scales.lineHeight[24]
      },
      "navigation": {
        "default": scales.lineHeight[24],
        "tablet": scales.lineHeight[24],
        "desktop": scales.lineHeight[24]
      },
      "body": {
        "default": scales.lineHeight[24],
        "tablet": scales.lineHeight[24],
        "desktop": scales.lineHeight[24]
      },
      "strong": {
        "default": scales.lineHeight[24],
        "tablet": scales.lineHeight[24],
        "desktop": scales.lineHeight[24]
      },
      "caption": {
        "default": scales.lineHeight[24],
        "tablet": scales.lineHeight[24],
        "desktop": scales.lineHeight[24]
      },
      "monospace": {
        "default": scales.lineHeight[24],
        "tablet": scales.lineHeight[24],
        "desktop": scales.lineHeight[24]
      }
    }
  },
  "medium": {
    "fontSize": {
      "display": {
        "default": scales.fontSize[48],
        "tablet": scales.fontSize[56],
        "desktop": scales.fontSize[56]
      },
      "title": {
        "default": scales.fontSize[14],
        "tablet": scales.fontSize[14],
        "desktop": scales.fontSize[14]
      },
      "label": {
        "default": scales.fontSize[14],
        "tablet": scales.fontSize[14],
        "desktop": scales.fontSize[14]
      },
      "controls": {
        "default": scales.fontSize[14],
        "tablet": scales.fontSize[14],
        "desktop": scales.fontSize[14]
      },
      "navigation": {
        "default": scales.fontSize[14],
        "tablet": scales.fontSize[14],
        "desktop": scales.fontSize[14]
      },
      "body": {
        "default": scales.fontSize[14],
        "tablet": scales.fontSize[14],
        "desktop": scales.fontSize[14]
      },
      "strong": {
        "default": scales.fontSize[14],
        "tablet": scales.fontSize[14],
        "desktop": scales.fontSize[14]
      },
      "caption": {
        "default": scales.fontSize[14],
        "tablet": scales.fontSize[14],
        "desktop": scales.fontSize[14]
      },
      "monospace": {
        "default": scales.fontSize[14],
        "tablet": scales.fontSize[14],
        "desktop": scales.fontSize[14]
      }
    },
    "lineHeight": {
      "display": {
        "default": scales.lineHeight[48],
        "tablet": scales.lineHeight[56],
        "desktop": scales.lineHeight[56]
      },
      "title": {
        "default": scales.lineHeight[20],
        "tablet": scales.lineHeight[20],
        "desktop": scales.lineHeight[20]
      },
      "label": {
        "default": scales.lineHeight[20],
        "tablet": scales.lineHeight[20],
        "desktop": scales.lineHeight[20]
      },
      "controls": {
        "default": scales.lineHeight[20],
        "tablet": scales.lineHeight[20],
        "desktop": scales.lineHeight[20]
      },
      "navigation": {
        "default": scales.lineHeight[20],
        "tablet": scales.lineHeight[20],
        "desktop": scales.lineHeight[20]
      },
      "body": {
        "default": scales.lineHeight[20],
        "tablet": scales.lineHeight[20],
        "desktop": scales.lineHeight[20]
      },
      "strong": {
        "default": scales.lineHeight[20],
        "tablet": scales.lineHeight[20],
        "desktop": scales.lineHeight[20]
      },
      "caption": {
        "default": scales.lineHeight[20],
        "tablet": scales.lineHeight[20],
        "desktop": scales.lineHeight[20]
      },
      "monospace": {
        "default": scales.lineHeight[20],
        "tablet": scales.lineHeight[20],
        "desktop": scales.lineHeight[20]
      }
    }
  },
  "small": {
    "fontSize": {
      "display": {
        "default": scales.fontSize[40],
        "tablet": scales.fontSize[48],
        "desktop": scales.fontSize[48]
      },
      "title": {
        "default": scales.fontSize[12],
        "tablet": scales.fontSize[12],
        "desktop": scales.fontSize[12]
      },
      "label": {
        "default": scales.fontSize[12],
        "tablet": scales.fontSize[12],
        "desktop": scales.fontSize[12]
      },
      "controls": {
        "default": scales.fontSize[12],
        "tablet": scales.fontSize[12],
        "desktop": scales.fontSize[12]
      },
      "navigation": {
        "default": scales.fontSize[12],
        "tablet": scales.fontSize[12],
        "desktop": scales.fontSize[12]
      },
      "body": {
        "default": scales.fontSize[12],
        "tablet": scales.fontSize[12],
        "desktop": scales.fontSize[12]
      },
      "strong": {
        "default": scales.fontSize[12],
        "tablet": scales.fontSize[12],
        "desktop": scales.fontSize[12]
      },
      "caption": {
        "default": scales.fontSize[12],
        "tablet": scales.fontSize[12],
        "desktop": scales.fontSize[12]
      },
      "monospace": {
        "default": scales.fontSize[12],
        "tablet": scales.fontSize[12],
        "desktop": scales.fontSize[12]
      }
    },
    "lineHeight": {
      "display": {
        "default": scales.lineHeight[40],
        "tablet": scales.lineHeight[48],
        "desktop": scales.lineHeight[48]
      },
      "title": {
        "default": scales.lineHeight[16],
        "tablet": scales.lineHeight[16],
        "desktop": scales.lineHeight[16]
      },
      "label": {
        "default": scales.lineHeight[16],
        "tablet": scales.lineHeight[16],
        "desktop": scales.lineHeight[16]
      },
      "controls": {
        "default": scales.lineHeight[16],
        "tablet": scales.lineHeight[16],
        "desktop": scales.lineHeight[16]
      },
      "navigation": {
        "default": scales.lineHeight[16],
        "tablet": scales.lineHeight[16],
        "desktop": scales.lineHeight[16]
      },
      "body": {
        "default": scales.lineHeight[16],
        "tablet": scales.lineHeight[16],
        "desktop": scales.lineHeight[16]
      },
      "strong": {
        "default": scales.lineHeight[16],
        "tablet": scales.lineHeight[16],
        "desktop": scales.lineHeight[16]
      },
      "caption": {
        "default": scales.lineHeight[16],
        "tablet": scales.lineHeight[16],
        "desktop": scales.lineHeight[16]
      },
      "monospace": {
        "default": scales.lineHeight[16],
        "tablet": scales.lineHeight[16],
        "desktop": scales.lineHeight[16]
      }
    }
  },
  "h1": {
    "fontSize": {
      "headline": {
        "default": scales.fontSize[40],
        "tablet": scales.fontSize[40],
        "desktop": scales.fontSize[40]
      }
    },
    "lineHeight": {
      "headline": {
        "default": scales.lineHeight[40],
        "tablet": scales.lineHeight[40],
        "desktop": scales.lineHeight[40]
      }
    }
  },
  "h2": {
    "fontSize": {
      "headline": {
        "default": scales.fontSize[32],
        "tablet": scales.fontSize[32],
        "desktop": scales.fontSize[32]
      }
    },
    "lineHeight": {
      "headline": {
        "default": scales.lineHeight[32],
        "tablet": scales.lineHeight[32],
        "desktop": scales.lineHeight[32]
      }
    }
  },
  "h3": {
    "fontSize": {
      "headline": {
        "default": scales.fontSize[24],
        "tablet": scales.fontSize[24],
        "desktop": scales.fontSize[24]
      }
    },
    "lineHeight": {
      "headline": {
        "default": scales.lineHeight[24],
        "tablet": scales.lineHeight[24],
        "desktop": scales.lineHeight[24]
      }
    }
  },
  "h4": {
    "fontSize": {
      "headline": {
        "default": scales.fontSize[20],
        "tablet": scales.fontSize[20],
        "desktop": scales.fontSize[20]
      }
    },
    "lineHeight": {
      "headline": {
        "default": scales.lineHeight[20],
        "tablet": scales.lineHeight[20],
        "desktop": scales.lineHeight[20]
      }
    }
  },
  "h5": {
    "fontSize": {
      "headline": {
        "default": scales.fontSize[18],
        "tablet": scales.fontSize[18],
        "desktop": scales.fontSize[18]
      }
    },
    "lineHeight": {
      "headline": {
        "default": scales.lineHeight[18],
        "tablet": scales.lineHeight[18],
        "desktop": scales.lineHeight[18]
      }
    }
  }
} as const;

Up Next

---

Dimension Tokens

Dimension tokens define consistent dimension values used for margins, paddings, and gaps in our components.

Dimension Tokens ->