The Design Framework

Seven colors, two themes. Five carry the daily work; warm cream and muted gold are rare accents — warmth and prestige, spent on special occasions. The palette is closed, but it is a palette, not a cage.

Poppins is the voice — every word, label, heading and button. Space Mono exists for one job only: digits. Numbers, dates, counters, scores. If it can be read aloud as a word, it is not mono. Headings are weight 500 — the site speaks, it does not shout.

Stacked full-width rows sit 15px apart. Sections pad 15px on every side, uniformly. Tight inline clusters (chips, icon rows) may use 10px. Nothing earns its size through empty space — a section too empty to fill is a section that needs more to say, not bigger digits.

One button, one law: 48px tall, 2px text-color border, transparent body, uppercase Poppins at weight 500, filling on hover. Orange borders are reserved for the one special action of a surface — never more than one per view.

Primary #C1571C is loud on purpose — emphasis is its whole job, and it should flash where it lands. The budget controls how often it lands, not how bright it is: the selected state, the one special action, a small point of emphasis. What it may not do is bleed — filling banners edge to edge, painting large numerals, framing whole sections. When everything flashes, nothing does. Cream and gold obey the same budget, at even lower frequency.

Five named patterns, used one at a time, always subtle. Heroes may layer the ghost Z over a paper; content cards stay plain.

Icons are Google Material Symbols, each wrapped as a component with currentColor fill. The set is curated by the owner: when a design needs an icon that does not exist yet, it is requested and provided — never hand-drawn, never an emoji, never a unicode stand-in.

The complete set — every icon component in src/components/icons/, with the surfaces it appears on. One tile size for all, so the set reads as a set.

Seven more live with the play screens only (src/components/play/icons.tsx): back, check, x, yes-circle, no-circle, rotate, z-logo. They size themselves through the play screens' own scaling variables, which is why they stay local.

A framed surface pairs its border with an equal shadow: 2px border carries a 2px offset shadow, 4px carries 4px. Never mixed — a heavy throw under a thin line (or the reverse) is how a page starts feeling subtly wrong without anyone knowing why.

A digit's size must come from its meaning, not from empty space around it. Giant numerals that exist to fill a quiet section are a confession — the section needed more to say. Data gets mono, context gets sentences, and nothing on a page should need a telescope or produce vertigo.

The scale (ruled 2026-07-25): ONE hero figure per page at 40px max · secondary figures 24–28px · tertiary 16–18px. Donut numbers are drawn inside the graphic and scale with it — exempt from this scale (ruled 2026-07-31).

Mono is for pure digit tokens only. A date ("Jul 25, 2026") contains a word, so the whole date sets in Poppins. Status chips, mode tags and level pills (Castle, Quiz, ZapCore, Locked) are words in bordered slots — Poppins 500, uppercase, tracked — never mono, never improvised abbreviations when a real name fits ("Zapegory Level 1", not "GEN"). Exception (ruled 2026-07-31): map coordinates ("C:4") count as data tokens and set in mono, letter included.

A section with nothing in it shows its head and one honest sentence — and NO link to its full page, because an empty section's full page is an equally empty dead end. The link earns its place back with the first real row. Catalog pages that are never empty (the badge ladders) keep their links.