Live Quiz Platform — Remote app

Combined app document — Remote app


Status	Draft
App	Remote app
Generated	2026-06-05
Source of truth	`.claude/context/apps/remote.md`

The quizmaster controller — a phone-first app the host uses to drive the session from anywhere in the room. Pairs with a Host over the local network, sees a scaled-down mirror of the Host display, reads the per-slide host-notes, and issues control commands (advance, go-back, and in Alpha a richer set: jump-to-slide, trigger reveals, lock/unlock, scoring overrides). Runs on iPhone, Android phones, iPad, and Android tablets.

Overview

The Remote ships in MVP with a minimum viable controls feature set — discovery, pairing, mirror, host-notes, live state (scores, timer, slide index), and advance/go-back. The rich control command set is an Alpha goal and is layered onto the same pairing + transport.

The Remote is a one-to-one peer of the Host — only one paired Remote at a time in v1. Multi-Remote support (co-quizmasters) is a Stretch consideration.

For the cross-cutting requirements, scope, and platform list, see the project PRD.

User flows

Per-flow diagrams (lifecycle, discover + pair, paired live control) live on the dedicated flow page, each linked to its relevant UI mockups.

Full flow diagrams — App lifecycle · Discover + pair · Paired live control. Each flow links to the mockups it touches.
Surface inventory matrix — Every screen / control / notification with leads-to targets, phase tags, FR references.
Mockup launcher → — Browse every static mockup in one browser tab.

Architecture

A Unity project, sibling to Quiz.Host, Quiz.Client, and Quiz.Preview. Two top-level scenes — MainMenu (discovery + pairing: list visible Hosts, pair via manual confirm or QR, connect) and Play (render the mirrored Host canvas + host-notes + live state, send control commands). References com.quiz.shared-assets, com.quiz.runtime, com.quiz.core via UPM. See Per-App Scaffolding — Remote for the on-disk shape. Cross-cutting:

Architecture overview for the platform-level diagram.
Networking for Bonjour/mDNS discovery, pairing, and the control-message WebSocket family.

Design notes

The brand identity, palette, typography, and motion language are project-wide and live in the Design Specification. Remote chrome rules are in the Studio Design Spec. Remote-specific design notes are tagged *{remote}*.

Build plan

The Remote's items are part of the single project Build Plan. Filter visually for remote — Remote-tagged work is concentrated in Remote app — minimum viable controls (MVP), Remote app — rich control commands (Alpha).

User flows — detail

Surface-to-surface navigation for the Remote. Each diagram shows the happy path forward only — same-screen actions (advance, swipe, refresh, app menu) live in prose under the diagram. Authoring conventions and theme tokens live in .claude/skills/mermaid-diagrams/SKILL.md.

Surfaces in Remote surfaces. FR in Functional Requirements — Remote.

2. Discover and pair

Mockups: Discover · Pair method · Pair pending

%%{init: {"theme":"base","themeVariables":{"fontFamily":"Inter, system-ui, sans-serif","fontSize":"14px","primaryColor":"#FFFFFF","primaryBorderColor":"#FF009F","primaryTextColor":"#1F1933","secondaryColor":"#F0EBE3","secondaryBorderColor":"#16B2EB","secondaryTextColor":"#1F1933","tertiaryColor":"#F8F5F0","tertiaryBorderColor":"#5A536B","tertiaryTextColor":"#1F1933","lineColor":"#5A536B","edgeLabelBackground":"#F8F5F0","mainBkg":"#F8F5F0","clusterBkg":"#F0EBE3","clusterBorder":"#DDD5C8","titleColor":"#1F1933","nodeBorder":"#5A536B"},"flowchart":{"useMaxWidth":true,"htmlLabels":true,"curve":"basis","padding":20,"nodeSpacing":70,"rankSpacing":80}}}%% flowchart LR DIS[Discover] -->|select host| PM[Pair method picker] PM -->|Scan QR| QR[Camera viewfinder] PM -->|Enter code| CD[Code entry] QR --> PP[Pair pending] CD --> PP PP -->|host accepts| PAR[Paired] classDef terminal fill:#E8F5EC,stroke:#36D17B,stroke-width:2px,color:#1F1933,rx:14,ry:14 class PAR terminal

