From b5cb93203bf55e9801d72ebdd05410683089284b Mon Sep 17 00:00:00 2001 From: Jeroen Schweitzer Date: Mon, 6 Apr 2026 08:18:56 +0200 Subject: [PATCH] =?UTF-8?q?feat(assets):=20implant=20HUD=20icon=20set=20v0?= =?UTF-8?q?.1=20=E2=80=94=20#795?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- client/assets/icons/icon_action_examine.svg | 14 ++ client/assets/icons/icon_action_follow.svg | 14 ++ client/assets/icons/icon_action_observe.svg | 14 ++ client/assets/icons/icon_action_talk.svg | 18 ++ .../assets/icons/icon_item_access_token.svg | 17 ++ client/assets/icons/icon_item_comm_log.svg | 21 +++ client/assets/icons/icon_item_manifest.svg | 18 ++ client/assets/icons/icon_stance_careful.svg | 21 +++ client/assets/icons/icon_stance_crouch.svg | 22 +++ client/assets/icons/icon_stance_sprint.svg | 23 +++ client/assets/icons/icon_stance_walk.svg | 22 +++ client/assets/icons/icon_status_health.svg | 15 ++ .../assets/icons/icon_status_perception.svg | 16 ++ docs/design/icon-set-v01.md | 154 ++++++++++++++++++ 14 files changed, 389 insertions(+) create mode 100644 client/assets/icons/icon_action_examine.svg create mode 100644 client/assets/icons/icon_action_follow.svg create mode 100644 client/assets/icons/icon_action_observe.svg create mode 100644 client/assets/icons/icon_action_talk.svg create mode 100644 client/assets/icons/icon_item_access_token.svg create mode 100644 client/assets/icons/icon_item_comm_log.svg create mode 100644 client/assets/icons/icon_item_manifest.svg create mode 100644 client/assets/icons/icon_stance_careful.svg create mode 100644 client/assets/icons/icon_stance_crouch.svg create mode 100644 client/assets/icons/icon_stance_sprint.svg create mode 100644 client/assets/icons/icon_stance_walk.svg create mode 100644 client/assets/icons/icon_status_health.svg create mode 100644 client/assets/icons/icon_status_perception.svg create mode 100644 docs/design/icon-set-v01.md diff --git a/client/assets/icons/icon_action_examine.svg b/client/assets/icons/icon_action_examine.svg new file mode 100644 index 000000000..2e2890886 --- /dev/null +++ b/client/assets/icons/icon_action_examine.svg @@ -0,0 +1,14 @@ + + + + + + + + + diff --git a/client/assets/icons/icon_action_follow.svg b/client/assets/icons/icon_action_follow.svg new file mode 100644 index 000000000..4680d47ca --- /dev/null +++ b/client/assets/icons/icon_action_follow.svg @@ -0,0 +1,14 @@ + + + + + + + + + diff --git a/client/assets/icons/icon_action_observe.svg b/client/assets/icons/icon_action_observe.svg new file mode 100644 index 000000000..802f84661 --- /dev/null +++ b/client/assets/icons/icon_action_observe.svg @@ -0,0 +1,14 @@ + + + + + + + + + diff --git a/client/assets/icons/icon_action_talk.svg b/client/assets/icons/icon_action_talk.svg new file mode 100644 index 000000000..afb6b742e --- /dev/null +++ b/client/assets/icons/icon_action_talk.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + diff --git a/client/assets/icons/icon_item_access_token.svg b/client/assets/icons/icon_item_access_token.svg new file mode 100644 index 000000000..e4872dbfe --- /dev/null +++ b/client/assets/icons/icon_item_access_token.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + diff --git a/client/assets/icons/icon_item_comm_log.svg b/client/assets/icons/icon_item_comm_log.svg new file mode 100644 index 000000000..29e2718bc --- /dev/null +++ b/client/assets/icons/icon_item_comm_log.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + diff --git a/client/assets/icons/icon_item_manifest.svg b/client/assets/icons/icon_item_manifest.svg new file mode 100644 index 000000000..67f9f017e --- /dev/null +++ b/client/assets/icons/icon_item_manifest.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + diff --git a/client/assets/icons/icon_stance_careful.svg b/client/assets/icons/icon_stance_careful.svg new file mode 100644 index 000000000..68656f41f --- /dev/null +++ b/client/assets/icons/icon_stance_careful.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + diff --git a/client/assets/icons/icon_stance_crouch.svg b/client/assets/icons/icon_stance_crouch.svg new file mode 100644 index 000000000..404a9d7e0 --- /dev/null +++ b/client/assets/icons/icon_stance_crouch.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + diff --git a/client/assets/icons/icon_stance_sprint.svg b/client/assets/icons/icon_stance_sprint.svg new file mode 100644 index 000000000..72139111f --- /dev/null +++ b/client/assets/icons/icon_stance_sprint.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + diff --git a/client/assets/icons/icon_stance_walk.svg b/client/assets/icons/icon_stance_walk.svg new file mode 100644 index 000000000..d3f5f2491 --- /dev/null +++ b/client/assets/icons/icon_stance_walk.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + diff --git a/client/assets/icons/icon_status_health.svg b/client/assets/icons/icon_status_health.svg new file mode 100644 index 000000000..0fe4310ba --- /dev/null +++ b/client/assets/icons/icon_status_health.svg @@ -0,0 +1,15 @@ + + + + + + + + + diff --git a/client/assets/icons/icon_status_perception.svg b/client/assets/icons/icon_status_perception.svg new file mode 100644 index 000000000..9cfc9c71b --- /dev/null +++ b/client/assets/icons/icon_status_perception.svg @@ -0,0 +1,16 @@ + + + + + + + + + diff --git a/docs/design/icon-set-v01.md b/docs/design/icon-set-v01.md new file mode 100644 index 000000000..b44be05d6 --- /dev/null +++ b/docs/design/icon-set-v01.md @@ -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.