Design

Typography

Serif-led four-font system: Fraunces display, Literata body serif, IBM Plex Mono for code, system-ui for tight UI labels.

All fonts except --font-ui are loaded via Google Fonts. Always use the CSS variable token — never reference the font name directly in code.

Font Families

Fraunces --font-display

Weights

300 The quick brown fox jumps over the lazy dog

400 The quick brown fox jumps over the lazy dog

600 The quick brown fox jumps over the lazy dog

700 The quick brown fox jumps over the lazy dog

900 The quick brown fox jumps over the lazy dog

Size scale

--text-xs 12px Aa

--text-sm 14px Aa

--text-base 16px Aa

--text-lg 18px Aa

--text-xl 20px Aa

--text-2xl 24px Aa

--text-3xl 30px Aa

--text-4xl 36px Aa

Literata --font-body

Weights

300 The quick brown fox jumps over the lazy dog

400 The quick brown fox jumps over the lazy dog

500 The quick brown fox jumps over the lazy dog

600 The quick brown fox jumps over the lazy dog

700 The quick brown fox jumps over the lazy dog

Size scale

--text-xs 12px Aa

--text-sm 14px Aa

--text-base 16px Aa

--text-lg 18px Aa

--text-xl 20px Aa

--text-2xl 24px Aa

--text-3xl 30px Aa

--text-4xl 36px Aa

IBM Plex Mono --font-mono

Weights

400 The quick brown fox jumps over the lazy dog

500 The quick brown fox jumps over the lazy dog

Size scale

--text-xs 12px Aa

--text-sm 14px Aa

--text-base 16px Aa

--text-lg 18px Aa

--text-xl 20px Aa

--text-2xl 24px Aa

--text-3xl 30px Aa

--text-4xl 36px Aa

System UI --font-ui

Weights

400 The quick brown fox jumps over the lazy dog

500 The quick brown fox jumps over the lazy dog

600 The quick brown fox jumps over the lazy dog

Size scale

--text-xs 12px Aa

--text-sm 14px Aa

--text-base 16px Aa

--text-lg 18px Aa

--text-xl 20px Aa

--text-2xl 24px Aa

--text-3xl 30px Aa

--text-4xl 36px Aa

Type Scale

Modular scale, base 16px, ratio 1.25. Use rem tokens — avoid hardcoded sizes.

Token rem px Sample

--text-xs 0.75rem 12px The quick brown fox

--text-sm 0.875rem 14px The quick brown fox

--text-base 1rem 16px The quick brown fox

--text-lg 1.125rem 18px The quick brown fox

--text-xl 1.25rem 20px The quick brown fox

--text-2xl 1.5rem 24px The quick brown fox

--text-3xl 1.875rem 30px The quick brown fox

--text-4xl 2.25rem 36px The quick brown fox

--text-5xl 3rem 48px The quick brown fox

Font Weights

Named weight tokens map to numeric values. Fraunces and Literata both support the full variable range; IBM Plex Mono supports 400–500; --font-ui renders in whatever weights the system font provides.

--font-weight-normal 400 normal — The quick brown fox jumps over the lazy dog

--font-weight-medium 500 medium — The quick brown fox jumps over the lazy dog

--font-weight-semibold 600 semibold — The quick brown fox jumps over the lazy dog

--font-weight-bold 700 bold — The quick brown fox jumps over the lazy dog

--font-weight-extrabold 800 extrabold — The quick brown fox jumps over the lazy dog

Usage Guidelines

Fraunces

--font-display

Page headings (h1–h3)
Hero and marketing text
Brand moments that need warmth
Sidebar logo mark

Avoid for body text or anything below 18px

Literata

--font-body

All body copy and prose
Card descriptions and long-form text
The default for any running text block

Default for prose — gives pages their picture-book register

IBM Plex Mono

--font-mono

Code blocks and inline code
Token names in the design system
File paths and terminal output
Technical identifiers

Never for prose; use only at 12–16px

System UI

--font-ui

Button labels and nav items
Form inputs, helper text, tooltips
Tight UI controls where legibility at small size matters more than brand warmth
Data tables and list metadata

Keeps UI chrome crisp while serifs handle content