Design Tokens: Typography, Spacing & Font

Font family, font sizes, and spacing are defined or referenced in apps/web/src/app/globals.css and exposed as Tailwind utilities via @theme. Use these semantic utilities for consistency across the app.

Font family

• UI (sans): Geist Sans, loaded in app/layout.tsx and applied to body in globals.css via --font-geist-sans. The whole app (including sidebar) inherits this.
• Monospace: Geist Mono (--font-geist-mono). Use font-mono in Tailwind when needed (code, IDs).
• Do not set a different font on individual components unless needed (e.g. font-mono for code); rely on inheritance for a consistent look.

Typography

Utility	CSS var	Use for
text-caption	12px	Labels, badges, meta text
text-body	14px	Secondary text, descriptions
text-body-lg	16px	Primary body, sidebar title
text-subheading	18px	Section subheadings
text-heading	20px	Card/section headings
text-title	24px	Page title
text-display	30px	Hero / display

Standard scale is also available: text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl (all sourced from the same :root vars).

Spacing

Utility	Value	Use for
p-tight, gap-tight, etc.	8px	Dense UI (sidebar, icon groups)
p-normal, gap-normal, etc.	12px	Default inner padding
p-comfortable, gap-comfortable, etc.	16px	Cards, form groups
p-relaxed, gap-relaxed, etc.	24px	Section margins, grid gaps
p-page, gap-page, etc.	32px	Page padding, large sections

Use with any Tailwind spacing suffix: p-page, mb-relaxed, gap-comfortable, space-y-normal.

Base styles

Global base styles (in globals.css) use these tokens for:

• h1 → --text-2xl, h2 → --text-xl, h3 → --text-lg, h4 → --text-base
• label, button → --text-sm
• input → --text-sm

To change font size or spacing app-wide, edit the :root variables in globals.css; @theme and base styles will pick them up automatically.