Search
← UI / UX
UI / UX ~29 min read 5,632 words

Salt & Steel: HUD Design

Document type: Design Specification — UI/UX
Status: Draft
Last updated: 2026-04
See also: Inventory and Stash | Accessibility | Combat Systems | Naval Systems | Creative Identity

Design Philosophy

The Salt & Steel HUD is a nautical instrument panel, not a software dashboard. Every element should feel like something a captain would actually keep at hand: the compass mounted at eye level, the ship's bell count for time, the tally marks on a bulkhead tracking hull damage. The interface belongs to the world of the game.

This does not mean sacrificing clarity for atmosphere. A compass that is beautiful but unreadable in combat is a dead compass. Every HUD element must pass two tests simultaneously:

  1. Functional test: Can the player read this accurately in 200ms during active combat without stopping to look at it?
  2. World test: Does this element feel like something that exists in the Salt & Steel universe, not a generic game UI imported from outside?

The two tests are not in tension. A ship's hourglass is both authentic to the world and a perfectly readable resource bar. A cannon-breech icon for a ready indicator is both thematic and immediately clear. The design work is finding those exact expressions for every element — not choosing between beautiful and useful, but insisting on both.

Lessons from Path of Exile's HUD

PoE's globe-based health/mana display is visually iconic and aesthetically coherent with its dark fantasy identity — but the peripheral placement and fluid-level reading creates genuine tracking difficulties in fast combat. Salt & Steel learns from this: the globe aesthetic can be preserved, but health indicators must work reliably in peripheral vision, which requires position, size, and animation choices optimized for that use case rather than for static screenshot beauty.

PoE's buff row also creates a "wall of icons" problem in late-game builds. Salt & Steel addresses this from the start by categorizing status indicators into distinct zones with different visual treatments, so players always know where to look for specific information.

On-Foot Combat HUD

Screen Layout

The on-foot HUD uses a corner-weighted layout that keeps the center of the screen clear for combat. All critical information lives at the periphery in predictable positions the player trains to read without looking away from the action.

+------------------------------------------------------------------+
| [MINIMAP]      [STANCE] [CREW SHORTCUTS]              [BUFFS]   |
|                                                                  |
|                                                                  |
|                    << CLEAR CENTER >>                           |
|                    character in combat                           |
|                                                                  |
|                                                                  |
|                                                                  |
| [HP BAR]  [FP BAR]  [SKILL BAR]  [CONSUMABLES]  [EXP/LEVEL]   |
+------------------------------------------------------------------+

The bottom bar is the HUD's spine. The captain's eyes in combat are trained on the center of the screen; the bottom edge exists in reliable peripheral vision, and the most life-critical information (HP, FP, skill states) lives there.

Health Bar (Hull Points on Foot)

Theming: Rather than a generic health bar, the on-foot health display is a Vitality Gauge — presented as a ship's barometer dial in the captain's quarters: a circular dial with a carved compass-rose frame, the needle sweeping from full to empty. The "full" end is marked with a pennant icon; the critical zone (below 30%) shades to storm-warning red.

Placement: Bottom-left of screen, large enough to read clearly in peripheral vision. Unlike PoE's small globes placed in the very corners, the dial is sized at approximately 80px diameter at 1080p — substantial but not intrusive.

Visual Language:

  • Full health: Needle at "fair winds" position. Frame color: warm brass.
  • 75%-50%: Needle moves toward "squall" zone. Frame begins taking subtle amber tint.
  • 50%-30%: "Storm" zone. Frame pulses amber. Faint audio cue begins: the low groan of hull stress.
  • Below 30%: "Crisis" zone. The dial frame glows red with a slow pulse. Audio: the rhythm of an emergency ship's bell. The screen edge vignettes in dark crimson.
  • Regeneration: The needle's movement back toward full has a brief "filling" animation — water-level rise visible through a gauge window below the main dial.

