Five typefaces, each with a defined role. Never swap them between contexts.
Cinzel — titles
THE MUSIC DECK
Genre · Navigation · Buttons
Usage rules
- Page titles, section headings, card headers
- Navigation labels and button text
- Genre labels and badge names
- Always uppercase or title-case — never sentence case
Lora — subtitle
Battle rules, genre mechanics, deck building, and visual design system.
Usage rules
- The single intro line directly under a page or hero title — one per page, never repeated deeper in the content
- Always italic — this typeface is never set upright
- Not used for general body copy (see EB Garamond)
EB Garamond — flavour
A collectible card game built around music.
Each genre owns a border colour. World is the exception — it overlays a dotted pattern on the host genre's colour.
Usage rules
- Section descriptions, list copy, and general flavour/prose text scattered through a page
- Not the page/hero subtitle itself — that's Lora (see above)
- Not used for interactive UI chrome (see IBM Plex Mono)
IBM Plex Mono — UI default
A collectible card game built around music.
Tooltips, table cells, form labels, and inline technical copy.
Usage rules
- Plain UI text — tables, forms, tooltips, buttons' own inherited copy
- Descriptive/flavour copy uses EB Garamond instead, not this
- Regular weight (400) for body, medium (500) for emphasis
- Default body font — applied to
body in globals.css
Space Mono — data
#c8a040 · 120 BPM
LEGENDARY · STACK ×3 · +45%
Usage rules
- Numeric data, scores, percentages, counters
- Section index labels (01, 02, 03…)
- Hex colour codes, technical tags, CSS tokens
- Keep sizes small (9–13 px) and letter-spacing loose