Typography

Typographic scale, font hierarchies, and Tailwind utility tokens for the VOXFM interface.

Font Families

Plus Jakarta Sansfont-sans
var(--font-sans)

Universal interface typeface used for display headers, page titles, section headers, form controls, and body copy.

Supported Weights:400 (Regular), 500 (Medium)
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Goldmanfont-brand
var(--font-brand)

A technical, geometric display typeface set in Medium (500) weight, reserved strictly for the VOXFM brand wordmark and identity headers.

Supported Weights:500 (Medium)
VOXFM AUDIO SYSTEM 0123456789
UI Monospacefont-mono
var(--font-mono)

Fixed-width font used for code blocks, tabular numbers, timestamps, and parameters.

Supported Weights:400 (Regular), 500 (Medium)
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Semantic Type Scale

Displayh1 / div

VoxHero, marketing splash headers, display hero banners

Display
Size: 48px / 96px (3rem / 6rem)Leading: 1.0 (leading-none)Tracking: -0.025em (tracking-tight)Weight: 500 (font-medium)
Page Headerh1

Primary document titles across all documentation and layout headers

Page Header
Size: 30px / 48px (1.875rem / 3rem)Leading: 1.25 (leading-tight)Tracking: -0.025em (tracking-tight)Weight: 500 (font-medium)
Section Headerh2

Major content section headers across all documentation pages

Section Header
Size: 24px / 30px (1.5rem / 1.875rem)Leading: 1.25 (leading-tight)Tracking: -0.025em (tracking-tight)Weight: 500 (font-medium)
Component Headerh3 / CardTitle

CardTitle, DialogTitle, SheetTitle, subsection titles

Component Header
Size: 18px / 20px (1.125rem / 1.25rem)Leading: 1.35 (leading-snug)Tracking: -0.025em (tracking-tight)Weight: 500 (font-medium)
Bodyp / body

Page introductory descriptions, standard prose, card body copy

Body — Standard paragraph text used across all documentation, modal dialogs, cards, and interface descriptions.
Size: 16px (1rem)Leading: 1.5 (leading-normal)Tracking: 0em (normal)Weight: 400 (font-normal)
UI ControlButton / Label

Button, Label, TabsTrigger, navigation links, form controls

Interactive form labels, button labels, and tab triggers
Size: 14px (0.875rem)Leading: 1.0 (leading-none)Tracking: 0em (normal)Weight: 500 (font-medium)
Secondary / MutedCardDescription

CardDescription, DialogDescription, helper text, captions

Secondary labels, helper text, input captions, and status indicators
Size: 14px (0.875rem)Leading: 1.5 (leading-normal)Tracking: 0em (normal)Weight: 400 (font-normal)
Micro / BadgeBadge / TableHead

Badge, status tags, table column headers, compact indicators

Status badges, token pills, and compact table headers
Size: 12px (0.75rem)Leading: 1.0 (leading-none)Tracking: 0em (normal)Weight: 500 (font-medium)
Code / Monospacecode / pre

Code blocks, timestamps, token values, parameters, telemetry

0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ
Size: 12px (0.75rem)Leading: 1.0 (leading-none)Tracking: 0.05em (tracking-wide)Weight: 400 (font-normal)

Resources