Type

Typography tokens — font families, sizes, weights, and line heights.

Font / family

Name
Token
Value
aptos
$type-font-family-aptos
aptos
jetbrains mono
$type-font-family-jetbrains-mono
jetbrains mono
sohne
$type-font-family-sohne
sohne

Font / height

Name
Token
Value
2xl
$type-font-height-2xl
$spacing-unit-32
3xl
$type-font-height-3xl
↗ library ref
4xl
$type-font-height-4xl
↗ library ref
5xl
$type-font-height-5xl
↗ library ref
6xl
$type-font-height-6xl
↗ library ref
7xl
$type-font-height-7xl
$spacing-unit-60
8xl
$type-font-height-8xl
↗ library ref
9xl
$type-font-height-9xl
↗ library ref
10xl
$type-font-height-10xl
$spacing-unit-88
11xl
$type-font-height-11xl
$spacing-unit-96
13xl
$type-font-height-13xl
$spacing-unit-104
l
$type-font-height-l
↗ library ref
m
$type-font-height-m
↗ library ref
s
$type-font-height-s
↗ library ref
xl
$type-font-height-xl
$spacing-unit-28
xs
$type-font-height-xs
$spacing-unit-12

Font / letter spacing

Name
Token
Value
l
$type-font-letter-spacing-l
4
m
$type-font-letter-spacing-m
2
none
$type-font-letter-spacing-none
0
s
$type-font-letter-spacing-s
1
xs
$type-font-letter-spacing-xs
-0.5
xxs
$type-font-letter-spacing-xxs
-1

Font / size

Name
Token
Value
2xl
$type-font-size-2xl
↗ library ref
3xl
$type-font-size-3xl
↗ library ref
4xl
$type-font-size-4xl
↗ library ref
5xl
$type-font-size-5xl
↗ library ref
6xl
$type-font-size-6xl
↗ library ref
7xl
$type-font-size-7xl
↗ library ref
8xl
$type-font-size-8xl
↗ library ref
9xl
$type-font-size-9xl
$spacing-unit-60
10xl
$type-font-size-10xl
$spacing-unit-64
11xl
$type-font-size-11xl
↗ library ref
l
$type-font-size-l
↗ library ref
m
$type-font-size-m
↗ library ref
s
$type-font-size-s
↗ library ref
xl
$type-font-size-xl
↗ library ref
xs
$type-font-size-xs
$spacing-unit-10

Font / weight

Name
Token
Value
bold
$type-font-weight-bold
bold
buch
$type-font-weight-buch
buch
display
$type-font-weight-display
display
display bold
$type-font-weight-display-bold
display bold
italic
$type-font-weight-italic
italic
kräftig
$type-font-weight-kr-ftig
kräftig
regular
$type-font-weight-regular
regular
semi
$type-font-weight-semi
semi bold

Type / body / L (base) / bold

Name
Token
Value
letter-spacing
$type-type-body-l-base-bold-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-body-l-base-bold-line-height
↗ library ref
size
$type-type-body-l-base-bold-size
↗ library ref
weight
$type-type-body-l-base-bold-weight
$type-font-weight-bold

Type / body / L (base) / Italic

Name
Token
Value
letter-spacing
$type-type-body-l-base-italic-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-body-l-base-italic-line-height
↗ library ref
size
$type-type-body-l-base-italic-size
↗ library ref
weight
$type-type-body-l-base-italic-weight
$type-font-weight-italic

Type / body / L (base) / regular

Name
Token
Value
letter-spacing
$type-type-body-l-base-regular-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-body-l-base-regular-line-height
↗ library ref
size
$type-type-body-l-base-regular-size
↗ library ref
weight
$type-type-body-l-base-regular-weight
$type-font-weight-regular

Type / body / L (base) / semi

Name
Token
Value
letter-spacing
$type-type-body-l-base-semi-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-body-l-base-semi-line-height
↗ library ref
size
$type-type-body-l-base-semi-size
↗ library ref
weight
$type-type-body-l-base-semi-weight
$type-font-weight-semi

Type / body / M / bold

