Live Quiz Platform

How this spec is organised

The platform ships one shared brand expressed as four distinct design languages, one per app. The structure mirrors that:

1. Foundations project — what every app shares: brand identity, master palette, type stack, motion principles, voice + tone, a11y baseline, iconography, sound design.
2. Designer language designer — calm, dense, monochrome operator chrome optimised for sustained authoring.
3. Host language host — two halves: the operator window (Designer-cousin chrome) and the audience window (full Showtime).
4. Remote language remote — handheld operator chrome — Designer family with touch density + slightly punchier motion.
5. Client language client — full Showtime canvas; vivid palette, gameshow energy, dramatic motion.
6. Comparison matrix project — side-by-side view: accent · surface · type scale · motion intensity · density · ornament — read these 4 columns to grok the family at a glance.

Each app section follows the same shape: tone card → palette → typography → motion → density + spacing → ornament → surface map. Scope chips on H2s drive the per-app filtered docs view; *{project}* sections appear in every per-app view.

Final brand product name is deferred to Beta — see open questions. Apps are referred to by engineering names (Quiz.Designer, Quiz.Host, Quiz.Client, Quiz.Remote).

Foundations project

Brand identity

Master tone: live quiz on a Saturday night, televised. High contrast, vibrant gradients, neon edges on Showtime surfaces; calm and utilitarian on operator chrome. Mascot keeps warmth and humour under the energy.

Master palette (foundation tokens)

Every per-app palette below is derived from this master scale. Two colour families: Showtime (vivid brand, gameshow energy) drives Client + Host audience; Studio (chrome neutrals + restrained accents) drives Designer, Host operator, Remote.

Showtime brand hues

Brand gradient — linear, left→right: magenta → deep-purple → electric-blue. Reserved for hero surfaces on the audience canvas. Never on operator chrome.

Neon glow — outer glow (high blur, brand-coloured, additive blend) on framed canvas surfaces, big-reveal headings, active leaderboard rows. Use sparingly. Never on operator chrome.

Studio chrome neutrals — dark (default)

Studio chrome neutrals — light

Status hues (shared)

Typography stack

Rules (every app):

• No more than two type families visible at once on operator chrome; Showtime surfaces may use all three.
• Headings uppercase, bold, tight letter-spacing, drop shadow on dark.
• Numerals on Showtime surfaces use the display face for impact; on operator chrome they use mono so they read as metadata.

Motion principles

• Confident and snappy. Spring-driven transitions with slight overshoot. Avoid lazy ease-in/out.
• Operator chrome — short and quiet. Animations < 200 ms; no overshoot; no glow pulses; never decorative.
• Audience canvas — large and theatrical. Big reveals combine scale + glow pulse + branded audio sting. Reserve for genuine reveals.
• Idle states on Showtime — mascot in subtle motion (idle bob, blink) over abstract spinners.

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.

Operator chrome leans further toward concise + tool-like (no marketing lift, no hype). Audience canvas leans further toward theatre (energy, callouts, branded warmth).

A11y baseline

Every app clears axe-core wcag2aa + wcag21aa at landing.

• Keyboard reaches every action. Visible focus ring on every focusable element (status.info outline by default; accent for primary-action focus).
• All dialogs / menus / tool windows trap focus, restore focus on close, expose ARIA roles + labels.
• Colour contrast ≥ 4.5:1 for body, ≥ 3:1 for large display + UI graphics.
• Motion respects prefers-reduced-motion: theatre + spring overshoot collapse to linear fade ≤ 200 ms.
• Text never relies on colour alone — pair with an icon, label, or pattern.

Iconography

• Bold and chunky, geometric, weight matches the display typography. No hairlines.
• External imagery (photos, screenshots) sits inside framed cards with neon-glow borders on Showtime, hairline borders on operator chrome.
• Operator chrome icons render at 16–20 px in chrome.text-muted; primary-action icons render in chrome.text at the same size.
• Audience canvas icons render at 64+ px in brand.white with optional glow.

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.

Spacing scale

8 px base: 4, 8, 16, 24, 32, 48, 64, 96. No other values. Applies to every app.

Token namespace convention