Numerical Display: Current HP / Max HP shown as text beneath the dial in a handwritten-ledger font. Always visible. Players who want precise tracking get it; players who track the dial get readable peripheral information.

Energy Shield equivalent (Spirit Armor): Characters who take the Spirit Armor advantage display a luminous pale-blue aura ring around the outer edge of the dial. This ring depletes before the needle moves. When the ring is gone, the frame briefly flares white to signal the transition to physical HP damage.

Fatigue Bar

Theming: Fatigue Points (FP) are the universal action resource — used for active skills, sustained abilities, and magic in the maritime supernatural tradition. The Fatigue Bar is presented as a Ship's Lantern gauge: a hanging lantern icon in the bottom-left cluster, with the flame level visible inside the lantern housing as a warm amber glow.

Placement: Directly to the right of the HP dial, same visual zone. The two resource gauges (HP and FP) read as a pair — the captain's condition at a glance.

Visual Language:

  • Full FP: Lantern burns brightly, the full amber light saturating the housing.
  • Depleting: Flame visually lowers as FP drains. The lantern housing shows the fuel level.
  • Low FP (below 25%): Flame flickers erratically with a subtle sputter sound. The icon dims.
  • Empty FP: Flame gutters to a near-invisible ember. A very brief flash indicates the moment of depletion. Skills that require FP display their icons with a red overlay to signal they cannot be used.
  • Regeneration: The flame smoothly rises. FP regen rate is visible as the speed of flame-rise.

FP Reservation: Some sustained abilities (nautical auras, persistent enchantments) reserve a portion of max FP. Reserved FP appears as a darkened section at the bottom of the lantern housing — clearly distinguished from available FP by texture (smooth dark vs. flickering amber). This is directly analogous to PoE's mana reservation visual but uses the lantern metaphor consistently.

Active Skill Bar

Theming: The skill bar is presented as a Captain's Tool Belt — a leather-stitched horizontal strip across the bottom center of the screen. Each slot is a tool holster: skills appear as carved icons on aged leather patches, in slots 1 through 8.

Slot Layout:

  • Slots 1–4: Primary skills (Q, W, E, R by default)
  • Slots 5–8: Secondary skills (A, S, D, F by default, or remappable)
  • Mouse Left / Mouse Right: Two additional weapon-action slots displayed prominently above the center of the skill bar

Slot Visual States:

  • Ready: Icon fully visible, leather patch at full saturation.
  • On cooldown: A compass needle sweeps clockwise across the icon face (like a clock). Duration remaining shown as a number when the needle is within 3 seconds of completion.
  • Active/Channeling: Icon pulses with a golden rim light. For channeled skills (held), a flowing amber indicator fills from bottom to top.
  • Insufficient FP: Icon dims to grey-brown with a small ember-flicker overlay. The slot is still visible and selectable but visually communicates "unavailable."
  • New skill assigned: Brief leather-unfurling animation when a new skill is placed in a slot.

Weapon Set Toggle: When the captain has two weapon sets equipped, a small pair of crossed weapons (cutlass/pistol vs. boarding axe/shield, for example) appears above-left of the skill bar. The active set is highlighted. Toggling displays a brief swap animation of the icon swapping in.

Active Defense Indicators

Active defenses (Dodge, Parry, Block) are the core of on-foot combat's tactical layer. Their HUD indicators must be immediately readable at a glance, since defense decisions are made in fractions of a second.

Placement: A small horizontal trio of shields sits just above the skill bar, to the right of center. Each is distinct in silhouette:

  • Dodge: Footprint icon (evasion)
  • Parry: Crossed blades icon
  • Block: Heater shield icon

Visual States for Each Defense:

  • Ready: Icon fully bright, warm brass color.
  • Cooldown: Icon face darkens and a small sand-timer overlay counts down (3-ring animation for short CDs, shrinking for longer).
  • Recently Used / Recovery: Brief green flash then return to ready state.
  • Disabled (by debuff/condition): Icon is replaced by a chain-link overlay. A distinct audio cue plays when a defense is disabled so the player knows without looking directly at the indicator.

