The system uses three typefaces: Space Grotesk for display, Inter for body and UI, and JetBrains Mono for code.
Font families
| Token | Font | Usage |
|---|---|---|
--of-font-display | Space Grotesk | Headings, hero moments |
--of-font-sans | Inter | Body text, UI, labels |
--of-font-mono | JetBrains Mono | Code, timestamps, metadata |
Type ramp
The scale runs from 12px (xs) to 64px (5xl).
| Token | Size | Usage |
|---|---|---|
--of-text-xs | 12px | Eyebrows, captions, timestamps |
--of-text-sm | 13px | UI labels, compact text |
--of-text-base | 15px | Default body size |
--of-text-md | 16px | Slightly larger body |
--of-text-lg | 18px | Lead paragraphs |
--of-text-xl | 22px | Small headings |
--of-text-2xl | 28px | Section headings |
--of-text-3xl | 36px | Page titles |
--of-text-4xl | 48px | Large display |
--of-text-5xl | 64px | Hero text |
Heading styles
Level 1 heading
.of-h1 / 48px / Space Grotesk 600
Level 2 heading
.of-h2 / 36px / Space Grotesk 600
Level 3 heading
.of-h3 / 28px / Space Grotesk 600
Level 4 heading
.of-h4 / 22px / Space Grotesk 600
Body text
Lead text. Used for introductions and summaries. Larger size, relaxed leading, muted color.
.of-lead / 18px / Inter 400 / relaxed
Body text. The default size for paragraphs, descriptions, and general content. Readable and neutral.
.of-body / 15px / Inter 400 / normal
Small text. Used for captions, timestamps, metadata. Slightly muted to reduce emphasis.
.of-small / 13px / Inter 400
Eyebrow style
Design system
.of-eyebrow / 12px / uppercase / wide tracking / brand color
Code text
const greeting = “Hello world”;
JetBrains Mono / 13px / recessed background
Leading and tracking
| Token | Value | Usage |
|---|---|---|
--of-leading-tight | 1.15 | Headings, display text |
--of-leading-snug | 1.3 | Subheadings, compact body |
--of-leading-normal | 1.55 | Default body text |
--of-leading-relaxed | 1.7 | Lead paragraphs, longform |
--of-tracking-tight | -0.02em | Large display text |
--of-tracking-snug | -0.01em | Headings |
--of-tracking-wide | 0.04em | Eyebrows, uppercase labels |
Typography tokens reference
/* Fonts */
--of-font-display: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
--of-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
--of-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* Sizes */
--of-text-xs /* 12px */
--of-text-sm /* 13px */
--of-text-base /* 15px */
--of-text-md /* 16px */
--of-text-lg /* 18px */
--of-text-xl /* 22px */
--of-text-2xl /* 28px */
--of-text-3xl /* 36px */
--of-text-4xl /* 48px */
--of-text-5xl /* 64px */
/* Leading */
--of-leading-tight /* 1.15 */
--of-leading-snug /* 1.3 */
--of-leading-normal /* 1.55 */
--of-leading-relaxed /* 1.7 */
/* Tracking */
--of-tracking-tight /* -0.02em */
--of-tracking-snug /* -0.01em */
--of-tracking-wide /* 0.04em */