Typography
The CADS type system is broken into three font families and a shared size scale. Space Grotesk handles display headings (H1–H2), Geist covers body copy and smaller headings, and Google Sans Code is reserved for mono.
Text styles
Text styles are broken into headings, body, overline, label, link, and mono. Each one pairs a size token (like heading-xxl or body-xs) with a family, weight, and tracking so you can match Figma without guessing. Semi Bold is the default heading weight. Export downloads fontVariables.css plus typography.module.scss for prod ingest (uses prod's existing font.scss mixins).
Heading
Body
Overline
Label
Link
Mono
H1 · heading-xxl · Space Grotesk · Semi Bold · 3rem / 3.25rem · -1%
H2 · heading-xl · Space Grotesk · Semi Bold · 2.375rem / 2.5rem · -1%
H3 · heading-lg · Geist · Semi Bold · 1.75rem / 2.25rem · 0%
H4 · heading-md · Geist · Semi Bold · 1.5rem / 2rem · 0%
H5 · heading-sm · Geist · Semi Bold · 1.375rem / 1.875rem · 0%
H6 · heading-xs · Geist · Semi Bold · 1.25rem / 1.75rem · 0%
Families
Space Grotesk for display headings, Geist for body and UI, system monospace for code — no brand mono face in prod.
| Variable | Family | Use |
|---|---|---|
--font-family-heading | Space Grotesk | Display headings (H1–H2) |
--font-family-main | Geist | Body copy, smaller headings, UI chrome |
--font-family-mono | System monospace | Code samples (no brand mono in prod — browser/system stack) |