H1 / Title hero
Largest display style for hero headlines and high-impact page moments.
40px700Titles
Title hero
Font families, type scale, and text styles that define hierarchy, readability, and voice in the system.
Every type style includes purpose-driven guidance and a visual sample.
H1 / Title hero
Largest display style for hero headlines and high-impact page moments.
40px700Titles
Title hero
H2 / Title page
Primary page title style used for top-level screen headings.
32px700Titles
Title page
H3 / Subtitle
Secondary title for supporting context below page-level headlines.
24px400Titles
Subtitle
H4 / Heading
Section heading used to break content into meaningful groups.
20px600Headings
Heading
Body large
Lead paragraph style for introductions and high-priority explanatory text.
16px400Body
Body large text
Body small
Default readable body copy for most paragraph content.
14px400Body
Body small text
Caption
Small supporting text for hints, labels, and contextual helper content.
12px400Body
Caption and helper text
Token-level reference for size, weight, line height, and color across the type scale.
| Name | Section | Variable | Size | Line height | Weight | Letter spacing | Color |
|---|---|---|---|---|---|---|---|
H1 / Title hero | Titles | --font-size-h1 | 40px | 1.2 | 700 | -2% | #081617 |
H2 / Title page | Titles | --font-size-h2 | 32px | 1.2 | 700 | -2% | #081617 |
H3 / Subtitle | Titles | --font-size-h3 | 24px | 1.2 | 400 | 0% | #081617 |
H4 / Heading | Headings | --font-size-h4 | 20px | 1.2 | 600 | 0% | #3D535E |
Body large | Body | --font-size-body-large | 16px | 1.5 | 400 | 0% | #3D535E |
Body small | Body | --font-size-body-small | 14px | 1.5 | 400 | 0% | #3D535E |
Caption | Body | --font-size-caption | 12px | 1.5 | 400 | 0% | #3D535E |