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

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

Browse Source 
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:
jpmschweitzer
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
Download Patch File Download Diff File Expand all files Collapse all files
docs/design/wireframes/menus/v10-options-full.json
+428
View File
@@ -0,0 +1,428 @@
{
"name": "v10-options-full",
"shapes": {
"bg": {
"type": "Rectangle",
"left": 0, "top": 0, "width": 1140, "height": 760,
"fillColor": "#0a0d12"
},
"panel": {
"type": "Rectangle",
"left": 40, "top": 40, "width": 1060, "height": 680,
"fillColor": "#0d1018",
"strokeColor": "#333340",
"corners": [4, 4, 4, 4]
},
"panel-header": {
"type": "Rectangle",
"left": 40, "top": 40, "width": 1060, "height": 52,
"fillColor": "#12161e",
"strokeColor": "#333340",
"corners": [4, 4, 0, 0]
},
"panel-title": {
"type": "Text",
"left": 60, "top": 58,
"text": "INSERT SETTINGS // OPTIONS",
"fontColor": "#c8d0e0",
"fontSize": 18
},
"panel-close": {
"type": "Text",
"left": 1060, "top": 58,
"text": "[Esc]",
"fontColor": "#556677",
"fontSize": 14
},
"sidebar": {
"type": "Rectangle",
"left": 40, "top": 92, "width": 200, "height": 628,
"fillColor": "#0a0d12",
"strokeColor": "#1e2430"
},
"nav-display": {
"type": "Rectangle",
"left": 48, "top": 100, "width": 184, "height": 36,
"fillColor": "#1a2030",
"strokeColor": "#c8d0e0",
"corners": [2, 2, 2, 2]
},
"nav-display-text": {
"type": "Text",
"left": 60, "top": 111,
"text": "DISPLAY",
"fontColor": "#c8d0e0",
"fontSize": 13
},
"nav-audio": {
"type": "Rectangle",
"left": 48, "top": 144, "width": 184, "height": 36,
"fillColor": "#0a0d12",
"strokeColor": "#00000000",
"corners": [2, 2, 2, 2]
},
"nav-audio-text": {
"type": "Text",
"left": 60, "top": 155,
"text": "AUDIO",
"fontColor": "#8899aa",
"fontSize": 13
},
"nav-insert": {
"type": "Rectangle",
"left": 48, "top": 188, "width": 184, "height": 36,
"fillColor": "#0a0d12",
"strokeColor": "#00000000",
"corners": [2, 2, 2, 2]
},
"nav-insert-text": {
"type": "Text",
"left": 60, "top": 199,
"text": "INSERT / HUD",
"fontColor": "#8899aa",
"fontSize": 13
},
"nav-controls": {
"type": "Rectangle",
"left": 48, "top": 232, "width": 184, "height": 36,
"fillColor": "#0a0d12",
"strokeColor": "#00000000",
"corners": [2, 2, 2, 2]
},
"nav-controls-text": {
"type": "Text",
"left": 60, "top": 243,
"text": "CONTROLS",
"fontColor": "#8899aa",
"fontSize": 13
},
"nav-access": {
"type": "Rectangle",
"left": 48, "top": 276, "width": 184, "height": 36,
"fillColor": "#0a0d12",
"strokeColor": "#00000000",
"corners": [2, 2, 2, 2]
},
"nav-access-text": {
"type": "Text",
"left": 60, "top": 287,
"text": "ACCESSIBILITY",
"fontColor": "#8899aa",
"fontSize": 13
},
"content": {
"type": "Rectangle",
"left": 256, "top": 92, "width": 844, "height": 628,
"fillColor": "#00000000",
"strokeColor": "#00000000"
},
"content-section-title": {
"type": "Text",
"left": 272, "top": 104,
"text": "DISPLAY",
"fontColor": "#c8d0e0",
"fontSize": 16
},
"content-divider": {
"type": "Line",
"left": 272, "top": 128, "width": 812, "height": 0,
"strokeColor": "#333340"
},
"setting-1-label": {
"type": "Text",
"left": 272, "top": 140,
"text": "Resolution",
"fontColor": "#8899aa",
"fontSize": 14
},
"setting-1-value": {
"type": "Rectangle",
"left": 680, "top": 134, "width": 180, "height": 30,
"fillColor": "#1a2030",
"strokeColor": "#c8d0e0",
"corners": [2, 2, 2, 2]
},
"setting-1-value-text": {
"type": "Text",
"left": 700, "top": 142,
"text": "1920 × 1080",
"fontColor": "#c8d0e0",
"fontSize": 13
},
"setting-2-label": {
"type": "Text",
"left": 272, "top": 178,
"text": "Fullscreen",
"fontColor": "#8899aa",
"fontSize": 14
},
"setting-2-toggle": {
"type": "Rectangle",
"left": 680, "top": 172, "width": 60, "height": 24,
"fillColor": "#1a2030",
"strokeColor": "#c8d8f0",
"corners": [12, 12, 12, 12]
},
"setting-2-toggle-on": {
"type": "Ellipse",
"left": 716, "top": 176, "width": 16, "height": 16,
"fillColor": "#c8d8f0",
"strokeColor": "#c8d8f0"
},
"audio-section-title": {
"type": "Text",
"left": 272, "top": 224,
"text": "AUDIO",
"fontColor": "#c8d0e0",
"fontSize": 16
},
"audio-divider": {
"type": "Line",
"left": 272, "top": 248, "width": 812, "height": 0,
"strokeColor": "#333340"
},
"audio-master-label": {
"type": "Text",
"left": 272, "top": 260,
"text": "Master Volume",
"fontColor": "#8899aa",
"fontSize": 14
},
"audio-master-bar-bg": {
"type": "Rectangle",
"left": 560, "top": 264, "width": 400, "height": 8,
"fillColor": "#2a3040",
"strokeColor": "#333340",
"corners": [2, 2, 2, 2]
},
"audio-master-bar-fill": {
"type": "Rectangle",
"left": 560, "top": 264, "width": 320, "height": 8,
"fillColor": "#c8d0e0",
"strokeColor": "#c8d0e0",
"corners": [2, 2, 0, 0]
},
"audio-master-value": {
"type": "Text",
"left": 968, "top": 258,
"text": "80%",
"fontColor": "#c8d0e0",
"fontSize": 13
},
"audio-ambient-label": {
"type": "Text",
"left": 272, "top": 296,
"text": "Ambient",
"fontColor": "#8899aa",
"fontSize": 14
},
"audio-ambient-bar-bg": {
"type": "Rectangle",
"left": 560, "top": 300, "width": 400, "height": 8,
"fillColor": "#2a3040",
"strokeColor": "#333340",
"corners": [2, 2, 2, 2]
},
"audio-ambient-bar-fill": {
"type": "Rectangle",
"left": 560, "top": 300, "width": 360, "height": 8,
"fillColor": "#8899aa",
"strokeColor": "#8899aa",
"corners": [2, 2, 0, 0]
},
"audio-ambient-value": {
"type": "Text",
"left": 968, "top": 294,
"text": "90%",
"fontColor": "#8899aa",
"fontSize": 13
},
"audio-sfx-label": {
"type": "Text",
"left": 272, "top": 332,
"text": "Sound FX",
"fontColor": "#8899aa",
"fontSize": 14
},
"audio-sfx-bar-bg": {
"type": "Rectangle",
"left": 560, "top": 336, "width": 400, "height": 8,
"fillColor": "#2a3040",
"strokeColor": "#333340",
"corners": [2, 2, 2, 2]
},
"audio-sfx-bar-fill": {
"type": "Rectangle",
"left": 560, "top": 336, "width": 300, "height": 8,
"fillColor": "#8899aa",
"strokeColor": "#8899aa",
"corners": [2, 2, 0, 0]
},
"audio-sfx-value": {
"type": "Text",
"left": 968, "top": 330,
"text": "75%",
"fontColor": "#8899aa",
"fontSize": 13
},
"insert-section-title": {
"type": "Text",
"left": 272, "top": 380,
"text": "INSERT / HUD",
"fontColor": "#c8d0e0",
"fontSize": 16
},
"insert-divider": {
"type": "Line",
"left": 272, "top": 404, "width": 812, "height": 0,
"strokeColor": "#333340"
},
"insert-density-label": {
"type": "Text",
"left": 272, "top": 416,
"text": "Overlay Density",
"fontColor": "#8899aa",
"fontSize": 14
},
"insert-density-bar-bg": {
"type": "Rectangle",
"left": 560, "top": 420, "width": 400, "height": 8,
"fillColor": "#2a3040",
"strokeColor": "#333340",
"corners": [2, 2, 2, 2]
},
"insert-density-bar-fill": {
"type": "Rectangle",
"left": 560, "top": 420, "width": 280, "height": 8,
"fillColor": "#c8d8f0",
"strokeColor": "#c8d8f0",
"corners": [2, 2, 0, 0]
},
"insert-density-value": {
"type": "Text",
"left": 968, "top": 414,
"text": "70%",
"fontColor": "#c8d8f0",
"fontSize": 13
},
"insert-monologue-label": {
"type": "Text",
"left": 272, "top": 452,
"text": "Monologue Frequency",
"fontColor": "#8899aa",
"fontSize": 14
},
"insert-mono-note": {
"type": "Text",
"left": 272, "top": 470,
"text": "Reduces frequency only — does not suppress urgent/critical monologue",
"fontColor": "#3a4455",
"fontSize": 11
},
"insert-mono-bar-bg": {
"type": "Rectangle",
"left": 560, "top": 456, "width": 400, "height": 8,
"fillColor": "#2a3040",
"strokeColor": "#333340",
"corners": [2, 2, 2, 2]
},
"insert-mono-bar-fill": {
"type": "Rectangle",
"left": 560, "top": 456, "width": 400, "height": 8,
"fillColor": "#8899aa",
"strokeColor": "#8899aa",
"corners": [2, 2, 2, 2]
},
"insert-mono-value": {
"type": "Text",
"left": 968, "top": 450,
"text": "100%",
"fontColor": "#8899aa",
"fontSize": 13
},
"access-section-title": {
"type": "Text",
"left": 272, "top": 508,
"text": "ACCESSIBILITY",
"fontColor": "#c8d0e0",
"fontSize": 16
},
"access-divider": {
"type": "Line",
"left": 272, "top": 532, "width": 812, "height": 0,
"strokeColor": "#333340"
},
"access-text-size-label": {
"type": "Text",
"left": 272, "top": 544,
"text": "Text Size",
"fontColor": "#8899aa",
"fontSize": 14
},
"access-text-size-val": {
"type": "Rectangle",
"left": 680, "top": 538, "width": 180, "height": 30,
"fillColor": "#1a2030",
"strokeColor": "#333340",
"corners": [2, 2, 2, 2]
},
"access-text-size-text": {
"type": "Text",
"left": 700, "top": 546,
"text": "NORMAL",
"fontColor": "#8899aa",
"fontSize": 13
},
"access-colorblind-label": {
"type": "Text",
"left": 272, "top": 582,
"text": "Colour-blind mode",
"fontColor": "#8899aa",
"fontSize": 14
},
"access-colorblind-val": {
"type": "Rectangle",
"left": 680, "top": 576, "width": 180, "height": 30,
"fillColor": "#1a2030",
"strokeColor": "#333340",
"corners": [2, 2, 2, 2]
},
"access-colorblind-text": {
"type": "Text",
"left": 700, "top": 584,
"text": "OFF",
"fontColor": "#8899aa",
"fontSize": 13
},
"access-colorblind-note": {
"type": "Text",
"left": 272, "top": 614, "width": 760,
"text": "Remaps D-033 entity colors for protanopia / deuteranopia. All relationship states remain distinguishable.",
"fontColor": "#3a4455",
"fontSize": 11,
"wordWrap": true
},
"footer-note": {
"type": "Text",
"left": 272, "top": 690,
"text": "All settings auto-save. [Esc] to return. Changes take effect immediately.",
"fontColor": "#3a4455",
"fontSize": 11
},
"annotation-title": {
"type": "Text",
"left": 16, "top": 728,
"text": "v1.0 OPTIONS SCREEN",
"fontColor": "#556677",
"fontSize": 11
},
"annotation-notes": {
"type": "Text",
"left": 16, "top": 742, "width": 1100,
"text": "Diegetic framing: 'Insert Settings'. Sidebar nav. Display, Audio (5-bus sliders), Insert/HUD density controls, Accessibility with D-033 remapping note.",
"fontColor": "#3a4455",
"fontSize": 10,
"wordWrap": true
}
}
}