Foundations

Typography

Figtree variable (weight 300–700) is the sole typeface. All type tokens are CSS custom properties — never hardcode font sizes, weights, or letter spacing.

Font families

Figtree

--font-sans UI, body, headings, buttons — all product surfaces

JetBrains Mono

--font-mono Code blocks, token names, developer docs

Type scale

Aa
--fs-72 72 — display
Heading one
--fs-56 56 — h1
Heading two
--fs-36 36 — h2
Heading three
--fs-28 28 — h3
Heading four
--fs-24 24 — h4
Body large
--fs-20 20
Subheading / body large
--fs-18 18 — subheading
The quick brown fox jumps over the lazy dog
--fs-16 16 — body
Small body text, labels, captions
--fs-14 14 — small
Caption, meta, helper text
--fs-13 13 — caption
Micro labels, badges, timestamps
--fs-12 12 — micro

Weights

The quick brown fox — Light 300 --fw-light
The quick brown fox — Regular 400 --fw-regular
The quick brown fox — Medium 500 --fw-medium
The quick brown fox — Semibold 600 --fw-semibold
The quick brown fox — Bold 700 --fw-bold

Line heights

The quick brown fox jumps over the lazy dog and keeps on going

--lh-display 0.95 Hero display type only

The quick brown fox jumps over the lazy dog and keeps on going

--lh-tight 1.05 Headings h1–h3

The quick brown fox jumps over the lazy dog and keeps on going

--lh-snug 1.2 Headings h4, subheadings

The quick brown fox jumps over the lazy dog and keeps on going

--lh-normal 1.45 Body default

The quick brown fox jumps over the lazy dog and keeps on going

--lh-relaxed 1.6 Long-form reading, lead copy

Letter spacing

Sample tracking
--ls-display -0.035em — Hero / display size
Sample tracking
--ls-tight -0.02em — h1–h2 headings
Sample tracking
--ls-snug -0.01em — h3–h4 headings
Sample tracking
--ls-normal 0 — Body copy
Sample tracking
--ls-loose 0.04em — Button labels
Sample tracking
--ls-wide 0.12em — Uppercase eyebrows, tags