Scale

--text-xxs

The quick brown fox — Badges, captions

10px

--text-xs

The quick brown fox — Panel headers, status bar

11px

--text-sm

The quick brown fox — Tabs, buttons, inputs

12px

--text-base

The quick brown fox — Body default

13px

--text-md

The quick brown fox — Emphasis

14px

--text-lg

The quick brown fox — h4

16px

--text-xl

The quick brown fox — h3

20px

--text-2xl

The quick brown fox — h2

28px

--text-3xl

The quick brown fox — h1

44px

Headings

h1 → h4 use display face (Inter) with progressive negative tracking.

h1 · 44px · semibold · -0.03em

h2 · 28px · semibold · -0.02em

h3 · 20px · semibold · -0.015em

h4 · 16px · semibold

Mono

For code, metrics, IDs, tokens. JetBrains Mono 12–13px.

const id = "atlas-btn-primary"12,847 rows · 42.3 MB · 3.2s

Content tone

Sentence case everywhere. UPPERCASE for eyebrow labels and badges only, always with 0.08em tracking.

Eyebrow label

Create project — sentence case for all copy.