Monarch

Typography

Inter for interfaces, JetBrains Mono for code. Bold, clean, readable.

Font Families

Primary

Inter

The quick brown fox jumps over the lazy dog. ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

--monarch-font-sans

Code

JetBrains Mono

const monarch = { theme: 'dark' }; // 0O1lI

--monarch-font-mono

Type Scale

Based on a Major Third scale (1.250 ratio) for harmonious proportions.

Font Sizes
7xl / 72px Ag
6xl / 60px Ag
5xl / 48px Ag
4xl / 36px Ag
3xl / 30px Ag
2xl / 24px Ag
xl / 20px The quick brown fox
lg / 18px The quick brown fox jumps
base / 16px The quick brown fox jumps over the lazy dog
sm / 14px The quick brown fox jumps over the lazy dog
xs / 12px The quick brown fox jumps over the lazy dog

Font Weights

Weight Variants

300 Light The quick brown fox

400 Normal The quick brown fox

500 Medium The quick brown fox

600 Semibold The quick brown fox

700 Bold The quick brown fox

800 Extrabold The quick brown fox

Gradient Text

Gradient Text Effect
Design with intention.

Usage Guidelines

• Use Inter for all UI text — it's optimized for screen readability at any size

• Use JetBrains Mono for code blocks, inline code, data values, and terminal output

• Headlines: semibold (600) or bold (700) — never light headlines on dark backgrounds

• Body text: normal (400) with relaxed line-height for readability

• Labels and captions: medium (500) at sm (14px) or xs (12px)

• Section headers: uppercase, widest tracking, xs — like INTELLIGENCE, DATA ENGINE

• Reserve extrabold (800) for hero text and gradient headlines only