Type: display and scale

Archivo for the voice, the full size scale. Generated from phase-2/kit/tokens.css (kit v3); the full page is docs › Foundations.

Type scale

Every size token. Line height and tracking where the kit names them; the rest are set per component.

Foundations--text-display · 40px
Global Store--text-page · 26px
Quick edit--text-section · 16px
Navy birdseye two-piece suit--text-card · 13.5px
Holland & Sherry Crystal Springs, navy birdseye.--text-body · 13px
Publishing sends this product to every brand that sells the cloth.--text-read · 15px
Cloth code--text-label · 13px
Updated today 14:20 by Anna--text-small · 12px
£48,210--text-kpi · 28px
£1,150--text-hero · 30px
Choose the cloth--text-step-m · 17px
Navy birdseye--text-input-m · 16px
Available--text-micro · 11.5px
HS 81045 · v4--text-code · 12px
Publish to brands--text-btn · 13.5px
Save draft--text-btn-sm · 12.5px
Publish to brands--text-btn-lg · 15px
Navy birdseye--text-8 · 8px
Navy birdseye--text-8-5 · 8.5px
Navy birdseye--text-9 · 9px
Navy birdseye--text-9-5 · 9.5px
Navy birdseye--text-10 · 10px
Navy birdseye--text-10-5 · 10.5px
Navy birdseye--text-11 · 11px
Navy birdseye--text-14 · 14px
Navy birdseye--text-18 · 18px
Navy birdseye--text-19 · 19px
Navy birdseye--text-20 · 20px
Navy birdseye--text-22 · 22px
Navy birdseye--text-24 · 24px
Navy birdseye--text-44 · 44px
Navy birdseye--text-52 · 52px

Scale: size / line-height / tracking (tracking is never positive on Archivo).

TokenSizeLine heightTrackingFamilyWeightUse
--text-display40px--lh-display = 1.05--tr-display = -.02em--font-title--w-semibold = 600kit page H1 only
--text-page26px--lh-page = 1.15--tr-page = -.015em--font-title--title-w = 600page title in the app
--text-section16px--lh-section = 1.25--tr-section = -.005em--font-title--w-semibold = 600sheet / dialog / panel title
--text-card13.5px--lh-card = 1.30--font-title--w-semibold = 600card title, panel h3
--text-body13px--lh-body = 1.450--font-ui--w-regular = 400default UI text (Plex)
--text-read15px--lh-read = 1.550--font-ui--w-regular = 400help drawer, long copy
--text-label13pxset per component0--font-title--w-semibold = 600form label (Archivo 600)
--text-small12pxset per component0--font-ui--w-regular = 400meta, table secondary
--text-kpi28pxset per component0--font-title--w-semibold = 600KPI value / chart headline figure (raised by data-display)
--text-hero30pxset per component0--font-ui--w-semibold = 600KPI value / chart headline figure (raised by data-display)
--text-step-m17pxset per component0--font-title--w-semibold = 600phone compact step title (raised by wizard-stepper)
--text-input-m16pxset per component0--font-ui--w-regular = 400phone text fields: iOS never zooms at >= 16px
--text-micro11.5pxset per component0--font-title--w-semibold = 600chips, counts, th
--text-code12pxset per component0--font-code--w-regular = 400cloth codes, handles, versions, ids
--text-btn13.5pxset per component0--font-title--w-semibold = 600button label
--text-btn-sm12.5pxset per component0--font-title--w-semibold = 600small button label
--text-btn-lg15pxset per component0--font-title--w-semibold = 600large and phone primary button label
--text-88pxset per component0--font-ui--w-regular = 400initials in the empty garment placeholder (.dt-ph.none)
--text-8-58.5pxset per component0--font-ui--w-regular = 400initials in the empty garment placeholder (.dt-ph.none)
--text-99pxset per component0--font-ui--w-regular = 400initials in the large empty garment placeholder (.dt-ph.lg.none)
--text-9-59.5pxset per component0--font-ui--w-regular = 400small mono badge
--text-1010pxset per component0--font-ui--w-regular = 400tab bar badge, tiny avatar
--text-10-510.5pxset per component0--font-ui--w-regular = 400STAGING / environment badge, tab bar label, filter counts
--text-1111pxset per component0--font-ui--w-regular = 400kbd, chip count, step mark
--text-1414pxset per component0--font-ui--w-regular = 400phone lede, phone list title
--text-1818pxset per component0--font-ui--w-regular = 400phone sheet and ticket title
--text-1919pxset per component0--font-ui--w-regular = 400surface-only literal
--text-2020pxset per component0--font-ui--w-regular = 400ticket head, mini error page title
--text-2222pxset per component0--font-ui--w-regular = 400stacked KPI value, error page title
--text-2424pxset per component0--font-ui--w-regular = 400phone page title
--text-4444pxset per component0--font-ui--w-regular = 400surface-only literal
--text-5252pxset per component0--font-ui--w-regular = 400surface-only literal

Archivo stays at normal width

Frank's rule, 2026-10-11: Archivo is never set wide.

TokenValueRule
--font-stretch-title100%Frank 2026-10-11: Archivo is NEVER set wide

--font-stretch-title is 100%. The fonts load the wght axis only, so no wdth axis is available to the page. Tracking on Archivo is zero or negative, never positive: --tr-display -.02em, --tr-page -.015em, --tr-section -.005em.

base.css · the Archivo voice selector (quoted)
.title,.page-title,.btn,.sb-item,.sb-group,.sb-brand b,.lbl,.th,.kit-h1,.kit-h2,.spec-h,.sec-title,.tab,.seg-i {
  font-family: var(--font-voice);
  font-stretch: var(--font-stretch-title);
  font-variation-settings: normal;
}
.title {
  font-weight: var(--title-w);
  letter-spacing: -.02em;
}

Do

  • Set titles, buttons, the menu, labels, tabs and table headers in --font-title at 100% width.
  • Use negative tracking only on display, page and section titles.

Don't

  • Load Archivo's wdth axis, or set font-stretch above 100%.
  • Add positive letter-spacing to any Archivo text, including uppercase labels.

Weights

Four weights. Archivo titles sit at --title-w.

TokenValueNote
--w-regular400
--w-medium500
--w-semibold600
--w-bold700
--title-w600Page title weight