TurnTwo's visual system, "Workshop Editorial." Warm cream backgrounds, petrol navy as the instrument and ink color, amber as the fill and stamp accent, Fraunces serif for editorial display, Geist sans for body. The palette is anchored to a Shearwater Teric dive computer — a diver-first instrument reference.
Working rules
Cream only reads well when petrol navy and amber are present in the same view; cream alone goes flat. Pages should be vivid, not wall-to-wall cream. The editorial palette is universal across surfaces; the editorial serif belongs on editorial surfaces only, while dashboards stay on sans.
Applies across TurnTwo and its sub-products Lens and Workbench, each with its own accent variations.
One theme, site-wide
The site used to run three parallel light/dark systems — one for TurnTwo, one for Workbench, one for Lens — each with its own provider and saved preference. In June 2026 they collapsed into one. A single TurnTwo theme provider sets the <html> class, Workbench and Lens now follow it with their palettes unchanged, and the Lotto Lab web surface joined too with a dark variant that keeps its brand fills. The per-product preference columns were folded into one turntwo_theme_preference and the old columns dropped — leaving only the unified one. Toggling the theme on any surface now carries across all of them, which also fixed a recurring blank-navbar bug for signed-in users.
Frontend principles & audit (cross-project, evidence-based)
Workshop Editorial is the house look. Underneath it sits a separate, project-neutral layer of frontend best practice that applies to every project (TurnTwo, Setwhen, TrustFirst, and anything built next), not just the TurnTwo aesthetic. It's a reusable skill of roughly 210 concrete do's and don'ts across 14 areas — usability, visual hierarchy, typography, color and contrast, navigation, forms, interaction and state, motion, performance (Core Web Vitals), accessibility, responsive/mobile, content, trust, and the cognitive-load laws. Every rule is backed by a reputable source (Nielsen Norman Group, Baymard, the WCAG 2.2 accessibility standard, Google's web.dev, Material/Apple/GOV.UK design systems) rather than opinion.
It is dual-purpose: the same rules are used to design new pages and to audit existing ones — each rule carries a way to detect it on a live site and a severity (blocker / major / minor), so a review produces a prioritized fix list, not vibes. The house-style rules above layer on top; where they differ on a TurnTwo surface, house style wins and the difference is noted.