Branding & Theming
The token pipeline
The player site's visual design is built in three layers:
Primitives raw values — this exact red, this exact spacing step
└─► Semantic meaning — "brand colour", "card surface", "title text"
└─► Components consume only semantic names, never raw values
No component contains a hard-coded colour. That discipline is what makes rebranding a matter of changing values rather than hunting through markup.
Themes
Six themes ship — five dark, one light:
| Theme | Character |
|---|---|
| Graphite | Near-black field, cool grey slabs floating on it — the default |
| Neon Noir | Glass on black with a hot pink accent; rounded, pill-shaped controls |
| Terminal | Hairlines, square corners and a monospace body over near-black; a solid cyan action colour |
| Amber | Amber on black, hairlines, square corners, monospace |
| Amber Arcade | Obsidian ground with an amber glow, softer corners and monospace figures |
| White | Editorial white — the only light theme: a matte canvas, white panels on slate hairlines, square corners, a crimson accent and monospace figures |
Players pick their own theme in preferences, with live previews of each. The choice persists, and applies before the first paint so there is no flash of the wrong theme on load. A player whose stored choice names a retired theme (Ember, Folio, Vice Sunset, Midnight Navy, Steel, or the earlier Bone) is moved once to Graphite, or to White for Bone, rather than being left on a broken value.
Players also choose the live colour — the colour of in-play badges and dots — from green (the default), yellow or violet. It applies on top of any theme.
Switching themes crossfades where the browser supports it, and does not animate at all when the operating system requests reduced motion.
What a theme controls
Surfaces and the elevation ramp, page gradients, text tiers, chrome controls, card fills and hovers, the masthead, accents, and button fills. Themes go well beyond a palette swap where they need to:
- Typography. Each theme sets its own typefaces, but not its own sizes. Graphite, the default, uses Inter for all interface text and money figures and Sora for large headings (20px and up). Neon Noir sets headings in Space Grotesk over Inter. Terminal sets body text in a monospace face under uppercase Space Grotesk headings. Amber uses a single rounded geometric face and Amber Arcade sets everything in Space Grotesk with monospace figures. White pairs Space Grotesk headings with monospace figures for odds, money and counters. Banner headlines follow each theme's title face.
- One scale for every theme. Every theme sits on the same type ladder and the same control sizing: heading, label and button sizes, field heights and tap targets are identical, so switching theme never makes a page reflow or a control grow. A theme restates faces, weights and colour, not sizes.
- Shape. Corner radii are per theme — Terminal, Amber and White are square with drawn hairlines, Neon Noir has large rounded cards. Players can also override the theme's corners in preferences (Theme, Small, Medium or Large) and the choice applies on top of any theme.
- Brand and status colour. A theme can restate the brand colour (Neon Noir's pink, White's crimson) and remap live, positive and warning colours and the category badge set. The player's live colour choice overrides the theme's live colour.
- Artwork. The registration banner can carry a picture made for one theme, overriding the shared dark or light art — see Site Images & Generated Art. Its copy always sits on real page text over a scrim, so it stays legible on any picture.
Themed typefaces are loaded only when their theme is active, so a player on one theme does not download the others' fonts.
What stays one brand
The win green, currency hues, category accents and spacing are defined once for the whole product, and every theme is a variation on one house brand.
This is the honest limit: what ships is a richly themable product with one brand, not a white-label system. Changing the house colour, the logo and the typefaces is a contained edit to the token layer — but it is an edit, made by a developer and applied everywhere. There is no per-operator branding configuration, and no way for a non-developer to rebrand from the backoffice.
The token layer is exactly the right seam to build that on. It just has not been built.
One exception is worth naming: artwork in fixed UI positions — the jackpot card, the registration banner (per tone, or per theme), promotion banners, tier badges and sports banners — is operator-managed from the backoffice, can be uploaded by hand or AI-generated there, and for the lobby banners the operator chooses which part of the picture stays in view as the banner crops. That is art in known slots rather than branding, but it is the visual surface a non-developer can already change. See Site Images & Generated Art.
The layout of the lobbies is configuration too: staff arrange the sportsbook, casino and home pages from sections, and order the navigation, in the backoffice's page constructor (see Rankings & Discovery).
Design catalogue on staging
A built-in design catalogue shows every component, the surface ladders and a colour section with each theme's resolved values, under a live theme switcher. It is available on local and staging deployments — so a design review can happen against the real staging build — and is unreachable in production. The backoffice has its own catalogue behind the same gate.
On a phone
Below the large-screen breakpoint the player site becomes a phone shell: a bottom navigation bar, a docked search and bet-slip pill that rides above the keyboard (the bar steps out of the way while the player types), a three-up game grid, and a header that tints the browser's own toolbar from the active theme. On Android, bet outcomes and selections give a short haptic tick. All of this follows the same themes and tokens as the desktop layout.
The backoffice
The backoffice uses the same three-layer structure on its own design system. It offers light and dark themes, and by default follows the operating system's setting; a staff member can pin light or dark from the account menu, and pick an accent colour theme (purple, rose, sky, salt box, shamrock, orange or pink). These are per browser. It is a staff tool and is not meant to be branded per operator. Its interface text runs through the same internationalization framework as the player site, but only English ships for staff.
Scope & Roadmap
Implemented. The three-layer token pipeline with enforced separation; six player themes with per-theme colour, typefaces, corner shapes and banner art, and a player-chosen live colour; per-player theme selection with live previews, persistence and flash-free application; one type and control scale shared by every theme; a phone shell with bottom navigation and Android haptics; motion-preference respect; direction-neutral layout throughout, so a right-to-left language works without restructuring; a design catalogue on staging; light, dark and follow-system themes with an accent colour in the backoffice.
Not built. No white-label or per-operator branding — one brand, changed by editing tokens. No backoffice theme editor. The player site ships five languages (four of them machine-translated, awaiting native review); the backoffice ships English only.