On-screen actions: pull-to-refresh; app menu (Settings / About). Code-entry error: "code didn't match" surfaces as an inline banner — stays on the code-entry screen. Pair pending failure: host rejects / timeout banner → Discover.

3. Paired — live control

Mockups: Paired · Scores detail · Jump to slide · Score overrides · Reconnecting

%%{init: {"theme":"base","themeVariables":{"fontFamily":"Inter, system-ui, sans-serif","fontSize":"14px","primaryColor":"#FFFFFF","primaryBorderColor":"#FF009F","primaryTextColor":"#1F1933","secondaryColor":"#F0EBE3","secondaryBorderColor":"#16B2EB","secondaryTextColor":"#1F1933","tertiaryColor":"#F8F5F0","tertiaryBorderColor":"#5A536B","tertiaryTextColor":"#1F1933","lineColor":"#5A536B","edgeLabelBackground":"#F8F5F0","mainBkg":"#F8F5F0","clusterBkg":"#F0EBE3","clusterBorder":"#DDD5C8","titleColor":"#1F1933","nodeBorder":"#5A536B"},"flowchart":{"useMaxWidth":true,"htmlLabels":true,"curve":"basis","padding":20,"nodeSpacing":70,"rankSpacing":80}}}%% flowchart TB PAR[Paired screen
mirror · notes · HUD · nav] PAR --> FS[Fullscreen mirror] PAR --> SD[Scores detail] PAR --> JTS[Jump to slide — Alpha] PAR --> SO[Score overrides — Alpha] PAR --> RM[Reveal menu — Alpha]

Inline controls (no navigation — buttons fire commands, mirror keeps updating): Advance / Back; swipe-left / swipe-right; Lock / unlock input (Alpha); + 10 s, Skip timer (Alpha). App menu: Unpair (→ Discover) / Settings / About. Connection drop: Reconnecting banner over Paired; auto-retry restores Paired, falls back to "Host gone" → Discover.

Design specification — cross-cutting brand

Shared brand language across all four apps (see Applications). Source of truth for cross-cutting requirement F-X-3. Brand-true treatment lands at Beta; MVP and Alpha are visually utilitarian. Operator-chrome rules for Designer / Host operator / Remote live in Design Specification — Studio.

Final product / brand name deferred to Beta — see open questions. This spec refers to apps by engineering project names (Quiz.Designer, Quiz.Host, Quiz.Client, Quiz.Remote).

Brand identity

Asset	Treatment
Wordmark	Bold, slightly condensed uppercase display face, white fill with heavy black drop shadow. Final wording locked at Beta.
Tagline	Clean uppercase sans, lighter weight, white on dark, neon underline accent. Final wording locked at Beta.
Logomark	Stylised Q with a checkmark tucked inside it in hot magenta with a black drop shadow. Iconographic, not an initialism.
Mascot	Friendly cartoon smartphone — pink/magenta body, big cartoon eyes, white-gloved waving hand, white shoes. Rigged once, reused across all four apps with context-appropriate poses. Rig lands at Beta.

Tone: live quiz on a Saturday night, televised. High contrast, vibrant gradients, neon edges. Mascot keeps warmth and humour under the energy.

Colour palette

Core hues

Token	Hex	Usage
`color.magenta`	`#FF009F`	Primary brand accent; logomark; key CTAs; big-reveal highlights.
`color.electric-blue`	`#16B2EB`	Secondary brand accent; live-state indicators; secondary CTAs.
`color.deep-purple`	`#961EEF`	Transitional gradient stop; high-energy backgrounds; big-reveal stages.
`color.white`	`#FFFFFF`	Wordmark fill; primary text on dark.
`color.near-black`	`#0F0B1A`	Primary text on light; neutral surfaces. Slight purple tint reads brand-consistent.

Gradients + glow

Brand gradient — linear, left→right: magenta → deep-purple → electric-blue. Reserved for hero surfaces.
Subtle backdrop — brand gradient with low-opacity low-poly facet overlay. For content-heavy surfaces.
Neon glow — outer glow (high blur, brand-coloured, additive blend) on framed surfaces, big-reveal headings, active leaderboard rows. Use sparingly.

QUIZ NIGHT

Theming

Two independent theme layers, both Beta:

