FOUNDATIONS
Spacing & shape
Tailwind's default 4px scale, unmodified — and a radius system that turns out to be more interesting than the pixel aesthetic suggests.
Shape is a themed token, not a constant
The base layer sets every radius to 0px, and components reference the tokens (rounded-[var(--radius-button)]) rather than hard-coding rounded-none. That indirection looked like future-proofing. It isn't — it's load-bearing.
--radius--radius-button--radius-input--radius-card--radius-badge--radius-avatar5 of 12 themes are fully square. TERMINAL, AMBER, MONOCHROME, PHOSPHOR, MS-DOS keep every radius at 0px. The remaining 7 — the console and OS homages — adopt the shape language of the hardware they reference: Xbox 360 and Wii use pill buttons, PlayStation and Nebula soften to 8px, the Super Nintendo themes sit at 6px.
That is a deliberate decision, not drift — but it means “Checkpoints has no rounded corners” is not a true statement about the system, only about its default. Any component that hard-codes rounded-none instead of the token silently opts out of seven themes.
Radius by theme
Parsed from each theme file. Square themes in green, shaped themes in amber.
| THEME | BASE | BUTTON | INPUT | CARD | BADGE | AVATAR |
|---|---|---|---|---|---|---|
| TERMINAL | 0px | 0px | 0px | 0px | 0px | 0px |
| AMBER | 0px | 0px | 0px | 0px | 0px | 0px |
| MONOCHROME | 0px | 0px | 0px | 0px | 0px | 0px |
| NEBULA | 0.5rem | 0.5rem | 0.5rem | 0.75rem | 9999px | 9999px |
| SUPER NES | 0.375rem | 0.375rem | 0.375rem | 0.375rem | 0.375rem | 9999px |
| SUPER FAMICOM | 0.375rem | 0.375rem | 0.375rem | 0.375rem | 0.375rem | 9999px |
| PHOSPHOR | 0px | 0px | 0px | 0px | 0px | 0px |
| RPG | 0.375rem | 0.5rem | 0.375rem | 0.25rem | 9999px | 9999px |
| PLAYSTATION | 0.5rem | 0.5rem | 0.5rem | 0.75rem | 9999px | 9999px |
| XBOX 360 | 0.75rem | 9999px | 0.5rem | 0.75rem | 9999px | 9999px |
| WII | 1rem | 9999px | 9999px | 1rem | 9999px | 9999px |
| MS-DOS | 0px | 0px | 0px | 0px | 0px | 0px |
Spacing scale
Standard Tailwind spacing, 4px per step. The system doesn't extend it — restraint here is what keeps dense, data-heavy screens from drifting.
14px28px312px416px624px832px1248px1664pxLayout constraint
The authenticated app is capped at 1024px and centered, with 16px gutters. Navigation shares the same cap so the content column and the nav never disagree.
max-w-[1024px] mx-auto px-4