Name
Token
Value
letter-spacing
$type-type-body-m-bold-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-body-m-bold-line-height
↗ library ref
size
$type-type-body-m-bold-size
↗ library ref
weight
$type-type-body-m-bold-weight
$type-font-weight-bold

Type / body / M / Italic

Name
Token
Value
letter-spacing
$type-type-body-m-italic-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-body-m-italic-line-height
↗ library ref
size
$type-type-body-m-italic-size
↗ library ref
weight
$type-type-body-m-italic-weight
$type-font-weight-italic

Type / body / M / regular

Name
Token
Value
letter-spacing
$type-type-body-m-regular-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-body-m-regular-line-height
↗ library ref
size
$type-type-body-m-regular-size
↗ library ref
weight
$type-type-body-m-regular-weight
$type-font-weight-regular

Type / body / M / semi

Name
Token
Value
letter-spacing
$type-type-body-m-semi-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-body-m-semi-line-height
↗ library ref
size
$type-type-body-m-semi-size
↗ library ref
weight
$type-type-body-m-semi-weight
$type-font-weight-semi

Type / body / S / bold

Name
Token
Value
letter-spacing
$type-type-body-s-bold-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-body-s-bold-line-height
↗ library ref
size
$type-type-body-s-bold-size
↗ library ref
weight
$type-type-body-s-bold-weight
$type-font-weight-bold

Type / body / S / Italic

Name
Token
Value
letter-spacing
$type-type-body-s-italic-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-body-s-italic-line-height
↗ library ref
size
$type-type-body-s-italic-size
↗ library ref
weight
$type-type-body-s-italic-weight
$type-font-weight-italic

Type / body / S / regular

Name
Token
Value
letter-spacing
$type-type-body-s-regular-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-body-s-regular-line-height
↗ library ref
size
$type-type-body-s-regular-size
↗ library ref
weight
$type-type-body-s-regular-weight
$type-font-weight-regular

Type / body / S / semi

Name
Token
Value
letter-spacing
$type-type-body-s-semi-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-body-s-semi-line-height
↗ library ref
size
$type-type-body-s-semi-size
↗ library ref
weight
$type-type-body-s-semi-weight
$type-font-weight-semi

Type / body / XL / bold

Name
Token
Value
letter-spacing
$type-type-body-xl-bold-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-body-xl-bold-line-height
$type-font-height-xl
size
$type-type-body-xl-bold-size
↗ library ref
weight
$type-type-body-xl-bold-weight
$type-font-weight-bold

Type / body / XL / regular

Name
Token
Value
letter-spacing
$type-type-body-xl-regular-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-body-xl-regular-line-height
$type-font-height-xl
size
$type-type-body-xl-regular-size
↗ library ref
weight
$type-type-body-xl-regular-weight
$type-font-weight-regular

Type / body / XL / semi

Name
Token
Value
letter-spacing
$type-type-body-xl-semi-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-body-xl-semi-line-height
$type-font-height-xl
size
$type-type-body-xl-semi-size
↗ library ref
weight
$type-type-body-xl-semi-weight
$type-font-weight-semi

Type / body / XS / Italic

Name
Token
Value
letter-spacing
$type-type-body-xs-italic-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-body-xs-italic-line-height
$type-font-height-xs
size
$type-type-body-xs-italic-size
$type-font-size-xs
weight
$type-type-body-xs-italic-weight
$type-font-weight-italic

Type / body / XS / regular

Name
Token
Value
letter-spacing
$type-type-body-xs-regular-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-body-xs-regular-line-height
$type-font-height-xs
size
$type-type-body-xs-regular-size
$type-font-size-xs
weight
$type-type-body-xs-regular-weight
$type-font-weight-regular

Type / body / XS / semi

Name
Token
Value
letter-spacing
$type-type-body-xs-semi-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-body-xs-semi-line-height
$type-font-height-xs
size
$type-type-body-xs-semi-size
$type-font-size-xs
weight
$type-type-body-xs-semi-weight
$type-font-weight-semi

Type / code / 2XL / regular

