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

48px → 64px → 88px

Line height: 1.1

Design with purpose

Heading H2

.heading-h2

32px → 40px → 48px

Line height: 1.2

Build beautiful experiences

Heading H3

.heading-h3

22px → 22px → 26px

Line height: 1.3

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.

Font Family

Geist

Geist is used for all text across the site. It's a modern, geometric sans-serif with excellent readability.

Regular (400) — Body text and descriptions

Medium (500) — Headings and emphasis

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)