settled-reach/docs/design/icon-set-v01.md

title, description, type, status, ticket, decision_refs, author, created, updated

title	description	type	status	ticket	decision_refs	author	created	updated
Implant HUD Icon Set — v0.1	Design specification for the implant HUD icon vocabulary: stance indicators, status badges, interaction prompts, and inventory item silhouettes	design	active	#795	D-086	Araminta	2026-04-05	2026-04-05

Implant HUD Icon Set — v0.1

Ticket: #795 Author: Araminta (Visual Designer) Date: 2026-04-05 Status: Active — unblocks #787 (minimap + stance label implant conversion) Decision reference: D-086 (insert icon system)

---

1. Authoring Constraints (D-086)

All icons in this set follow D-086 authoring constraints without exception:

Constraint	Value
Format	Custom SVG (no icon font)
Stroke weight	1px base (scaled to 2px for lattice_augmented via shader parameter)
Chrome color	#c8d0e0 (design reference — runtime-replaceable via ShaderMaterial)
Anchor points	Minimal — prefer L (lines), polyline, polygon, rect, circle. Avoid Q/C curves.
Fill	none on all paths except explicit solid elements (battery terminal caps, etc.)
Terminations	stroke-linecap="round", stroke-linejoin="round" — clean joins, not decorative
Calibration	Icons must read cleanly at their target display size. Reference: Phosphor Light (MIT) — not for use, as legibility benchmark only
Godot import	SVGs import via AtlasTexture. Runtime color swap via ShaderMaterial — do not bake color into shape variants

---

2. Icon Inventory

2.1 Stance Indicators

Location: client/assets/icons/ Size: 20×20px viewBox Used in: Insert HUD lower-left stance indicator, implant component library

These icons appear alongside the text label (WALK, CAREFUL, etc.) per the insert HUD wireframe. They reinforce the label visually and support conversion to icon-first display in #787.

File	Stance	Design differentiator
icon_stance_walk.svg	WALK	Upright figure, bilateral stride. Arms in natural walk swing (forward/back asymmetry).
icon_stance_careful.svg	CAREFUL	Upright figure, arms spread laterally (environmental check posture). Legs closer together (deliberate foot placement).
icon_stance_sprint.svg	SPRINT	Head and torso shifted forward (lean). Arms in pump position. Wide asymmetric leg stride.
icon_stance_crouch.svg	CROUCH	Head lowered. Torso bent at waist. Knees bent via polyline angles. Compressed vertical range.

Recognition at 20px: Stance icons are always displayed with the text label in v0.1. The icons reinforce the text; they do not replace it. Pattern recognition builds over ~10 minutes of play (same threshold as the radial menu, D-058).

2.2 Status Badges

Location: client/assets/icons/ Size: 20×20px viewBox Used in: Insert HUD chrome band (top row), perception mode indicator

File	Badge	Design
icon_status_health.svg	HEALTH	Medical cross — two overlapping rects forming a plus symbol. Geometric, no curves.
icon_status_perception.svg	PERCEPTION MODE	Diamond eye — four-sided polygon outline with centered circle pupil. Diamond shape reinforces insert lattice aesthetic.

Perception mode variants: Mode-specific icons (thermal, camera feed, etc.) are deferred until #315 fully specs the perception modes. The icon_status_perception.svg is a generic "perception layer active" indicator only.

2.3 Interaction Prompt Icons

Location: client/assets/icons/ Size: 16×16px viewBox Used in: Entity hover interaction verb display (insert layer, z-6)

These appear when the cursor enters an entity's interaction radius. They supplement the verb text (e.g., Talk). Per the HUD wireframe, the verb text is primary — icons are secondary affordance.

