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 H1

.heading-h1

40px → 52px → 64px

Line height: 1

Design with purpose

Heading H2

.heading-h2

30px → 36px → 42px

Line height: 1.05

Build beautiful experiences

Heading H3

.heading-h3

22px → 22px → 26px

Line height: 1.2

The quick brown fox jumps over the lazy dog

Heading H4

.heading-h4

18px → 18px → 20px

Line height: 1.3

The quick brown fox jumps over the lazy dog

Heading H5

.heading-h5

14px → 16px → 17px

Line height: 1.4

The quick brown fox jumps over the lazy dog

Heading H6

.heading-h6

12px → 14px → 15px

Line height: 1.4

The quick brown fox jumps over the lazy dog

Body Text Tokens

Use .body-lg through .body-xs for body text. Optimized line heights for readability.

Body Large

.body-lg

18px → 19px → 20px

Line height: 1.6

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Body Medium

.body-md

16px → 17px

Line height: 1.6

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Body Small

.body-sm

14px → 15px

Line height: 1.5

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Body Extra Small

.body-xs

12px → 13px

Line height: 1.5

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

UI Medium

.ui-md

14px → 14px

Line height: 1.5

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

UI Small

.ui-sm

13px → 13px

Line height: 1.5

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

UI Extra Small

.ui-xs

12px → 12px

Line height: 1.5

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

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)