Foundation --brand-* + the relevant per-app --qX-* (or --stage-* inside canvas regions) are the only namespaces a component should reference. --chrome-* is shared across Studio apps; the per-app --qX-* overlay is what tunes intensity per app. Hard rule: no --qc-* / --stage-* reference on operator chrome; no --chrome-* reference inside an audience canvas region.

Designer language designer

Tone card

Calm, dense, monochrome. A serious authoring tool. The work is the quiz; the chrome stays out of the way. Magenta accent reserved for the single primary action per surface. Operator vibe — Figma + IDE, not gameshow.

Hero swatches:

Palette

Inherits --chrome-* from Foundations. Designer-specific overlay (--qd-*):

Dark:

Light:

Default theme: Light. Long authoring sessions read easier on light backgrounds. Dark is one toggle away.

Typography

• Body — Inter, 13 px primary, 12 px tool buttons + panel headers, 11 px panel titles.
• Display — Bebas Neue, sparingly. Dialog headlines (≥ 24 px), welcome screen, 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.

Panel titles uppercase mono with 3 px letter-spacing. Tool-button labels sentence-case Inter. Statusbar items uppercase mono.

Motion

• Tier: motion.fast + motion.base only. No theatre, no spring overshoot.
• Dialog open ≤ 200 ms fade + 4 px translate. Panel resize / drag = instant (no animated tween).
• Loading spinners minimal — Material mat-progress-spinner at chrome-text-subtle.
• No mascot in operator chrome.

Density + spacing

• Spacing base 8 px. Default surface padding 16 px; dense panels (slide list rows) 8–10 px vertical.
• Minimum interactive target 24×24 px (mouse-first). Touch targets ≥ 32×32 only inside menus.
• Information density high: master-detail panels, long lists, multi-column layouts.

Ornament

Effectively none. The chrome reads flat. The only decorative element is the qd.tint radial bg-glow over chrome.base. Borders are 1 px hairlines; corners are 4–8 px radius. No glow, no gradient, no texture.

Surface map

Host language host

Two halves. The operator window is a Designer cousin — calm chrome. The audience window is full Showtime — every brand-loud rule applies. A 16:9 mirror of the audience window also renders inside the operator window so the operator sees what teams see without picking up a Client.

Operator window

Tone card

Designer-cousin chrome, slightly more theatrical. Operator at the back of the room reads off a dark surface in low light. Same neutrals as Designer; CTA buttons run a hair larger; one tier more motion on the audience-mirror preview.

Hero swatches:

Palette

Inherits --chrome-*. Host-operator overlay (--qh-*):

Default theme: Dark. Low-light venues; operator at the back of the room reads dark better.

Typography

Identical to Designer except:

