Quizzja · internal reference

Screen atlas

Every screen in the product — the React web player, the SwiftUI iOS and macOS apps, the Jetpack Compose Android app, the WinUI 3 Windows app, the Electron Linux shell, and the Next.js CMS — drawn from source and filled with one shared fixture, each with a short note on what it is for.

96 screens10 boards6 apps Fixture: playfield-parity-v1 · 2026-08-22
Board 1 of 10

Web player — the five destinations

The tab bar's five screens plus Solve, at the player's own phone width (390 px; the shell becomes a framed 430 px phone from 480 px up). Every value is the canonical parity fixture — test/fixtures/playfield-parity-v1.json, clock 2026-08-22 12:00 UTC, content language English — so these read the same as a capture from the Apple or Windows harness.

Open on its own ↗
Board 2 of 10

Web player — account, commerce and language

Everything reached from You, from the hint balance, or from an emailed link. Sign-in, account creation and the Pro checkout are the only surfaces the player can reach without a session; the tab bar hides behind the sub-pages, which carry their own back affordance.

Open on its own ↗
Board 3 of 10

Web player — legal, privacy and system states

The surfaces that exist for compliance, recovery and failure rather than for play: the consent gate that must be answered before anything optional is stored, the three translated legal documents, the erase/export/delete controls, sharing, and the two states the player meets when the service is not there.

Open on its own ↗
Board 4 of 10

Web player — desktop, 1024 px and up

Above 1024 px the same components re-lay out rather than stretching: the bottom tab pill stands up as a 244 px rail carrying the wordmark, the download call to action and the language menu; content is capped in a 920 px column; Today puts the hero beside the streak card; Solve puts the clue list beside the board and drops the on-screen keyboard. These four frames are 1240×780 — the app's own maximum width.

Open on its own ↗
Board 5 of 10

Web player — loading, empty, error and overlays

The states a screen passes through before it has anything to show, the two ways it can have nothing to show, and the overlays that sit on top of a screen rather than replacing it. Every destination carries its own version of the first three; drawn here on Today, Puzzles and Ranks, where they read most clearly.

Open on its own ↗
Board 6 of 10

iPhone, iPad and Mac

One SwiftUI codebase and one shared QuizzjaKit across iOS, iPadOS and macOS, re-valuing the same Meadow tokens as Theme.Playfield. Below 1024 points it is the focused phone canvas; a full-width iPad or wide Mac window switches to the web desktop's rail and bounded column. All five destinations, the platform's own surfaces, and two Mac frames showing what changes above 1024 points.

Open on its own ↗
Board 7 of 10

Android

Jetpack Compose, with the Meadow tokens re-valued as the Playfield theme object rather than Material's colour scheme — so the press-down shadows, the cream paper and the green primary are the same values as the web. Android is the only client that ships mounted ad placements — the web has the same advertising runtime, including a rewarded-hint call, but its in-feed components are unmounted and no AdSense client is configured in this repo.

Open on its own ↗
Board 8 of 10

Windows

WinUI 3 on .NET 9, with the Meadow tokens re-valued as PlayfieldPalette brushes. A page-coloured custom title bar carries the shell status line beside the native caption buttons; the rail and the 920 px column below it are the same desktop layout as the web player, which the quizzja-windows-web-parity-v1 harness exists to hold in place.

Open on its own ↗
Board 9 of 10

Linux

The Linux desktop app has no screens of its own. It is an Electron shell (AppImage and .deb) that loads a pinned, verified copy of the same web player release, so every destination inside the window is artboards 1 and 4. What is Linux-only is the window furniture: a native menu, a strict URL policy, remembered window state, an offline page the shell serves itself when the player is unreachable, and an About panel it generates over its own URL scheme.

Open on its own ↗
Board 10 of 10

CMS — the operator side

The admin app at cms.quizzja.com: a Next.js BFF over the same ConnectRPC AdminService, with its own design system — purple on lilac, the same press-down shadows. This is where puzzles are generated, reviewed and scheduled, where the lexicon and the store catalogue are kept, and where player feedback is triaged. Role permissions decide which nav entries render at all.

Open on its own ↗