Lumen Docs

Typography

Lumen uses the system font stack. Sizes and weights are deliberate.

Stack

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

Monospace (code blocks, file paths, API keys):

font-family: "JetBrains Mono", "Fira Code", Menlo, Monaco, Consolas, monospace;

Scale

| Class | Size | Line | Usage | |---|---|---|---| | text-2xl | 24px | 1.3 | Page titles (rare) | | text-xl | 20px | 1.4 | Hero / onboarding headers | | text-lg | 18px | 1.5 | Section headers inside docs | | text-base | 16px | 1.6 | Body text (default for most prose) | | text-sm | 14px | 1.6 | Default UI size — menus, tables, forms, buttons | | text-[13px] | 13px | 1.6 | Secondary info, tab labels | | text-xs | 12px | 1.5 | Captions, muted helpers | | text-[11px] | 11px | 1.4 | Tiny labels, timestamps | | text-[10px] | 10px | 1.4 | Sidebar section headers (uppercase) |

Default body in the web app is text-sm — not the Tailwind default text-base. Most UI chrome is compressed for information density.

Weights

  • font-normal (400) — default body
  • font-medium (500) — labels, sidebar active items, button text
  • font-semibold (600) — section headers, badges
  • font-bold (700) — only for marketing pages, not app chrome

Lumen avoids font-bold in the app itself. Hierarchy comes from size + color + spacing, not bold weight.

Line heights

Set via leading-*:

  • leading-tight (1.25) — headers
  • leading-normal (1.5) — default prose
  • leading-relaxed (1.6) — code blocks, dense info

Tracking

  • Default for all prose
  • tracking-tight for big headings (text-2xl, text-xl)
  • tracking-wider + uppercase for sidebar section labels:
<div className="text-[10px] font-semibold uppercase tracking-wider text-text-muted">
  Development
</div>

Do

  • Use text-sm unless there's a reason to go bigger
  • Pair font-semibold with text-text-primary for headers
  • Use text-text-muted for secondary info, never for primary actions
  • Truncate long text with truncate (CSS text-overflow: ellipsis)

Don't

  • Don't use text-lg or bigger for body text in app chrome — looks oversized
  • Don't hand-roll font-size: 15px style attrs — use Tailwind utilities
  • Don't mix font-normal and font-medium in the same row — pick one per rank