Live Quiz Platform — Designer app

Combined app document — Designer app

The authoring app — a content-creation tool used to build quizzes that the Host will play. Ships in MVP on Windows and macOS from a single Tauri 2 + Angular 21 codebase, desktop only. Browser-hosted authoring is a future Web Designer Stretch; iPad / Android tablet authoring is a further Stretch derived from it.

Overview

The Designer is a single Tauri 2 desktop shell hosting an Angular 21 application. Tauri's tiny Rust shell wires the native OS surface — custom titlebar (Win 11 Mica, macOS traffic-lights inset), multi-window via WebviewWindow, native menus, native file dialogs, mDNS via the mdns-sd crate, subprocess spawn for Run from slide. The Angular workspace under Quiz.Designer/src/ holds every authoring component (Angular Material + Angular CDK) and every business-logic service (TypeScript). A PlatformAdapter interface keeps the component layer shell-agnostic so the eventual Web Designer Stretch lands a BrowserPlatformAdapter instead of a frontend rewrite; v1 only ever ships the Tauri impl. ng serve runs the Angular workspace in plain Chromium as the Playwright-driveable visual-verification target — dev infrastructure, not a shipped product. Slide preview is a dedicated Quiz.Preview Unity project, built only for WebGL, embedded inline as a <canvas> in the Designer's main WebView; ~95-98% pixel fidelity vs native Host (accepted trade-off — see Designer Shell — Pixel-fidelity trade-off).

Authoring follows a PowerPoint-style model: a quiz is an ordered list of slides, optionally grouped into rounds. Each slide owns a fixed-resolution Host canvas (TV/projector format) and a responsive Client canvas (phone/tablet format). Authors place typed elements on each canvas via drag-and-drop from a palette of object types. F5 runs the quiz from slide 1, Shift+F5 runs from the current slide — both spawn the native Quiz.Host binary as a subprocess via Tauri's process plugin.

For the cross-cutting requirements, scope, and platform list, see the project PRD. For the architecture's rationale (why Tauri + Angular, why WebGL preview, what was rejected), see Decisions. For the cross-language contract that lets Angular and the Unity apps share schemas without a shared runtime library, see Repository Layout — Cross-language contract.

User flows

Per-flow diagrams (lifecycle, File menu, authoring loop, push, run-from-slide, library) live on the dedicated flow page, each linked to its relevant UI mockups. Every surface is catalogued in the surfaces matrix.

• Full flow diagrams — App lifecycle · File menu · authoring loop · Push to Host · Run from slide · Library. Each flow links to the mockups it touches.
• Surface inventory matrix — Every chrome / menu / dialog / panel / context-menu / shortcut with leads-to targets, phase tags, FR references.
• Mockup launcher → — Browse every static mockup in one browser tab. Sidebar nav + dark / light toggle + scale + resolution controls.

Architecture

The top-level Designer architecture is in Designer Shell — single Tauri 2 process + Angular 21 application + an embedded Quiz.Preview Unity WebGL build inside the main WebView. The page includes the inline architecture diagram. Subsystem-level pages will be authored alongside the implementation work tracked in the Build Plan — Designer.

Design notes

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

Build plan

The Designer's items are part of the single project Build Plan. Each section there carries an app-scope chip; filter visually for designer.

User flows — detail

Surface-to-surface navigation flows for the Designer. Each diagram shows the happy path forward only — same-screen edits (drag, type, click property, undo / redo, save) live in prose under the diagram rather than as self-loops on the canvas. Authoring conventions and theme tokens live in .claude/skills/mermaid-diagrams/SKILL.md.

Surfaces referenced here are defined in Designer surfaces. Functional requirements are in Functional Requirements — Designer.

2. File menu

Mockups: File menu · Recent files · Preferences · Restore from backup

The File menu is a fan-out — every item launches an action and returns to the Main shell (or exits). Drawn as a list because there's no per-item flow, just per-item destination:

3. Authoring loop

Mockups: Main shell · Slide selected · Element selected · Multi-select · Slide context menu · Element context menu · Round context menu

Three selection states inside the Main shell — slide-selected, element-selected, multi-select — drive what the right pane shows (slide properties / element properties / multi-select summary / Insert palette). Selection is the loop, not the navigation.

Slide-list context menu (right-click a row): Duplicate · Move to round ▸ · New round from selection · Focus notes pane · Delete. Each mutates the slide list in place.

Round-header context menu: Rename (inline) · Round scoring (opens right pane) · Ungroup · Delete round + slides (confirm).

Element-canvas context menu (right-click an element): Cut / Copy / Paste / Duplicate · Bring to front / Send to back / forward / backward · Copy to other canvas · Lock / Unlock · Delete.

All context actions stay in the Main shell — they edit the model, the canvas + right pane re-render, and undo (Ctrl Z) reverses every step. No navigation.

4. Push to Host

Mockups: Push to Host · Transferring

Failure branches (each surfaces inside the dialog, no separate screen): host rejects → returns to host picker; connection drops → in-place resume-from-offset, progress bar reflects retries; CRC fail → automatic re-send of failed chunks.

5. Run from slide (local)

Mockups: Main shell — preview mode

Designer process stays alive while the Host child runs. On a multi-display setup the Host opens its operator + audience windows automatically. Esc inside the Host quits the child and returns focus to the Designer.

6. Library

Mockups: Library panel · Library picker · Import resource

Asset row context menu (right-click): Rename · Replace file… (→ OS picker) · Reveal in OS browser · Delete (confirm if in use). Each mutates the panel in place. The picker (modal) is the only navigational sub-screen — it returns to Main shell with the picked asset wired to the active property field.

See also: Designer surfaces · Architecture — Designer shell · Functional Requirements — Designer.

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

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

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.

Theming

Two independent theme layers, both Beta:

1. 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.
2. 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

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

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.

Designer chrome designer

Tablet/desktop layout outside the canvases. Master-detail panels, denser information, designed for sustained authoring. Renders against the Designer's chosen Studio theme.

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

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

Light theme — warm cream, visible peach wash

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.

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

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

Host operator window

Remote

Default theme per app

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