docs(ui): add 19 UI wireframes across 5 categories (v0.1 + v1.0)

First wireframe set covering all major UI surfaces:
- HUD: basic insert (v0.1), full insert with perception modes (v1.0)
- Dialogue: speaking, choosing, overheard states (v0.1), full with
  relationship indicators (v1.0)
- Monologue: idle, reaction (v0.1), thought threading (v1.0)
- Popups: modal, tooltip, interaction list (v0.1), context menu,
  notification stack (v1.0)
- Menus: main, pause, save/load (v0.1), main menu, options (v1.0)

README.md cross-references each wireframe to governing D-records.
JSON source + PNG exports tracked in git.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-23 15:36:06 +01:00
co-authored by Claude Opus 4.6
parent 30a21e9a08
commit 996a000146
39 changed files with 3766 additions and 0 deletions
@@ -0,0 +1,149 @@
{
"name": "v01-dialogue-choosing",
"shapes": {
"bg": {
"type": "Rectangle",
"left": 0, "top": 0, "width": 1140, "height": 760,
"fillColor": "#1a1e24",
"strokeColor": "#1a1e24"
},
"bg-game-label": {
"type": "Text",
"left": 380, "top": 280,
"text": "GAME VIEW — KAEL DAVAN VISIBLE IN WORLD\n(entity color: amber — person of interest)",
"fontColor": "#333340",
"fontSize": 14
},
"monologue-area": {
"type": "Rectangle",
"left": 200, "top": 522, "width": 740, "height": 56,
"fillColor": "#00000000",
"strokeColor": "#00000000"
},
"monologue-text": {
"type": "Text",
"left": 200, "top": 522, "width": 740,
"text": "This changes things. No taking it back.",
"fontColor": "#e0e8f8",
"fontSize": 13,
"wordWrap": true
},
"monologue-note": {
"type": "Text",
"left": 200, "top": 543,
"text": "Pre-delivery monologue beat — fires before confrontation option is selected (D-063)",
"fontColor": "#3a4455",
"fontSize": 10
},
"dialogue-panel": {
"type": "Rectangle",
"left": 0, "top": 608, "width": 1140, "height": 152,
"fillColor": "#0d1018",
"strokeColor": "#333340"
},
"dialogue-panel-accent": {
"type": "Rectangle",
"left": 0, "top": 608, "width": 1140, "height": 2,
"fillColor": "#333340",
"strokeColor": "#333340"
},
"speaker-name": {
"type": "Text",
"left": 20, "top": 616,
"text": "KAEL DAVAN",
"fontColor": "#e8c547",
"fontSize": 14
},
"speaker-arrow": {
"type": "Text",
"left": 116, "top": 616,
"text": "→ you",
"fontColor": "#556677",
"fontSize": 14
},
"dialogue-text": {
"type": "Text",
"left": 20, "top": 638, "width": 1100,
"text": "Long shift. Just heading home. Nothing to report.",
"fontColor": "#e8eaf0",
"fontSize": 16,
"wordWrap": true
},
"separator": {
"type": "Line",
"left": 20, "top": 676, "width": 1100, "height": 0,
"strokeColor": "#2a3040"
},
"response-1": {
"type": "Text",
"left": 20, "top": 682,
"text": "▸ [1] Ask about the shift",
"fontColor": "#c0c8d8",
"fontSize": 14
},
"response-2": {
"type": "Text",
"left": 20, "top": 702,
"text": "▸ [2] Ask about Naia",
"fontColor": "#c0c8d8",
"fontSize": 14
},
"response-3-confrontation": {
"type": "Text",
"left": 20, "top": 722,
"text": " [3] I saw you in corridor B-7.",
"fontColor": "#e0e8f0",
"fontSize": 15
},
"confrontation-style-annotation": {
"type": "Text",
"left": 20, "top": 742,
"text": "Confrontation option: italicized first-person voice, heavier weight — same box, different register (D-063)",
"fontColor": "#3a4455",
"fontSize": 10
},
"invisible-lock-annotation": {
"type": "Text",
"left": 600, "top": 682,
"text": "More options may exist — player never sees locked options (D-062)",
"fontColor": "#3a4455",
"fontSize": 10
},
"skill-check-label": {
"type": "Text",
"left": 800, "top": 702,
"text": "skill checks: not shown in v0.1",
"fontColor": "#3a4455",
"fontSize": 10
},
"minimap-stub": {
"type": "Rectangle",
"left": 880, "top": 16, "width": 244, "height": 244,
"fillColor": "#12141a",
"strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"minimap-stub-label": {
"type": "Text",
"left": 900, "top": 124,
"text": "minimap",
"fontColor": "#333340",
"fontSize": 12
},
"annotation-title": {
"type": "Text",
"left": 16, "top": 16,
"text": "v0.1 DIALOGUE — PLAYER CHOOSING (CONFRONTATION AVAILABLE)",
"fontColor": "#556677",
"fontSize": 11
},
"annotation-notes": {
"type": "Text",
"left": 16, "top": 30, "width": 840,
"text": "Speaker name in D-033 amber (person of interest). 3 options. Option 3 = confrontation: first-person italic voice, heavier weight. No separate UI.",
"fontColor": "#3a4455",
"fontSize": 10,
"wordWrap": true
}
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 204 KiB

@@ -0,0 +1,127 @@
{
"name": "v01-dialogue-overheard",
"shapes": {
"bg": {
"type": "Rectangle",
"left": 0, "top": 0, "width": 1140, "height": 760,
"fillColor": "#1a1e24",
"strokeColor": "#1a1e24"
},
"bg-game-label": {
"type": "Text",
"left": 330, "top": 280,
"text": "GAME VIEW — TWO NPCS CONVERSING AT DISTANCE\n(player not in conversation, eavesdropping passively)",
"fontColor": "#333340",
"fontSize": 14
},
"dialogue-panel": {
"type": "Rectangle",
"left": 0, "top": 608, "width": 1140, "height": 152,
"fillColor": "#0d1018",
"strokeColor": "#333340"
},
"dialogue-panel-accent": {
"type": "Rectangle",
"left": 0, "top": 608, "width": 1140, "height": 2,
"fillColor": "#252a35",
"strokeColor": "#252a35"
},
"passive-indicator": {
"type": "Rectangle",
"left": 0, "top": 608, "width": 6, "height": 152,
"fillColor": "#333345",
"strokeColor": "#333345"
},
"passive-label": {
"type": "Text",
"left": 14, "top": 612,
"text": "OVERHEARD",
"fontColor": "#556677",
"fontSize": 10
},
"speaker-name": {
"type": "Text",
"left": 14, "top": 626,
"text": "KAEL DAVAN",
"fontColor": "#6bc9a6",
"fontSize": 13
},
"speaker-arrow": {
"type": "Text",
"left": 116, "top": 626,
"text": "→ NAIA VOSS",
"fontColor": "#4a9ebb",
"fontSize": 13
},
"dialogue-text-occluded": {
"type": "Text",
"left": 14, "top": 646, "width": 1112,
"text": "... heard about the ... tomorrow. You need to ... before Torek finds ...",
"fontColor": "#9090a8",
"fontSize": 15,
"wordWrap": true
},
"occlusion-annotation": {
"type": "Text",
"left": 14, "top": 682,
"text": "Per-word occlusion filter — server-computed. ... = dropped words. Same conversation, different fragments each playthrough. (D-078)",
"fontColor": "#3a4455",
"fontSize": 10
},
"separator": {
"type": "Line",
"left": 14, "top": 696, "width": 1112, "height": 0,
"strokeColor": "#222830"
},
"no-response-label": {
"type": "Text",
"left": 14, "top": 704,
"text": "No response options — passive mode. Walk out of earshot to dismiss.",
"fontColor": "#444455",
"fontSize": 12
},
"listening-focus-label": {
"type": "Text",
"left": 600, "top": 718,
"text": "Stationary 30+ ticks = ListeningFocus boost — improves word visibility (D-071)",
"fontColor": "#3a4455",
"fontSize": 10
},
"distance-label": {
"type": "Text",
"left": 14, "top": 734,
"text": "Moderate distance / some noise zone → medium word probability",
"fontColor": "#3a4455",
"fontSize": 10
},
"minimap-stub": {
"type": "Rectangle",
"left": 880, "top": 16, "width": 244, "height": 244,
"fillColor": "#12141a",
"strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"minimap-stub-label": {
"type": "Text",
"left": 900, "top": 124,
"text": "minimap",
"fontColor": "#333340",
"fontSize": 12
},
"annotation-title": {
"type": "Text",
"left": 16, "top": 16,
"text": "v0.1 DIALOGUE — OVERHEARD (PASSIVE MODE)",
"fontColor": "#556677",
"fontSize": 11
},
"annotation-notes": {
"type": "Text",
"left": 16, "top": 30, "width": 840,
"text": "Same dialogue box, passive mode. Dimmed side accent. NPC names in D-033 colors. Occluded words as '...'. No response options. Unified log (D-061, D-078).",
"fontColor": "#3a4455",
"fontSize": 10,
"wordWrap": true
}
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 195 KiB

@@ -0,0 +1,135 @@
{
"name": "v01-dialogue-speaking",
"shapes": {
"bg": {
"type": "Rectangle",
"left": 0, "top": 0, "width": 1140, "height": 760,
"fillColor": "#1a1e24",
"strokeColor": "#1a1e24"
},
"bg-game-label": {
"type": "Text",
"left": 380, "top": 280,
"text": "GAME VIEW — NPC ON SCREEN ABOVE DIALOGUE\n(no portrait — NPC is visible in world)",
"fontColor": "#333340",
"fontSize": 14
},
"monologue-area": {
"type": "Rectangle",
"left": 200, "top": 530, "width": 740, "height": 48,
"fillColor": "#00000000",
"strokeColor": "#00000000"
},
"monologue-text": {
"type": "Text",
"left": 200, "top": 530, "width": 740,
"text": "She's choosing her words carefully. Something's off.",
"fontColor": "#d0d4e0",
"fontSize": 13,
"wordWrap": true
},
"monologue-annotation": {
"type": "Text",
"left": 200, "top": 552,
"text": "Monologue — floats ABOVE dialogue box — z-layer 7",
"fontColor": "#3a4455",
"fontSize": 10
},
"dialogue-panel": {
"type": "Rectangle",
"left": 0, "top": 608, "width": 1140, "height": 152,
"fillColor": "#0d1018",
"strokeColor": "#333340"
},
"dialogue-panel-accent": {
"type": "Rectangle",
"left": 0, "top": 608, "width": 1140, "height": 2,
"fillColor": "#333340",
"strokeColor": "#333340"
},
"speaker-name": {
"type": "Text",
"left": 20, "top": 616,
"text": "SERA VENN",
"fontColor": "#c8d0e0",
"fontSize": 14
},
"speaker-arrow": {
"type": "Text",
"left": 108, "top": 616,
"text": "→ you",
"fontColor": "#556677",
"fontSize": 14
},
"dialogue-text": {
"type": "Text",
"left": 20, "top": 638, "width": 1100,
"text": "Heard there was a manifest audit this morning. Torek's been in a mood all shift. Nothing unusual, really — end of quarter, you know how it gets.",
"fontColor": "#e8eaf0",
"fontSize": 16,
"wordWrap": true
},
"separator": {
"type": "Line",
"left": 20, "top": 698, "width": 1100, "height": 0,
"strokeColor": "#2a3040"
},
"response-area-label": {
"type": "Text",
"left": 20, "top": 704,
"text": "▸ [1] Ask about the audit",
"fontColor": "#c0c8d8",
"fontSize": 14
},
"response-annotation": {
"type": "Text",
"left": 20, "top": 724,
"text": "Response options appear here (max 3 visible, locked options invisible per D-062)",
"fontColor": "#3a4455",
"fontSize": 10
},
"walk-away-hint": {
"type": "Text",
"left": 20, "top": 738,
"text": "[WASD] Walk away — fades over 300ms, no close button",
"fontColor": "#3a4455",
"fontSize": 10
},
"panel-width-annotation": {
"type": "Text",
"left": 0, "top": 596,
"text": "← max-width 1200px per D-076, centered — full width at 1140px test canvas →",
"fontColor": "#3a4455",
"fontSize": 10
},
"minimap-stub": {
"type": "Rectangle",
"left": 880, "top": 16, "width": 244, "height": 244,
"fillColor": "#12141a",
"strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"minimap-stub-label": {
"type": "Text",
"left": 900, "top": 124,
"text": "minimap",
"fontColor": "#333340",
"fontSize": 12
},
"annotation-title": {
"type": "Text",
"left": 16, "top": 16,
"text": "v0.1 DIALOGUE — NPC SPEAKING",
"fontColor": "#556677",
"fontSize": 11
},
"annotation-notes": {
"type": "Text",
"left": 16, "top": 30, "width": 840,
"text": "Bottom 20% of screen. No portrait. NPC is on screen above. Log shows Speaker → Target. Monologue floats above box.",
"fontColor": "#3a4455",
"fontSize": 10,
"wordWrap": true
}
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 202 KiB

@@ -0,0 +1,222 @@
{
"name": "v10-dialogue-full",
"shapes": {
"bg": {
"type": "Rectangle",
"left": 0, "top": 0, "width": 1140, "height": 760,
"fillColor": "#1a1e24",
"strokeColor": "#1a1e24"
},
"bg-game-label": {
"type": "Text",
"left": 370, "top": 270,
"text": "GAME VIEW — SERA VENN VISIBLE IN WORLD\n(entity color: amber, trust arc at peak doubt phase)",
"fontColor": "#333340",
"fontSize": 14
},
"monologue-area": {
"type": "Rectangle",
"left": 180, "top": 510, "width": 780, "height": 72,
"fillColor": "#00000000",
"strokeColor": "#00000000"
},
"monologue-text": {
"type": "Text",
"left": 180, "top": 510, "width": 780,
"text": "She changed the subject. Fast.",
"fontColor": "#e0e8f8",
"fontSize": 13,
"wordWrap": true
},
"monologue-subtext": {
"type": "Text",
"left": 180, "top": 530, "width": 780,
"text": "That's not how she normally answers. Something I said.",
"fontColor": "#a0aac0",
"fontSize": 12,
"wordWrap": true
},
"monologue-note": {
"type": "Text",
"left": 180, "top": 552,
"text": "Chained monologue — second line arrives ~2s after first. Thought threading (v1.0).",
"fontColor": "#3a4455",
"fontSize": 10
},
"monologue-chain-line": {
"type": "Line",
"left": 178, "top": 510, "width": 0, "height": 48,
"strokeColor": "#333345"
},
"dialogue-panel": {
"type": "Rectangle",
"left": 0, "top": 592, "width": 1140, "height": 168,
"fillColor": "#0d1018",
"strokeColor": "#333340"
},
"dialogue-panel-accent": {
"type": "Rectangle",
"left": 0, "top": 592, "width": 1140, "height": 2,
"fillColor": "#333340",
"strokeColor": "#333340"
},
"log-entry-prev": {
"type": "Text",
"left": 20, "top": 598, "width": 1000,
"text": "you → SERA VENN: Did you see who was with Kael last night?",
"fontColor": "#7788aa",
"fontSize": 13
},
"separator-log": {
"type": "Line",
"left": 20, "top": 618, "width": 1100, "height": 0,
"strokeColor": "#1e2430"
},
"speaker-name": {
"type": "Text",
"left": 20, "top": 624,
"text": "SERA VENN",
"fontColor": "#e8c547",
"fontSize": 14
},
"speaker-arrow": {
"type": "Text",
"left": 110, "top": 624,
"text": "→ you",
"fontColor": "#556677",
"fontSize": 14
},
"relationship-indicator": {
"type": "Text",
"left": 900, "top": 624,
"text": "trust: REAL // phase: DOUBT",
"fontColor": "#e8c547",
"fontSize": 11
},
"dialogue-text": {
"type": "Text",
"left": 20, "top": 644, "width": 1100,
"text": "I didn't notice. You know how busy it gets at end of shift.",
"fontColor": "#e8eaf0",
"fontSize": 16,
"wordWrap": true
},
"lie-detection-indicator": {
"type": "Rectangle",
"left": 1120, "top": 644, "width": 16, "height": 16,
"fillColor": "#e8c547",
"strokeColor": "#e8c547",
"corners": [2, 2, 2, 2]
},
"lie-detection-label": {
"type": "Text",
"left": 1060, "top": 664,
"text": "stress marker",
"fontColor": "#e8c547",
"fontSize": 10
},
"lie-detection-note": {
"type": "Text",
"left": 900, "top": 676,
"text": "v1.0 feature — insert-based behavioral read",
"fontColor": "#3a4455",
"fontSize": 10
},
"separator": {
"type": "Line",
"left": 20, "top": 688, "width": 1100, "height": 0,
"strokeColor": "#2a3040"
},
"response-1": {
"type": "Text",
"left": 20, "top": 696,
"text": "▸ [1] Ask about shift schedules",
"fontColor": "#c0c8d8",
"fontSize": 14
},
"response-2": {
"type": "Text",
"left": 20, "top": 716,
"text": "▸ [2] She's lying. Push harder.",
"fontColor": "#e0e8f0",
"fontSize": 15
},
"response-2-note": {
"type": "Text",
"left": 450, "top": 718,
"text": "confrontation weight",
"fontColor": "#3a4455",
"fontSize": 10
},
"response-3": {
"type": "Text",
"left": 20, "top": 736,
"text": "▸ [3] Let it go for now",
"fontColor": "#c0c8d8",
"fontSize": 14
},
"topic-sidebar": {
"type": "Rectangle",
"left": 1090, "top": 592, "width": 50, "height": 168,
"fillColor": "#0e1118",
"strokeColor": "#2a3040"
},
"topic-label": {
"type": "Text",
"left": 1093, "top": 620,
"text": "KAEL",
"fontColor": "#e8c547",
"fontSize": 9
},
"topic-label-2": {
"type": "Text",
"left": 1093, "top": 645,
"text": "CARGO",
"fontColor": "#556677",
"fontSize": 9
},
"topic-label-3": {
"type": "Text",
"left": 1093, "top": 660,
"text": "SHIFT",
"fontColor": "#556677",
"fontSize": 9
},
"topic-sidebar-note": {
"type": "Text",
"left": 1050, "top": 762,
"text": "v1.0 topic tracker",
"fontColor": "#3a4455",
"fontSize": 9
},
"minimap-stub": {
"type": "Rectangle",
"left": 880, "top": 16, "width": 210, "height": 210,
"fillColor": "#12141a",
"strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"minimap-stub-label": {
"type": "Text",
"left": 940, "top": 100,
"text": "minimap",
"fontColor": "#333340",
"fontSize": 12
},
"annotation-title": {
"type": "Text",
"left": 16, "top": 16,
"text": "v1.0 DIALOGUE — FULL WITH OVERLAYS",
"fontColor": "#556677",
"fontSize": 11
},
"annotation-notes": {
"type": "Text",
"left": 16, "top": 30, "width": 840,
"text": "Unified log (previous exchange visible). Relationship status + trust phase. Lie detection / stress marker. Topic tracker sidebar. Chained monologue above.",
"fontColor": "#3a4455",
"fontSize": 10,
"wordWrap": true
}
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 225 KiB