MimironsGoldOMatic

Mimiron’s Gold-o-Matic — UI/UX specification (hub)

This hub document holds cross-cutting UI guidance, design tokens, and end-to-end navigation for the MVP. Per-screen inventories, ASCII layouts, and platform constraints live in the component UI specs linked at the end. This is not source code.

Implementation snapshot: MVP-5 Twitch Extension viewer panel (UI-101–106) in src/MimironsGoldOMatic.TwitchExtension; MVP-4 Desktop (UI-301–308); MVP-3 WoW addon (UI-401–405). Broadcaster Extension UI-201–204 remain post-MVP. Compare IMPLEMENTATION_READINESS.md.

Paths below are relative to this file (docs/reference/UI_SPEC.md):

Area	Markdown
Project overview	Repository README
Architecture summary	CONTEXT.md · ARCHITECTURE.md
Product rules (digest)	MVP_PRODUCT_SUMMARY.md
Agent workflow & roles	AGENTS.md
Docs index	Documentation index
Canonical MVP contracts	SPEC.md
MVP prompts & sequencing	ROADMAP.md
Interaction scenarios & TCs	INTERACTION_SCENARIOS.md
Shared contracts	Shared component guide
Backend API	Backend component guide
Twitch Extension UI (screens)	MimironsGoldOMatic.TwitchExtension/UI_SPEC.md
WPF Desktop UI (screens)	MimironsGoldOMatic.Desktop/UI_SPEC.md
WoW addon UI (screens)	MimironsGoldOMatic.WoWAddon/UI_SPEC.md
Component engineering	Desktop guide · Twitch Extension guide · WoW Addon guide
Implementation readiness	IMPLEMENTATION_READINESS.md

Global product rules (UI copy): use MVP_PRODUCT_SUMMARY.md and SPEC.md for pool, roulette, consent, and §11 copy constraints. Backend lifecycle authority remains in SPEC.md.

Design language

Tone: Friendly gnomish engineering / steampunk-industrial metaphors (gears, vault, machinery) for loading and errors; keep copy consistent across Extension, Desktop strings, and addon toasts where applicable.
Honesty: Enrollment is Twitch chat (!twgold); the Extension panel explains and shows status—it does not replace chat enrollment.
MVP scope: Gold amount and spin interval are fixed per SPEC; avoid implying streamer-configurable economy in UI.

Color schemes

Semantic colors used across products (see Design tokens for full table):

Role	Hex	Typical use
Primary / brand gold	`#FFB300`	Extension headers, winner banner accents, addon success border (texture)
Secondary / brand iron	`#5D4037`	Gnome / industrial accents (Extension)
Error	`#E53935`	Extension error panel, addon error toast, Desktop alert modal
Success	`#43A047`	Sent chip, success toast, positive indicators

Typography

Twitch Extension (panel): Body text typically ~11–13px in a ~318px max-width iframe; ASCII mocks in component spec use ~40 character line width as a monospace stand-in.
WPF Desktop: System / Segoe UI stack; sizes follow standard window chrome and DataGrid defaults unless overridden.

Iconography

Extension: Decorative roulette / status icons; align with Twitch panel density (small footprint).
WoW addon: Blizzard texture paths or bundled textures; minimap button EL-401-01 per addon UI spec.

Interaction patterns

Loading: Indeterminate progress + status copy; Extension uses live region for loading/error (UI-101).
Retry / dismiss: Primary recovery for transient EBS failures; exponential backoff per SPEC.md for polling.
Motion: Respect prefers-reduced-motion for roulette animation (Extension UI-103).
Errors: Map API code to titled + body copy (Extension UI-105); Desktop uses modal UI-307 for blocking alerts.
Countdown: MM:SS format; server-synced poll to correct drift (Extension UI-106).

Accessibility standards

Extension: Expose status as live region where specified (UI-101); ensure Retry / Dismiss are keyboard-focusable inside the iframe.
Desktop: WPF keyboard navigation and default control patterns for dialogs and menus.