Design rationale: Placing defenses above the skill bar keeps them in the same vertical zone of peripheral attention, close to the skill icons the player is already tracking. They are smaller than skill icons — secondary attention, but still findable quickly.

Combat Stance Indicator

The captain's current combat stance (Aggressive, Defensive, or Balanced) directly modifies attack speed, defense roll bonuses, and FP costs. Stance is a player-controlled state changed via a designated key (default: Tab).

Placement: Upper-center of the screen, small and unobtrusive but distinctly positioned so it does not conflict with minimap or buff display. It sits above the center of the action.

Visual Design: A carved compass-rose disc with a rotating inner needle. Three positions are marked:

  • Aggressive: Needle points toward a crossed-swords icon (top). The disc tints warm red-orange.
  • Balanced: Needle centered. The disc is neutral brass.
  • Defensive: Needle toward a shield icon (bottom). The disc tints cool blue-grey.

Stance Change Animation: When the stance changes, the needle sweeps smoothly to the new position (quarter-second animation). A brief audio cue sounds — a ringing of steel for Aggressive, the thud of a shield raised for Defensive. The animation is short enough not to distract in combat but clear enough to confirm the change registered.

Enemy Health Bars and Modifier Icons

Standard Enemies: A thin health bar appears above each visible enemy, positioned in world-space above their head. The bar is narrow and does not clutter the screen. Color is muted red for standard enemies, brighter for elites, and an outlined gold for bosses.

Elite and Boss Enemies: Larger enemies with special modifiers display:

  • A Modifier Icon Strip: A row of 1–4 small icon badges below the health bar. Each badge represents a modifier (Armored, Cursed, Enraged, Ethereal, etc.) with distinct silhouettes readable at a glance. Hovering over a badge shows the full modifier description. Icons are designed with shape-differentiated silhouettes so colorblind players can distinguish them by form alone.
  • Boss Health Bars: Major boss encounters display a dedicated large health bar at the top of the screen — full width, styled as a ship's hull damage schematic. Phase transitions are marked on the bar as notches. When the boss crosses a phase threshold, the notch briefly flares and the bar's color shifts slightly (e.g., standard red to dark crimson for an enraged phase).

Wound Modifiers: When the player's attacks inflict GURPS-derived location injuries (arm wound reducing enemy attack speed, leg wound reducing movement), the enemy's health bar gains small wound-site icons matching the body location. These fade over time as wounds are sustained.

Minimap with Compass Heading

Theming: The minimap is framed as a Navigation Chart: an aged parchment circle in the upper-right corner of the screen, with hand-drawn-style coastlines and terrain features revealing as the player explores. The frame is a brass nautical compass housing.

Compass Heading: A cardinal direction label (N / NE / E / SE / S / SW / W / NW) and degree bearing sit at the bottom of the minimap frame. As the player turns, the heading updates. A small magnetic needle at the top of the frame rotates to always point north — visible even when glancing quickly.

Minimap Content:

  • Terrain reveals in a "hand-drawn ink" style as explored — lines and fills in sepia tones.
  • Unexplored areas show as blank parchment with faint edge-feathering.
  • Enemy positions visible to the player appear as small red crosses.
  • Waypoints (fast travel anchors) appear as golden anchor icons.
  • Quest objectives appear as compass-rose markers in bright brass.
  • NPC locations appear as figure icons.
  • Crew members on assignments appear as small pennant icons.
  • Points of interest (chests, interactables) appear as asterisk marks in the loot filter color.

Zoom and Toggle: The minimap can be toggled to full-screen navigation chart view (default: M). The full-screen view shows the wider region with additional detail (faction territories, known route lines, legend entries from discovered lore). The chart view can be annotated by the player — they can drop personal markers, write brief notes on locations, draw planned routes with a line tool. These annotations persist in the Account Record.

Crew Ability Shortcuts