• Session HUD uppercase mono (slide index 12/42, timer 00:23, score totals).
• Operator labels for primary controls are sentence-case Inter at 14 px (slightly larger than Designer's 12 px tool labels) for glance-readability from a distance.

Motion

• Tier: motion.fast + motion.base + a controlled motion.slow reserved for the audience-mirror "slide advanced" pulse.
• The audience-mirror preview region renders theatre motion at half-intensity so the operator sees what's about to happen without distraction.

Density + spacing

• Same 8 px base. Surface padding 16–20 px; control bar rows 12 px tall (vs Designer's 8 px).
• Primary control buttons (Advance / Reveal / Lock / Timer / End) 44×44 px minimum — operator may be standing, may be hurried.

Ornament

Minimal. Audience-mirror region is wrapped in a 1 px chrome.border-strong frame with no glow.

Surface map

Audience window

Pure Showtime — see the Client language section. The audience window is logically a full-screen Client canvas without input handlers, sized to the connected display. Every --stage-* token applies; operator chrome rules do not.

Remote language remote

Tone card

Pocket controller — utility, with one tier more flare than Designer. Quizmaster walks the room. Buttons are big; labels are bold; the audience-mirror pulses gently on every advance so the operator feels the connection.

Hero swatches:

Palette

Inherits --chrome-*. Remote overlay (--qr-*):

Default theme: Dark. Quizmaster walks low-light venues; dark reduces glare.

Typography

• Body — Inter, 15 px primary (larger than Designer for arm's-length reading).
• Display — Bebas Neue on the session code + slide index HUD up top.
• Mono — JetBrains Mono for control-group labels (NAV, REVEAL, LOCK, TIMER), 11 px uppercase with 3 px letter-spacing.

Motion

• Tier: motion.fast + motion.base + motion.slow for the audience-mirror advance pulse.
• The Advance button is permitted a 200 ms spring-overshoot press feedback. No other control gets a spring.
• Reduced-motion preference collapses the Advance spring to a linear fade.

Density + spacing

• Phone-first. Surface padding 20 px.
• Action buttons ≥ 56×56 pt; primary action (Advance) larger and visually distinct (typically 96 pt wide × 64 pt tall on the bottom centre).
• Audience-mirror at top is responsive — fills width, height locked to 16:9 ratio.

Ornament

• qr.accent-glow outer glow on the Advance button — the only deliberate ornament on Studio chrome.
• The audience-mirror frame uses a 2 px qr.accent ring when an advance is in-flight, fading to chrome.border once acknowledged.

Surface map

Client language client

Tone card

Full Showtime — gameshow on a phone. Vivid magenta + electric blue + deep purple, dramatic motion, neon edges, ornamental gradients. Teams should feel they're holding a piece of the TV show. The opposite end of the family from Designer.

Hero swatches:

Palette

Showtime brand hues drive everything. Client surface tokens (--qc-*):

Dark (default brand theme):

Light (per-quiz theme — light):

Custom per-quiz brand presets (Stretch) override these tokens via the quiz manifest's theme field.

Typography

• Display — Bebas Neue, used prominently: question titles, score numerals, timer countdown, team names on leaderboard. 32 px on phones, 56 px on tablets.
• Body — Inter, 16 px primary, 14 px helper.
• Mono — JetBrains Mono, used sparingly: time-remaining mono digit (00:23), session code.

Question titles uppercase with letter-spacing: 0.02em and a 2 px text-shadow on dark.

Motion

• Full theatre. Spring transitions with overshoot for slide advance, leaderboard reveal, big-reveal moments.
• motion.theatre tier on every "reveal" (answer, leaderboard, mini-game scoring).
• Buzzer-press response: 80 ms scale-up + magenta glow pulse + haptic.
• Reduced-motion: theatre + spring collapse to linear fade ≤ 200 ms; haptics preserved.

Density + spacing

• Phone-first responsive layout. Anchored regions and stacks adapt across phone / tablet / portrait / landscape.
• Primary actions in the thumb-reachable lower half. Tap targets ≥ 44×44 pt.
• Spacing: 16 px between distinct controls; 24–32 px between sections; 48 px hero offset.

Ornament

Heavy by design:

• Brand-gradient backdrop on every slide hero.
• Neon glow on the primary CTA (qc.primary-glow), on the leaderboard row of the leading team, on big-reveal headings.
• Low-poly facet textures as subtle overlays on gradients (Beta).
• Mascot on launch, empty states, loading, end-of-quiz. Pose matches context (Beta rig).

Surface map

Stage tokens (audience canvas) project

The stage is the audience-facing canvas surface. It is rendered by:

• The Host audience window (full screen)
• The embedded preview canvas in Designer's centre area
• The embedded preview canvas in the Host operator window
• The audience-mirror region in the Remote app

All four render the same Showtime tokens, namespaced --stage-*. Inside a stage region the operator-chrome rules don't apply: --brand-* foundation + --stage-* win.

Stage tokens are theme-aware: the per-quiz theme field (dark, light, Stretch brand presets) chooses which column applies.

Comparison matrix project

Read the family: every column shares --brand-* foundation tokens (palette master scale, fonts, motion timing, status hues). What changes per column is intensity — display use, motion tier, ornament density, target size. Designer is the floor; Client is the ceiling; Host operator + Remote sit in between with Host slightly more restrained and Remote one tier more punchy.

Phase notes

• MVP / Alpha ship visually utilitarian. Showtime brand-true treatment lands at Beta; mascot rig, audio language, branded transitions all land then.
• Per-quiz theme on Host / Client / Remote ships at Beta. MVP ships the default dark brand theme only. Light + custom brand presets land at Beta + Stretch.
• Designer chrome ships dark and light at MVP because the operator surface is the only one users live inside for hours before Beta lands.
• Custom per-quiz brand presets are Stretch.