Context
Who: players on a TV at three meters, on a monitor at one meter, and on a handheld at thirty centimeters. Jobs: read status at a glance, act without looking away, pause and adjust without losing the thread. Constraints: real-time input, overscan and cutouts, color-vision variety, photosensitivity. Menus are the calm surface of the same system.
HUD scene
Health is color + length + number; “burning” is a glyph + word; the only flashing element is simulation-labeled and removed under reduce-flash. The reticle never carries state on its own.
Menus
Pause and settings share one layout grammar and one focus model; the focused row is visible without color and always keeps its label.
Handheld
A handheld game is also a mobile surface: touch ergonomics, device safe areas, and orientation come from the Mobile supplement; HUD priority and input prompts stay game rules. Portrait is the layout for menus and inventory, landscape for play.
Typography
Games need three roles, and the showcase page itself obeys them: this paragraph is set in the text face, the headings and labels around it are the UI face, and the accent face is reserved for moments.
- The effect face never carries instructions and never drops below the minimum readable size for its distance.
- Reading text stays out of the HUD: dialogue, codex, and help use the text face at proper measure.
- Numerals are tabular wherever a value can change, so counters do not shift width as they tick.
Color
The HUD palette below is the whole color system: three status hues, one objective hue, one loot hue, and neutrals. Every status also carries a glyph and a word, so colorblind modes change the palette, not the meaning.
Components and states
HUD elements
Bar, chip, ability, prompt, reticle, subtitle — each with a fixed anchor in the safe zone.
Menu item states
Touch button states
Default, pressed, cooldown — press state is feedback, cooldown is a value, neither depends on color.
Subtitle and callouts
Speaker identified by name, size adjustable, background always legible over gameplay.
Motion and accessibility
Motion budget
- Press feedback 80 ms, hit confirmation 100 ms, menu transitions 200 ms — feedback is immediate and proportional.
- Discrete states cut; nothing tweens a value that is not continuous.
- Reduce motion and reduce flash stop every decorative loop, including the minimap sweep and the health vignette.
- Flash frequency and area are bounded by default; the flash in the scene is an opt-in, labeled simulation.
Accessibility
- Subtitles on by default where voice carries plot, with speaker names and adjustable size.
- Remappable controls and a full colorblind mode that swaps the palette while glyphs and words stay.
- UI text scales where the platform allows; the minimum size is tested at the smallest supported resolution.
- Menus are keyboard- and controller-navigable with a focus state that does not rely on color.
Verification
Live probes
HUD containment inside the action-safe area, minimum text size, and the grayscale-distinct path are asserted on this page.
Contrast
| Pair | ratio | Note |
|---|
Computed against the dark HUD scrim; status colors are additionally backed by glyph and word, so a failing pair is never the only signal.