Studio operator-chrome theme designer host remote — calm low-chroma chrome for Designer, the Host operator window, and Remote. Each ships light + dark. See Design Specification — Studio. Only the Client phone and the Host audience window render full Showtime.
Per-quiz theme on Host / Client / Remote hostclientremote — quiz manifest declares a theme (enum: dark, light, brand presets). Default is dark brand theme. Richer custom palettes are Stretch.

Studio chrome theme and per-quiz theme are independent — an author might author in light Studio chrome but ship a dark-themed quiz.

Typography

Role	Family
Display / headings / numerals (scores, timers, countdowns)	Bebas Neue — tall condensed uppercase, tight tracking, drop shadow on dark.
Body / UI	Inter — geometric sans, sentence case, generous line-height.
Mono (codes, timestamps, debug, metadata labels)	JetBrains Mono.

Rules

Headings uppercase, bold, tight letter-spacing, drop shadow on dark.
No more than two type families visible at once.
Numbers (scores, timers) use the display face for impact.

Samples

Family	Sample
Bebas Neue · headline	QUIZ NIGHT TONIGHT
Bebas Neue · score	42
Inter · body	A quick brown fox jumps over the lazy dog.
JetBrains Mono · metadata	core.multiple-choice-input v1.0.0

Visual motifs

Neon glow borders on hero panels, leaderboards, big-reveal stages.
Low-poly facet textures as subtle overlays on gradients.
Gradient backdrops — full saturation for hero only; tone down for content-heavy.
Cartoon mascot on launch, empty states, loading, end-of-quiz. Pose matches context.

Iconography

Bold and chunky, geometric, weight matches the display typography. No hairlines.
External imagery (photos, screenshots) sits inside framed cards with neon-glow borders.

Motion

Confident and snappy. Spring-driven transitions with slight overshoot. Avoid lazy ease-in/out.
Big reveals — combined scale + glow pulse + branded audio sting. Reserve for genuine reveals.
Idle states — mascot in subtle motion (idle bob, blink) over abstract spinners.

Implementation details, performance budgets, and engine-side mechanics live in Architecture — Tech Stack and Non-Functional Requirements.

Sound design

Full audio language lands at Beta:

Stings — correct, incorrect, time-up, lock, big reveal, end of round, end of quiz.
Transitions — slide-advance whoosh, leaderboard reveal swell, round-change motif.
Big-reveal audio — branded sting paired with the visual reveal motif.
Ambient music bed (light) — optional between rounds; muted during questions.
Buzzer jingles (Alpha — earlier than the rest). Teams pick at join (F-CL-15); Host plays on first-press win (F-HO-27). Author-supplied; small built-in default library (F-DE-29). Mixed at the same loudness band as branded stings.

Mix for venue noise: stings cut through pub ambient without being intrusive.

Team identity client host

Each team bundles name, colour (Beta), avatar (premade or photo, Alpha), buzzer jingle (Alpha) at join. Identity carries through every Host moment featuring the team: leaderboard rows, big-reveal callouts, correct-answer pings, buzzer-win playback. Team photos render at a fixed circular crop at leaderboard scale and a larger square crop on the join-screen roster. Premade avatars use the same crop so the leaderboard reads consistently regardless of source.

Layout and spacing

Spacing scale — 8 px base: 4, 8, 16, 24, 32, 48, 64, 96. No other values.

Remote panel remote

Phone-first. Top: scaled-down 16:9 mirror of the Host display. Middle: per-slide host-notes with comfortable line-height. Bottom: thumb-reachable control surface. Action buttons ≥ 56×56 pt; primary action (advance) larger and visually distinct.

The dual-canvas split is load-bearing — a slide's Host face is a "TV show" composition; its Client face is a one-handed phone composition. Author them as two distinct surfaces sharing a slide identity, not one design squeezed into two viewports.

Voice and tone

Friendly and confident — host who knows the room and is having fun.
Concise — pub-quiz rhythm; copy that drags kills the energy.
Playful, not silly — wit and mild theatre.
Inclusive — no in-jokes, no jargon.

Design specification — Studio operator chrome

Operator-facing chrome for Designer, the Host operator window, and Remote. Where this page and the cross-cutting Design Specification disagree, this page wins for chrome surfaces; where this page is silent, fall back to the cross-cutting spec.

Principle — chrome calm, canvas loud. Operator surfaces sit at low chroma; the embedded canvas / audience-mirror region inside each operator app renders full Showtime.

