← UI / UX
UI / UX ~19 min read 3,695 words

Salt & Steel: Nautical Chart Interface

Document type: Design Specification — UI/UX
Status: Draft
Last updated: 2026-04
See also: Skill Atlas Interface | HUD Design | Endgame | Voyages | Expanding Horizons


Design Philosophy

The Nautical Chart is Salt & Steel's endgame progression surface — the equivalent of Path of Exile's Atlas of Worlds. It is the map the captain consults to plan their next voyage, select their challenge, and track what they have conquered and what remains uncharted.

The interface is the game's most literal expression of the sea chart aesthetic: this is an actual nautical chart, rendered with the full weight of the Creative Identity's visual language. The player is not looking at a game menu. They are looking at the chart room of their ship, spread across a table bolted to the cabin floor, with lantern light flickering over hand-drawn coastlines and margin notes and the captain's own annotations in the margins.

This metaphor must be complete. Every mechanical function of the endgame map system — selecting content, applying modifiers, tracking completion, planning routes — must be expressed through the visual and tactile language of a working nautical chart. No chrome UI elements that could belong to any game; only elements that belong to this one.

The Nautical Chart vs. the Skill Atlas

Both the Skill Atlas and the Nautical Chart use the sea chart metaphor, but they are distinct interfaces with distinct purposes:

Skill Atlas Nautical Chart
Purpose Passive character development Endgame content navigation
What the "nodes" are Skill/passive nodes Explorable sea regions/dungeons
How you "allocate" Spend Atlas Points Sail to the location and complete it
Modifier application Marker Stones (Jewels) Chart Modifiers (map mods)
Persistence Permanent account-level Resets per Voyage (with completion records)
Access Character screen, any time Chart Room on ship or Port Chart House

Both interfaces share visual foundations (parchment, sepia, hand-drawn illustration, brass frame elements) but are experienced in different contexts and serve different player intentions.


The Physical Interface

Accessing the Chart

The Nautical Chart is accessed in two ways:

  1. The Ship's Chart Room: A dedicated room on the player's ship (upgradeable from the shipwright). When the captain enters the chart room, the camera settles on the central chart table — a large, tilted drafting-table with the current Voyage chart spread across it. Lantern light illuminates the chart. The environment is the UI — the captain physically stands at the chart table and interacts with the chart directly.

  2. The Port Chart House: In any major port, a Chart House NPC location provides access to the same chart interface in a shared social space. Other players' ships may be visible in port; they are also accessing their own chart from the chart house.

The Chart Table Environment

The chart room itself (the 3D space around the chart interface) is not just a backdrop. It contains:

  • The captain's logbook: A physical book on the table corner that opens to show Voyage progress records and achievement history.
  • The legend board: A pinboard on the wall beside the table with cartographer's notes — icon legend for chart markers, modifier descriptions, faction territory key.
  • The compass collection: A shelf of navigation instruments — different compasses, sextants, astrolabes — each of which may be a functional item the player has found or purchased, affecting certain chart interaction mechanics.
  • Trophy mounts: As the captain completes major chart milestones (first Tier 10, first corrupted region, first legendary encounter), trophies appear on the chart room walls. These are visible to players who visit the ship.

The Chart: Visual Structure

The Parchment Base

The Nautical Chart is a large parchment (the chart table fills the visible frame; the parchment extends off the edges, scrollable by panning). The parchment has:

  • Age and texture: The same aged parchment visual as the Skill Atlas, but more richly detailed. This chart has been used and annotated. There are inkwell rings where someone set a glass down. There are fold lines from when it was stored rolled. These imperfections make it feel real.
  • Base cartography: The chart shows a stylized ocean with sea lanes, depth soundings (numbers scattered across open water), named sea regions, illustrated weather patterns in the borders, and thumbnail illustrations of notable creatures in their territory zones.
  • The known world: The launch content covers the Home Seas — a richly illustrated region of multiple island chains, coastlines, and open ocean. The outer borders of the chart show the cartographer's unfinished edges: "Survey Incomplete," "Reports Uncertain," "Here there be dragons" — the literal physical markers of where the content ends and expansion territory begins.

