FoundationsTypography

Typography

Font families, type scale, and text styles that define hierarchy, readability, and voice in the system.

Type scale

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

Typography specs

Token-level reference for size, weight, line height, and color across the type scale.

NameSectionVariableSizeLine heightWeightLetter spacingColor
H1 / Title heroTitles--font-size-h140px1.2700-2%#081617
H2 / Title pageTitles--font-size-h232px1.2700-2%#081617
H3 / SubtitleTitles--font-size-h324px1.24000%#081617
H4 / HeadingHeadings--font-size-h420px1.26000%#3D535E
Body largeBody--font-size-body-large16px1.54000%#3D535E
Body smallBody--font-size-body-small14px1.54000%#3D535E
CaptionBody--font-size-caption12px1.54000%#3D535E