● Foundations / Typography
Typography.
Typography here is role-based, not decorative. Sans carries most reading and interface work, serif defines hierarchy and tone, and mono keeps labels and metadata structured.
How typography behaves here
The system uses three families with explicit jobs. Body copy stays in sans for readability, headings shift to serif for presence, and labels use mono to make metadata feel ordered and intentional.
That split is already visible across the product: the page canvas defaults to sans, headings inherit Fraunces with tuned optical sizing, and the shared .label utility handles section numbers, breadcrumbs, and supporting system text.
Source of truth
Font families, weights, and the shared type scale are exposed as tokens. Global base styles also tune headings and labels so components start from the same typographic rules.
Type families
Each family has a semantic role. Start with the role first, then apply styling through the shared utilities and scale.
Sans
Inter
Body copy, UI text, and interactive elements.
Designed for clarity in long reading and interface work.
Serif
Fraunces
Headings, display moments, and editorial emphasis.
Used where the system needs character and hierarchy.
Mono
JetBrains Mono
Labels, metadata, and technical detail.
Keeps small utility text structured and precise.
Available tokens
Type scale
The scale is shared across content and UI. Sizes are defined in rem so they respect user preferences while keeping spacing and hierarchy consistent.
Design systems need hierarchy
Design systems need hierarchy
Design systems need hierarchy
Design systems need hierarchy
Design systems need hierarchy
Design systems need hierarchy
Design systems need hierarchy
Design systems need hierarchy
Design systems need hierarchy
Design systems need hierarchy
Design systems need hierarchy
Weights
Guidelines
- Use sans for most reading and interface text so the default experience stays calm and legible.
- Reserve serif for headings and display moments where hierarchy needs more voice.
- Use mono for labels, metadata, and system detail rather than long-form reading.
- Work from the shared type scale instead of introducing one-off sizes.
- Let global heading and label styles do the tuning work before adding local overrides.
In practice
Is this paragraph or UI copy?
Use sans.
Is this a heading or editorial focal point?
Use serif.
Is this metadata, a label, or a technical detail?
Use mono.
Does this need hierarchy through size?
Use the shared type scale.
Is this a heading style problem?
Check the global serif tuning before overriding it.