Sea Region Nodes

Each navigable/playable region of the endgame chart is a sea region node — a labeled location on the chart connected to others by sea lane lines. These are not abstract circle-nodes but specific chart locations with geographic identity:

  • Named islands or straits: "The Devil's Throat Strait," "Carrion Reef," "The Shattered Reach."

  • Illustrated thumbnail: Each location has a small hand-drawn illustration integrated into the chart at that location — a silhouette of the island, a distinctive landmark, the kind of thumbnail sketch a navigator puts on a chart to make a location memorable.

  • Depth/danger indicators: The water around each node is colored to indicate tier difficulty. This is the tier system presented as ocean depth:

    • Tier 1–3 (Shallow Shores): Light turquoise — safe, familiar waters.
    • Tier 4–6 (Open Lanes): Deep blue — standard open ocean.
    • Tier 7–9 (Storm Belt): Blue-grey with whitecap texture — rougher, more dangerous.
    • Tier 10–12 (The Deep): Dark navy — deep ocean, high risk.
    • Tier 13–16 (The Abyss): Near-black with faint phosphorescent highlights — the most extreme endgame content.

    These depth colors are supplemented by wave-intensity indicators for colorblind accessibility (calm line-waves for low tier, heavy breaking waves for high tier).

Sea Lane Connections

Sea lanes between nodes appear as the traditional navigational route lines — solid lines for clearly charted routes, dashed lines for routes the captain hasn't yet sailed, dotted lines for rumored routes not yet confirmed.

Directionality: Some sea lanes are directional (one-way current channels). These show a current-arrow along the lane line — a series of small arrowhead indicators showing flow direction.

Lane Conditions: Sea lanes can have conditions applied by Voyage modifiers:

  • Fog lanes: The lane line has a grey watercolor wash — visibility reduced, ambush risk increased.
  • Storm lanes: The line has lightning-bolt markers — weather hazards en route.
  • Contested lanes: The line has crossed-cannon markers — faction conflict active in this sea lane.

Tier Indicators

The tier system is the primary difficulty and reward scaling of endgame content. The visual design ensures tier is always immediately readable.

Color Depth System (Primary Indicator)

As described above, water color around nodes directly communicates tier range. The color is consistent across all views and zoom levels — a Tier 16 node is always surrounded by near-black water.

Danger Icon (Secondary Indicator)

Each node has a small danger icon in its label badge, using a wave-height icon:

  • 1–3 waves: Tier 1–5
  • 4–6 waves: Tier 6–10
  • 7–9 waves: Tier 11–13
  • Full storm icon: Tier 14–16
  • Skull-and-storm icon: Corrupted/inverted content

These icons use distinct shapes, not just color, for full colorblind accessibility.

Tier Numeric Label

The tier number appears directly on the node's location badge when at Reading Zoom or closer. At Region Zoom and above, the label shows only the region name — tier is inferred from the water depth color.


Modifier Application UI

Before sailing to a sea region node, the captain can apply Chart Modifiers — physical items (Map Fragments, Modifier Scrolls, Faction Commissions) that alter the content within that region. This is the equivalent of PoE's map modifiers, presented as annotating the chart before departure.

The Chart Annotation Session

Clicking a node the captain has access to (has a Chart Scroll for) opens the Chart Annotation Panel — a side-panel that appears as the captain setting the chart's specific section on a separate working area of the table.

The annotation panel shows:

  • A larger view of just this node's chart section — the island or region, with its illustration, the sea lanes connecting it, its depth-color water.
  • Open modifier slots: Shown as blank "annotation marks" in the chart's margins — small empty frames where notes would go. Standard nodes have 4 modifier slots (2 prefix, 2 suffix). Higher-tier nodes have up to 6 slots.
  • Applied modifiers: Already-applied modifiers appear as handwritten margin notes in the chart — ink text in a slightly different hand from the chart's base cartography, as if added by the captain or a previous owner.

