Skip to main content

Our Multi-Brand, Multi-Dimensional Token Architecture

Our new Design Token structure introduces a scalable, brand-agnostic system that ensures consistency, flexibility, and error prevention across all brands and experiences.

1. Core Principles​

  • Agnostic foundation All tokens start from a neutral, global base (00-global/00-base). These define raw values (colors, typography, spacing, etc.) without brand identity.

  • ** Brand overrides** Each brand (betfair, sky, pp, ps …) overrides only the tokens it needs to adapt. Everything else falls back to the agnostic values, ensuring coverage with no gaps.

  • Semantic abstraction Semantic tokens (01-semantic/...) sit on top of the agnostic/brand layers. They map raw values to design intent (e.g. border-radius.medium, heading.large.strong). This guarantees that UI meaning is consistent even if underlying values differ per brand.

  • Multi-dimensional flexibility Tokens are organized in groups and stages (global → brand → semantic → component).
    This allows variations by:

    • Brand (Betfair, Sky, PP, PS…)

    • Theme (light/dark if needed)

    • Component (semantic usage in context)

2. Token Stages & Groups​

Stage 0 – Global / Agnostic (00-global/00-base)​

What it is: Raw primitives shared across all brands.

Examples:

  • Colors (gb.colours.red.40, gb.colours.teal.20)

  • Typography (gb.font-family.font-primary, gb.font-size.16)

  • Spacing & sizing (gb.spacing.8, gb.sizing.40)

  • Effects (gb.drop-shadows.30, gb.opacity.37)

Role:

Universal fallbacks — no brand identity, only pure values.

Stage 1 – Brand Overrides (00-global/{brand})​

What it is: Brand-specific redefinitions, layered on top of the agnostic base.

Examples:

  • Betfair: sets Noto Sans as font-family

  • Sky: adjusts drop-shadows and gradients

  • Paddy Power: overrides neutrals and greens

  • PokerStars: applies Druk Text secondary font and strong color palette

Role:

Injects brand identity while falling back to agnostic values when undefined.

Stage 2 – Semantic (01-semantic/...)​

What it is: Tokens with meaning and intent, not just values.

Examples:

border-radius.medium → {gb.border-radius.4}

heading.large.strong → typography mapping to primary font + strong weight

sizing.images.large → {gb.sizing.140}
Role:

Bridges design intent with brand style, so designers/devs use “what it means” instead of “what it is”.

Stage 3 – Component / Application (future layers)​

What it is: Component-level tokens built from semantic ones.

Examples:

button.primary.background → semantic color token

card.shadow → semantic shadow token
Role:

Final abstraction — ensures tokens are consumed by meaning, not raw values.

3. Fallback Mechanism​

If a brand token is not defined → it falls back to the agnostic base.
If a semantic token references something missing → it resolves through the fallback chain until it finds a defined value.

This ensures:

  • No errors or missing tokens in builds

  • Consistent defaults across brands

  • Safer scaling when new brands or themes are added

4. Advantages of the New Structure​

✅ Scalable – Easily extend to new brands or themes without duplicating everything
✅ Error-proof – Built-in fallback prevents missing values or build errors
✅ Flexible – Brands override only what they need, saving time and effort
✅ Consistent semantics – Designers & developers work with meaningful tokens, not hard-coded values
✅ Maintainable – Clear hierarchy (agnostic → brand → semantic → component) makes it easy to understand and evolve
✅ Future-ready – Supports multi-dimensional needs (multi-brand, theming, dark mode, etc.)