Typography
Geologica everywhere, Geist Mono for code and tokens. Page letter-spacing is −2%.
Faces
Geologica
UI, titles, buttons. Loaded as --font-sans.
Geist Mono
Tokens, snippets, keyboard hints. --font-mono.
Scale
We do not ship text-heading-* utilities. Use these sizes so product and docs stay aligned.
The quick brown fox
Page title · 32 / 36 · 600
The quick brown fox
Section · 18 / 24 · 500
The quick brown fox
Body · 14 / 24 · 400
The quick brown fox
Control · 13 / 20 · 500
The quick brown fox
Secondary · 13 / 20 · 400
The quick brown fox
Meta · 12 / 16 · 400
Color
- Primary copy and labels:
--ds-gray-1000 - Secondary lines, meta, icons at rest:
--ds-gray-900 - Disabled:
--ds-gray-700 - Inline code stays Geist Mono at 13px, same color as surrounding text unless it is a token.
Practices
- Controls are 13px. Do not drop a 16px label next to an h-8 input.
- Title Case button labels that name the action: Deploy Project, Add Email.
- Uppercase only for tiny meta (repo row, calendar caps), and pair it with 12px.
- Tabular nums for usage, dates in tables, and gauge values.