Design tokens

Typography

Novix UI pairs Geist Sans for interface prose with Geist Mono for code and numerics. Every scale step is tuned for optical rhythm — tracking tightens as size grows.

Scale

Six semantic steps cover every surface in the system. Click any step to copy its classes.

display

Sculpted, not drawn.

text-[44px] leading-[1.05] tracking-[-0.03em] font-display font-semibold

The heading

text-[32px] leading-[1.1] tracking-[-0.025em] font-semibold

The subheading

text-[24px] leading-[1.15] tracking-[-0.02em] font-semibold

body

Body text carries the weight of every documentation page.

text-[15px] leading-relaxed

caption

Caption for metadata and hints

text-[12.5px] text-muted-foreground

mono

npx @novix-ui/cli add button

font-mono text-[13px]

Usage & code

Combine font utilities directly in your JSX markup for consistent typographic hierarchy:

tsx

// Example: Typographic Hierarchy in JSX
export function ArticleHeader() {
  return (
    <header className="space-y-3">
      <span className="font-mono text-[12.5px] text-accent tracking-wider uppercase">
        Changelog v2.0
      </span>
      <h1 className="font-display text-[44px] font-semibold tracking-tight leading-[1.05] text-foreground">
        Sculpted for modern interfaces.
      </h1>
      <p className="text-[15px] leading-relaxed text-muted-foreground">
        Body text formatted with balanced line-height and neutral tracking.
      </p>
    </header>
  );
}

Principles

· Body copy sits at 15px. Anything smaller is metadata.
· Display type gets negative tracking; body stays neutral.
· Line-height loosens for prose (1.6), tightens for headings (1.05–1.15).
· Numerals use tabular figures inside tables and dashboards.