Typography

Three fonts, one scale, named roles

Inter for the interface, DM Sans for headings, Source Code Pro for machine values only. Sizes come from the Tailwind scale extended down to 10px; hierarchy comes from the type-* roles in theme.css.

Roles

Read from theme.css. A role sets family, size, weight, tracking and leading; don't stack a conflicting text-* or font-* on it.

Email infrastructure for teams that ship.

.type-displayPublic · one hero statement per site

-family: var(--font-heading);  -size: clamp(2.75rem, 7vw, 5.5rem);  -weight: 600;  -spacing: -0.055em;  -height: 0.98;

Send with confidence

.type-page-titlePublic · page h1

-family: var(--font-heading);  -size: clamp(2rem, 4vw, 3rem);  -weight: 600;  -spacing: -0.04em;  -height: 1.05;

Deliverability that explains itself

.type-section-titlePublic · section h2

-family: var(--font-heading);  -size: clamp(1.5rem, 2.5vw, 2rem);  -weight: 600;  -spacing: -0.025em;  -height: 1.15;

Contacts

.type-titleApp · page title (PageHeader)

-family: var(--font-heading);  -size: 1.5rem;  -weight: 600;  -spacing: -0.02em;  -height: 1.2;

Verified domains

.type-headingApp · section heading

-family: var(--font-heading);  -size: 1.125rem;  -weight: 600;  -spacing: -0.015em;  -height: 1.35;

DNS records

.type-subheadingApp · card / subsection title (CardTitle, DetailSection)

-family: var(--font-heading);  -size: 1rem;  -weight: 600;  -spacing: -0.01em;  -height: 1.4;

Every message carries a delivery receipt, an open and click trail, and a plain reason when it didn't arrive.

.type-bodyPublic · reading copy

-size: 1rem;  -height: 1.65;

Rendered from the same document as the HTML alternative.

.type-body-mutedPublic · secondary reading copy

-size: 0.9375rem;  -height: 1.6;

Sender name

.type-labelForm labels, weighted table heads

-size: 0.875rem;  -weight: 600;  -spacing: -0.005em;  -height: 1.35;

Updated 2 h ago · 14 days retained

.type-captionMuted helper text

-size: 0.75rem;  -height: 1.45;

Status

.type-overlineUppercase group label (meta grids, settings eyebrows)

-size: 0.75rem;  -weight: 600;  -spacing: 0.14em;  -height: 1.35;  -transform: uppercase;

npx unitpost send --to team@acme.com

.type-codeMachine values: code, IDs, addresses, DNS

-family: var(--font-mono);  -size: 0.8125rem;  -height: 1.55;

Templates

.type-navSidebar, docs and settings navigation

-size: 0.8125rem;  -height: 1.25rem;

Scale

No arbitrary sizes. Nothing below 10px.

Utility	Size	Sample	Use
text-3xs	10px	Deliverability that explains itself	Dense badges, canvas chrome
text-2xs	11px	Deliverability that explains itself	Table meta, chip labels
text-xs	12px	Deliverability that explains itself	Captions, helper text, dense rows
text-sm	14px	Deliverability that explains itself	Dashboard body copy, controls
text-base	16px	Deliverability that explains itself	Reading copy
text-lg	18px	Deliverability that explains itself	Section headings (via type-heading)
text-xl	20px	Deliverability that explains itself	Large stats
text-2xl	24px	Deliverability that explains itself	Page titles (via type-title)

Families

Aa Bb Cc 0123

font-sans · InterInterface

Aa Bb Cc 0123

font-heading · DM Sansh1–h4 automatically

Aa Bb Cc 0123

font-mono · Source Code ProMachine values only