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	Inter
fontFamily.headline	Inter
fontFamily.title	Inter
fontFamily.body	Inter
fontFamily.label	Inter
fontFamily.caption	Inter
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 / 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 / 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 / body

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

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 / body

Token name	Value
letterSpacing.body.large	0px
letterSpacing.body.medium	0px
letterSpacing.body.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 / 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 / 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

/**
 * Private properties (not for direct usage or editing):
 */
:root {
  ----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:
 */
:root {
  --fontFamily--display: var(----fontFamily--accent, Inter);
  --fontFamily--headline: var(----fontFamily--accent, Inter);
  --fontFamily--title: var(----fontFamily--accent, Inter);
  --fontFamily--body: var(----fontFamily--accent, Inter);
  --fontFamily--label: var(----fontFamily--accent, Inter);
  --fontFamily--caption: var(----fontFamily--accent, Inter);
  --fontFamily--monospace: var(----fontFamily--monospace, monospace);
  --fontSize--display-large: var(----fontSize--56, 56px);
  --fontSize--display-medium: var(----fontSize--48, 48px);
  --fontSize--display-small: var(----fontSize--40, 40px);
  --lineHeight--display-large: var(----lineHeight--56, 56px);
  --lineHeight--display-medium: var(----lineHeight--48, 48px);
  --lineHeight--display-small: var(----lineHeight--40, 40px);
  --fontWeight--display-large: var(----fontWeight--500, 500);
  --fontWeight--display-medium: var(----fontWeight--500, 500);
  --fontWeight--display-small: var(----fontWeight--500, 500);
  --letterSpacing--display-large: var(----letterSpacing--0, 0px);
  --letterSpacing--display-medium: var(----letterSpacing--0, 0px);
  --letterSpacing--display-small: var(----letterSpacing--0, 0px);
  --fontSize--headline-h1: var(----fontSize--40, 40px);
  --fontSize--headline-h2: var(----fontSize--32, 32px);
  --fontSize--headline-h3: var(----fontSize--24, 24px);
  --fontSize--headline-h4: var(----fontSize--20, 20px);
  --fontSize--headline-h5: var(----fontSize--18, 18px);
  --lineHeight--headline-h1: var(----lineHeight--40, 40px);
  --lineHeight--headline-h2: var(----lineHeight--32, 32px);
  --lineHeight--headline-h3: var(----lineHeight--24, 24px);
  --lineHeight--headline-h4: var(----lineHeight--20, 20px);
  --lineHeight--headline-h5: var(----lineHeight--18, 18px);
  --fontWeight--headline-h1: var(----fontWeight--800, 800);
  --fontWeight--headline-h2: var(----fontWeight--800, 800);
  --fontWeight--headline-h3: var(----fontWeight--800, 800);
  --fontWeight--headline-h4: var(----fontWeight--800, 800);
  --fontWeight--headline-h5: var(----fontWeight--800, 800);
  --letterSpacing--headline-h1: var(----letterSpacing--0, 0px);
  --letterSpacing--headline-h2: var(----letterSpacing--0, 0px);
  --letterSpacing--headline-h3: var(----letterSpacing--0, 0px);
  --letterSpacing--headline-h4: var(----letterSpacing--0, 0px);
  --letterSpacing--headline-h5: var(----letterSpacing--0, 0px);
  --fontSize--title-large: var(----fontSize--16, 16px);
  --fontSize--title-medium: var(----fontSize--14, 14px);
  --fontSize--title-small: var(----fontSize--12, 12px);
  --lineHeight--title-large: var(----lineHeight--24, 24px);
  --lineHeight--title-medium: var(----lineHeight--20, 20px);
  --lineHeight--title-small: var(----lineHeight--16, 16px);
  --fontWeight--title-large: var(----fontWeight--700, 700);
  --fontWeight--title-medium: var(----fontWeight--700, 700);
  --fontWeight--title-small: var(----fontWeight--700, 700);
  --letterSpacing--title-large: var(----letterSpacing--0, 0px);
  --letterSpacing--title-medium: var(----letterSpacing--0, 0px);
  --letterSpacing--title-small: var(----letterSpacing--0, 0px);
  --fontSize--label-large: var(----fontSize--16, 16px);
  --fontSize--label-medium: var(----fontSize--14, 14px);
  --fontSize--label-small: var(----fontSize--12, 12px);
  --lineHeight--label-large: var(----lineHeight--24, 24px);
  --lineHeight--label-medium: var(----lineHeight--20, 20px);
  --lineHeight--label-small: var(----lineHeight--16, 16px);
  --fontWeight--label-large: var(----fontWeight--500, 500);
  --fontWeight--label-medium: var(----fontWeight--500, 500);
  --fontWeight--label-small: var(----fontWeight--500, 500);
  --letterSpacing--label-large: var(----letterSpacing--0, 0px);
  --letterSpacing--label-medium: var(----letterSpacing--0, 0px);
  --letterSpacing--label-small: var(----letterSpacing--0, 0px);
  --fontSize--body-large: var(----fontSize--16, 16px);
  --fontSize--body-medium: var(----fontSize--14, 14px);
  --fontSize--body-small: var(----fontSize--12, 12px);
  --lineHeight--body-large: var(----lineHeight--24, 24px);
  --lineHeight--body-medium: var(----lineHeight--20, 20px);
  --lineHeight--body-small: var(----lineHeight--16, 16px);
  --fontWeight--body-large: var(----fontWeight--400, 400);
  --fontWeight--body-medium: var(----fontWeight--400, 400);
  --fontWeight--body-small: var(----fontWeight--400, 400);
  --letterSpacing--body-large: var(----letterSpacing--0, 0px);
  --letterSpacing--body-medium: var(----letterSpacing--0, 0px);
  --letterSpacing--body-small: var(----letterSpacing--0, 0px);
  --fontSize--caption-large: var(----fontSize--16, 16px);
  --fontSize--caption-medium: var(----fontSize--14, 14px);
  --fontSize--caption-small: var(----fontSize--12, 12px);
  --lineHeight--caption-large: var(----lineHeight--24, 24px);
  --lineHeight--caption-medium: var(----lineHeight--20, 20px);
  --lineHeight--caption-small: var(----lineHeight--16, 16px);
  --fontWeight--caption-large: var(----fontWeight--500, 500);
  --fontWeight--caption-medium: var(----fontWeight--500, 500);
  --fontWeight--caption-small: var(----fontWeight--500, 500);
  --letterSpacing--caption-large: var(----letterSpacing--0, 0px);
  --letterSpacing--caption-medium: var(----letterSpacing--0, 0px);
  --letterSpacing--caption-small: var(----letterSpacing--0, 0px);
  --fontSize--monospace-large: var(----fontSize--16, 16px);
  --fontSize--monospace-medium: var(----fontSize--14, 14px);
  --fontSize--monospace-small: var(----fontSize--12, 12px);
  --lineHeight--monospace-large: var(----lineHeight--24, 24px);
  --lineHeight--monospace-medium: var(----lineHeight--20, 20px);
  --lineHeight--monospace-small: var(----lineHeight--16, 16px);
  --fontWeight--monospace-large: var(----fontWeight--400, 400);
  --fontWeight--monospace-medium: var(----fontWeight--400, 400);
  --fontWeight--monospace-small: var(----fontWeight--400, 400);
  --letterSpacing--monospace-large: var(----letterSpacing--0, 0px);
  --letterSpacing--monospace-medium: var(----letterSpacing--0, 0px);
  --letterSpacing--monospace-small: var(----letterSpacing--0, 0px);
  --fontStyle--italic: italic;
  --fontStyle--normal: normal;
}
@media (min-width: 960px){
  :root {
    --fontSize--display-large: var(----fontSize--64, 64px);
    --fontSize--display-medium: var(----fontSize--56, 56px);
    --fontSize--display-small: var(----fontSize--48, 48px);
    
    --lineHeight--display-large: var(----lineHeight--64, 64px);
    --lineHeight--display-medium: var(----lineHeight--56, 56px);
    --lineHeight--display-small: var(----lineHeight--48, 48px);
    
    --fontSize--headline-h1: var(----fontSize--40, 40px);
    --fontSize--headline-h2: var(----fontSize--32, 32px);
    --fontSize--headline-h3: var(----fontSize--24, 24px);
    --fontSize--headline-h4: var(----fontSize--20, 20px);
    --fontSize--headline-h5: var(----fontSize--18, 18px);
    
    --lineHeight--headline-h1: var(----lineHeight--40, 40px);
    --lineHeight--headline-h2: var(----lineHeight--32, 32px);
    --lineHeight--headline-h3: var(----lineHeight--24, 24px);
    --lineHeight--headline-h4: var(----lineHeight--20, 20px);
    --lineHeight--headline-h5: var(----lineHeight--18, 18px);
    
    --fontSize--title-large: var(----fontSize--16, 16px);
    --fontSize--title-medium: var(----fontSize--14, 14px);
    --fontSize--title-small: var(----fontSize--12, 12px);
    
    --lineHeight--title-large: var(----lineHeight--24, 24px);
    --lineHeight--title-medium: var(----lineHeight--20, 20px);
    --lineHeight--title-small: var(----lineHeight--16, 16px);
    
    --fontSize--label-large: var(----fontSize--16, 16px);
    --fontSize--label-medium: var(----fontSize--14, 14px);
    --fontSize--label-small: var(----fontSize--12, 12px);
    
    --lineHeight--label-large: var(----lineHeight--24, 24px);
    --lineHeight--label-medium: var(----lineHeight--20, 20px);
    --lineHeight--label-small: var(----lineHeight--16, 16px);
    
    --fontSize--body-large: var(----fontSize--16, 16px);
    --fontSize--body-medium: var(----fontSize--14, 14px);
    --fontSize--body-small: var(----fontSize--12, 12px);
    
    --lineHeight--body-large: var(----lineHeight--24, 24px);
    --lineHeight--body-medium: var(----lineHeight--20, 20px);
    --lineHeight--body-small: var(----lineHeight--16, 16px);
    
    --fontSize--caption-large: var(----fontSize--16, 16px);
    --fontSize--caption-medium: var(----fontSize--14, 14px);
    --fontSize--caption-small: var(----fontSize--12, 12px);
    
    --lineHeight--caption-large: var(----lineHeight--24, 24px);
    --lineHeight--caption-medium: var(----lineHeight--20, 20px);
    --lineHeight--caption-small: var(----lineHeight--16, 16px);
    
    --fontSize--monospace-large: var(----fontSize--16, 16px);
    --fontSize--monospace-medium: var(----fontSize--14, 14px);
    --fontSize--monospace-small: var(----fontSize--12, 12px);
    
    --lineHeight--monospace-large: var(----lineHeight--24, 24px);
    --lineHeight--monospace-medium: var(----lineHeight--20, 20px);
    --lineHeight--monospace-small: var(----lineHeight--16, 16px);
  }
}
@media (min-width: 1440px){
  :root {
    --fontSize--display-large: var(----fontSize--64, 64px);
    --fontSize--display-medium: var(----fontSize--56, 56px);
    --fontSize--display-small: var(----fontSize--48, 48px);
    
    --lineHeight--display-large: var(----lineHeight--64, 64px);
    --lineHeight--display-medium: var(----lineHeight--56, 56px);
    --lineHeight--display-small: var(----lineHeight--48, 48px);
    
    --fontSize--headline-h1: var(----fontSize--40, 40px);
    --fontSize--headline-h2: var(----fontSize--32, 32px);
    --fontSize--headline-h3: var(----fontSize--24, 24px);
    --fontSize--headline-h4: var(----fontSize--20, 20px);
    --fontSize--headline-h5: var(----fontSize--18, 18px);
    
    --lineHeight--headline-h1: var(----lineHeight--40, 40px);
    --lineHeight--headline-h2: var(----lineHeight--32, 32px);
    --lineHeight--headline-h3: var(----lineHeight--24, 24px);
    --lineHeight--headline-h4: var(----lineHeight--20, 20px);
    --lineHeight--headline-h5: var(----lineHeight--18, 18px);
    
    --fontSize--title-large: var(----fontSize--16, 16px);
    --fontSize--title-medium: var(----fontSize--14, 14px);
    --fontSize--title-small: var(----fontSize--12, 12px);
    
    --lineHeight--title-large: var(----lineHeight--24, 24px);
    --lineHeight--title-medium: var(----lineHeight--20, 20px);
    --lineHeight--title-small: var(----lineHeight--16, 16px);
    
    --fontSize--label-large: var(----fontSize--16, 16px);
    --fontSize--label-medium: var(----fontSize--14, 14px);
    --fontSize--label-small: var(----fontSize--12, 12px);
    
    --lineHeight--label-large: var(----lineHeight--24, 24px);
    --lineHeight--label-medium: var(----lineHeight--20, 20px);
    --lineHeight--label-small: var(----lineHeight--16, 16px);
    
    --fontSize--body-large: var(----fontSize--16, 16px);
    --fontSize--body-medium: var(----fontSize--14, 14px);
    --fontSize--body-small: var(----fontSize--12, 12px);
    
    --lineHeight--body-large: var(----lineHeight--24, 24px);
    --lineHeight--body-medium: var(----lineHeight--20, 20px);
    --lineHeight--body-small: var(----lineHeight--16, 16px);
    
    --fontSize--caption-large: var(----fontSize--16, 16px);
    --fontSize--caption-medium: var(----fontSize--14, 14px);
    --fontSize--caption-small: var(----fontSize--12, 12px);
    
    --lineHeight--caption-large: var(----lineHeight--24, 24px);
    --lineHeight--caption-medium: var(----lineHeight--20, 20px);
    --lineHeight--caption-small: var(----lineHeight--16, 16px);
    
    --fontSize--monospace-large: var(----fontSize--16, 16px);
    --fontSize--monospace-medium: var(----fontSize--14, 14px);
    --fontSize--monospace-small: var(----fontSize--12, 12px);
    
    --lineHeight--monospace-large: var(----lineHeight--24, 24px);
    --lineHeight--monospace-medium: var(----lineHeight--20, 20px);
    --lineHeight--monospace-small: var(----lineHeight--16, 16px);
  }
}

Figma JSON

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

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

React Native

TBD

Up Next

---

Dimension Tokens

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

Dimension Tokens ->