H1 / page title
A system for work that moves.
clamp(40px, 6vw, 82px) / 0.98 / 800
Documentation / foundations / tokens
Typography
A clear type hierarchy for page titles, sections, component content, labels, and supporting metadata.
Rendered preview
See the scale in context.
H2 / section heading
The foundation layer.
clamp(30px, 4vw, 52px) / 1.05 / 800
H3 / component heading
Activation rate
clamp(22px, 2.4vw, 32px) / 1.1 / 800
H4 / subsection heading
How it's used?
19px / 1.2 / 700
Typography tokens
11 valuesfont.family.displayMontserratHeadings and interface labels.
font.family.monoIBM Plex MonoToken names and metadata.
font.heading.h1clamp(40px, 6vw, 82px) / 0.98 / 800Page titles and primary entry points.
font.heading.h2clamp(30px, 4vw, 52px) / 1.05 / 800Major section headings.
font.heading.h3clamp(22px, 2.4vw, 32px) / 1.1 / 800Component and content-group headings.
font.heading.h419px / 1.2 / 700Subsections and compact panel headings.
font.size.body15px / 1.6Default reading size.
font.size.body-large18px / 1.6Introductory and lead copy.
font.size.label11px / 1.2 / 600 / uppercaseEyebrows, labels, and section markers.
font.size.metadata12px / 1.4 / 500Token values, timestamps, and supporting metadata.
font.size.titleclamp(40px, 6vw, 82px) / 0.98Display title scale.