Name
Token
Value
letter-spacing
$type-type-code-2xl-regular-letter-spacing
$type-font-letter-spacing-s
line-height
$type-type-code-2xl-regular-line-height
$type-font-height-2xl
size
$type-type-code-2xl-regular-size
↗ library ref
weight
$type-type-code-2xl-regular-weight
$type-font-weight-regular

Type / code / 3XL / regular

Name
Token
Value
letter-spacing
$type-type-code-3xl-regular-letter-spacing
$type-font-letter-spacing-s
line-height
$type-type-code-3xl-regular-line-height
↗ library ref
size
$type-type-code-3xl-regular-size
↗ library ref
weight
$type-type-code-3xl-regular-weight
$type-font-weight-regular

Type / code / L / regular

Name
Token
Value
letter-spacing
$type-type-code-l-regular-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-code-l-regular-line-height
↗ library ref
size
$type-type-code-l-regular-size
↗ library ref
weight
$type-type-code-l-regular-weight
$type-font-weight-regular

Type / code / S / regular

Name
Token
Value
letter-spacing
$type-type-code-s-regular-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-code-s-regular-line-height
↗ library ref
size
$type-type-code-s-regular-size
↗ library ref
weight
$type-type-code-s-regular-weight
$type-font-weight-regular

Type / code / XL / regular

Name
Token
Value
letter-spacing
$type-type-code-xl-regular-letter-spacing
$type-font-letter-spacing-s
line-height
$type-type-code-xl-regular-line-height
$type-font-height-xl
size
$type-type-code-xl-regular-size
↗ library ref
weight
$type-type-code-xl-regular-weight
$type-font-weight-regular

Type / display / L

Name
Token
Value
letter-spacing
$type-type-display-l-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-display-l-line-height
$type-font-height-13xl
size
$type-type-display-l-size
↗ library ref
weight
$type-type-display-l-weight
$type-font-weight-kr-ftig

Type / display / M

Name
Token
Value
letter-spacing
$type-type-display-m-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-display-m-line-height
$type-font-height-11xl
size
$type-type-display-m-size
$type-font-size-10xl
weight
$type-type-display-m-weight
$type-font-weight-kr-ftig

Type / display / S

Name
Token
Value
letter-spacing
$type-type-display-s-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-display-s-line-height
$type-font-height-10xl
size
$type-type-display-s-size
$type-font-size-9xl
weight
$type-type-display-s-weight
$type-font-weight-kr-ftig

Type / display / XS

Name
Token
Value
letter-spacing
$type-type-display-xs-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-display-xs-line-height
↗ library ref
size
$type-type-display-xs-size
↗ library ref
weight
$type-type-display-xs-weight
$type-font-weight-kr-ftig

Type / family

Name
Token
Value
Aptos
$type-type-family-aptos
$type-font-family-aptos
JetBrains Mono
$type-type-family-jetbrains-mono
$type-font-family-jetbrains-mono
Sohne
$type-type-family-sohne
$type-font-family-sohne

Type / heading / 2XL

Name
Token
Value
letter-spacing
$type-type-heading-2xl-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-heading-2xl-line-height
$type-font-height-xl
size
$type-type-heading-2xl-size
↗ library ref
weight
$type-type-heading-2xl-weight
$type-font-weight-display-bold

Type / heading / 3XL

Name
Token
Value
letter-spacing
$type-type-heading-3xl-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-heading-3xl-line-height
$type-font-height-2xl
size
$type-type-heading-3xl-size
↗ library ref
weight
$type-type-heading-3xl-weight
$type-font-weight-display-bold

Type / heading / 4XL

Name
Token
Value
letter-spacing
$type-type-heading-4xl-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-heading-4xl-line-height
↗ library ref
size
$type-type-heading-4xl-size
↗ library ref
weight
$type-type-heading-4xl-weight
$type-font-weight-display-bold

Type / heading / 5XL

Name
Token
Value
letter-spacing
$type-type-heading-5xl-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-heading-5xl-line-height
↗ library ref
size
$type-type-heading-5xl-size
↗ library ref
weight
$type-type-heading-5xl-weight
$type-font-weight-display-bold

