jpmschweitzer/settled-reach
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(assets): implant HUD icon set v0.1 — #795

Browse Source 
13 SVG icons covering stance indicators (walk/careful/sprint/crouch),
status badges (health, perception), interaction prompts (talk/observe/
follow/examine), and inventory silhouettes (manifest, access token,
comm log).

All D-086 compliant: 1px stroke, #c8d0e0 chrome, round linecaps,
minimal anchor points, no icon fonts, runtime-replaceable via
ShaderMaterial. Sizes: 20×20 (stance/status), 16×16 (actions),
40×40 (inventory). Unblocks client #787.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
jpmschweitzer
2026-04-06 08:18:56 +02:00
co-authored by Claude Sonnet 4.6
parent f1b97d4a88
commit b5cb93203b
14 changed files with 389 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/assets/icons/icon_action_examine.svg
+14
View File
@@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
<!--
Interaction prompt: EXAMINE
Design: magnifying glass — lens circle (geometric primitive) with diagonal handle.
Universally understood. The circle is a geometric primitive, not a decorative curve.
D-086: 1px stroke, #c8d0e0 chrome, minimal anchor points.
-->
<g stroke="#c8d0e0" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="none">
<!-- Lens -->
<circle cx="7" cy="7" r="4"/>
<!-- Handle -->
<line x1="10.5" y1="10.5" x2="14" y2="14"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 602 B

client/assets/icons/icon_action_follow.svg
+14
View File
@@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
<!--
Interaction prompt: FOLLOW
Design: directional arrow right — clean shaft with arrowhead.
Communicates: move toward / track. Verb context makes the meaning clear.
D-086: 1px stroke, #c8d0e0 chrome, minimal anchor points.
-->
<g stroke="#c8d0e0" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="none">
<!-- Arrow shaft -->
<line x1="2" y1="8" x2="13" y2="8"/>
<!-- Arrowhead -->
<polyline points="10,5 13,8 10,11"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 578 B

client/assets/icons/icon_action_observe.svg
+14
View File
@@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
<!--
Interaction prompt: OBSERVE
Design: geometric eye — diamond outline with pupil circle.
Shares vocabulary with icon_status_perception.svg (reinforces visual system).
D-086: 1px stroke, #c8d0e0 chrome, minimal anchor points.
-->
<g stroke="#c8d0e0" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="none">
<!-- Diamond eye -->
<polygon points="8,2 15,8 8,14 1,8"/>
<!-- Pupil -->
<circle cx="8" cy="8" r="2.5"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 573 B

client/assets/icons/icon_action_talk.svg
+18
View File
@@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
<!--
Interaction prompt: TALK
Design: speech bubble — rectangle body, triangle callout at bottom-left,
two content lines suggesting text. Rectangular (not rounded) to match
insert UI geometry aesthetic.
D-086: 1px stroke, #c8d0e0 chrome, minimal anchor points.
-->
<g stroke="#c8d0e0" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="none">
<!-- Bubble body -->
<rect x="2" y="2" width="12" height="8"/>
<!-- Callout triangle (bottom-left) -->
<polyline points="4,10 4,14 7,10"/>
<!-- Implied text content lines -->
<line x1="5" y1="5" x2="11" y2="5"/>
<line x1="5" y1="7.5" x2="9" y2="7.5"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 768 B

client/assets/icons/icon_item_access_token.svg
+17
View File
@@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
<!--
Inventory item: ACCESS TOKEN (hexagonal tag)
Design: flat-top hexagon body with a small punch-hole circle near top center
(physical tag/credential). Two interior lines suggest encoded markings.
D-086: 1px stroke, #c8d0e0 chrome, minimal anchor points, 40×40px.
-->
<g stroke="#c8d0e0" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="none">
<!-- Hexagon (flat-top orientation) -->
<polygon points="10,10 20,5 30,10 30,30 20,35 10,30"/>
<!-- Punch hole (physical tag indicator) -->
<circle cx="20" cy="9" r="2"/>
<!-- Encoded marking lines -->
<line x1="14" y1="20" x2="26" y2="20"/>
<line x1="16" y1="24" x2="24" y2="24"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 798 B

