HUD Design: Driftlands

Status: Reviewed — APPROVED (/ux-review final pass 2026-08-31: 0 blocking, 1 cosmetic advisory — applied) · v0.4
Author: Jeroen + ux-designer
Last Updated: 2026-08-31
Template: HUD Design (project template .claude/docs/templates/hud-design.md)
Platform Target: PC 16:9 baseline (1080p / 1440p); KB/M primary, gamepad secondary; no touch
Requirements input: art bible §7.1 closed screen-space list (verbatim in ui-hud quick-spec Rule 1); combat, harvesting, crafting, base-building, tide UI Requirements; ui-hud quick-spec Rules 2–7; camera quick-spec forward ref (ultrawide/letterbox policy)
Patterns used: #7 Honest No-Op Cue · #14 Edge Indicator · #15 World Ping · #16 Compass Tide-Glint · #17 Carry Meter · #18 Confirmed Number Flyout · #19 Feedback Split — plus the HUD-owned gaps this spec closes: hotbar / equipped-tool row, dash-cooldown glyph, party HP row, equipped-gear wear indicator
Related specs: design/ux/inventory.md (APPROVED), design/ux/interaction-patterns.md, design/accessibility-requirements.md

HUD Philosophy

The world says it; the HUD says only what the world can't. Tide state is the palette, danger is a telegraph, base status is the base, richness is prop density (art bible §7.1). Screen space earns an element only by failing the two-part test — not visible from where the player stands, or needs precision the silhouette can't carry — and the resulting list is closed: own health, dash cooldown, equipped-tool/hotbar, party health, off-screen party status, carry capacity, compass tide-glint. Adding to it is an art-bible amendment, not a UI ticket.

"Minimal HUD" is never read literally in combat: the seven items are the combat floor, not a maximum to whittle down. Everything else (flyouts, the bag pulse, the Downed banner, a ping, the interact prompt, the revive ring) is a cue, not an element. The test is anchored to a world cause, not short-lived: a cue lives at the interactable, the hit point, or the screen edge nearest its cause — never at a screen anchor — so an interact prompt that persists while you stand at a chest is still outside the screen-space closed list. It leaves without a trace when its cause does. No element ever fades in or out with game state (§7.5: nothing animates that gates an input; nothing the player might need is hidden by a density rule). The HUD carries no numbers the GDDs keep hidden and no timers the tide forbids.

Information Architecture

Full Information Inventory

Every item the GDDs say must reach the player on screen, with its source:

Categorization

Conflict check: Must Show count = 7 = the closed list. Nothing on the HUD is uncategorised.

Layout Zones

Arrangement: corner clusters, centre clear (ruled 2026-08-31).