Type / heading / 6XL

Name
Token
Value
letter-spacing
$type-type-heading-6xl-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-heading-6xl-line-height
$type-font-height-7xl
size
$type-type-heading-6xl-size
↗ library ref
weight
$type-type-heading-6xl-weight
$type-font-weight-display-bold

Type / heading / L

Name
Token
Value
letter-spacing
$type-type-heading-l-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-heading-l-line-height
↗ library ref
size
$type-type-heading-l-size
↗ library ref
weight
$type-type-heading-l-weight
$type-font-weight-display-bold

Type / heading / XL

Name
Token
Value
letter-spacing
$type-type-heading-xl-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-heading-xl-line-height
$type-font-height-xl
size
$type-type-heading-xl-size
↗ library ref
weight
$type-type-heading-xl-weight
$type-font-weight-display-bold

Type / label / 2XL / bold

Name
Token
Value
letter-spacing
$type-type-label-2xl-bold-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-label-2xl-bold-line-height
$type-font-height-xl
size
$type-type-label-2xl-bold-size
↗ library ref
weight
$type-type-label-2xl-bold-weight
$type-font-weight-bold

Type / label / 2XL / regular

Name
Token
Value
letter-spacing
$type-type-label-2xl-regular-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-label-2xl-regular-line-height
$type-font-height-xl
size
$type-type-label-2xl-regular-size
↗ library ref
weight
$type-type-label-2xl-regular-weight
$type-font-weight-regular

Type / label / 2XL / semi

Name
Token
Value
letter-spacing
$type-type-label-2xl-semi-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-label-2xl-semi-line-height
$type-font-height-xl
size
$type-type-label-2xl-semi-size
↗ library ref
weight
$type-type-label-2xl-semi-weight
$type-font-weight-semi

Type / label / 3XL / bold

Name
Token
Value
letter-spacing
$type-type-label-3xl-bold-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-label-3xl-bold-line-height
$type-font-height-2xl
size
$type-type-label-3xl-bold-size
↗ library ref
weight
$type-type-label-3xl-bold-weight
$type-font-weight-bold

Type / label / 3XL / regular

Name
Token
Value
letter-spacing
$type-type-label-3xl-regular-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-label-3xl-regular-line-height
$type-font-height-2xl
size
$type-type-label-3xl-regular-size
↗ library ref
weight
$type-type-label-3xl-regular-weight
$type-font-weight-regular

Type / label / 3XL / semi

Name
Token
Value
letter-spacing
$type-type-label-3xl-semi-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-label-3xl-semi-line-height
$type-font-height-2xl
size
$type-type-label-3xl-semi-size
↗ library ref
weight
$type-type-label-3xl-semi-weight
$type-font-weight-semi

Type / label / 4XL / bold

Name
Token
Value
letter-spacing
$type-type-label-4xl-bold-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-label-4xl-bold-line-height
↗ library ref
size
$type-type-label-4xl-bold-size
↗ library ref
weight
$type-type-label-4xl-bold-weight
$type-font-weight-bold

Type / label / 4XL / regular

Name
Token
Value
letter-spacing
$type-type-label-4xl-regular-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-label-4xl-regular-line-height
↗ library ref
size
$type-type-label-4xl-regular-size
↗ library ref
weight
$type-type-label-4xl-regular-weight
$type-font-weight-regular

Type / label / 4XL / semi

Name
Token
Value
letter-spacing
$type-type-label-4xl-semi-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-label-4xl-semi-line-height
↗ library ref
size
$type-type-label-4xl-semi-size
↗ library ref
weight
$type-type-label-4xl-semi-weight
$type-font-weight-semi

Type / label / L (base) / bold

Name
Token
Value
letter-spacing
$type-type-label-l-base-bold-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-label-l-base-bold-line-height
↗ library ref
size
$type-type-label-l-base-bold-size
↗ library ref
weight
$type-type-label-l-base-bold-weight
$type-font-weight-bold

Type / label / L (base) / regular

