FOUNDATIONS

Typography

Three roles, two families, and a set of themes that are allowed to swap both. Type is where the pixel aesthetic is most load-bearing — and most fragile.

Families

Each role is a token, not a font name. Components ask for font-header; the active theme decides what that resolves to.

GeistPixel Square

--font-header

HEADERS AND DISPLAY TYPE

A true pixel typeface. Carries the entire retro read of the product — used sparingly, at larger sizes, where the pixel grid is legible.

JetBrains Mono SemiBold

--font-subheader

LABELS, EYEBROWS, BUTTONS

Uppercased and letter-spaced. The monospace grid reinforces the terminal feel without costing legibility at small sizes.

JetBrains Mono

--font-body

BODY COPY AND UI TEXT

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

The ramp

Seven steps. Anything outside them is a one-off that should probably be folded back in.

Displayfont-header · 30px

Heading 1font-header · 20px

Heading 2font-header · 16px

LABELfont-subheader · 12px · tracked

Bodyfont-body · 14px

Body smallfont-body · 12px

Captionfont-body · 10px · tertiary

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.

No theme currently overrides a font token — every theme inherits the default GeistPixel / JetBrains Mono pairing.