Typography

The type scale, font families, line heights, and weight tokens used across the storefront.

Font Families

Two semantic font slots drive the design system: PRIMARY (Inter) for titles, headings, and UI controls; SECONDARY (Space Grotesk) for body text, descriptions, and paragraphs. Both are loaded self-hosted at build via next/font/google (zero CDN, display:swap, no FOUT). To swap a font globally, change the CSS var in packages/design-system/globals.css. JetBrains Mono is available via font-text-code for technical content (code chips, tabular numerics) but is not a brand slot.

Primary: Inter (titles)

The quick brown fox

Jumped over the lazy dog.

Secondary: Space Grotesk (body)

The quick brown fox

Jumped over the lazy dog.

Fonts are bundled at build time by Next.js — no Google Fonts CDN request, GDPR-clean. If the build environment lacks network access, fonts silently fall back to the next system family in each token chain.

Font Scale

ep-xs

Extra Small — The quick brown fox

0.75rem / 1rem

ep-sm

Small — The quick brown fox

0.875rem / 1.25rem

ep-base

Base — The quick brown fox

1rem / 1.5rem

ep-lg

Large — The quick brown fox

1.125rem / 1.75rem

ep-xl

Extra Large — The quick brown fox

1.25rem / 1.75rem

ep-2xl

2XL Heading — The quick brown fox

1.5rem / 2rem

ep-3xl

3XL Heading — The quick brown fox

1.875rem / 2.25rem

ep-4xl

4XL Heading — The quick brown fox

2.25rem / 2.5rem

Font Weights

These are Tailwind's standard font-weight utilities — the design system does not register custom weights. Heading policy (ADR-030, Q3): the Heading atom defaults to font-bold (700) for h1–h4 and font-semibold (600) for h5–h6; hero display moments go font-extrabold (800).

font-400

Regular — ePassLive

font-500

Medium — ePassLive

font-600

Semibold — ePassLive

font-700

Bold — ePassLive

font-800

Extra Bold — ePassLive

Line Heights

These are Tailwind's default line-height utilities. The design system does not extend them — use these standard values for consistency.

leading-none

1 — The quick brown fox

leading-tight

1.25 — The quick brown fox

1.25

leading-snug

1.375 — The quick brown fox

1.375

leading-normal

1.5 — The quick brown fox

1.5

leading-relaxed

1.625 — The quick brown fox

1.625

leading-loose

2 — The quick brown fox

Letter Spacing

These are Tailwind's standard letter-spacing utilities — the design system does not register custom tracking. Convention (ADR-030 §C): uppercase micro-labels use tracking-wider (0.05em) so small caps keep their apertures open; large headings use tracking-tight.

tracking-tighter

-0.05em — The quick brown fox

-0.05em

tracking-tight

-0.025em — The quick brown fox

-0.025em

tracking-normal

0em — The quick brown fox

0em

tracking-wide

0.025em — The quick brown fox

0.025em

tracking-wider

0.05em — The quick brown fox

0.05em

Slot Usage Roles

ADR-030 + addendum assign each text surface a role. The slot names describe the role, not the font — swapping a family is a one-CSS-var change with zero markup edits.

PRIMARYTitles & headings (h1–h6, display)Inter

SECONDARYBody & paragraphs (descriptions, prose ≥14px)Space Grotesk

PRIMARY + tabular-numsData Anchor — prices, dates, quantitiesInter

CODECode — codes, IDs, OTP, promo codesJetBrains Mono

PRIMARYMicro-copy — captions, overlines, tooltips (<14px)Inter

Data Anchor example

34,99 $1 240,50 $0 $79,50 $

Inter + tabular-nums: digits are fixed-width, columns stay aligned when amounts change — the boarding-pass aesthetic.