Type: body and mono

IBM Plex Sans for reading, IBM Plex Mono for codes, tabular money. Generated from phase-2/kit/tokens.css (kit v3); the full page is docs › Foundations.

Families

Three families, each with one job.

Token	Stack	Used for	Weights loaded
`--font-title`	`'Archivo', system-ui, sans-serif`	titles, buttons, menu, labels, table headers	400–700 (variable, wght axis only)
`--font-voice`	`var(--font-title)`	Alias of `--font-title`.	—
`--font-ui`	`'IBM Plex Sans', system-ui, sans-serif`	reading text, tables, prices	400, 500, 600
`--font-code`	`'IBM Plex Mono', ui-monospace, monospace`	cloth codes, handles, versions, ids	400, 500

Publish to brands · Global Store--font-title · Archivo

Holland & Sherry Crystal Springs · £1,150--font-ui · IBM Plex Sans

HS 81045 · navy-birdseye-two-piece · v4--font-code · IBM Plex Mono

Uses--font-title--font-ui--font-code

Numbers and money

Money, counts and dates line up in columns.

GBP is the base currency, shown with EUR and USD. Lists show £1,150; edit fields show £1,150.00. Every number in a table or KPI uses tabular figures.

base.css (quoted)

.num,.money {
  font-variant-numeric: tabular-nums;
}
body {
  background: hsl(var(--canvas));
  color: hsl(var(--foreground));
  font: var(--w-regular) var(--text-body)/var(--lh-body) var(--font-ui);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11" 1;
}

With tabular numbers (.num, .money)

Navy birdseye two-piece suit£1,150

Charcoal herringbone jacket£780

Mid-grey flannel trousers£340

Navy chalk-stripe three-piece£1,390

Midnight mohair dinner suit£1,480

Without (proportional)

Navy birdseye two-piece suit£1,150

Charcoal herringbone jacket£780

Mid-grey flannel trousers£340

Navy chalk-stripe three-piece£1,390

Midnight mohair dinner suit£1,480

Font loading

The kit loads from Google Fonts; the app loads the same files through next/font.

Google Fonts URL (base.css @import)

https://fonts.googleapis.com/css2?family=Archivo:wght@400..700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap

next/font (generated from the same weights)

// app/fonts.ts · next/font replaces Inter and JetBrains Mono
import { Archivo, IBM_Plex_Sans, IBM_Plex_Mono } from 'next/font/google';

// Archivo: 400–700 (variable, wght axis only). Never pass axes: ['wdth'].
export const archivo = Archivo({ subsets: ['latin'], display: 'swap', variable: '--font-archivo' });
export const plexSans = IBM_Plex_Sans({ subsets: ['latin'], display: 'swap', weight: ['400', '500', '600'], variable: '--font-plex-sans' });
export const plexMono = IBM_Plex_Mono({ subsets: ['latin'], display: 'swap', weight: ['400', '500'], variable: '--font-plex-mono' });

// globals.css then points the kit tokens at the next/font variables:
//   --font-title: var(--font-archivo), system-ui, sans-serif;
//   --font-ui:    var(--font-plex-sans), system-ui, sans-serif;
//   --font-code:  var(--font-plex-mono), ui-monospace, monospace;