Which surface gets which theme

App	Surface	Theme
Quiz.Designer	Entire app (chrome + dialogs). Preview canvas renders Showtime inside.	Studio.
Quiz.Host	Audience window (projector / TV).	Showtime — see `design-spec.md`.
Quiz.Host	Operator window (laptop / iPad). The embedded audience preview renders Showtime.	Studio.
Quiz.Client	Entire app. Team phone, audience-facing.	Showtime — see `design-spec.md`.
Quiz.Remote	Entire app. The embedded audience-mirror renders Showtime.	Studio.

Chrome surface tokens

Scheme: Indigo Nebula. Dark = deep cool indigo with subtle warm-peach tint glow. Light = warm cream paper with the same peach tint, visible. The chrome stays flat — only the page-level bg-glow carries any gradient.

Dark theme — deep indigo, warm-peach undertone

Token	Hex	Usage
`chrome.base`	`#11101A`	Application window background; canvas / mirror backdrop. Deep cool indigo.
`chrome.panel`	`#181722`	Top toolbar; dialog body; popovers; primary inset surface.
`chrome.paper`	`#1F1E2A`	Side panels; titlebar; statusbar.
`chrome.raised`	`#1E1D29`	Selected row; input fill; segment-control background.
`chrome.hover`	`#272636`	Hover state for rows and buttons.
`chrome.border`	`rgba(200,195,200,0.09)`	Hairline divider. 1 px, never thicker.
`chrome.border-strong`	`rgba(200,195,200,0.18)`	Active border on focused / selected raised elements.
`chrome.text`	`#E0DDDA`	Primary copy, slide names, headings. Warm off-white.
`chrome.text-muted`	`#928E97`	Secondary copy, helper text, panel headings.
`chrome.text-subtle`	`#5C5862`	Labels, metadata, mono runs, statusbar text.
`chrome.tint`	`radial peach @ 6%`	Page-level bg-glow over `chrome.base`. Anchors warm undertone behind cool surfaces.

Light theme — warm cream, visible peach wash

Token	Hex	Usage
`chrome.base`	`#F5F2EE`	Application window; canvas / mirror backdrop. Warm cream, never bone-white.
`chrome.panel`	`#FFFFFF`	Top toolbar; card; input fill; dialog body.
`chrome.paper`	`#ECE7E0`	Side panels; statusbar; secondary surface.
`chrome.raised`	`#ECE7E0`	Selected row; segment-control background; hover-into-selected.
`chrome.hover`	`#D4CFC8`	Strong hover; pressed state.
`chrome.border`	`rgba(31,28,36,0.10)`	Hairline divider. Warm ink.
`chrome.border-strong`	`rgba(31,28,36,0.18)`	Active border on focused / selected raised elements.
`chrome.text`	`#1F1C24`	Primary copy. Warm-near-black.
`chrome.text-muted`	`#5F5C68`	Secondary copy, helper text.
`chrome.text-subtle`	`#959099`	Labels, metadata, mono runs.
`chrome.tint`	`radial peach @ 14%`	Page-level bg-glow over `chrome.base`. Carries the scheme's warm signature on light.

Brand-hue ration in chrome

The chrome accents diverge from the Showtime brand-locked colors. Studio's three accent slots are studio-specific values, not the cross-cutting branding.jpg magenta / electric-blue / deep-purple.

Hue (slot)	Dark	Light	Where it appears	Where it does not
`accent` (warm pink)	`#FF3D9A`	`#E5217F`	Logomark tile in toolbar (rounded square, accent fill, white "Q"); primary CTA (Designer Push to Host / New Quiz / Save when unsaved; Host Start Session / Resume; Remote Advance); active-row left-edge indicator (2 px inset shadow); focus ring on text inputs only for the primary action.	Panel fills, surface gradients, large area accents, hover backgrounds, decorative use.
`info` (muted teal)	`#5FA0A8`	`#3F767E`	Generic focus ring (input, button); inline links; secondary CTA (Designer Reconnect, Host Discover Hosts, Remote Re-pair); info badges; selection outline on canvas elements.	Panel fills, hero gradients.
`tint` (warm peach)	`#C89070`	`#A5673F`	Page-level bg-glow only — radial wash behind `chrome.base`. Drives the row-hover wash at low alpha.	Anywhere directly on chrome surfaces; on canvas-rendered content.