Applying a Modifier

Dragging a Modifier Scroll (from the inventory or Coin Locker) onto an empty annotation slot in the chart panel shows a preview of the modifier's effect. A tooltip describes exactly what changes in the region. Dropping the modifier applies it — an animation of the text being written into the margin, the ink still wet and glistening briefly.

Modifier Categories:

Modifier Type Visual Effect Type
Bounty Commission Wax-sealed commission letter illustration Increased quantity/rarity of drops
Faction Complication Faction crest mark Adds faction enemies with unique behaviors
Weather Seal Weather symbol (storm, fog, squall) Applies weather conditions affecting combat
Prize Cargo Cargo icon Adds valuable cargo to final reward
Cursed Coordinates Skull mark Corrupts the region, increases risk and reward
Temporal Constraint Hourglass mark Time limit on completion

Modifier Conflicts: Some modifier combinations conflict (you cannot apply both "Fog Seas" and "Perfect Visibility" to the same node). Conflicts are highlighted immediately when hovering a conflicting modifier over an occupied slot — the slot glows red and a brief warning note appears: "Incompatible with existing annotation."

Modifier Preview

After all desired modifiers are applied, a summary panel shows:

  • The complete list of active modifiers with their effects
  • The estimated difficulty increase (expressed as a "Danger Rating" in wave-height icons)
  • The estimated reward multiplier (expressed as a coin-multiplier badge)
  • A "Captain's Assessment" text blurb: a brief generated sentence summarizing the challenge: "Hostile waters with poor visibility and a crew of vengeful privateers. Approach with caution."

Chart Completion Tracking

The Completed Regions Log

Completed sea region nodes display a completed cartography treatment — the node's chart section has additional detail added (depth soundings become more precise, the illustration more complete, a small "surveyed" stamp mark appears). This is the opposite of the Skill Atlas's "allocated = charted" metaphor: here, completing content makes the chart more complete.

Completion Badge: A wax seal stamp on the node's location badge in the color of the completion type:

  • Standard completion: Brass seal
  • Completion with all modifiers (juiced): Gold seal
  • First-time completion (Voyage first): Silver seal with a pennant ribbon
  • Unique/Legendary encounter completed: Crimson seal with a dragon motif

Completion Percentage: At the chart overview level, the overall completion percentage for the current Voyage's chart is shown in the chart's legend area: "Surveyed: 47 / 158 regions." This includes a small illustrated "coverage map" visualization — the portions of the chart that have been completed are shown in a slightly richer ink saturation than uncompleted regions.

The Captain's Log (Achievement Record)

Accessible from the chart room's logbook, the Captain's Log shows the completion history:

  • First completion dates for each region
  • Notable encounters and named enemies defeated
  • Modifier configurations used (what combinations were applied to each run)
  • Personal best completion times (for timed content)
  • Lore entries unlocked from completing special objectives within regions

This log persists in the Account Record — it is the captain's endgame history, accessible across Voyages.


Chart Passive Tree (The Fleet Doctrine Overlay)

The Nautical Chart has its own passive tree overlay — a separate layer from the Skill Atlas that specifically affects how the captain engages with the endgame chart. Equivalent to PoE's Atlas passive tree.

Accessing the Fleet Doctrine

A toggle button at the chart table opens the Fleet Doctrine overlay — a separate parchment layer that slides over the top of the main chart (a visual of a second parchment being laid over the first). This parchment has a slightly different paper color and shows a different kind of chart: a strategic fleet disposition map rather than a geographic navigation chart.

Fleet Doctrine Visual Design

