CHECKPOINTS — DESIGN SYSTEM

A retro-native design system for a modern game-tracking app.

Checkpoints is built on a pixel aesthetic that has to survive twelve themes, two platforms and five languages. This site documents that system — and audits it, using data pulled straight out of the codebase.

EXPLORE FOUNDATIONS SEE THE AUDIT

COMPONENTS: 52
THEMES: 12
PLATFORM PARITY: 38%
LOCALES: 5

GENERATED 2026-07-29 19:27 UTC FROM SOURCE

The system in one screen

The same button, card and input rendered under every theme. No per-theme components — only token files.

TERMINAL

Phosphor green on near-black. Dense, grid-locked, character-bordered.

AMBER

TERMINAL

80s amber CRT. Warm phosphor on black, like a vintage terminal.

MONOCHROME

TERMINAL

Pure black and white. No color, no compromise.

NEBULA

DEFAULT

Cosmic violet & cyan on deep navy. Soft sans-serif, eye-friendly.

SUPER NES

DEFAULT

North American Super Nintendo. Cool gray with tonal purple.

SUPER FAMICOM

DEFAULT

Japanese Super Famicom. Warm gray with red, yellow, blue, and green accents.

PHOSPHOR

DEFAULT

Classic CRT monitor. The original Checkpoints look.

RPG

DEFAULT

Parchment & gold. For the adventurer in you.

PLAYSTATION

DEFAULT

PS3 XrossMediaBar aesthetic.

XBOX 360

DEFAULT

NXE dashboard. Bright, white, with that signature green pop.

WII

DEFAULT

Wii System Menu channels. Clean white with cool blue light.

MS-DOS

DEFAULT

Classic MS-DOS blue screen aesthetic.

Twelve themes, one component set

Every surface is driven by CSS custom properties, so PHOSPHOR, SUPER FAMICOM and MS-DOS are the same components with different token files. Nothing is hard-coded to a palette — including this site, which is themed by the switcher above.

Shape is a token, not a constant

The default is zero radius — pixel type, square corners, one icon family. But the console-homage themes reassign radius to match the hardware they reference, so a component that hard-codes rounded-none quietly opts out of seven themes. The indirection is load-bearing.

The docs audit the system

Inventory, usage counts, platform parity and localization coverage are generated from the source on every build. When a component drifts, the page reporting it changes on its own — there is no hand-maintained spreadsheet to fall behind.

What the audit found

These pages exist to be useful, not flattering. A few things the generated data surfaces right now:

26 components exist on web but not mobile. Parity sits at 38%. See the matrix.
Two different PixelIcon components ship on web. One renders a CSS mask over all 4,111 icons; the older one maps 74and silently renders the icon's name as text when it misses. Read the breakdown.
Localization is fully covered. All 1,959 keys across 19 namespaces are present in every one of the 5 locales. See the report.