# Insert/HUD Wireframe and Visual Specification — v0.1 ## Dual Character Variants: Smuggler + Detective **Ticket:** #314 **Author:** Araminta (Visual Designer) **Date:** 2026-02-24 **Status:** Active — feeds #263 (time display client implementation) and #151 (minimap rendering) **Visual grammar reference:** `docs/design/visual-grammar-v01.md` (§7 Neural Insert Overlay) --- ## 1. System Architecture The insert HUD is not a UI panel bolted onto the game. It is the player character's **neural lattice** — Settled Reach technology that overlays computational data onto the character's perception. Every element on z-layer 6 is diegetic: the character is experiencing this information through their implant, not reading a game interface. This has direct design consequences: - The insert does not appear/disappear — it activates and deactivates. The character's lattice is always there; they choose when to engage it. - Labels use the character's vocabulary, not the game's. The smuggler's insert calls it "The Last Shift." The detective's insert calls it "Licensed Establishment, District 7." - The same underlying `ObserverSnapshot` feeds both variants. One parameterized system: `lattice_profile` on the snapshot determines which visual mode renders. Stig builds one HUD framework, not two. The variants are rendering configurations, not separate systems. ### 1.1 Technical Parameters | Parameter | Smuggler | Detective | |-----------|----------|-----------| | `lattice_profile` | `lattice_baseline` | `lattice_augmented` | | Line weight | 1px | 1–2px | | Annotation density | Sparse — essential markers only | Dense — more markers, connection lines | | Passive opacity | 60% | 80% | | Active opacity | 85% | 100% | | Bloom | 2–3px gaussian at 40% blend | 2–3px gaussian at 40% blend | | Chrome color | `#c8d0e0` | `#c8d0e0` | ### 1.2 Z-Layer Position Insert HUD lives entirely on **z-layer 6**. It renders above fog (z-layer 5) and below monologue/UI (z-layer 7). The fog shader does not mask it — insert data is computational, not perceptual. Entity markers can appear in fogged areas if the lattice has position data. --- ## 2. Screen Layout **Base resolution:** 1920×1080px The HUD has four zones: ``` ┌─────────────────────────────────────────────────────────────────────────────┐ │ [STANCE] [PERCEPTION] [TIME] │ ← HUD chrome band (y: 0–80px) │ │ │ │ │ WORLD VIEW │ │ (insert entity markers rendered here, │ │ positioned at entity world locations) │ │ │ │ ↑ ↑ ↑ ↑ border arrows appear here │ │ ← (for off-screen known POIs) → │ │ ↓ ↓ ↓ ↓ │ │ │ │ [INVENTORY] [INVENTORY] │ ← inventory band (y: 816–864px) ├─────────────────────────────────────────────────────────────────────────────┤ │ DIALOGUE BOX (z-layer 7, when active) │ ← bottom 20% (y: 864–1080px) │ [NPC speech] │ │ [response options] │ └─────────────────────────────────────────────────────────────────────────────┘ ``` **Coordinate system:** Origin (0,0) is top-left. X increases rightward, Y increases downward. All pixel values at 1920×1080 base; Godot 4 DPI scaling handles other resolutions. **Dialogue box:** The bottom 20% (216px) is reserved when dialogue is active. Insert overlay remains visible at 60% of its normal opacity when dialogue is open — the lattice keeps running, the character keeps perceiving. The insert does not suppress during dialogue. --- ## 3. Time Display **Feeds:** Ticket #263 (client time display implementation) ### 3.1 Position and Dimensions | Property | Value | |----------|-------| | Container x | 1720px → 1904px (right-inset 16px, 184px wide) | | Container y | 16px → 64px (48px tall) | | Background | `#0e1218` at 40% opacity — barely-there panel behind text | | Typeface | Michroma Regular 400 | | Alignment | Right-aligned text, right-inset 8px within container | This position is intentionally unremarkable. The player should find it without hunting for it. ### 3.2 Smuggler Variant Single line: the time. Informal, just the clock. ``` 09:42 ``` | Property | Value | |----------|-------| | Text | `{HH}:{MM}` — 24-hour format, always two digits each | | Font size | 24px | | Color | `#c8d0e0` (insert chrome) | | Opacity | 80% passive, 100% when insert active and entity hover | | Y position | Center within container, ~y: 32px | No annotation. The smuggler's lattice gives them the time. That's it. ### 3.3 Detective Variant Two lines: clock on top, shift indicator below. The detective thinks in shifts. ``` 09:42 SHIFT A · ``` | Element | Value | |---------|-------| | Time text | `{HH}:{MM}` — Michroma 20px, `#c8d0e0` at 80% passive, y: 26px in container | | Phase label | `SHIFT {X}` — Michroma 11px, `#c8d0e0` at 60%, y: 50px in container | | Phase dot | 4px circle, phase-color (see below), same y as phase label | **Day phase to shift mapping:** | Game time | Shift label | Dot color | |-----------|-------------|-----------| | 05:00–12:00 | `SHIFT A` | `#c8d0e0` (chrome, neutral) | | 12:00–18:00 | `SHIFT B` | `#c8d0e0` (chrome, neutral) | | 18:00–22:00 | `SHIFT C` | `#e8c547` (amber — social hours, higher risk of contacts) | | 22:00–05:00 | `SHIFT OFF` | `#4a9ebb` (teal — night, lower routine activity) | The dot is a subtle visual cue, not a state machine icon. It gives the detective's lattice a slightly more annotated feel than the smuggler's plain clock. ### 3.4 Insert-Off Behavior When `insert_active == false`: - Time display dims to 50% of passive opacity - Background panel disappears entirely - Text remains — the character always knows what time it is, even without active lattice engagement. Time is ambient lattice output, not targeting output. - Phase label (detective) also dims to 50% The time display is the one persistent insert element. Everything else goes dark on insert deactivation. --- ## 4. Entity Markers Entity markers appear at each entity's world position — rendered in world space on z-layer 6. They are not minimap icons in a panel; they annotate the world the player is looking at. ### 4.1 Smuggler Variant — Social Network View The smuggler sees their world as a social network. People are dots. Labels are familiar names. **Dot specification:** | Property | Value | |----------|-------| | Shape | Filled circle | | Diameter | 6px | | Color | D-033 relationship color for this NPC | | Bloom | 2–3px gaussian at 40% blend | | Passive state | 60% opacity | | Active state (hover) | 100% opacity + bloom brightens | | All non-hovered on hover | 40% opacity (focus effect) | The dot sits at the entity's sprite anchor point (center-bottom of the 64×64 canvas). It does not float; it attaches to the entity. **Label specification:** Named NPCs (Kael, Lera, Sera, etc.) always show a casual label. Generic NPCs show no label unless hovered. | Property | Value | |----------|-------| | Typeface | Michroma 11px | | Color | `#c8d0e0` at 70% passive, 100% on hover | | Position | 8px above the dot, horizontally centered | | Format | First name only for Known NPCs: `Kael` | | Format | Location nickname for POIs: `The Last Shift`, `Kael's usual spot` | | Background | None — label is direct on world view. Keep it legible against zone palettes. | **Relationship colors applied:** | NPC state | Dot color | Label format | |-----------|-----------|--------------| | Unknown | `#4a9ebb` teal | No label (generic) | | Known/Friendly | `#6bc9a6` green | First name | | Person of Interest | `#e8c547` amber | First name + `?` suffix: `Torek?` | | Hostile | `#d45d5d` red | First name | The smuggler does not see "Person of Interest." To them, amber means "something's off about this person" — not a case file designation. ### 4.2 Detective Variant — Investigation Overlay The detective sees their world as a case map. Known individuals are flagged. Locations have institutional labels. The overlay is denser and more annotated. **Named NPC marker specification:** | NPC type | Shape | Size | Color | |----------|-------|------|-------| | Person of Interest | Diamond (rotated square) | 10px × 10px | `#e8c547` amber | | Known/Friendly | Filled circle | 6px | `#6bc9a6` green | | Unknown | Filled circle | 6px | `#4a9ebb` teal | | Hostile / Suspect | Diamond | 10px × 10px | `#d45d5d` red | The diamond shape is the detective's POI designation — it communicates "flagged" without text. The smuggler's variant uses only circles because their lattice doesn't have case-file designation logic. **Label specification:** | Property | Value | |----------|-------| | Typeface | Michroma 11px | | Color | `#c8d0e0` at 80% passive, 100% on hover | | Position | 10px above the marker, right-aligned to marker center | | NPC label format | `POI: K. Davan` (formal: last name initial + surname) | | NPC label format | `K. Davan` for Known/non-POI | | Location label | See §5 | **Evidence annotation:** When the detective has logged evidence associated with an entity, a small square appears adjacent to their marker: | Property | Value | |----------|-------| | Shape | Filled square | | Size | 4px × 4px | | Position | 4px right of the primary marker | | Color | `#e8c547` amber | | Opacity | 60% passive, 100% on hover | This is the insert's way of flagging "you have something on this person." It doesn't say what. **Commission grid overlay (Detective only):** The detective's augmented lattice renders a very faint reference grid across the viewport. This is the "commission-style" aesthetic — the world read as a site map. | Property | Value | |----------|-------| | Grid lines | Horizontal + vertical, every 5 visual tiles (~320px) | | Line color | `#333340` at 20% opacity | | Line weight | 1px | | Behavior | Always visible when insert active, disappears on insert-off | The grid does not animate, pulse, or react. It is a passive reference overlay. Five lines across the width, five down the height, making a 5×5 grid of reference squares. It is barely visible — felt as structure, not seen as decoration. --- ## 5. Location Labels Location labels appear at POI anchor points in world space — the entrance tile or center tile of a known location. ### 5.1 Smuggler Variant Casual labels, written in the smuggler's vocabulary. These are their personal pins. | Location | Label text | |----------|-----------| | The Last Shift (bar) | `The Last Shift` | | The Terminal (logistics hub) | `The Terminal` | | Maintenance corridor (smuggling space) | `B-7 drop` (or specific pin label) | | Kael's regular position | `Kael's usual spot` | | Property | Value | |----------|-------| | Typeface | Michroma 12px | | Color | `#c8d0e0` at 50% — location labels are backgrounded, not foregrounded | | Position | Centered on location anchor, 16px above entity-level (below any entity markers at that location) | | Visibility | Always visible for known locations, fades in on discovery | ### 5.2 Detective Variant Institutional labels, written in Commission case file format. | Location | Label text | |----------|-----------| | The Last Shift (bar) | `Licensed Establishment · District 7` | | The Terminal (logistics hub) | `Freight Operations Hub · Level 2` | | Maintenance corridor | `Restricted Access — Corridor B-7` | | Kael's regular position | `K. Davan – Last Sighted` | | Property | Value | |----------|-------| | Typeface | Michroma 11px | | Color | `#c8d0e0` at 70% — slightly more prominent than smuggler's labels | | Position | Same as smuggler, centered on anchor | | Secondary text | Dot separator `·` between primary name and category/district | | Visibility | Always visible for known/case-file locations | --- ## 6. Border Arrows (Off-Screen Navigation) When a known POI or tracked entity is outside the current viewport, a border arrow appears at the screen edge pointing toward them. **The camera is locked to the player character (D-014).** Border arrows are the only navigation affordance for off-screen known locations. There is no minimap panel. ### 6.1 Arrow Specification | Property | Value | |----------|-------| | Shape | Equilateral triangle, apex pointing toward screen edge | | Size | 12px × 10px | | Inset from edge | 8px | | Color | Matches the POI's relationship color (D-033), or `#c8d0e0` chrome for neutral known locations | | Opacity | 60% passive, 100% on hover | | Label on hover | Location name (using appropriate variant's label format), Michroma 10px, appears inside-screen adjacent to arrow | **Clustering:** When multiple POIs are off-screen in similar directions, arrows stack with 4px gap. Maximum 6 arrows per edge before clustering into a count indicator: `+3` (Michroma 10px, chrome color). **Decay:** If the character has only `Suspects` confidence about a location (not `KnowsOf`), the border arrow renders at 30% opacity with a dashed border (1px alternating 2px on / 2px off). "Something might be there." ### 6.2 Smuggler vs Detective - **Smuggler:** Border arrows appear for Known/Friendly NPCs and personal pins. The arrow color is the NPC's relationship color. The label is casual. Unknown NPCs do not generate border arrows. - **Detective:** Border arrows appear for all case-file entries, POIs, and known locations regardless of relationship state. Evidence-flagged entities show the amber evidence square (4px) adjacent to the arrow. --- ## 7. Inventory Indicators (Smuggler Only) Per D-065: the smuggler can carry up to 3–4 physical items. Icons appear in the lower-right corner, above the dialogue band. | Property | Value | |----------|-------| | Position | x: 1904px (right inset 16px), y: 816px → 856px | | Icon size | 40×40px | | Gap between icons | 8px horizontal, right-to-left stacking | | Opacity | 80% passive, 100% on hover | | Empty slots | Not displayed — icons only appear when items are carried | | Z-layer | 6 (insert layer), but icons are physical objects, not lattice data | **Item icons (placeholder descriptions for #314 — actual sprites are a separate ticket):** - Manifest copy: document silhouette - Corridor access token: hexagonal tag silhouette - Personal comm log: communication device silhouette Icons do not disappear when insert is off — they are physical items, not lattice annotations. The character still has pockets whether or not their insert is active. **Detective inventory:** The detective has 2 inventory slots but they are knowledge-only in v0.1 (D-065). No inventory icons display for the detective in v0.1. --- ## 8. Stance Indicator Both variants show the current movement stance. This is ambient information — the player set it, but may have forgotten. | Property | Value | |----------|-------| | Position | x: 16px → 180px, y: 826px → 856px (lower-left, above dialogue band) | | Typeface | Michroma 11px | | Color | `#c8d0e0` at 50% — intentionally quiet | | Content | Current stance label: `WALK` / `CAREFUL` / `SPRINT` / `CROUCH` | | Behavior | Fades to 30% when dialogue is active | The stance indicator never hides; it just dims. It is the quietest element in the HUD. --- ## 9. Interaction States ### 9.1 Insert Active — Default State Full overlay as described in §3–§8. Entity markers, location labels, border arrows, time display, stance indicator, inventory icons all render at their passive opacity values. ### 9.2 Insert Inactive (D-056/D-057) When `insert_active == false`: | Element | State | |---------|-------| | Entity markers | Hidden | | Location labels | Hidden | | Border arrows | Hidden | | Commission grid (detective) | Hidden | | Evidence annotations | Hidden | | Bloom | Off — no gaussian pass | | Time display | Dims to 50% of passive opacity, background panel disappears | | Stance indicator | Remains — 30% opacity | | Inventory icons | Remain — physical, not insert data | | Cursor | Shape still changes on entity proximity (subconscious physical response per D-056) | The world goes quiet. The character still moves, still perceives physically, still has their items. But the lattice stops annotating. ### 9.3 Entity Hover (Insert Active) When the player's cursor enters an entity's interaction radius: 1. Hovered entity's marker brightens to 100% opacity + bloom intensifies to 60% 2. All other entity markers dim to 40% opacity 3. Interaction verb appears: Michroma 13px, D-033 color of the target, positioned 16px above the entity marker 4. Entity label brightens to 100% The interaction verb is the primary affordance for engagement. The verb appears on the insert layer — it disappears when insert is off, and is unaffected by fog (since it's z-layer 6). Verb examples: `Talk`, `Observe`, `Follow`, `Confront`, `Examine` ### 9.4 Dialogue Active When a dialogue interaction is in progress: | Element | Change | |---------|--------| | Dialogue box | Appears at bottom 20% (y: 864–1080), z-layer 7 | | Monologue (if active) | Floats above dialogue box at y: ~800–860, z-layer 7 | | Insert overlay | Reduces to 60% of active opacity — still visible, lattice still running | | Entity markers | Remain visible but dimmed 40% | | Hovered entity marker | Stays bright — the conversation target stays highlighted | | Inventory icons | Remain visible | | Time display | Remains | | Stance indicator | Dims to 30% | The insert doesn't close during dialogue. The character is still aware of their surroundings. ### 9.5 High Perception Load (D-059) When multiple perception modes are active simultaneously, the insert shows diegetic interference: | Property | Value | |----------|-------| | Effect | Horizontal scan-line distortion | | Intensity | 5% — subtle, peripheral | | Behavior | Periodic (not constant), short bursts, random intervals 2–8 seconds | | Applies to | All insert elements simultaneously | | Does NOT apply to | UI z-layer 7 (monologue, dialogue) | This is a visual warning, not a mechanical penalty. The player reads it as "the lattice is working hard." It should not be alarming; it should be ambient. --- ## 10. Wireframe Mockups ### 10.1 Smuggler Variant — The Last Shift, Evening The smuggler is in the bar. Kael is nearby (green — Known/Friendly). An unknown dock worker is in the corner (teal). The bar is a known location. ``` ┌─────────────────────────────────────────────────────────────────────────┐ │ CAREFUL 09:42 │ │ │ │ ↑ The Last Shift (bar: border direction) │ │ │ │ │ │ ● ● │ │ Kael [player] ● │ │ (green) (cream) (teal) │ │ │ │ The Last Shift │ │ (chrome label, centered) │ │ │ │ │ │ [manifest][token]│ ├─────────────────────────────────────────────────────────────────────────┤ │ [dialogue box — inactive] │ └─────────────────────────────────────────────────────────────────────────┘ Legend: ● = entity dot marker (6px) Kael = label (Michroma 11px, chrome) The Last Shift = location label (Michroma 12px, 50% chrome) [manifest][token] = inventory icons (40×40px, lower-right) 09:42 = time display (Michroma 24px, upper-right) CAREFUL = stance (Michroma 11px, lower-left, 50%) ``` ### 10.2 Detective Variant — Same Location, Same Time The detective is outside the bar, watching the entrance. Kael is inside, behind a wall — the lattice shows his last known position as a dim marker. A POI is approaching from the corridor (off-screen right). ``` ┌─────────────────────────────────────────────────────────────────────────┐ │ WALK [ANALYT] 09:42 │ │ SHIFT C · │ │ +·····+·····+·····+·····+·····+·····+·····+·····+·····+·····+ │ │ · ·│ │ · ◆ [player] → ·│ │ · K. Davan (blue-wh) [POI: arrow, amber, off-screen]·│ │ · (amber diamond) ·│ │ · ·│ │ · Licensed Establishment · District 7 ·│ │ +·····+·····+·····+·····+·····+·····+·····+·····+·····+·····+ │ │ · ·│ │ · ·│ │ │ │ WALK │ ├─────────────────────────────────────────────────────────────────────────┤ │ [dialogue box — inactive] │ └─────────────────────────────────────────────────────────────────────────┘ Legend: ◆ = POI diamond marker (10×10px) K. Davan = formal label (Michroma 11px) +·····+ = commission grid overlay (Michroma thin, 20% opacity) → = border arrow (off-screen POI, amber — K. Davan connection) Licensed Establishment · District 7 = institutional location label 09:42 / SHIFT C · = time display + shift with amber phase dot [ANALYT] = perception mode indicator (placeholder position, upper-center-right) ``` ### 10.3 Entity Hover State — Detective, POI Hover ``` ┌─────────────────────────────────────────────────────────────────────────┐ │ WALK [ANALYT] 09:42 │ │ SHIFT C · │ │ │ │ Talk │ │ Observe │ │ ◆ Confront ←─ interaction verbs (amber, 13px) │ │ K. Davan │ │ [■]◆ (brightened, 100%, bloom 60%) │ │ │ │ all other markers at 40% opacity ─────────────────────────→ │ │ ● │ │ (40%) │ └─────────────────────────────────────────────────────────────────────────┘ [■] = evidence annotation (4×4px amber square, adjacent to diamond) ``` --- ## 11. Color Reference Summary All colors from `visual-grammar-v01.md` §1.5 and §3.2. Reproduced here for implementation reference. | Use | Hex | Notes | |-----|-----|-------| | Insert chrome (default) | `#c8d0e0` | Time display, labels, stance, grid | | Entity — Unknown | `#4a9ebb` | Cool teal. Default NPC state. | | Entity — Known/Friendly | `#6bc9a6` | Soft green. Trusted network. | | Entity — POI | `#e8c547` | Warm amber. Flagged. | | Entity — Hostile | `#d45d5d` | Muted red. Subjective danger. | | Player — Detective | `#e0e8ff` | Cool blue-white. | | Player — Smuggler | `#e8e0d0` | Warm cream. | | Unexplored wireframe | `#333340` | Not used in HUD chrome directly — world layer use | | Time panel background | `#0e1218` at 40% | Barely-there. Matches zone ambient palette. | **Saturation rule:** Entity D-033 colors must remain the most saturated elements on screen at all times. Nothing in the insert chrome may compete with entity color saturation (D-044, §3.6 of visual grammar). The chrome is cool grey-white — it frames entity colors, never rivals them. --- ## 12. Typography Reference All text is Michroma Regular 400 (Google Fonts). No exceptions (visual-grammar-v01.md §5.4). | Role | Size | Color | Opacity (passive / active) | Z-layer | |------|------|-------|---------------------------|---------| | Time display | 24px (smuggler) / 20px (detective) | `#c8d0e0` | 80% / 100% | 6 | | Phase label (detective) | 11px | `#c8d0e0` | 60% / 80% | 6 | | Entity label (hover) | 11px | `#c8d0e0` | 70% / 100% | 6 | | Location label (smuggler) | 12px | `#c8d0e0` | 50% / 70% | 6 | | Location label (detective) | 11px | `#c8d0e0` | 70% / 90% | 6 | | Interaction verb | 13px | D-033 target color | 95% (always active) | 6 | | Stance indicator | 11px | `#c8d0e0` | 50% / 60% | 6 | | Border arrow label (hover) | 10px | `#c8d0e0` | 0% / 100% (hover-only) | 6 | --- ## 13. What This Document Does Not Cover These are deliberately out of scope for #314. Separate tickets own them. - **Perception mode overlay visual design** — thermal, camera feed, etc. (#315 area, depends on D-017/D-048 full spec) - **Monologue display system** — typography animation, stacking (#315) - **Sound indicator visual design** — fog-edge ping pulse (#317) - **THE FRIEND visual treatment** — special relationship visual affordances (#318) - **Minimap panel** (if a panel approach is ever adopted — currently border arrows handle navigation, no panel exists in v0.1) - **World map / inter-location navigation** — a different system entirely - **Cursor states** — specified in D-056, not repeated here --- ## Appendix A — Integration Notes for Stig (#263) **For the time display implementation (#263):** 1. The time display container is at **x: 1720–1904, y: 16–64** (right-inset 16px from 1920px width). These are your anchor coordinates. 2. The `ObserverSnapshot` needs to expose current game time (hours, minutes) and current day phase. Consult D-031 for the tick-to-time mapping (10 ticks = 1 game-minute). 3. Time display text must be **right-aligned** within the container. Don't center it — it should feel like a readout in the upper-right corner. 4. The background panel (`#0e1218` at 40%) should be a simple NinePatchRect or ColorRect — minimal, no rounded corners. 5. When `insert_active == false`: set time display `modulate.a = 0.5 * passive_opacity` and hide the background panel. The text stays; the container chrome disappears. 6. For the detective's phase label: drive the shift string from a simple range lookup on the game hour (see §3.3 table above). The dot color is a color constant mapped from phase — not dynamic. 7. The phase label is visible only on `lattice_profile == lattice_augmented`. Single boolean check in the time display node. **For the entity marker system (future tickets):** - One marker scene, parametrized by shape (circle vs diamond), size, color, bloom intensity - The `lattice_profile` drives shape selection: baseline = circles always, augmented = diamonds for POI state, circles for other states - Evidence annotation (`■`) is a separate child node, shown/hidden based on KnowledgeGraph query for evidence entries on this entity - Commission grid is a separate CanvasLayer node, only visible when `lattice_profile == lattice_augmented` and `insert_active == true` --- ## Appendix B — Decision Cross-References | Decision | Relevance | |----------|-----------| | D-013 | Diegetic insert/POI navigation. The HUD IS the neural insert. | | D-014 | Minimap spec: "dots when close, border arrows for known distant POIs" | | D-019 | Camera tilt — sprites authored for shallow tilt. Markers sit above entity anchor. | | D-031 | Time system — tick-to-time mapping, day phases. Feeds §3. | | D-033 | Entity color = relationship to player. All marker colors source from this. | | D-048 | Neural insert visual design. Bloom spec, character variants. | | D-049 | Z-layer 6 = insert overlay. Z-layer 7 = UI/monologue. | | D-051 | "Settling is placement." Object density as meaning. Insert labels reflect this. | | D-056 | Cursor states persist when insert-off. | | D-057 | Entity interaction labels suppressed when insert-off. | | D-059 | Perception load → scan-line interference at 5%. | | D-065 | Inventory: 40×40px icons, smuggler-only in v0.1. | | D-066 | Dual-scale grid. Entity markers anchor to visual tile positions. |