Typography

Archivo for body/UI (weights 400/500/700), paired with Fragment Mono reserved for key figures only. Replaced the legacy Proxima Nova family, which was licensed and hosted separately for the live Rails app. Both load via a Google Fonts <link> in every page's <head>. See tokens/type.css for the token source.

Type scale

$4,716.25 display--font-size-display · 40px
Fragment Mono only: key figures (dashboard metrics), never body copy

Payable partners heading-lg--font-size-heading-lg · 30px
Page titles

TechBargains heading-md--font-size-heading-md · 24px
Panel headers, listing-toolbar titles

Media & content heading-sm--font-size-heading-sm · 19px
Card/section titles

Retail price body-lg--font-size-body-lg · 16px
Form labels, emphasized body

Ultimate Productivity Software Bundle body--font-size-body · 14px
Default body/table text

SKU-1029 body-sm--font-size-body-sm · 13px
Dense table cells

Jul 9, 2026 caption--font-size-caption · 12px
Table meta, timestamps, helper text

Weights

Regular (400)The quick brown fox jumps over the lazy dog

Medium (500)The quick brown fox jumps over the lazy dog

Bold (700)The quick brown fox jumps over the lazy dog

Fragment Mono$212.99 · #48215

Usage guidance

The scale is deliberately dense at the bottom (caption/body-sm/body all sit between 12–14px): this is an internal admin tool used for hours at a time, and the design principles prioritize table/list density over a generic 16px body-text floor. Hierarchy gets its real contrast at the top of the scale instead, where it matters most: page titles vs. panel headers vs. key metrics all sit at least 1.25× apart.

Fragment Mono is reserved for load-bearing figures only (see the Dashboard's key metrics in flows/dashboard/index.html) and is never used for body copy, table cells, or headings that are just conversational text ("Good morning, Jordan" stays in Archivo). Using it everywhere "numbers" appear would dilute it into generic "technical" shorthand instead of a deliberate signal.

Use font-family: var(--font-family-medium) or var(--font-family-bold) paired with the matching font-weight variable, not just the family alone: Archivo is a single variable font, so weight comes from font-weight, unlike the old Proxima Nova Bold/SemiBold, which were separate installed files.