FOUNDATIONS

Typography

Five font tokens, a scale that runs from 8px to 72px, and one face — Departure Mono — under every role. The previous Geist Pixel + JetBrains pairing is kept on file so it can be swapped back.

FONT TOKENS: 0
SCALE STEPS: 13
IN USE: 13
THEMES: 12

Families

Each role is a token, not a font name. Components ask for font-header; every theme currently resolves that to Departure Mono. Values below are read out of the @theme block at build time.

--font-header—

Headers and display type. Departure Mono — the same face as body, just larger.

Departure Mono. The same face as body — display type is a size and tracking change, not a family change.

--font-subheader—

Labels, eyebrows and buttons. Uppercased and letter-spaced.

Uppercased and letter-spaced. Same face as body; the grid still keeps labels aligned at small sizes.

--font-body—

Body copy and UI text. Monospace, so scores, playtime and dates stay aligned.

Monospace body text is an unusual choice and a deliberate one — it keeps numeric data (scores, playtime, dates) aligned everywhere it appears.

--font-sans—

Tailwind's default sans, remapped onto the body face so an un-tokenised class can't import a foreign font.

Remapped onto the body face. Tailwind applies it by default, so pointing it at the same font stops an un-tokenised class importing a foreign one.

--font-mono—

Tailwind's default mono, remapped the same way.

Remapped the same way, for the same reason.

The scale

Every step available, rendered at its own size, with how many times each is referenced across both apps. Usage is the honest measure of a scale: a step nothing uses is dead weight, and a step used 500 times is load-bearing.

SAMPLE	STEP	SIZE	WEB	MOBILE
Checkpoints	`text-3xs`OURS	8px	36	16
Checkpoints	`text-2xs`OURS	10px	229	177
Checkpoints	`text-xs`	12px	541	353
Checkpoints	`text-sm`	14px	284	302
Checkpoints	`text-base`	16px	21	76
Checkpoints	`text-lg`	18px	17	47
Checkpoints	`text-xl`	20px	30	35
Checkpoints	`text-2xl`	24px	23	20
Checkpoints	`text-3xl`	30px	11	10
Checkpoints	`text-4xl`	36px	2	—
Checkpoints	`text-5xl`	48px	4	2
Checkpoints	`text-6xl`	60px	—	1
Checkpoints	`text-7xl`	72px	—	2

THE TWO WE DECLARE

--text-2xs — 10px. The app's small-label size — by far the most used step below body.

--text-3xs — 8px. Dense metadata inside compact cards and tier tiles.

Tailwind stops at text-xs (12px). The pixel UI needs to go smaller, and these two steps carry nearly every such use. Anything written as text-2xs is the same size with none of the meaning — it is an ESLint error on web for that reason.

Roles

Which step to reach for. The scale above is what exists; this is what each step is for.

Displayfont-header · text-3xl

Page title on landing-style routes. Never more than one per page.

Heading 1font-header · text-xl

Section headers inside a page.

Heading 2font-header · text-base

Nested headings inside a Section — sparingly.

LABELfont-subheader · text-xs · tracked

Eyebrows, badges, table column headers. Always uppercase, always letter-spaced.

Bodyfont-body · text-sm

Default paragraph size — reviews, descriptions, comments.

Body smallfont-body · text-xs

Dense data — inventory rows, chip labels, metadata.

Captionfont-body · text-2xs · tertiary

Timestamps, secondary counts, table footnotes.

Themes that reassign type

Most themes only change color. These change the typeface too, which is the point at which a theme stops being a palette and starts being a different product skin.