Typography
Two typefaces, two jobs. Never mixed within a single semantic role.
Typefaces
Section titled “Typefaces”Space Grotesk · UI typeface
Space Grotesk
UI typeface · --font-ui
The swamp remembers everything.300 · Light
The swamp remembers everything.400 · Regular
The swamp remembers everything.500 · Medium
The swamp remembers everything.600 · Semibold
The swamp remembers everything.700 · Bold
Saltie has been watching swamps rise and fall for two hundred million years. He's seen entire phyla come and go. Your lost Jira ticket is, frankly, not the most pressing thing on his mind — but he'll find it anyway.
Space Mono · system typeface
Space Mono
System typeface · --font-system
captured_at: 2026-04-11T18:42Z400 · Regular
captured_at: 2026-04-11T18:42Z700 · Bold
{
"doc_type": "worklog",
"captured_at": "2026-04-11T18:42Z",
"source_url": "https://jira.example/TKT-1234",
"tags": ["apex", "q2-review"]
}| Token | Family | Role |
|---|---|---|
--font-ui (Space Grotesk) | 'Space Grotesk', system-ui, sans-serif | All UI and body text — headings, labels, card text, button labels |
--font-system (Space Mono) | 'Space Mono', monospace | Metadata, code, token labels, timestamps, keyboard hints, Saltie’s voice |
Saltie’s Voice
Section titled “Saltie’s Voice”- Always Space Mono, italic, cyan family
- Opacity ladder: direct lines at full opacity, reflective observations at lower opacity
- Reinforces register distinction without changing typeface
Type Scale
Section titled “Type Scale”Type scale · rendered at actual size
Saltie finds the thread
--fs-3xl--fw-bold4rem · Hero / ceremonial display
Saltie finds the thread
--fs-2xl--fw-bold2.5rem · Display headings
Saltie finds the thread
--fs-xl--fw-semibold1.8rem · Section headings
Saltie finds the thread
--fs-lg--fw-medium1.3rem · Subsection / card titles
Saltie finds the thread
--fs-md--fw-regular1.1rem · Primary body
Saltie finds the thread
--fs-base--fw-regular1.02rem · Secondary body · UI labels
Saltie finds the thread
--fs-sm--fw-regular0.95rem · Captions · metadata
| Token | Value | Use |
|---|---|---|
--font-size-xs | .85rem | Minimum floor — section tags, token labels, timestamps |
--font-size-sm | .95rem | Captions, hints, metadata |
--font-size-base | 1.02rem | Secondary body — UI labels, card body |
--font-size-md | 1.1rem | Primary body text |
--font-size-lg | 1.3rem | Subsection headings, card titles |
--font-size-xl | 1.8rem | Section headings |
--font-size-2xl | 2.5rem | Display headings |
--font-size-3xl | 4rem | Hero / ceremonial display |
Sizes are desktop-optimised — slightly larger than typical web conventions.
Font Weights
Section titled “Font Weights”| Token | Value |
|---|---|
--font-weight-light | 300 |
--font-weight-regular | 400 |
--font-weight-medium | 500 |
--font-weight-bold | 700 |
Line Heights
Section titled “Line Heights”| Token | Value |
|---|---|
--line-height-tight | 1.25 |
--line-height-normal | 1.5 |
--line-height-relaxed | 1.75 |
Bundling
Section titled “Bundling”Fonts must be bundled locally in the Tauri app via @font-face with src: url("/assets/fonts/...") pointing to .woff2 files. No CDN loading.
Constraints
Section titled “Constraints”- Maximum line length:
max-width: 65ch - No justified text (ragged right only)
- Nothing readable below
--font-size-xs - A heading is always Space Grotesk. A token label is always Space Mono. No exceptions.