client/assets/icons/icon_item_comm_log.svg
+21
View File
@@ -0,0 +1,21 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
<!--
Inventory item: PERSONAL COMM LOG (communication device)
Design: rectangular handheld device body, screen inset, antenna stub,
two diagonal signal-propagation lines (polylines, not curves).
D-086: 1px stroke, #c8d0e0 chrome, minimal anchor points, 40×40px.
-->
<g stroke="#c8d0e0" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="none">
<!-- Device body -->
<rect x="11" y="12" width="16" height="24"/>
<!-- Screen inset -->
<rect x="14" y="15" width="10" height="9"/>
<!-- Antenna stub -->
<line x1="21" y1="12" x2="23" y2="7"/>
<!-- Signal propagation lines (angled, not arcs) -->
<polyline points="25,9 27,10 28,12"/>
<polyline points="25,7 29,9 30,12"/>
<!-- Control button -->
<line x1="16" y1="31" x2="22" y2="31"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 913 B

client/assets/icons/icon_item_manifest.svg
+18
View File
@@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
<!--
Inventory item: MANIFEST (document)
Design: document body with top-right folded corner (classic document indicator),
three text-content lines inside suggesting information density.
D-086: 1px stroke, #c8d0e0 chrome, minimal anchor points, 40×40px.
-->
<g stroke="#c8d0e0" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="none">
<!-- Document body with folded corner (pentagon path) -->
<path d="M8,4 L22,4 L28,10 L28,34 L8,34 Z"/>
<!-- Fold crease lines (complete the corner triangle) -->
<polyline points="22,4 22,10 28,10"/>
<!-- Content text lines -->
<line x1="12" y1="17" x2="24" y2="17"/>
<line x1="12" y1="21" x2="24" y2="21"/>
<line x1="12" y1="25" x2="19" y2="25"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 854 B

client/assets/icons/icon_stance_careful.svg
+21
View File
@@ -0,0 +1,21 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
<!--
Stance: CAREFUL
Design: upright, arms spread wide (checking environment, lateral awareness),
legs closer together (deliberate slow placement).
Differentiator vs WALK: arms extend outward rather than swinging forward/back.
D-086: 1px stroke, #c8d0e0 chrome, minimal anchor points.
-->
<g stroke="#c8d0e0" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="none">
<!-- Head -->
<circle cx="10" cy="4" r="2.5"/>
<!-- Torso (upright) -->
<line x1="10" y1="6.5" x2="10" y2="13"/>
<!-- Arms spread laterally (alert posture) -->
<line x1="10" y1="9" x2="4" y2="12"/>
<line x1="10" y1="9" x2="16" y2="12"/>
<!-- Legs closer together (cautious, controlled placement) -->
<line x1="10" y1="13" x2="7" y2="19"/>
<line x1="10" y1="13" x2="13" y2="19"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 929 B

client/assets/icons/icon_stance_crouch.svg
+22
View File
@@ -0,0 +1,22 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
<!--
Stance: CROUCH
Design: head lowered, torso bent forward, knees visibly bent via polyline angles.
Differentiator vs all others: compressed vertical range, bent-knee polylines.
D-086: 1px stroke, #c8d0e0 chrome, minimal anchor points.
-->
<g stroke="#c8d0e0" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="none">
<!-- Head (lowered, compressed stance) -->
<circle cx="9" cy="6" r="2.5"/>
<!-- Torso (bent at waist, angled forward) -->
<line x1="9" y1="8.5" x2="10" y2="13"/>
<!-- Left arm (braced forward) -->
<line x1="9.5" y1="10.5" x2="5" y2="12"/>
<!-- Right arm (rearward) -->
<line x1="9.5" y1="10.5" x2="13" y2="11"/>
<!-- Left leg (bent knee) -->
<polyline points="10,13 6,16 5,19"/>
<!-- Right leg (bent knee) -->
<polyline points="10,13 14,15 15,19"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 956 B