Active crew members have abilities the captain can trigger during on-foot combat — a Gunner may provide suppressive fire, a Medic may throw a field dressing, a Brawler may charge a targeted enemy.

Placement: Upper-left of screen, vertically stacked below the minimap. A compact vertical strip showing 2–4 crew portraits (based on crew deployed to the landing party), each with a keybind label (default: F1–F4) and a small availability indicator.

Portrait Design: Crew portraits are circular, framed like locket miniatures — consistent with the world's aesthetic. The portrait shows the crew member's procedurally-generated face. A small ring around the portrait indicates:

  • Gold ring: Ability available.
  • Sand-timer overlay: Ability on cooldown, sweeping clear as it recharges.
  • Grey ring: Crew member incapacitated or not deployed.

Ability Tooltip: Hovering over a portrait shows the crew member's name, their key advantage/disadvantage, and a brief description of their ability. This is also the primary way players track crew status mid-combat.

Quick-Use Consumable Slots

Theming: Five consumable slots sit in a horizontal strip just above the HP/FP gauges at the bottom-left. Presented as a Captain's Satchel compartments — leather pouches in a row. Each slot holds one consumable type (healing drafts, FP restoratives, resistance tinctures, throwable items).

Visual States:

  • Full charge: Pouch bulges slightly, icon fully saturated.
  • Partial charge (multi-charge items): A small number in the corner indicates remaining uses.
  • On cooldown: The pouch deflates slightly; a brief sand-timer overlay.
  • Empty: The pouch is visually slack and flattened.

Keybinds: Default 1–5. The keybind labels are embossed on the pouch strap above each slot.

Usage Animation: When a consumable is used, a brief animation of the item being uncorked or deployed plays on the pouch icon — visible even at small size. An audio cue (cork pop, liquid sound, etc.) confirms use.

Experience Bar and Level Indicator

Placement: A very thin strip along the bottom edge of the screen, below all other HUD elements — the least intrusive position, following PoE's approach but acknowledging that level is less critical than active combat resources.

Design: The bar is styled as a Ship's Log progress ribbon — a narrow strip of aged parchment, filled from left to right with an ink-seeping effect as XP accumulates. The level number appears at the right end in a small circular badge styled as a wax seal.

Level-Up Notification: When the player levels up, the XP bar flashes gold and the wax-seal badge briefly expands with a brass flare. A short audio fanfare plays — a single nautical horn note that does not interrupt combat awareness. Level-up skill point notifications appear as a separate banner (see Port HUD) rather than cluttering the combat HUD.

When the player takes the helm for naval combat, the on-foot HUD fades and the naval HUD rises in its place. The transition is not a loading screen — it is a continuous on-screen morph (see HUD Transitions below). The naval HUD operates on a different information hierarchy because the captain's decisions in ship combat are strategic-scale rather than individual-action-scale.

Screen Layout

+------------------------------------------------------------------+
| [WIND ROSE]   [MINIMAP/CHART]              [ENEMY SHIPS]        |
|                                                                  |
| [SPEED]                                                          |
|                                                                  |
|                    << CLEAR CENTER >>                            |
|                    ship + sea in combat                          |
|                                                                  |
| [PORT]       [HULL BAR / CREW]         [STARBOARD]   [SPECIAL] |
+------------------------------------------------------------------+

The naval HUD is wider and more architectural than the on-foot HUD — the ship spans a larger visual field, and the cannon arrangements (port left, starboard right) are mirrored in the HUD's left-right split.

Ship Health Bar (Hull Points)

Theming: The hull health display is a Ship Schematic — a simplified top-down silhouette of the player's ship, positioned at the bottom center. The schematic is divided into five sections: Bow, Port, Starboard, Stern, and Below Waterline. Each section shows its damage state independently.

