Foundations/Typography

Typography

The dashboard and UI docs both load Geist Sans and Geist Mono via Next.js next/font. CSS variables --font-geist-sans and --font-geist-mono map to Tailwind font-sans / font-mono.

Scale (Tailwind)

Prefer this scale for new UI; pair with text-foreground or text-muted-foreground for hierarchy.

ClassSizeTypical useSample
text-xs0.75remMeta, table captionsAg payment volume
text-sm0.875remSecondary body, form hintsAg payment volume
text-base1remDefault bodyAg payment volume
text-lg1.125remCard titles, emphasisAg payment volume
text-xl1.25remSection headingsAg payment volume
text-2xl1.5remKPI values, hero metricsAg payment volume
text-3xl1.875remPage titles (docs / marketing)Ag payment volume

Patterns

  • Page titles: tracking-tight with semibold weight.
  • Dense numeric data: tabular-nums + font-mono where alignment matters.
  • Secondary copy: leading-relaxed.