Foundations
Typography
Two typefaces — Geist for display and body, Geist Mono for code and data — on a named utility scale. No raw pixel values.
01 — Scale
Type scale
Every text size maps to a named Tailwind utility. Display tiers use clamp() so they scale with viewport; body and label sizes are static. Use the utility, not a raw px value.
text-display-hero-xl
Display · landing hero
clamp(2.5rem, 8vw, 5.25rem)
Geist 400 · tracking-display-lg
Practice.
text-display-hero
H1
clamp(2.5rem, 6vw, 4.5rem)
Geist 400 · tracking-display
Practice exposes what you don’t know.
text-display-section
H2 · chapter-page h1
clamp(2.25rem, 5vw + 1rem, 3rem)
Geist 400 · tracking-display
Skill dimensions compound over time.
text-2xl
H3
1.625rem (26px)
Geist 400
Requirements Clarity
text-lg
Body LG
1.125rem (18px)
Geist 400
Each session feeds the next. Practice, diagnosis, and your next move stay connected.
text-base
Body
1rem (16px)
Geist 400
Use the review queue after a session, then move into concept pages for deeper repetition.
text-sm
Body SM
0.875rem (14px)
Geist 400
UI labels, button text, timestamps, metadata, secondary labels and section headers.
text-label
Caption / Mono
0.75rem (12px)
Geist Mono 600 · uppercase · tracking-label
READINESS · DIMENSION · TRADE-OFF
02 — Letter-spacing
Tracking tokens
--tracking-display: -0.025em — display numerals and large headings
0.76 / 1.0
default (0) — body text
Each session feeds the next. Practice, diagnosis, and your next move stay connected.
--tracking-label: 0.08em — section labels and metadata
SKILL DIMENSIONS · TODAY'S FOCUS · READINESS