Section States:

  • Undamaged: Section shaded in the ship's paint color.
  • Lightly damaged (75%+): Faint crack lines appear on the section.
  • Moderately damaged (50–75%): Cracks deepen, wood-grain texture breaks up.
  • Heavily damaged (<50%): Section turns dark, flames or water ingress visual on the schematic.
  • Critical (<25%): Section flashes and turns near-black. Audio: the groan of stressed timbers.
  • Below-Waterline Flooding: A separate water-blue fill indicator appears in the keel section of the schematic, rising as flooding progresses. This is the damage-over-time mechanic — visually unmistakable.

Repair Progress: When crew are assigned to repair a section, a wrench icon and a progress fill overlay appear on that section. Multiple repair tasks can run simultaneously across different sections.

Global Hull Bar: Above the ship schematic, a traditional horizontal bar shows overall hull integrity as a percentage. Both displays are always present — the bar for quick reading, the schematic for tactical awareness of where damage is occurring.

Crew Count and Morale

Placement: Left side of the bottom HUD, flanking the ship schematic.

Crew Count: Displayed as a numerical fraction (current crew / max crew) with a row of small figure icons for immediate visual reading of relative size. Each icon represents approximately 5 crew members at standard scale; exact count in the number.

Morale: A horizontal bar below the crew count, styled as a ship's bell icon on the left end. The bar fills from red (zero morale, crew on the verge of desertion or mutiny) through amber to green (high morale, crew performing at peak). When morale is low, a subtle ambient audio cue of unhappy crew sounds mixes into the soundscape.

Casualties: When crew die in combat, a brief flash on the figure icons and a numerical loss notification appear at the crew counter. The sound of a crew member's absence — a lost voice in the ambient crew sounds — is part of the audio design (see Audio Identity).

Wind Direction Indicator (Compass Rose)

Theming: The wind indicator is a large compass rose in the upper-left corner — the most prominent navigational instrument, as it should be in naval combat.

Design: A full 16-point compass rose on parchment, mounted in a gimbal frame. The current wind direction is shown by an arrow originating from the rose center, plus a cardinal/intercardinal label. Wind speed is indicated by arrow width and length — a fat, long arrow means strong wind; a narrow, short arrow means light wind.

Your Ship's Heading: The player's ship heading relative to wind is shown by a second indicator on the compass — a ship silhouette that rotates around the rose as the player turns. This directly shows the relationship between heading and wind (close-hauled, running, reaching) which determines speed and maneuverability.

Wind Advantage Zone: The optimal wind positions for speed and cannon stability (broad reach and running) are shaded green on the compass rose edge. Close-hauled positions are shaded amber. Dead into the wind is red. This immediately communicates where the captain should position relative to the wind without requiring mental calculation.

Speed Gauge

Placement: Left-center of the naval HUD, below the wind compass.

Design: A Ship's Log: a circular speed gauge styled like an antique ship's velocity instrument. The needle sweeps from zero to max speed, labeled with nautical terminology rather than numbers at the extremes (Dead in Water → Light Airs → Fair Sailing → Full Sail → Full Speed). Current knot equivalent appears numerically at the gauge center.

Wind Interaction: The gauge visually shows the optimal speed range for current wind conditions with a green zone on the dial — when the needle is in the green, the captain is sailing efficiently. When speed drops below the green (into headwind or dead water), the gauge tints amber.

Acceleration / Deceleration: The needle moves smoothly with slight momentum — reflecting that ships take time to accelerate and decelerate. This physical behavior in the gauge gives the player intuitive feedback about ship momentum.

Cannon Ready Indicators

Cannon management is the tactical heartbeat of naval combat. The captain needs to know at any moment whether their port and starboard broadsides are ready.

Placement: Split left and right of the ship schematic at the bottom of the screen — port cannons on the left, starboard on the right.

Design: Each broadside is represented as a row of cannon icons — stylized cannon silhouettes stacked vertically, one per gun (or one per gun battery at larger ship scale). Up to 8 cannon icons per side at most ship sizes.

