game-ui

Game UI

Build a game interface, not a web dashboard. The defining failure of prompt-built game UI: nested cards, marketing-hero title screens, generic dashboard styling, and web-app typography wrapped around a canvas. Anti-patterns to reject on sight: stat cards in rounded boxes inside boxes, a hero section with a tagline over the game, <h1>-styled headings in a HUD, one-note purple/blue gradient panels.

Hierarchy follows gameplay priority: survival/status first, objective/progress second, immediate feedback third, flavor last. Prefer meters, icons, cooldown rings, badges, and compact clusters over labeled stat cards — a meter is read at glance-speed mid-dodge; a card is not.

HUD zoning

• Top-left: objective, wave, distance, timer, progress.
• Top-right: score, currency, combo, pause.
• Bottom-left/right: touch movement/action controls (mobile).
• Center: reserved for transient banners (wave start, combo, warnings) — never persistent chrome, never stacked banners over the play path.
• In-world (diegetic) where possible: target markers, off-screen threat indicators, damage numbers, prompts anchored to the thing itself.
• Keep all UI out of the play path — away from the player, threats, pickups, and the next decision.

Numbers that don't dance

• Fixed-width numeric containers for score, timer, ammo, speed, health: tabular numerals (font-variant-numeric: tabular-nums) or a monospace face. Changing values must never shift layout.
• Test the longest likely value: max score, MM:SS timer, multi-digit combo. No clipping, no wrap, no neighbor displacement.
• Animate value changes briefly (count-up, meter fill, pulse) — a silently incrementing corner number reads as broken (see game-feel).

Color roles

One color = one meaning, everywhere: danger (damage, low health), reward (score, pickups), shield/defense, boost/power, objective, disabled. A limited status palette over neutral surfaces beats a rainbow. Critical states get two channels (color + shape/motion/sound) — never color alone.