Design tokens & shared vocabulary

Token	Value	Used in
Color: brand-gold	`#FFB300`	Extension headers, EL-104-01, UI-403 border (texture)
Color: brand-iron	`#5D4037`	Extension gnome/industrial accents (DECISION)
Color: error	`#E53935`	UI-105, UI-404, UI-307
Color: success	`#43A047`	UI-104 Sent chip, UI-403
Panel max width	`318px`	Twitch panel (UI-101–106); config views may be wider
Countdown format	`MM:SS`	UI-106 (next spin)
Max character name length	`12`	Align with Shared `CharacterName` validation and SPEC constraints
Gold amount display	`1,000g`	UI-104, UI-203, UI-304
Whisper command	`!twgold` (exact)	UI-104, instructional copy
Gift confirmation command	`!twgift` (exact)	Gift queue confirmation copy/status
Confirm tag pattern	`[MGM_CONFIRM:<uuid>]`	UI-308 log lines, internal
Gift accept tag pattern	`[MGM_GIFT_ACCEPT:<uuid>]`	Desktop gift flow log tailing
Join action source	Twitch chat command	Enrollment is chat-driven: `!twgold <CharacterName>` (panel is instructional/status only)
API poll default	`15 s` (DECISION)	UI-306
Font / theme	Twitch vs WPF vs WoW	Use Twitch purple only in Extension; do not assume WoW fonts match web

Viewer (Twitch Extension panel)

UI-101 ──[auth ready]──→ UI-102 ──[enroll OK]──→ UI-106 (countdown)
                              │                        │
                              │                        └──→ UI-103 (spin/verify)
                              │                                 │
                              │              [offline redraw]───┤
                              │                                 ▼
                              │                         UI-104 (won / status)
                              │                                 │
                              │                         [poll Sent]
                              └──[error]──→ UI-105 ──[dismiss]──→ UI-102

Streamer (Extension config / dashboard — optional MVP+)

UI-201 ──→ UI-202 ──→ UI-203
              │
              └──→ UI-204 (advanced)

Desktop app

UI-301 (API setup) ──→ UI-302 (idle) ──[WoW found]──→ UI-303 (active)
                              │                            │
                              │                            ├── UI-304 queue
                              │                            ├── UI-305 status bar
                              │                            └── UI-307 errors
                              └── settings ──→ UI-306
                              └── log ───────→ UI-308

WoW addon

UI-401 (icon/slash) ──→ UI-402 (side panel)
                              ├── EL-402-03 Prepare Mail ──→ (vanilla send)
                              ├── success ───────────────────→ UI-403
                              └── failure ───────────────────→ UI-404
        optional: /mgm debug ──→ UI-405

Document control

Version	Date	Notes
1.0	2026-04-03	Initial UI spec from `docs/overview/SPEC.md` + component ReadMEs
1.1	2026-04-03	Follow-gated pool; removed Channel Points + instant spin
1.2	2026-04-03	Subscribe + `!twgold <CharacterName>` chat enroll; `!twgold` acceptance
1.3	2026-04-03	WoW winner notification whisper + whisper `!twgold` consent (`docs/overview/SPEC.md` §9)
1.4	2026-04-05	Split: hub (`docs/reference/UI_SPEC.md`) + per-component `UI_SPEC.md` under `docs/components/*/`
1.5	2026-04-06	Added `!twgift` queue UX tokens, command, and log marker references

When docs/overview/SPEC.md adds concrete pool/spin and broadcaster routes, update EL- bindings and UI-201–204 in the Twitch Extension UI spec without changing IDs where possible.

Component-specific UI specifications

Twitch Extension UI — UI-101–106 (MVP-5 viewer), UI-201–204 (post-MVP broadcaster reference)
WPF Desktop UI — UI-301–308 (MVP-4)
WoW Addon UI — UI-401–405 (MVP-3)