Cannon States:

  • Ready (loaded and aimed): Cannon icon fully lit, warm golden glow. Audio: the faint clink of a rammer seated.
  • Firing: Flash animation on the icon. Smoke particle briefly. The screen (and audio) has the broadside impact.
  • Reloading: The cannon icon shows a progress sweep (similar to the skill bar cooldown) as the crew reloads. A brief sound of ramming and priming.
  • Damaged (gun disabled): Cannon icon shows a cracked/broken state. Disabled until repaired or ship section recovers.
  • Targeting Mode: When the player has entered aimed broadside mode, cannons flash gold in sequence.

Broadside Ready Signal: When all cannons on a side are ready simultaneously, the entire row briefly pulses gold and a distinctive audio signal plays — the "ready to fire" bell. This is the moment of peak power and the player should not miss it.

Targeting Reticule: In broadside aim mode, a targeting arc appears on screen showing the firing radius and selected target point (hull, rigging, or crew zone). The reticule is a golden sweep arc with three selectable target icons.

Enemy Ship Health Bars

Near Enemy Ships: Enemy vessels within visual range display a horizontal health bar above their ship model in world space, sized proportionally to ship class. A small ship-class silhouette icon appears at the left end of the bar, identifying the enemy type (Sloop, Frigate, Man-of-War, etc.). Under the bar, small icons indicate special states (Flooding, Rigging Damaged, Low Crew).