┌──────────────────────────────────────────────────────────────┐ safe margin 32 px @1080p
│ Z3 PARTY column           Z7 BANNER (transient, top-centre)   │
│ ◉ Jo   ████░                                        Z5 ▲ ally │
│ ◉ Alex ██░░░                                         edge band │
│ ◉ Mara █████                                  (24–56 px band) │
│▓ Z6 TIDE GLINT band (edge glow, 0–24 px, outside Z5's band)   │
│▓                                                              │
│▓            CENTRE 60 % × 60 % — never occupied               │
│                                                               │
│                                                               │
│ Z1 VITALS + Z2 HOTBAR                          Z4 CARRY       │
│ ♥♥♥♥♡  ◔   [⚔ axe][🛡 cloth]                    🎒 7/10       │
└──────────────────────────────────────────────────────────────┘

Safe zone: 32 px at 1080p (scales with UI scale). The centre 60 % × 60 % box is a hard exclusion for Z1–Z7 at every UI scale and aspect — measured as box intersection, not x-extent: Z1 + Z2 sit in the bottom 20 % band and clear the box vertically, so their horizontal reach (≈ 420 px at 150 %, past the box's 384 px left edge) is expected and harmless; Z3 clears it from the top band; Z4 from the bottom-right corner. (Corrected 2026-08-31 — the earlier "fits left of the exclusion" sentence was wrong.)

Aspect / ultrawide policy (camera quick-spec forward-ref, ruled here): 21:9 and wider render the world at full width — no pillarboxing; more world is harmless for a top-down camera at integer zoom — but all HUD anchors (Z1–Z7) stay on a 16:9-equivalent frame centred on screen, so corners never drift into far periphery. 4:3 / 16:10 letterbox to 16:9 at the nearest integer zoom (camera Rule 1). Edge bands (Z5/Z6) clamp to the 16:9 frame, not the physical edge. More visible world on ultrawide is not a fairness concern: the game is co-op with no PvP and no per-player comparison (ui-hud Rule 5); the alternatives (pillarboxing or non-integer zoom) would break camera Rule 1's silhouette calibration — a readability regression for everyone.

HUD Elements

E1 Own HP — Segmented pips, one per maxHp / 20 (cloth-tier 100 HP → 5; the count follows maxHp, never a fixed number), filled slate-light, empty = outline only. Pips over a bar: they read at a glance and scale with tier HP bands without a number. Hard bound (ruled 2026-08-31): maxHp / hpPerPip ≤ 8 is a load-validation rule (ADR-0006 stage 9, reject) — the two knobs are constrained jointly, like combat's swingWindup + swingActive; a tier whose HP band would exceed 8 pips must raise hpPerPip, never grow the strip. Losing a pip = a Stagger White one-frame flash on the pip (the shared impact language) + settle; gaining (home heal / revive) = pips fill in sequence 100 ms apart. Never a number, never red. Downed: pips grey, the bleed-out arc appears on E2. Dead / respawning: Z1 hidden until spawn.

E2 Dash cooldown — A small ring (◔) sweeping empty → full over dashCooldown (0.45 s), popping to a solid ring when ready; no number, no bar (combat UI Requirements: glanceable without reading numbers). Reduced-motion: two-state (hollow = cooling, solid = ready). While Downed the same position shows the bleed-out arc draining over bleedOutTimer — one glyph, two meanings, never simultaneous (Downed cannot dash). The arc is a world timer (combat Rule 9; accessibility-requirements.md Motor → "Input timing adjustments" rules it outside the tier's timed-input clause), not a tide readout — tide AC-27's no-timer ban is tide-scoped; it is non-textual and non-actionable, so it is not an auto-dismiss inventory item.

E3 Hotbar / equipped slots — Two 48 px slots (weapon, armor) with the item's tier-shaped ink icon (art bible §7.4). Wear indicator (closes the pattern-library gap): a frayed-corner accent on the slot outline while the item is worn — shape, never hue. Empty slot = dashed outline (unarmed 14 / no armor). Updates on equip / unequip and on the host-confirmed wear flip. Not interactive from the HUD (equip happens in the bag, inventory.md).

E4 Party HP — One row per other connected player (0–4): the player's hat silhouette glyph (§5.1) + E1's pip strip at 75 % scale. Downed = pips grey + prone glyph; Dead / at home = row stays, pips refill on respawn; disconnected = row removed. Order = join order, stable for the session. No names on persistent rows at MVP (the hat is the name for a friend group); names appear only in event copy — the Downed banner (combat UI Requirements, binding), storage tags (#13), maker's marks (#12).

E5 Ally / Downed edge indicator — pattern #14 exactly. E6 Carry meter — pattern #17 exactly. E7 Compass tide-glint — pattern #16 exactly (Z6 sits outside Z5 so glints and glyphs never overlap).

E8 Downed banner — "[Name] is down", Medium size, 3 s, world-fact tone; if two players go down within 3 s the lines stack (max 2, oldest on top). Reduced-motion: no fade.

E9 Flyouts — pattern #18; cull rule: when more than flyoutCap are live, cull the oldest globally, but never one anchored to the local player's own sprite (own damage-taken is decision-relevant; ally damage-dealt is not); #18's 100 ms offset-stacking applies before culling. E10 Ping — pattern #15 — BLOCKED on the ADR-0007 Ping amendment; if it does not land for MVP the element simply does not render (no layout or budget change — Z5 scales with occupancy). E12 Revive — pattern #10.

E11 Interact prompt (new pattern #24) — World-space, anchored 24 px above the nearest interactable while within interaction range and not in build mode: "E open chest" / "West-button glyph use workbench" — the glyph is resolved from the live binding of Interact in InputFrame.Scheme (ADR-0007: E / West by default; rebinding changes it — never an authored character), verb + noun in world-fact tone, Small size with the ink outline; exactly one prompt at a time (nearest candidate; ties → lowest instanceId); gone the frame the target leaves range or a panel opens. Never for enemies or nodes (strike is aim-driven; a prompt would imply a separate interact verb). Reduced-motion: no fade.

HUD States by Gameplay Context

No context hides a Must Show element except death (no body → no vitals). Nothing fades with combat state.

Dynamic Behaviors

• Density never changes by rule. The only movement is E5 / E7 appearing and vanishing as allies / the shore cross the screen edge (100–150 ms slide, #14) and E4 rows appearing on join / disappearing on disconnect (instant).
• Pip count follows maxHp — a future tier raising HP adds pips, never a longer bar.
• Hotbar reacts to equip / unequip instantly (owner-predicted) and to the wear flip on host confirmation (frayed corner appears; never a gradient).
• Thresholds: carry ≥ 80 % shake / 100 % thick outline (#17). HP at the last pip — no extra alarm (no low-HP pulse, heartbeat, or vignette; crimson and urgency effects are banned; the single grey-outlined pip is the state).
• Priority when cues collide: Downed banner > interact prompt > flyouts. Z5 ordering when two glyphs clamp to the same edge point: Downed ally > ping > ally.

Information Hierarchy

Priority tiers for the persistent HUD — what must survive every setting, context and conflict, and what replaces an element if it is ever suppressed.

Cue collision order: Downed banner > interact prompt > flyouts; Z5 same-point order: Downed ally > ping > ally. The HUD-opacity slider is scoped to the SHOULD-KEEP tier by construction — i.e. E2 (not Downed), E3, E4, E6; never E1, never the bleed-out arc, never Z5 / Z6 / Z7.

Visual Budget

• Persistent: max 7 zones populated, ≤ 12 % of screen area at 100 % scale (Z1 + Z2 ≈ 3 %, Z3 ≤ 3 % at 4 rows, Z4 ≈ 1 %, edge bands ≈ 5 % as a 24 px ring).
• Transient (ruled 2026-08-31): ≤ 8 flyouts on screen (oldest culled), 1 interact prompt, 1 banner (≤ 2 lines), ≤ 4 ally glyphs + ≤ 4 pings in Z5, 1–4 glints in Z6.
• Centre 60 % × 60 %: 0 persistent elements; world-space cues may cross it (they belong to the world).
• Draw calls: the HUD is one UI Toolkit panel — well within the project's < 100 budget; world-space cues are sprites / outlined text batched per atlas.

Feedback & Notification Systems

There are no notifications. The HUD has exactly four feedback channels, all governed by pattern #19's authority table:

• Predicted, local — dash ring sweep; hotbar swap; carry-meter change from own actions; bag pulse (#7 family a).
• Host-confirmed — HP pips (own + party); flyouts (#18); wear flip; Downed banner + prone glyph; carry-meter bag flash; revive completion.
• Presentation-clock reads — tide glint (#16); never a gameplay input.
• Peer cues — ping (#15). (Storage who-took-what tags #13 live in the panel, not the HUD.)

No queueing beyond the banner (max 2 lines) and the flyout cap; nothing persists past its lifetime; no log, history, or toast tray. The HUD owns zero sounds — every HUD change is the visual half of a world event that already carries its own sound (#19).

Platform & Input Variants

• PC only. 1080p reference; 1440p / 4K scale via the UI-scale option (100 / 125 / 150 %), never by resolution alone (pixel-perfect ink outlines at integer multiples, art bible §8).
• Aspect: see Layout Zones — anchors on a centred 16:9 frame; ultrawide shows more world; 4:3 / 16:10 letterbox at integer zoom.
• Input scheme: the only scheme-dependent content is the glyph inside the interact (E11) and revive (E12) prompts — follows InputFrame.Scheme, updates within one frame of a device switch. Nothing else differs between KB/M and gamepad; there is no "controller HUD".
• No touch, no console safe-area variants.

Accessibility

Tier: Standard (design/accessibility-requirements.md).

• Non-interactive: no focus order — nothing on the HUD takes focus; the only HUD-adjacent action is the ping (#15).
• Colour-independence (rows in the colour audit or resolved here): HP = pip count + fill vs outline (never red); dash = ring shape (hollow / solid / sweep); wear = frayed-corner shape; party identity = hat glyph; carry = fill + n/N + outline weight; tide = position (+ Tier 1 mist); ping = diamond + hat; Downed = prone glyph + pulse + text banner.
• Text: banner Medium 16–18 px; carry count Medium; prompts Small 13–14 px with the ink outline; contrast ≥ 4.5:1 on slate, ≥ 3:1 for world-space outlined text against amber / violet tint — verified in all three tide states before theme lock.
• Scale: every px value at 100 %; 125 / 150 % scales Z1–Z7 and the safe margin together; the centre-clear rule holds at 150 % as box intersection: Z1 + Z2 (≈ 420 px wide at 150 %) extend past the box's left x-edge (384 px) but stay in the bottom 20 % band, so they never intersect the 60 % × 60 % box (Layout Zones).
• Reduced motion: dash sweep → two-state; pip fill sequence → instant; edge slides → snaps; Downed pulse → thick static outline; flyout rise → static; banner fade → cut. Nothing on the HUD is on the accessibility keep-list.
• Flash reduction: the pip-loss Stagger White flash counts toward the ≤ 3/s cap alongside sprite flashes.
• HUD opacity (new, ruled 2026-08-31): 50–100 % on the SHOULD-KEEP elements only — E2 (when not Downed), E3, E4, E6. Element-scoped: E1 own HP (in Z1) and the bleed-out arc are exempt, and Z5 / Z6 / Z7 stay at 100 % — an opacity slider must never dim your own HP, your own bleed-out, or a downed friend.
• Screen reader: out of scope (documented limitation). Hearing: every HUD change is the visual half of a sounded world event — nothing here is audio-only.

Tuning Knobs

All values live in assets/data/ui.json — a new file for ADR-0006's manifest (stage 9 rows: the ranges above as warnings). Nothing is hardcoded.

Acceptance Criteria

• [ ] A gameplay screenshot at 1080p / 100 % shows exactly the seven closed-list elements (own HP pips, dash ring, weapon + armor slots, party rows, carry meter, plus an edge glyph / glint only when an ally / the shore is off-screen) and nothing else persistent; no element intersects the central 60 % × 60 %.
• [ ] Losing 20 HP removes exactly one pip with a one-frame white flash; at maxHp 100 five pips are shown; a test config with maxHp 140 shows seven; a config with maxHp / hpPerPip > 8 is rejected at load with a named error.
• [ ] After a dash the ring sweeps and becomes solid at 0.45 s ± 1 frame; no number is ever rendered.
• [ ] Equipping a worn weapon shows the frayed-corner accent on the weapon slot within one frame; a fresh one shows none; an empty slot shows a dashed outline.
• [ ] When an ally walks off-screen their hat glyph appears at the edge within 150 ms; when Downed it switches to the prone glyph pulsing at 1 Hz and "[Name] is down" shows top-centre for 3 s.
• [ ] Opening the bag leaves Z1–Z7 fully visible (no dim) and flyouts keep appearing behind the panel.
• [ ] Standing within reach of a chest shows exactly one prompt 24 px above it whose glyph equals the current Interact binding (E on KB/M; West on a default gamepad; the rebound key after a rebind) followed by "open chest"; it disappears the frame the player steps out of range or opens any panel.
• [ ] On a 21:9 display the HUD anchors sit on a centred 16:9 frame (Z1's left edge = (W − 16H/9)/2 + 32 px); on 4:3 the image is letterboxed at integer zoom.
• [ ] Reduced-motion on: the dash ring is two-state, edge glyphs snap, the banner cuts; flash reduction on: ≥ 4 pip losses within one second produce ≤ 3 flashes.
• [ ] At 150 % UI scale nothing overlaps and no Z1–Z7 element intersects the centre 60 % × 60 % box (Z1 + Z2 may extend past the box's left x-edge while staying below it); at 50 % HUD opacity the hotbar, party rows, carry meter and (when not Downed) the dash ring are half-transparent while own HP pips, the bleed-out arc when Downed, and Z5 / Z6 / Z7 stay opaque.
• [ ] The HUD contains no tide timer, no enemy HP, no minimap, no per-player counters (reflection over the HUD view-model + screenshot).
• [ ] HUD update cost ≤ 0.2 ms / frame on the reference machine with 4 party rows, 8 flyouts, and 4 edge glyphs.

Open Questions

• Player journey map not yet created (.claude/docs/templates/player-journey.md) — the contexts above are assumed; validate at the playtest.
• ~~HUD opacity sync~~ Done 2026-08-31: row + test in accessibility-requirements.md; Slider gap in the pattern library now lists it.
• Ping binding — E10 is specified but unbindable until the ADR-0007 amendment (MMB / R3).
• Party rows carry no names — fine for a friend group; if the playtest shows hat glyphs get confused, show the name as a 2 s label beside the row on join. Playtest item.
• ~~Pip count at Tier 1~~ Ruled 2026-08-31: maxHp / hpPerPip ≤ 8 is a load rule; Tier 1 tunes hpPerPip, never the strip.
• ~~Pattern #24 lift~~ Done 2026-08-31: #24 in interaction-patterns.md v0.5; wear / dash / party / hotbar / composition gaps closed by reference to E3 / E2 / E4 / E1.
• ~~ui.json needs adding to ADR-0006's file list~~ — DONE 2026-09-01: ADR-0014 §8 defines ui.json and the amendment is applied to ADR-0006 (§1 file list, Configs.Ui, stage 9 with ranges as warnings). Original note: incl. the two new stage-9 rules (pip quotient ≤ 8; glyph band starts at glintBandPx).
• Art bible §4.5 says UI accents may borrow Ember Crimson for low health; this HUD bans any low-HP alarm (the grey pip is the state) per §7.1's carry-meter precedent and the tone rule. §4.5 amended 2026-08-31 with a one-line note; art-director to confirm at the next art-bible pass.