Projects
Project

Phoenix Verse

Hub landing for the Phoenix iGaming platform: games, sports, prediction, lottery and the technology behind the operation, online and in retail.

Sep 2026landingreactdesign-systemgaming
Phoenix Verse

phoenixverse.io is the front door of the Phoenix platform, built during my time at Phoenix Games (Oct 2025 to Sep 2026). Phoenix sells one thing in many shapes: games, sports, prediction markets, lottery, gamification, retail and a wallet, all settling on a single double-entry ledger. The hub has to say that in one scroll and then send each visitor to the right product site.

I rebuilt it from scratch in September 2026 after a teardown of the design language of the best platform sites in the industry. The brief was simple to say and hard to do: a white sheet, near-black type, the brand colour used as punctuation rather than atmosphere, and no section that looks like a template.

What is on the page

  • A hero with the platform claim and an isometric illustration of the whole operation: slot cabinet, lottery drum, sportsbook screens, retail terminal and a wallet, on one slab
  • A switchboard of products. Every product is visible as a tab in its own spot colour, and the selected one opens into a full panel. It replaced a carousel. There are no carousels on this site, on purpose, because a rail hides the products from exactly the visitor who does not know their names yet
  • A live ledger stream: ten rows of cash, stake, pool, reward, settle and payout events across every product, to show that one ledger is the product
  • A figures band, a lobby mosaic of the game catalogue, operator voices, a FAQ and a closer that walks the stack from ledger to products
  • One product page per product, each inheriting its own hue through a single CSS variable

The five moves of the design system

  1. The arch. A 1440 by 120 dome drawn in the band's own colour, so a brand block never meets the white sheet on a straight line
  2. The frame. Eight pixels of card colour around every photograph and diagram, so nothing touches a card edge
  3. The statement wipe. One centred sentence per page, per-character spans that fill left to right when the heading enters the viewport, with a screen-reader copy that stays one string
  4. The switchboard. The product tablist above
  5. The constellation. A product's capabilities built out of 59 pixel icon tiles that light in turn. One CSS keyframe, a per-tile delay, no timer

Surfaces are roles, not colours. ink, bone, well and mount are re-pointed by the section a component lands in, so a card never has to know whether it sits on the white sheet, the grey sheet or the ember band.

Engineering

  • React 19, Vite, Tailwind v4 and react-router. TypeScript throughout
  • Meta tags prerendered per route after the build, so link previews work for a client-rendered site
  • A performance budget guard runs after every build: the critical-path JS and CSS are gzipped and the build fails above 200 KB of JS or 24 KB of CSS. The page ships at about 85 KB and 8 KB
  • Vitest tests, ESLint and Prettier, a size report in CI
  • Product links are env-driven, so development points at the local apps and production at the real subdomains

One workspace, ten landings

The hub lives in a pnpm monorepo with every other Phoenix landing and the unified API behind them. A new landing is one command. It drops a site.json beside the app, and the shared pipeline builds it, gives every pull request its own preview URL, and publishes it to Cloudflare Workers static assets with its custom domain the first time it ships with production: true. No per-site CI, no per-site secrets.

The sister sites in this list: Phoenix Games, Phoenix Predict and Phoenix Gamification.