Typography defines the visual hierarchy, readability, and consistency of the design system.

The typography system is built around two layers:

1. Typography Tokens — the source of truth for type values.
2. Text Styles — reusable styles that designers apply directly to text.

The system currently uses a unified typography scale across Web and Mobile rather than separate responsive values.

1. Typography Architecture

The typography system follows this relationship:

Primitive / Token → Typography Variable → Text Style → Design

For example:

Typography Token
      ↓
H1 / Font Size → 48px
H1 / Line Height → 52px
      ↓
Text Style
      ↓
H1

Variables

Variables store the underlying typography values and act as the source of truth.

Example:

Typography
├── H1
│   ├── Font size → 48
│   └── Line height → 52
│
├── H2
│   ├── Font size → 40
│   └── Line height → 44
│
└── ...

Text Styles

Text Styles are the designer-facing presets built from these variables.

For example:

H1
48px / 52px

A designer should primarily select the appropriate Text Style rather than manually entering font size and line height.