Skip to main content

Typo

Globals

Normal

Token name / Figma path
Composition
$typo-normal-125
font-family: $font-family-primary
font-size: $font-size-125
line-height: $font-lineHeight-value-200
font-weight: $font-weight-400
letter-spacing: $font-letterSpacing-200
T
$typo-normal-150
font-family: $font-family-primary
font-size: $font-size-150
line-height: $font-lineHeight-value-250
font-weight: $font-weight-400
letter-spacing: $font-letterSpacing-200
T
$typo-normal-175
font-family: $font-family-primary
font-size: $font-size-175
line-height: $font-lineHeight-value-300
font-weight: $font-weight-400
letter-spacing: $font-letterSpacing-200
T
$typo-normal-200
font-family: $font-family-primary
font-size: $font-size-200
line-height: $font-lineHeight-value-350
font-weight: $font-weight-400
letter-spacing: $font-letterSpacing-200
T
$typo-normal-225
font-family: $font-family-primary
font-size: $font-size-225
line-height: $font-lineHeight-value-400
font-weight: $font-weight-400
letter-spacing: $font-letterSpacing-200
T
$typo-normal-300
font-family: $font-family-primary
font-size: $font-size-300
line-height: $font-lineHeight-value-450
font-weight: $font-weight-400
letter-spacing: $font-letterSpacing-200
T
$typo-normal-400
font-family: $font-family-primary
font-size: $font-size-400
line-height: $font-lineHeight-value-550
font-weight: $font-weight-400
letter-spacing: $font-letterSpacing-200
T
$typo-normal-500
font-family: $font-family-primary
font-size: $font-size-500
line-height: $font-lineHeight-value-700
font-weight: $font-weight-400
letter-spacing: $font-letterSpacing-200
T
$typo-normal-600
font-family: $font-family-primary
font-size: $font-size-600
line-height: $font-lineHeight-value-800
font-weight: $font-weight-400
letter-spacing: $font-letterSpacing-200
T

Medium

Token name / Figma path
Composition
$typo-medium-125
font-family: $font-family-primary
font-size: $font-size-125
line-height: $font-lineHeight-value-200
font-weight: $font-weight-450
letter-spacing: $font-letterSpacing-200
T
$typo-medium-150
font-family: $font-family-primary
font-size: $font-size-150
line-height: $font-lineHeight-value-250
font-weight: $font-weight-450
letter-spacing: $font-letterSpacing-200
T
$typo-medium-175
font-family: $font-family-primary
font-size: $font-size-175
line-height: $font-lineHeight-value-300
font-weight: $font-weight-450
letter-spacing: $font-letterSpacing-200
T
$typo-medium-200
font-family: $font-family-primary
font-size: $font-size-200
line-height: $font-lineHeight-value-350
font-weight: $font-weight-450
letter-spacing: $font-letterSpacing-200
T
$typo-medium-225
font-family: $font-family-primary
font-size: $font-size-225
line-height: $font-lineHeight-value-400
font-weight: $font-weight-450
letter-spacing: $font-letterSpacing-0
T
$typo-medium-300
font-family: $font-family-primary
font-size: $font-size-300
line-height: $font-lineHeight-value-450
font-weight: $font-weight-450
letter-spacing: $font-letterSpacing-0
T
$typo-medium-400
font-family: $font-family-primary
font-size: $font-size-400
line-height: $font-lineHeight-value-550
font-weight: $font-weight-450
letter-spacing: $font-letterSpacing-0
T
$typo-medium-500
font-family: $font-family-primary
font-size: $font-size-500
line-height: $font-lineHeight-value-700
font-weight: $font-weight-450
letter-spacing: $font-letterSpacing-0
T
$typo-medium-600
font-family: $font-family-primary
font-size: $font-size-600
line-height: $font-lineHeight-value-800
font-weight: $font-weight-450
letter-spacing: $font-letterSpacing-0
T

Strong