The Fleet Doctrine tree uses:

  • Fleet formation diagrams: The node clusters appear as tactical fleet formations — classic Age of Sail combat diagrams with lines of ships. The formations are the "regions" of the passive tree.
  • Command positions: The nodes are command posts within the formations — "Admiral's Eye" gives bonus to identifying enemy modifiers; "Broadside Discipline" improves cannon ready time in modded regions.
  • Tactical notation: The connecting lines between nodes use traditional tactical notation (dashed, dotted, crossed lines from period naval manuals) rather than the sea lane markers of the main chart.

Fleet Doctrine Points

Doctrine Points are earned by:

  • Completing sea region nodes on the main chart
  • Specific bonus objectives within nodes (kill the boss under a time limit, complete with all modifiers active, etc.)
  • Voyage milestone rewards

These points are spent in the Fleet Doctrine passive tree. Unlike the Skill Atlas (which is character-level and persists through respeccing), Fleet Doctrine points reset per Voyage — they are the competitive layer of endgame engagement, giving each Voyage a fresh meta-game for how captains optimize their endgame approach.

Fleet Doctrine Planning

The Fleet Doctrine overlay supports the same Navigator's Preview Mode as the Skill Atlas — tentative point allocation shown in plotting-blue ink before spending confirmed points. All planning features (path cost display, share codes, saved plans) apply here.


Favorite Destinations

Captains frequently return to specific sea regions — for farming efficiency, for specific loot types, or because a particular region's challenge fits a build. The Favorite Destination system allows the captain to mark regions they frequently want to return to.

Marking Favorites

Right-clicking a node opens a context menu with "Mark as Favorite Destination." Favorited nodes receive a small personal pennant flag illustration added to their chart position — the captain's own flag planted at a location they claim as a regular haunt. The pennant is in the captain's personal colors (customizable in character settings).

Quick Access: The chart shows a Favorites Compass in the upper-left corner of the chart interface — a small compass whose cardinal directions are assigned to up to 4 favorited destinations. Clicking the compass arrow navigates the chart view instantly to that favorite. This eliminates the need to scroll across the chart to find frequently-used locations.

Favorites Persistence: Favorite markers persist across Voyage resets in the Account Record. When a new Voyage begins with the chart reset, the captain's favorite markers are pre-applied as "intended survey targets" — a reminder of where they plan to go again. The flags appear in a slightly faded ink until the captain completes those regions in the new Voyage, at which point the flags restore to full color.


Route Planning Tools

The captain needs to plan multi-region sessions — determining an efficient order to complete linked nodes and maximize reward density.

The Route Planner

A dedicated Route Planning mode (toggle: R from chart interface) allows the captain to trace a planned route across the chart:

Drawing a Route: In route mode, the player clicks nodes in the order they plan to complete them. A route line — thick, in the captain's personal color — traces the selected path. The route shows:

  • The sequence number of each node in the planned order
  • The total estimated time investment (based on typical completion times for selected tiers)
  • The total modifier density along the route
  • Any prerequisite nodes that must be completed before a later node is accessible
  • An estimated total reward yield (ranges, not exact values — the chart cannot guarantee drops)

Route Constraints: Some nodes require other nodes to be completed first (connected by prerequisites, not just sea lanes). The route planner flags these constraints automatically — if the player tries to add a high-tier node before completing its prerequisite lower-tier node, the planner shows the dependency and suggests inserting the prerequisite.

Saving Routes: Completed route plans can be saved as Voyage Routes — named plans that persist across the Voyage. Sharing a route plan (as a share code) lets other captains load your planned route into their own chart interface, useful for coordinating group sailing or sharing efficient farming paths with the community.

Fleet Routes (Multiplayer)

In group play, the fleet's captain (session host) can set a Fleet Route visible to all fleet members. This shows on every fleet member's chart as a gold-bordered route line. The fleet chart interface adds additional information:

  • Other fleet members' current positions on the chart (their ships as small icons)
  • Which fleet members have completed which nodes in the current Voyage
  • A shared completion tracker showing the fleet's aggregate progress

Expansion Integration