client/assets/icons/icon_stance_sprint.svg
+23
View File
@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
<!--
Stance: SPRINT
Design: head shifted forward, torso angled aggressively, wide asymmetric stride.
Differentiator vs WALK: clear forward lean of both head and torso,
arms in pump position (one high, one low), wider leg spread.
D-086: 1px stroke, #c8d0e0 chrome, minimal anchor points.
-->
<g stroke="#c8d0e0" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="none">
<!-- Head (shifted forward, momentum lean) -->
<circle cx="12" cy="4" r="2.5"/>
<!-- Torso (strongly angled forward) -->
<line x1="12" y1="6.5" x2="9" y2="13"/>
<!-- Left arm (drive forward and up) -->
<line x1="11" y1="9" x2="14" y2="13"/>
<!-- Right arm (pull back) -->
<line x1="11" y1="9" x2="6" y2="11"/>
<!-- Left leg (long lead stride) -->
<line x1="9" y1="13" x2="5" y2="19"/>
<!-- Right leg (push-off, trailing high) -->
<line x1="9" y1="13" x2="15" y2="17"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

client/assets/icons/icon_stance_walk.svg
+22
View File
@@ -0,0 +1,22 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
<!--
Stance: WALK
Design: upright figure, bilateral stride, arms in natural walking swing.
Differentiator vs CAREFUL: arms follow natural walk arc, not spread wide.
D-086: 1px stroke, #c8d0e0 chrome, minimal anchor points.
-->
<g stroke="#c8d0e0" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="none">
<!-- Head -->
<circle cx="10" cy="4" r="2.5"/>
<!-- Torso -->
<line x1="10" y1="6.5" x2="10" y2="13"/>
<!-- Left arm (forward swing) -->
<line x1="10" y1="9" x2="6" y2="12"/>
<!-- Right arm (back swing) -->
<line x1="10" y1="9" x2="14" y2="11"/>
<!-- Left leg (forward step) -->
<line x1="10" y1="13" x2="6" y2="19"/>
<!-- Right leg (trailing step) -->
<line x1="10" y1="13" x2="14" y2="18"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 885 B

client/assets/icons/icon_status_health.svg
+15
View File
@@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
<!--
Status badge: HEALTH
Design: medical cross — two overlapping rectangles forming a plus symbol.
Universally understood health indicator. Geometric, no curves.
The live health value is displayed separately; this icon represents the concept.
D-086: 1px stroke, #c8d0e0 chrome, minimal anchor points.
-->
<g stroke="#c8d0e0" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="none">
<!-- Vertical bar of cross -->
<rect x="8.5" y="3" width="3" height="14"/>
<!-- Horizontal bar of cross -->
<rect x="3" y="8.5" width="14" height="3"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 697 B

client/assets/icons/icon_status_perception.svg
+16
View File
@@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
<!--
Status badge: PERCEPTION MODE
Design: geometric eye — diamond outline (4 straight lines) with centered circle pupil.
Diamond shape reinforces the insert/lattice aesthetic; no curves in the outer form.
Communicates: vision, awareness, active perception layer.
Deferred: mode-specific variants (thermal, camera feed) await #315 specs.
D-086: 1px stroke, #c8d0e0 chrome, minimal anchor points.
-->
<g stroke="#c8d0e0" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="none">
<!-- Diamond eye outline (4 straight edges) -->
<polygon points="10,3 18,10 10,17 2,10"/>
<!-- Pupil circle -->
<circle cx="10" cy="10" r="3"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 787 B

docs/design/icon-set-v01.md
+154
View File
@@ -0,0 +1,154 @@
---
title: "Implant HUD Icon Set — v0.1"
description: "Design specification for the implant HUD icon vocabulary: stance indicators, status badges, interaction prompts, and inventory item silhouettes"
type: design
status: active
ticket: "#795"
decision_refs: [D-086]
author: "Araminta"
created: 2026-04-05
updated: 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
```gdscript
# 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) multiplies the SVG's existing stroke color by the `tint_color` parameter. Since all SVGs use `#c8d0e0` as their stroke, 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.