Token name / Figma path
Composition
$typo-strong-125
font-family: $font-family-primary
font-size: $font-size-125
line-height: $font-lineHeight-value-200
font-weight: $font-weight-600
letter-spacing: $font-letterSpacing-200
T
$typo-strong-150
font-family: $font-family-primary
font-size: $font-size-150
line-height: $font-lineHeight-value-250
font-weight: $font-weight-600
letter-spacing: $font-letterSpacing-200
T
$typo-strong-175
font-family: $font-family-primary
font-size: $font-size-175
line-height: $font-lineHeight-value-300
font-weight: $font-weight-600
letter-spacing: $font-letterSpacing-200
T
$typo-strong-200
font-family: $font-family-primary
font-size: $font-size-200
line-height: $font-lineHeight-value-350
font-weight: $font-weight-600
letter-spacing: $font-letterSpacing-200
T
$typo-strong-225
font-family: $font-family-primary
font-size: $font-size-225
line-height: $font-lineHeight-value-400
font-weight: $font-weight-600
letter-spacing: $font-letterSpacing-0
T
$typo-strong-300
font-family: $font-family-primary
font-size: $font-size-300
line-height: $font-lineHeight-value-450
font-weight: $font-weight-600
letter-spacing: $font-letterSpacing-0
T
$typo-strong-400
font-family: $font-family-primary
font-size: $font-size-400
line-height: $font-lineHeight-value-550
font-weight: $font-weight-600
letter-spacing: $font-letterSpacing-0
T
$typo-strong-500
font-family: $font-family-primary
font-size: $font-size-500
line-height: $font-lineHeight-value-700
font-weight: $font-weight-600
letter-spacing: $font-letterSpacing-0
T
$typo-strong-600
font-family: $font-family-primary
font-size: $font-size-600
line-height: $font-lineHeight-value-800
font-weight: $font-weight-600
letter-spacing: $font-letterSpacing-0
T

Aliases

Body

Token name / Figma path
Composition
$typo-body-large
font-family: $font-family-primary
font-size: $font-size-200
line-height: $font-lineHeight-value-350
font-weight: $font-weight-450
letter-spacing: $font-letterSpacing-200
T
$typo-body-medium
font-family: $font-family-primary
font-size: $font-size-175
line-height: $font-lineHeight-value-300
font-weight: $font-weight-450
letter-spacing: $font-letterSpacing-200
T
$typo-body-small
font-family: $font-family-primary
font-size: $font-size-150
line-height: $font-lineHeight-value-250
font-weight: $font-weight-450
letter-spacing: $font-letterSpacing-200
T
$typo-body-xSmall
font-family: $font-family-primary
font-size: $font-size-125
line-height: $font-lineHeight-value-200
font-weight: $font-weight-450
letter-spacing: $font-letterSpacing-200
T
$typo-body-strong-large
font-family: $font-family-primary
font-size: $font-size-200
line-height: $font-lineHeight-value-350
font-weight: $font-weight-600
letter-spacing: $font-letterSpacing-200
T
$typo-body-strong-medium
font-family: $font-family-primary
font-size: $font-size-175
line-height: $font-lineHeight-value-300
font-weight: $font-weight-600
letter-spacing: $font-letterSpacing-200
T
$typo-body-strong-small
font-family: $font-family-primary
font-size: $font-size-150
line-height: $font-lineHeight-value-250
font-weight: $font-weight-600
letter-spacing: $font-letterSpacing-200
T
$typo-body-strong-xSmall
font-family: $font-family-primary
font-size: $font-size-125
line-height: $font-lineHeight-value-200
font-weight: $font-weight-600
letter-spacing: $font-letterSpacing-200
T

Hero

Token name / Figma path
Composition
$typo-hero-large
font-family: $font-family-primary
font-size: $font-size-500
line-height: $font-lineHeight-value-700
font-weight: $font-weight-600
letter-spacing: $font-letterSpacing-0
T
$typo-hero-medium
font-family: $font-family-primary
font-size: $font-size-600
line-height: $font-lineHeight-value-800
font-weight: $font-weight-600
letter-spacing: $font-letterSpacing-0
T

Header

Token name / Figma path
Composition
$typo-header-4xLarge
font-family: $font-family-primary
font-size: $font-size-400
line-height: $font-lineHeight-value-550
font-weight: $font-weight-600
letter-spacing: $font-letterSpacing-0
T
$typo-header-3xLarge
font-family: $font-family-primary
font-size: $font-size-300
line-height: $font-lineHeight-value-450
font-weight: $font-weight-600
letter-spacing: $font-letterSpacing-0
T
$typo-header-xLarge
font-family: $font-family-primary
font-size: $font-size-225
line-height: $font-lineHeight-value-400
font-weight: $font-weight-600
letter-spacing: $font-letterSpacing-0
T
$typo-header-large
font-family: $font-family-primary
font-size: $font-size-200
line-height: $font-lineHeight-value-350
font-weight: $font-weight-600
letter-spacing: $font-letterSpacing-200
T
$typo-header-medium
font-family: $font-family-primary
font-size: $font-size-175
line-height: $font-lineHeight-value-300
font-weight: $font-weight-600
letter-spacing: $font-letterSpacing-200
T
$typo-header-small
font-family: $font-family-primary
font-size: $font-size-150
line-height: $font-lineHeight-value-250
font-weight: $font-weight-600
letter-spacing: $font-letterSpacing-200
T