File	Action	Design
icon_action_talk.svg	TALK	Speech bubble — rectangular body, triangle callout at bottom-left, two content lines.
icon_action_observe.svg	OBSERVE	Diamond eye (shares vocabulary with icon_status_perception.svg).
icon_action_follow.svg	FOLLOW	Arrow right — shaft and arrowhead. Directional / movement.
icon_action_examine.svg	EXAMINE	Magnifying glass — lens circle with diagonal handle. The circle is a geometric primitive.

Extending verb coverage: Additional verbs (Confront, Wait, etc.) will need icons as the verb list expands. Follow the diamond-eye vocabulary for perception verbs; arrow vocabulary for movement; speech bubble vocabulary for social verbs.

2.4 Inventory Item Silhouettes

Location: client/assets/icons/ Size: 40×40px viewBox Used in: Insert HUD inventory band (lower-right, per insert-hud-wireframe-v01.md §7)

D-086 amendment (2026-04-05): inventory icons are no longer character-specific. [D-117] eliminated the smuggler/detective frame; [D-122] removed named characters. These icons apply to any character who can carry physical items.

File	Item	Design
icon_item_manifest.svg	Manifest (document)	Pentagon-body document with folded top-right corner. Three text-content lines inside.
icon_item_access_token.svg	Access token (hex tag)	Flat-top hexagon with punch-hole circle near top. Two interior encoding lines.
icon_item_comm_log.svg	Personal comm log (device)	Rectangular handheld body with screen inset, antenna stub, signal lines (polylines), control button.

---

3. Visual Grammar Integration

3.1 Color behavior

The #c8d0e0 chrome color is the design reference only. At runtime:

• Default: #c8d0e0 (insert chrome — unchanged)
• lattice_augmented profile: stroke scales to 2px; color may shift to a brighter white
• insert_active == false: icons reduce to 30–50% opacity (per element, per insert HUD wireframe §9.2)
• Entity icons (if using D-033 relationship colors): color swapped via ShaderMaterial parameter

Saturation rule (D-044): insert chrome must never compete with entity D-033 colors. Icons in #c8d0e0 are intentionally de-saturated. Do not use warmer or more saturated colors in any icon variant.

3.2 Godot import setup

# Load SVG as ImageTexture (Godot 4 native SVG import)
# In .import settings: set scale to match display target size
# Runtime color replacement:
var icon_material = ShaderMaterial.new()
icon_material.shader = preload("res://shaders/icon_tint.gdshader")
icon_material.set_shader_parameter("tint_color", Color("#c8d0e0"))
icon_node.material = icon_material

The icon_tint.gdshader (to be authored by client team, ticket #818) multiplies the SVG's existing color by the tint_color parameter. Must handle both stroke-based icons (most) and fill-based icons (health cross). Since all SVGs use #c8d0e0 as their base color, the default parameter leaves them unchanged; swapping the parameter recolors them at runtime.

3.3 Sizing at non-native resolutions

All icons have explicit width and height attributes matching their viewBox. Godot's SVG importer respects these. For 2x displays, import at 2x scale — do not stretch from 1x. The 1px stroke renders correctly at integer multiples.

---

4. What This Document Does Not Cover

• Perception mode variant icons (thermal, camera, etc.) — awaiting #315 full spec
• Minimap POI icons — the insert HUD uses geometric primitives (diamonds, dots, squares) rendered as primitives, not SVG imports (per insert-hud-wireframe-v01.md §4)
• Cursor state icons — specified in D-056, cursor states are handled by the cursor rendering system
• World radial menu icons — the four spokes (Observe, Insert, Comms, Wait) in D-058 need a follow-on ticket

---

5. Calibration Notes

Test all icons at their native display size (20×20px or 16×16px) at 100% scale before approving implementation. The Phosphor Light benchmark:

If a custom icon doesn't read as cleanly as a Phosphor Light equivalent at 16px, simplify it.

The stance icons are the most complex. If any stance icon reads poorly at 20px on a real display, simplify to fewer line segments. The text label remains available as the primary affordance.

Inventory icons at 40×40 have more room and should read clearly without simplification.