Skip to main content

🎭 Multi-Brand & Theming

Our default/base theme is Agnostic. Design in Agnostic Light first, then validate in brand themes and dark modes.

Theme catalog​

Brands

  • Agnostic (default/base)
  • Betfair
  • Sky Bet
  • Sky Vegas
  • Sky Casino
  • Sky Bingo
  • Paddy Power Sports
  • Paddy Power Games
  • Poker Stars

Modes

  • Light
  • Dark

Naming pattern: <Brand> <Mode> — e.g., Agnostic Light, Betfair Dark, Paddy Power Games Light.

How to switch (Tokens Studio)​

  1. Open Tokens Studio in Figma.
  2. Use the Theme dropdown to pick Brand + Mode.
  3. Components update automatically with the selected theme.

Best practices​

  • Start in Agnostic Light (base) to avoid brand-specific bias early.
  • Use semantic tokens in UI layers so brand overrides cascade correctly.
  • Validate at least one other brand and Dark mode before handoff.
  • Check contrast/focus across all modes.

Workflow example​

  1. Design in Agnostic Light.
  2. Switch to Betfair Light → validate layout/spacing.
  3. Switch to Agnostic Dark → fix contrast/focus states.
  4. Switch to a second brand (e.g., Paddy Power Sports Light) → final sweep.