As geographic expansions release, the Nautical Chart grows — new regions are added at the chart's edges, initially shown as the unfinished cartographic border.

The Expansion Reveal Animation

When an expansion launches, players who access the chart interface experience a scripted event:

  1. The current chart edge — marked "Survey Incomplete" — shows a new light source emerging from beyond the border (a lantern, coming closer).
  2. A crew member's voice: "Captain. Something's clearing on the horizon."
  3. The border region's fog partes in a sweeping reveal animation — the new chart territory physically assembles: ink flowing, coastlines appearing, names writing themselves.
  4. The new region's thumbnail illustrations appear last — the most dramatic reveal.
  5. A full-screen moment: the captain's chart table, with the new region now visible on the parchment, and the legend's "Here there be dragons" text retreating further to the newly expanded edge.

This is a cinematic moment, not a menu update. Expansion reveals are announced well in advance and are designed to be a shared event — captains logging in on expansion day experience this reveal together, and it is the visual anchor of the expansion launch event.

Expansion-Locked Regions

Players who do not own an expansion can see its region on the chart — the coastlines and names are visible in a faded, watermark-style ink. They cannot interact with the nodes. A brief overlay note explains: "This territory requires the [Expansion Name] chart supplement." This visibility serves two purposes: it shows the scope of what they're missing (marketing) and it allows them to see fleet members navigating in the region (social engagement).


The Chart as Social Document

The Nautical Chart is not just a solo planning tool — it is a social artifact.

Voyage Leaderboard Integration

The chart shows Voyage leaderboard markers at nodes where significant competitive milestones were recorded:

  • "First Captain to Chart This Region" — a gold ribbon banner on the node with the captain's name.
  • "Fastest Known Completion" — a record badge on the node with the captain's name and time.
  • "Most Extreme Challenge" — a badge for the highest modifier density run recorded.

These markers make the chart a living history document — the captain literally sails in the wake of those who came before, and can see the records they might try to surpass.

Player Annotation Sharing

Captains can share their personal chart annotations (their personal notes, route markers, and completion flags) as a Chart Package — a shareable file that other players can download and overlay on their own chart. This creates a community documentation culture: experienced captains share annotated charts with tips, new players overlay these annotations to learn the content geography.

A shared Chart Package appears as a translucent annotation layer over the player's own chart — a second hand's notes in a different ink color, clearly distinguishable from the player's own annotations.


Accessibility in the Nautical Chart

The chart interface's aged aesthetic creates specific contrast and color challenges. See the Accessibility document for full specifications; key points:

Tier color accessibility: The ocean depth color system is supplemented by wave-density icons (more lines = more dangerous) and numeric tier labels. The depth colors are specifically chosen to be distinguishable in all three common colorblind variant modes (protanopia, deuteranopia, tritanopia) at the cost of some aesthetic saturation in colorblind modes.

High Contrast Mode: A "Storm Chart" mode available in settings presents the chart on a dark background with high-contrast white-on-dark node labels and route lines. The aesthetic shifts to a night-chart look — not a degraded experience but an alternate aesthetic that maintains full functionality.

Text scaling: All chart labels, modifier text, and route information scale with the global UI text scale setting.

Screen reader support: All node names, completion states, and modifier descriptions are accessible via keyboard navigation with screen reader text output.

Controller navigation: The chart is fully navigable with a gamepad — a dedicated cursor shows on the chart that moves in analog stick-driven screen space. A quick-jump system (hold a modifier and use the d-pad to jump between nodes in a defined order) allows efficient controller navigation of the chart without the fine motor control demands of mouse panning.


See also:
Skill Atlas Interface — the character progression chart
Endgame — the endgame systems the Chart navigates
Voyages — Voyage mechanic that resets Chart completion per season
Naval Systems — the sailing mechanics used to navigate between Chart nodes
Expanding Horizons — the expansion philosophy that grows the Chart
Accessibility — accessibility standards for the Chart interface