Skip to content

Typography Tokens

Inter for UI and body, Hedvig Letters Serif for display and headings, Spline Sans Mono for code and data. Tight line-heights for density; tabular numerals for data.

Font Stack

Type Stack
Sans (body, UI, H3↓) Inter, system-ui, -apple-system, sans-serif
Serif (display, H1, H2) Hedvig Letters Serif, Georgia, serif
Mono (code, data) Spline Sans Mono, ui-monospace, SFMono-Regular, Menlo, monospace
Logo Space Grotesk Bold (never in UI)

Type Scale

Token Size Use
--text-display 36px Hero headlines
--text-h1 24px Page titles
--text-h2 20px Section headers
--text-h3 16px Card titles
--text-body 14px Default text
--text-small 12px Captions
--text-tiny 10px Badges

Type in Context

Dashboard Header

┌──────────────────────────────────────────────────────────────┐
│                                                              │
│  Project Overview                              ▼ Last 7 days │
│  36px display, semibold, Silt 900                            │
│                                                              │
│  ┌────────────┐ ┌────────────┐ ┌────────────┐               │
│  │ Active     │ │ Completed  │ │ Failed     │               │
│  │    847     │ │   12,456   │ │      23    │               │
│  │ +12% ↑     │ │   +8% ↑    │ │   -15% ↓   │               │
│  └────────────┘ └────────────┘ └────────────┘               │
│                                                              │
│  Numbers: tabular-nums, monospace                            │
│  Labels: 12px small, Silt 600                                │
│  Metrics: 24px h1, Silt 900                                  │
│  Change: 12px small, Success/Error colors                    │
│                                                              │
└──────────────────────────────────────────────────────────────┘

Data Table

┌──────────────────────────────────────────────────────────────┐
│ Name             Status    Last Run         Duration         │
│ 14px body        12px      14px mono        14px mono        │
├──────────────────────────────────────────────────────────────┤
│ Import Pipeline  ● Active  2024-01-15 14:32    4m 23s        │
│ Data Sync        ○ Idle    2024-01-15 12:00   12m 45s        │
│ Report Gener...  ● Active  2024-01-15 14:28    2m 11s        │
│                                                              │
│ Truncation: ellipsis after 15 chars                          │
│ Alignment: text left, numbers right                          │
│ Status: 12px with color indicator                            │
└──────────────────────────────────────────────────────────────┘

Marketing Hero

┌──────────────────────────────────────────────────────────────┐
│                                                              │
│                                                              │
│            Work smarter with AI                              │
│            36px display, Silt 900                            │
│                                                              │
│            SageOx helps teams ship faster                    │
│            with intelligent automation.                       │
│            16px body, Silt 600, max-width: 480px            │
│                                                              │
│                    ┌─────────────────┐                       │
│                    │   Get Started   │                       │
│                    └─────────────────┘                       │
│                    14px, Sage CTA (white label)             │
│                                                              │
└──────────────────────────────────────────────────────────────┘

Weights

Token Value Use
--font-normal 400 Body text
--font-medium 500 Labels
--font-semibold 600 Headings
--font-bold 700 Emphasis

Line Heights

Token Value Use
--leading-tight 1.25 Headings
--leading-normal 1.5 Body (WCAG AA)
--leading-relaxed 1.625 Long-form reading

Tabular Numerals

For consistent number alignment:

.data-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

When to use: - Data tables - Dashboard metrics - Financial data - Timestamps

Responsive Scale

Large sizes increase at breakpoints:

Breakpoint --text-4xl --text-5xl --text-6xl
Base 36px 48px 60px
640px+ 40px 56px 72px
1024px+ 40px 64px 80px