Game interface craft — HUD zoning and hierarchy, fixed-width numerals, alert-color roles, meters over stat cards, menu/overlay states, touch controls (44px targets, safe-area insets, pointer-release handling) — for Phaser, Three.js, and DOM overlays. Use when: building or reviewing a HUD, score/timer/health display, pause/fail/win menus, on-screen touch controls, 'the UI looks like a website', clipped or shifting text, or any in-game interface work.
Game interface craft — HUD zoning and hierarchy, fixed-width numerals, alert-color roles, meters over stat cards, menu/overlay states, touch controls (44px targets, safe-area insets, pointer-release handling) — for Phaser, Three.js, and DOM overlays. Use when: building or reviewing a HUD, score/timer/health display, pause/fail/win menus, on-screen touch controls, 'the UI looks like a website', clipped or shifting text, or any in-game interface work.
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.
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.
Menus & overlays
Required states beyond the HUD: pause/resume, fail/retry, win/next when
relevant. Primary action first and biggest (resume, retry); secondary
actions (settings, quit) smaller.
Buttons have stable dimensions plus hover/pressed/focus/disabled states.
Overlays pause underneath, act in one input, and never look like a landing
page. Debug/tuning UI gates behind a dev flag or query param — it never
ships as player UI.
UI reads from the game state (single source of truth) and dispatches
intents; check for stale values after restart.
Touch controls (mobile)
~44 CSS px minimum touch targets, with enough separation that adjacent
controls can't be fat-fingered.
Safe-area insets: pad edge controls with env(safe-area-inset-*);
nothing interactive under the notch or home indicator.
Release paths: handle pointerup, pointercancel,
lostpointercapture, window blur, and visibility change — a stuck
virtual button is a stuck key. Controls emit the same game intents as
keyboard.
touch-action: none only on the game surface and control regions, so page
scroll/zoom can't steal input.
Don't scale text with viewport width; use clamp() with sane floors.
Verify portrait and landscape if both are supported.
Ship checklist
First screen is the game (or a deliberate modal), not a landing page.
No nested cards / dashboard styling / marketing-hero layout.
HUD zones match the map above; center is transient-only.
Score/timer/ammo use fixed-width numerals; longest value tested.
Alert colors consistent; critical states have ≥2 feedback channels.
Pause, fail/retry (one input, <2s), win states exist and work.
Text legible over bright, dark, and moving backgrounds.
Mobile: 44px targets, safe-area insets, release-path handling, no
overlap between controls and HUD warnings.
No layout shift, clipping, or overlap at desktop / narrow / phone
widths.
Debug UI gated; no stale HUD values after restart.
Related skills: game-feel (juice on value changes), onboarding (first-30s
and control hints), design-lenses (Feedback/Accessibility lenses),
gamepad (physical controller labels/glyphs).