Targeted Enemy (Primary Target): The ship currently targeted by the player's broadside or ram displays a larger dedicated health panel in the upper-right of the screen. This panel shows:

  • Hull integrity bar (with sectional damage schematic matching the player's own)
  • Crew count estimate (scout-derived, showing uncertainty range)
  • Morale indicator
  • Visible modifier icons (armored hull, ghost crew, etc.)

This dedicated panel gives the captain a complete picture of the target's condition without looking away from the action.

Placement: Upper-right corner, replacing the on-foot minimap.

Design: The naval minimap shows a wider area than the on-foot version — the player needs to track relative positions of multiple ships, terrain features, and wind lanes. The chart view shows the broader sea region with:

  • Player ship (gold pennant icon, always centered)
  • Enemy ships (red ship icons with faction flag)
  • Allied ships (blue/green icons)
  • Terrain hazards (reef icons, shoal markers)
  • Wind lane direction overlays (faint arrow lines showing current wind flow)
  • Special objectives or mission markers

Scale Toggle: The naval chart can show two zoom levels — close (immediate combat area) and wide (broader strategic area). Toggle with a button press. Wide view reveals ships outside immediate visual range that scouts or Navigation skill have detected.

Special Ability Bar (Ram, Broadside, Boarding Order)

Placement: Bottom-right of naval HUD, a horizontal row of 4–6 large ability icons.

Theming: Styled as Captain's Orders — each icon shows a bold illustrated command graphic (crossed cannons for Full Broadside, ram icon for Ramming Speed, grappling hook for Boarding Order, etc.).

States: Same cooldown and availability logic as on-foot skill bar, but displayed larger because naval ability timing is coarser than on-foot skill use. The sail command appears separately as a directional control (see speed gauge) rather than as an ability button.

Boarding Order Visual: When the captain issues a Boarding Order, this ability icon plays a special extended animation — the grappling hook launches, the icon fills with a transition animation, and the view begins its morph toward the boarding action / on-foot combat mode.

HUD Transitions

The dual-layer structure of Salt & Steel requires seamless HUD transitions that maintain immersion. The player should never see a loading spinner or a hard cut between interface states. Every transition has a motivated visual logic.

On-Foot to Naval (Boarding Ship / Taking the Helm)

Trigger: Player boards their ship or takes the helm on deck.

Transition Sequence (approximately 1.5 seconds):

  1. Camera begins its smooth rise from character eye-level to the ship's elevated helm position.
  2. As the camera rises, the on-foot skill bar and HP/FP gauges visually fold downward and away — like instruments being stowed.
  3. The ship schematic assembles from below, components sliding in from the bottom.
  4. The wind compass unfurls from the upper-left like a chart being unrolled.
  5. Cannon indicators slide in from the left and right flanks.
  6. The naval chart expands from the compass rose in the upper-right.
  7. Transition complete. Music shifts from on-foot arrangement to naval arrangement simultaneously.

The morph is continuous — no black frame, no loading pause. The instruments of naval command literally replace the instruments of personal combat, and the player is behind the wheel.

Trigger: Player disembarks to a dock or initiates a boarding action.

Boarding Action specifically:

  1. The cannon indicators and broadside controls fold away — crew has taken over fire command.
  2. The ship schematic remains briefly as a small indicator in the corner (player still needs to track hull integrity during boarding).
  3. Camera descends toward the deck as the boarding action initiates.
  4. On-foot skill bar, HP/FP gauges, and defense indicators assemble from the bottom.
  5. The minimap shifts from naval chart to tactical deck view.

Normal disembark: Similar sequence, but without urgency. The instruments stow gracefully. The on-foot HUD rises as the captain sets foot on the dock.

Port/Town HUD (Social and Service Spaces)

When the captain is in port, neither combat HUD is active. The port HUD is simplified and social.

Active Port HUD Elements:

  • Minimap / Town Chart: Upper-right, showing the town layout, marked with service icons (Shipwright, Market, Tavern, Port Authority, Stash). The chart is drawn in a more detailed, architectural style than the wilderness minimap.
  • Quest/Objective Tracker: Right side of screen, showing current voyage objectives, active contracts, crew recruitment leads, and pending ship upgrades. Styled as the captain's journal entries.
  • Reputation Summary: A small contextual panel that appears when near faction-relevant NPCs, showing the captain's standing with that NPC's faction across the five reputation axes (Ferocity, Honor, Cunning, Wealth, Mystery). Compact bar display, gold-on-parchment styling.
  • Crew Status: Upper-left, showing the crew list with current assignment status, morale indicators, and any flagged needs (morale crises, skill development ready, character events pending). Expandable to full crew manifest screen.
  • Currency Display: Bottom-right, showing current held currencies at a glance — primary Coin, Trade Commodities count, and special currencies relevant to current content.
  • Notification Feed: Top-center, a brief scroll of incoming events (reputation changes from recent actions, new mail/letters in the Message Network, crew events, faction news). Styled as a harbor notice board.

What Is Hidden in Port:

  • Skill bar (no active combat skills needed)
  • Defense indicators
  • Cannon indicators and broadside controls
  • Combat stance display
  • Enemy health bars

The port HUD emphasizes the Captain's Fantasy layer: reputation, crew, social navigation. The player is between voyages, and the HUD reflects that.

Underwater HUD

Underwater zones are some of Salt & Steel's most distinctive environments. The HUD adapts to the unique mechanical needs of underwater exploration.

Oxygen / Breath Meter:

  • Design: A diver's bubble gauge replaces the Fatigue Bar's lantern in the bottom-left cluster. A circular gauge shows remaining breath as a bubble level — large clear bubble at full, shrinking as oxygen depletes.

  • States:

    • 75%+: Large full bubble, pale blue color.
    • 50–75%: Bubble noticeably smaller. Ambient sound of slower breathing.
    • 25–50%: Bubble small, slight visual pulse. Heartbeat audio cue begins.
    • Below 25%: Bubble is tiny and flickers. Screen edge vignettes in dark blue. Heartbeat becomes louder. Brief double-bubble flash as "surfacing needed" warning.
    • Empty: Deplete animation. HP begins taking damage at the rate specified in the oxygen system. Desperate audio cue.

  • Air Pocket / Breathing Space Indicator: When the player enters an underwater air pocket or ruins with trapped air, a brief notification banner shows "Air Pocket — Breathing Space" and the bubble gauge refills.

Depth Indicator:

  • Placement: Right side of the oxygen gauge, a small vertical depth bar styled as a barometric pressure gauge — a glass tube with a descending mercury column as depth increases.
  • Depth Readout: Numerical fathom measurement next to the bar.
  • Pressure Danger Zone: The bar has a hazard zone marked in crimson at depths where pressure begins applying damage or movement penalties. When the player approaches this zone, the bar pulses with a warning color.

Visibility Degradation: The deeper the player goes, the more the screen edge darkens. This is both atmospheric and functional — it communicates depth viscerally. Bioluminescent creatures and items glow brighter relative to the darkening surround, naturally directing the player's eye to points of interest.

Underwater Skill Bar: Many surface skills are unavailable underwater. Underwater-specific abilities (if the character has them) are shown in the standard skill bar positions, but with an aqua-tinted frame distinguishing them from surface skills. Surface-incompatible skills show a "wave crossed" overlay on their icons.

Combat Underwater: On-foot combat indicators (HP, defense states, stance) remain active underwater. The layout shifts slightly — the oxygen gauge is added as a third gauge alongside HP and FP. The defense indicators shift upward to accommodate.

HUD Customization

Players can adjust the following HUD elements from Settings:

  • Scale: Global HUD scale from 75% to 150%. Individual element groups can be independently scaled.
  • Opacity: Overall HUD opacity in non-combat vs. combat states. Option to fade elements when no combat is occurring.
  • Element Repositioning: Individual HUD groups can be repositioned within a grid. A HUD editor mode (press H in settings) shows anchor points for each group.
  • Color Themes: Three HUD color themes: Brass & Parchment (default), Storm Slate (higher contrast, cooler tones), and Navigator's Chart (green-tinted, highest contrast for accessibility). See Accessibility document for colorblind-specific adjustments.
  • Numeric vs. Visual Resource Display: Option to replace the dial/gauge HP/FP display with simple percentage bars while keeping the thematic frame borders. Neither mode hides the underlying number.
  • Enemy Health Bar Scale: Separate scale control for enemy health bars.
  • Crew Portrait Visibility: Option to hide crew shortcut portraits when not in combat to reduce clutter in exploration.

Audio Cues for HUD States

Every major HUD state change has a corresponding audio signal, so players do not need to watch the HUD when in dangerous situations. This doubles as accessibility support.

HUD State Visual Audio
HP below 30% Dial flashes red Low warning bell, slow rhythm
FP below 25% Lantern flickers Sputter sound
Skill ready (from cooldown) Icon brightens Brief metallic click
Defense disabled Chain overlay Distinct thud
Crew ability ready Portrait ring glows Crew voice line ("Ready, Captain!")
Broadside ready Cannon row pulses Loading bell sequence complete
Hull section critical Schematic flashes Timber groan
Flooding below waterline Keel fills blue Rushing water sound rising in mix
Crew morale low Morale bar pulses red Unhappy crew ambient
Oxygen low Bubble pulses Heartbeat, slow breathing
Level up XP seal expands Single horn note

HUD Dos and Don'ts

Do:

  • Always provide both a visual and audio signal for critical states (HP crisis, depletion, broadside ready).
  • Keep the center of screen completely clear of permanent UI elements.
  • Make every thematic element (compass, lantern, dial) functionally equivalent to or better than a plain bar or number.
  • Size HP and FP indicators large enough for reliable peripheral reading.
  • Test every element at 4K, 1080p, and ultrawide before finalizing.

Don't:

  • Place permanent UI elements in the center 40% of the screen.
  • Use color as the only differentiator for any critical state (always pair with shape, animation, or audio).
  • Animate HUD elements in ways that themselves compete for the player's attention during combat.
  • Show more information than the player needs at any given moment (port HUD should not display cannon indicators).
  • Suppress critical audio cues when music is at full volume — balance mixing so alerts are always audible.

See also:
Inventory and Stash — full item management UI connected to HUD
Accessibility — accessibility standards applied to all HUD elements
Skill Atlas Interface — passive tree display not active during combat
Visual & Audio Direction — art direction that HUD must match
Naval Systems — mechanics behind the naval HUD data