Typography:
- The codebase contained exactly one font-family declaration
(LoadingIndicator), naming 'Cinzel Decorative' and 'Trajan Pro' — neither
loaded, bundled, or present in static/. So every word on the site, in every
component, rendered in the browser's default serif. For a site whose whole
premise is atmosphere, that was the largest craft gap.
- Now a display/body pairing: self-hosted Cinzel Variable for the name,
headings, welcome title and tooltip titles; a system stack for body and UI
copy, which costs nothing to load and is far more legible than Times at the
13-14px the modal and stats panel use.
- @fontsource-variable/cinzel ships two subsets with unicode-range, so only
the 25.3KB latin file is fetched for this content (verified — latin-ext is
emitted but never requested). font-display: swap, so text never blocks.
Contrast (WCAG 1.4.3):
- Measured every grey against the panel background (#1a1a2e) rather than
eyeballing it. #666 is 2.97:1 and fails AA for normal text; it was used for
the modal close glyph, the tooltip hint, the branch count and the skill
years. Replaced with --text-subtle (#9a9aa8, 6.1:1).
- Correction to the audit: #888 was listed as failing. It measures 4.81:1 and
passes. Tokenised for consistency, not because it was broken.
--text-muted (#a8a8b8) is 7.3:1, not the ~9:1 I claimed.
Tokens:
- z-index was nine ad-hoc literals across seven files, with LoadingIndicator
and the modal backdrop both on 1000. Now a named scale, and no raw z-index
literal survives anywhere in src/ (verified against the live stylesheet).
- Added spacing, radius, motion and type tokens alongside the existing colour
ones, so the system covers more than colour.
Note: package-lock.json in this commit also carries pre-existing churn from
before this work; adding the font dependency entangled the two.
Verified in the production build: Cinzel loads and applies to headings,
computed body font resolves to system-ui, one font file fetched, zero raw
z-index literals in the rendered CSS.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
TehRiehlDealandClaude Opus 5