Typography
Responsive typography scale using CSS variables. All text sizes scale fluidly across breakpoints for optimal readability.
Heading Tokens
Use .heading-h1 through .heading-h6 for headings. All include responsive sizing and proper line heights.
.heading-h140px → 52px → 64px
Line height: 1
.heading-h230px → 36px → 42px
Line height: 1.05
.heading-h322px → 22px → 26px
Line height: 1.2
.heading-h418px → 18px → 20px
Line height: 1.3
.heading-h514px → 16px → 17px
Line height: 1.4
.heading-h612px → 14px → 15px
Line height: 1.4
Body Text Tokens
Use .body-lg through .body-xs for body text. Optimized line heights for readability.
.body-lg18px → 19px → 20px
Line height: 1.6
.body-md16px → 17px
Line height: 1.6
.body-sm14px → 15px
Line height: 1.5
.body-xs12px → 13px
Line height: 1.5
Font Families
Two families, one job each. There is deliberately no serif in the system.
IBM Plex Sans — headings
Every heading level, h1 through h6. Large headings sit at weight 400 with tight negative tracking; the size carries the emphasis rather than the weight.
Regular (400) — h1, h2, h3
Medium (500) — h4, h5, h6
Inter — everything else
All body copy, labels and UI text, with a slight negative tracking (-0.011em) that keeps longer paragraphs dense.
Regular (400) — Body text and descriptions
Medium (500) — Emphasis, buttons, nav
Usage Guidelines
Do use utility classes
<h1 className="heading-h1">Title</h1><p className="body-lg text-text-tertiary">...</p>Don't use arbitrary values
text-[36px] sm:text-[46px] lg:text-[56px]text-[18px] leading-[1.6]Breakpoints
Typography scales across three breakpoints:
Mobile
Default
Tablet
640px (sm)
Desktop
1024px (lg)