Showtime brand hues (magenta #FF009F, electric-blue #16B2EB, deep-purple #961EEF) appear only inside the embedded canvas / audience-mirror region — never on Studio chrome. The mockups render Studio chrome accents for slide-thumbnail decoration purely as approximation; live Quiz.Preview renders Showtime at full saturation per the cross-cutting Design Specification.

Showtime warm-support hues (coral, sunshine, rose, peach) do not appear in Studio chrome — canvas / mirror only.

Status hues

Token	Hex	Role
`mint`	`#36D17B`	Save / connection / pair success; auto-save dot; live indicator when Hosts have clients connected.
`amber`	`#FFA94D`	Unsaved-changes dot (Designer titlebar); transfer-pending dot (Host); reconnecting dot (Remote); timer-low; caution states.
`crimson`	`#E63946`	Destructive action (Delete Quiz, End Session, Unpair); validation-error border; failure banner.

Typography in chrome

Body — Inter, 13 px primary, 12 px tool buttons / panel headers, 11 px panel titles.
Display — Bebas Neue, sparingly. Dialog headlines (≥ 24 px), welcome / discover surfaces, section dividers in long dialogs.
Mono — JetBrains Mono carries weight here. Slide indices, session codes, file paths, version numbers, save timestamps, type labels, panel-title labels (SLIDES · 20), keyboard shortcuts in menus, statusbar items. Mono is the structural signal: this is metadata.

Statusbar uppercase mono (AUTOSAVE 14:32, BUILD 2026.05.13). Side-panel titles uppercase mono with 3 px letter-spacing. Tool-button labels sentence-case Inter.

Per-app components

Designer

Region	Spec
Toolbar (top)	52 px, `chrome.panel`, logomark left, document name, tool-button groups, primary CTA right.
Left panel — slide list	240 px, `chrome.paper`, mono panel title, slide rows with index + thumbnail + meta. Active row: `chrome.raised` + 2 px `accent` inset shadow left.
Canvas (centre)	`chrome.base` backdrop with 24 px grid. Embedded 16:9 canvas renders full Showtime. Floating canvas toolbar bottom-centred.
Right panel — properties inspector	280 px, `chrome.paper`, mono panel title, property groups separated by 1 px borders. Inputs `chrome.raised`. Focus ring `info`.
Statusbar (bottom)	28 px, `chrome.paper`, mono items, mint / amber status dots.

Host operator window

Region	Spec
Title bar	Same vocabulary as Designer. Mono session code (`7K2-9P`) visible.
Audience-mirror	Sized to projector / TV aspect (typically 16:9), framed by `chrome.base`, renders the current slide at full Showtime saturation.
Host-notes pane	`chrome.paper`, generous line-height for session-running distance. Inter body; `chrome.text-muted` for code refs.
Control bar (bottom)	`chrome.panel`. Primary actions (Advance, Reveal, Lock, Timer, End Session). Mono session HUD on right (slide index, timer, score totals).
Connected-clients list	`chrome.paper` showing each team's name + colour dot + connection status. Mint = connected; amber = recently dropped; crimson = disconnected.

Remote

Region	Spec
Top bar	44 px, `chrome.panel`, paired-Host name centre, pairing status dot right. Logomark optional.
Audience-mirror	16:9 aspect, full Showtime inside, framed by `chrome.base`.
Host-notes pane	`chrome.paper`, generous Inter line-height for read-while-walking.
Control surface	`chrome.panel`. Primary action (Advance) — `accent` fill, 56×56 pt min. Secondary actions (back, reveal, lock, timer override, score override) `chrome.raised` 44×44 pt min. Heavy mono labels above each group (`NAV`, `REVEAL`, `LOCK`, `TIMER`).
Splash / discover	Welcome surface — brand gradient hero allowed here per cross-cutting spec.

Default theme per app

App	Default	Why
Quiz.Designer	Light	Long authoring sessions — easier on the eyes for hours.
Quiz.Host operator	Dark	Sessions in low-light venues; operator at the back of the room reads better off dark.
Quiz.Remote	Dark	Quizmaster walks low-light venues; dark reduces glare.

All three ship the other theme too, selectable in settings. Per-quiz theme on the Host audience window and Client is independent.