Name
Token
Value
letter-spacing
$type-type-label-l-base-regular-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-label-l-base-regular-line-height
↗ library ref
size
$type-type-label-l-base-regular-size
↗ library ref
weight
$type-type-label-l-base-regular-weight
$type-font-weight-regular

Type / label / L (base) / semi

Name
Token
Value
letter-spacing
$type-type-label-l-base-semi-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-label-l-base-semi-line-height
↗ library ref
size
$type-type-label-l-base-semi-size
↗ library ref
weight
$type-type-label-l-base-semi-weight
$type-font-weight-semi

Type / label / M / bold

Name
Token
Value
letter-spacing
$type-type-label-m-bold-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-label-m-bold-line-height
↗ library ref
size
$type-type-label-m-bold-size
↗ library ref
weight
$type-type-label-m-bold-weight
$type-font-weight-bold

Type / label / M / regular

Name
Token
Value
letter-spacing
$type-type-label-m-regular-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-label-m-regular-line-height
↗ library ref
size
$type-type-label-m-regular-size
↗ library ref
weight
$type-type-label-m-regular-weight
$type-font-weight-regular

Type / label / M / semi

Name
Token
Value
letter-spacing
$type-type-label-m-semi-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-label-m-semi-line-height
↗ library ref
size
$type-type-label-m-semi-size
↗ library ref
weight
$type-type-label-m-semi-weight
$type-font-weight-semi

Type / label / XL / bold

Name
Token
Value
letter-spacing
$type-type-label-xl-bold-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-label-xl-bold-line-height
$type-font-height-xl
size
$type-type-label-xl-bold-size
↗ library ref
weight
$type-type-label-xl-bold-weight
$type-font-weight-bold

Type / label / XL / regular

Name
Token
Value
letter-spacing
$type-type-label-xl-regular-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-label-xl-regular-line-height
$type-font-height-xl
size
$type-type-label-xl-regular-size
↗ library ref
weight
$type-type-label-xl-regular-weight
$type-font-weight-regular

Type / label / XL / semi

Name
Token
Value
letter-spacing
$type-type-label-xl-semi-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-label-xl-semi-line-height
$type-font-height-xl
size
$type-type-label-xl-semi-size
↗ library ref
weight
$type-type-label-xl-semi-weight
$type-font-weight-semi

Type / link / L / regular

Name
Token
Value
letter-spacing
$type-type-link-l-regular-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-link-l-regular-line-height
↗ library ref
size
$type-type-link-l-regular-size
↗ library ref
weight
$type-type-link-l-regular-weight
$type-font-weight-regular

Type / link / L / semi

Name
Token
Value
letter-spacing
$type-type-link-l-semi-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-link-l-semi-line-height
↗ library ref
size
$type-type-link-l-semi-size
↗ library ref
weight
$type-type-link-l-semi-weight
$type-font-weight-semi

Type / link / M / regular

Name
Token
Value
letter-spacing
$type-type-link-m-regular-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-link-m-regular-line-height
↗ library ref
size
$type-type-link-m-regular-size
↗ library ref
weight
$type-type-link-m-regular-weight
$type-font-weight-regular

Type / link / M / semi

Name
Token
Value
letter-spacing
$type-type-link-m-semi-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-link-m-semi-line-height
↗ library ref
size
$type-type-link-m-semi-size
↗ library ref
weight
$type-type-link-m-semi-weight
$type-font-weight-semi

Type / link / S / regular

Name
Token
Value
letter-spacing
$type-type-link-s-regular-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-link-s-regular-line-height
↗ library ref
size
$type-type-link-s-regular-size
↗ library ref
weight
$type-type-link-s-regular-weight
$type-font-weight-regular

Type / link / S / semi

Name
Token
Value
letter-spacing
$type-type-link-s-semi-letter-spacing
$type-font-letter-spacing-none
line-height
$type-type-link-s-semi-line-height
↗ library ref
size
$type-type-link-s-semi-size
↗ library ref
weight
$type-type-link-s-semi-weight
$type-font-weight-semi