Typography

Inter for sans (internal), Söhne for sans (external), Georgia for serif, JetBrains Mono for code. Two scales: Internal (compact, default for internal apps and ML tools) and External (larger, for marketing sites, landing pages, and public-facing docs). Switch a subtree to external by adding .typography-external to a parent.

Families

  • font-sansInter
  • font-serifGeorgia
  • font-monoJetBrains Mono

Sizes

Internal (default)

  • Aatext-xs · 11px
  • Aatext-sm · 12px
  • Aatext-base · 13px
  • Aatext-lg · 17px
  • Aatext-xl · 20px
  • Aatext-2xl · 24px
  • Aatext-3xl · 28px
  • Aatext-4xl · 36px
  • Aatext-5xl · 48px
  • Aatext-6xl · 60px
  • Aatext-7xl · 72px
  • Aatext-8xl · 96px
  • Aatext-9xl · 128px

External

  • Aatext-xs · 11px
  • Aatext-sm · 12px
  • Aatext-base · 14px
  • Aatext-lg · 17px
  • Aatext-xl · 20px
  • Aatext-2xl · 24px
  • Aatext-3xl · 28px
  • Aatext-4xl · 36px
  • Aatext-5xl · 48px
  • Aatext-6xl · 60px
  • Aatext-7xl · 72px
  • Aatext-8xl · 96px
  • Aatext-9xl · 128px

Weights

Weight tokens are mode-aware. Internal dials each step down by 100 so dense UI reads quieter; External keeps standard weights.

  • The quick brown foxfont-normal · int 400 · ext 400
  • The quick brown foxfont-medium · int 500 · ext 500
  • The quick brown foxfont-semibold · int 600 · ext 600

Text styles

Canonical pairings of size × leading × weight × font. Use these together — don't pair text-base with a different leading-* ad-hoc; if a use case needs a different combo, propose a new style here.

UseClassSize (int / ext)FontWhen to useSample
Body (default)text-base font-normal13 / 18 / 14 / 24sansDefault for paragraphs, list items, prose. Uses the auto line-height from the fontSize token — no explicit leading-* needed.The quick brown fox
Emphasis paragraphtext-base font-medium13 / 18 / 14 / 24sansBump a single paragraph or sentence that needs to stand out within prose. Don't use for titles.The quick brown fox
Description / secondarytext-base font-normal text-muted-foreground13 / 18 / 14 / 24sansField descriptions, captions under content, muted metadata. Same size as body, tonally quieter.The quick brown fox
Caption / metadatatext-xs leading-4 font-normal11 / 16 / 12 / 16sansTiny labels, timestamps, badge text.The quick brown fox
Subheadtext-lg leading-7 font-medium16 / 24 / 18 / 24sansSubsection headers within a card or section.The quick brown fox
Section headingtext-xl leading-7 font-medium tracking-tight18 / 24 / 20 / 24sansTop of a page section.The quick brown fox
Page headingtext-3xl leading-9 font-semibold tracking-tight28 / 36 / 30 / 36sans · serif (ext)Page title (PageHeader). Uses serif (Georgia) in External mode.The quick brown fox
Displaytext-5xl leading-none font-semibold tracking-tight48 / 48 / 48 / 48sans · serif (ext)Marketing hero copy. Uses serif (Georgia) in External mode. Sparingly.The quick brown fox
Codetext-sm leading-5 font-mono12 / 18 / 14 / 18monoInline code references, prop names, file paths.The quick brown fox

Sizes shown as Internal / External in pixels. Internal is the default. Switch a subtree to External with .typography-external.

Line heights

  • leading-312px
  • leading-416px
  • leading-518px
  • leading-620px
  • leading-724px
  • leading-828px
  • leading-936px
  • leading-1040px