Typography

Stable

The type system — families, the modular size scale, weights, line-heights, and letter-spacing. Every value below is rendered live from a token; nothing here is hardcoded.

Font families

--font-family-heading
Montserrat — headings
--font-family-body
Nunito Sans — body copy and UI
--font-family-mono
Fira Code — code and token names

The heading family is a skin axis — a brand-forward skin can swap it to a serif or slab display face without touching component CSS.

Type scale

Semantic heading and body roles. Display roles (60–96px) are reserved for brand-forward headlines.

display-lg / 7xl
Display
heading h1 / 5xl
Heading one
heading h2 / 4xl
Heading two
heading h3 / 3xl
Heading three
heading h4 / 2xl
Heading four
body lg / 18px
Body large — intros and lead paragraphs.
body md / 16px
Body medium — the default reading size.
body sm / 14px
Body small — captions and helper text.

Weights

regular / 400
The quick brown fox
medium / 500
The quick brown fox
semibold / 600
The quick brown fox
bold / 700
The quick brown fox
extrabold / 800
The quick brown fox

Label / eyebrow

Uppercase, widest letter-spacing — used for section eyebrows and small labels.

What we do