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.
14pxHairline padding — inline chip innards, icon-to-text gaps at small sizes.
28pxTight vertical rhythm — dense lists, form rows.
312pxDefault gap between an icon and its label; padding on small buttons.
416pxComfortable paragraph gap, most card padding.
624pxSection-to-section rhythm inside a card.
832pxPage-level padding — between a Section and the next Section on desktop.
1248pxBetween top-level regions on wide layouts (hero above table).
1664pxRare — only for the biggest breathing rooms on landing-style pages.
Layout 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