20-Brand White Label · Casino & Sportsbook · v3.2 · 2026-04-30 · Final
Design Token Reference v3.2
The final catalogue. Six collections, two locked invariants, nine brand modes, Light + Dark theme. Live in Figma file fysBbW10LRJUNgisaBKXJo — landed 2026-04-29. See the Architecture v3.2 deck for rationale and the Component Audit for the components-page gap analysis. Previous version: v3.1 reference.
9 brand modes
Light + Dark
Figma Enterprise · native
strict 4-pt scale
hex invariant
marketing edits Modes DNA only
- 116
- Global vars
- 140
- Modes vars × 9
- 31
- Theme vars × 2
- 53
- Semantic vars
- 38
- Component Packs
- 4
- Regulatory × 7
How to read v3.2
Conventions
Token path is the Figma Variable name (slashes become groups). Type is the Figma Variable type (Color, Number, String, Boolean, Effect). Value / Alias shows the raw value or the alias target. Dimension Numbers are px in Figma; the export script converts to rem (rem = px / 16).
Status badges:
stable unchanged from v3.1 ·
evolved renamed or restructured ·
v3.2 introduced or promoted ·
final the locked v3.2 form.
Two locked invariants
- Hex invariant — raw hex lives in exactly two homes: Global (
color/black, /white, /black-alpha/*, /white-alpha/*, /system/*) and Modes brand DNA (color/{primary, secondary, neutral, tertiary}/{50..900}). Every other colour token in every collection is an alias.
- Strict 4-point scale —
Global/scale/* contains only [0, 4, 8, 12, 16, 20, 24, 28, 32, 40, 48, 56, 64, 72, 80, 96, 112, 128, 144, 160]. Twenty stops. Off-grid legacy values round to the closest stop (radii) or round up (typography).
Collection 1 · Global single Default mode
Brand-invariant raw values plus the canonical 4-point scale. 116 variables + 5 elevation Effect Styles. One of the two homes for raw hex.
1.1 · Color · Base — raw hex
Global color base tokens
| Token | Type | Value | Notes |
|---|
| color/black | Color | #000000 | Pure black · invariant |
|---|
| color/white | Color | #FFFFFF | Pure white · invariant |
|---|
1.2 · Color · Alpha — overlay alphas
Ten stops each. Use these wherever a translucent black or white overlay is needed — replaces the legacy Generic/Stroke 10, Stroke 30, Base/Base Black 10, etc.
Global alpha tokens
| Token family | Type | Stops | Use |
|---|
| color/black-alpha/{0,5,10,20,30,40,50,60,70,80,90} | Color × 10 | #00000000 → #000000E6 | Borders, scrims, dim overlays on light surfaces |
|---|
| color/white-alpha/{0,5,10,20,30,40,50,60,70,80,90} | Color × 10 | #FFFFFF00 → #FFFFFFE6 | Highlights, soft strokes on dark surfaces |
|---|
1.3 · Color · System — brand-invariant feedback
Status colours that should not vary across brands. Ten stops each per family. Use these on every brand — system semantics ride above brand identity.
Global system color families
| Family | Type | Anchor (500) | Notes |
|---|
| color/system/success/{50..900} | Color × 10 | #00B894 | Confirmations, success notifications |
|---|
| color/system/warning/{50..900} | Color × 10 | #FDCB6E | Caution; pair with dark text on light tints |
|---|
| color/system/error/{50..900} | Color × 10 | #E17055 | Validation errors, destructive actions |
|---|
| color/system/info/{50..900} | Color × 10 | #74B9FF | Informational messages, neutral feedback |
|---|
1.4 · Scale · 4-point — strict, 20 stops
The single source of truth for every dimension token (radii, spacing, type, line-height, icon-size). All 20 stops below; nothing else.
Global scale stops
| Token | Type | px / rem | Common use |
|---|
| scale/0 | Number | 0 | No-spacing baseline |
|---|
| scale/4 | Number | 4 · 0.25rem | Hairline gap, small radii |
|---|
| scale/8 | Number | 8 · 0.5rem | Inline padding |
|---|
| scale/12 | Number | 12 · 0.75rem | Card radii, caption type |
|---|
| scale/16 | Number | 16 · 1rem | Body, icon-size sm |
|---|
| scale/20 | Number | 20 · 1.25rem | Heading 4, icon-size md |
|---|
| scale/24 | Number | 24 · 1.5rem | Heading 2, icon-size lg, lg spacing |
|---|
| scale/28 | Number | 28 · 1.75rem | Heading 1 |
|---|
| scale/32 | Number | 32 · 2rem | Display body, icon-size xl, xl spacing |
|---|
| scale/40 | Number | 40 · 2.5rem | Heading 1 line-height |
|---|
| scale/48 | Number | 48 · 3rem | Display 2, 2xl spacing |
|---|
| scale/56 | Number | 56 · 3.5rem | Section padding |
|---|
| scale/64 | Number | 64 · 4rem | Display 2 line-height, 3xl spacing |
|---|
| scale/72 | Number | 72 · 4.5rem | Hero spacing |
|---|
| scale/80 | Number | 80 · 5rem | Page sections |
|---|
| scale/96 | Number | 96 · 6rem | Pill radius (legacy 100 rounds here) |
|---|
| scale/112, 128, 144, 160 | Number × 4 | 112 / 128 / 144 / 160 | Large layout, true-pill radius (160) |
|---|
1.5 · Typography — Global scale aliases + raw letter-spacing
Every size and line-height aliases scale/N. Letter-spacing is the explicit exception to the 4-point rule — it lives in its own micro-scale.
Global typography size, line-height, letter-spacing
| Token | Type | Aliases / value | Notes |
|---|
| typography/size/x-small | Number | → scale/8 | Decorative only — fails text minimums for body |
|---|
| typography/size/small | Number | → scale/12 | Captions (rounded up from legacy 11) |
|---|
| typography/size/caption | Number | → scale/12 | Footnotes |
|---|
| typography/size/label | Number | → scale/16 | UI labels (rounded up from legacy 15) |
|---|
| typography/size/body | Number | → scale/16 | Body base |
|---|
| typography/size/heading-5 | Number | → scale/16 | Smallest heading |
|---|
| typography/size/heading-4 | Number | → scale/20 | (rounded up from legacy 17) |
|---|
| typography/size/heading-3 | Number | → scale/20 | (rounded up from legacy 19) |
|---|
| typography/size/heading-2 | Number | → scale/24 | (rounded up from legacy 22) |
|---|
| typography/size/heading-1 | Number | → scale/28 | Page heading |
|---|
| typography/size/display-3 | Number | → scale/32 | Display tier |
|---|
| typography/size/display-2 | Number | → scale/48 | (rounded from legacy 50) |
|---|
| typography/line-height/* (matched to size) | Number × ~10 | → scale/{14..64} | All aliased to scale stops |
|---|
| typography/letter-spacing/tight | Number | -0.02 | Raw FLOAT · explicit 4-pt exception |
|---|
| typography/letter-spacing/normal | Number | 0 | Raw FLOAT |
|---|
| typography/letter-spacing/wide | Number | 0.04 | Raw FLOAT |
|---|
1.6 · Stroke — alias of scale
Global stroke widths
| Token | Type | Aliases | Notes |
|---|
| stroke/hairline | Number | 0.5 | Sub-pixel divider |
|---|
| stroke/default | Number | 1 | Standard border |
|---|
| stroke/thick | Number | → scale/4 (used as 2) | Focus ring base |
|---|
| stroke/strong | Number | → scale/4 | Heavy emphasis |
|---|
1.7 · Breakpoint — FLOAT
Global breakpoint thresholds
| Token | Type | Value | Notes |
|---|
| breakpoint/mobile | Number | 360 | Smallest supported width |
|---|
| breakpoint/tablet | Number | 768 | |
|---|
| breakpoint/desktop | Number | 1024 | |
|---|
| breakpoint/desktop-wide | Number | 1440 | Promo / dashboard layouts |
|---|
1.8 · Elevation — Effect Styles, 5 levels
Effect Styles, not Variables. Replace the legacy raw DROP_SHADOW patterns embedded inline in component masters.
Global elevation effect styles
| Style | Type | Composition | Use |
|---|
| elevation/0 | EFFECT | flat (no shadow) | Inline content |
|---|
| elevation/1 | EFFECT | y2, blur 4, alpha 8% | Resting cards |
|---|
| elevation/2 | EFFECT | y4, blur 12, alpha 12% | Raised, dropdowns |
|---|
| elevation/3 | EFFECT | y8, blur 24, alpha 16% | Modals |
|---|
| elevation/4 | EFFECT | y12, blur 36, alpha 20% | Bottom sheets, hero overlays |
|---|
Collection 2 · Modes 9 brand modes
Brand DNA + brand-tinted alias chrome. 140 variables × 9 modes. The other home for raw hex (DNA only). Marketing edits only this collection.
2.1 · Brand DNA final — 4 ramps × 10 stops, raw hex per brand
The only place outside Global where raw hex is allowed. 40 raw hex tokens × 9 brand modes = 360 raw hex values.
Modes brand DNA ramps
| Token family | Type | Stops | Anchor (Lyllo / Snabarre / Mobilespin) |
|---|
| color/primary/{50..900} | Color × 10 | 10 brand-defined | #F02884 / green / #D6112B |
|---|
| color/secondary/{50..900} | Color × 10 | 10 brand-defined | brand-defined per ramp |
|---|
| color/neutral/{50..900} | Color × 10 | 10 brand-tinted greys | Each brand has its own tint |
|---|
| color/tertiary/{50..900} | Color × 10 | 10 brand-defined | Lyllo: #FD6A00 (orange) · Comeon: #C3FF00 (lime) · others mirror primary |
|---|
Tertiary ramp added in v3.2
Tertiary unblocks brands that need a third hue (Lyllo accent orange, Comeon lime). Brands without a third accent mirror primary as a placeholder so the alias chain stays valid.
2.2 · Color · Brand alias — alias of DNA
Modes brand alias tokens
| Token | Type | Aliases | Notes |
|---|
| color/brand/primary | Color | → Modes/color/primary/500 | Single role-named anchor |
|---|
| color/brand/primary-hover | Color | → Modes/color/primary/600 | Hover state |
|---|
| color/brand/primary-pressed | Color | → Modes/color/primary/700 | Pressed state |
|---|
| color/brand/secondary | Color | → Modes/color/secondary/500 | |
|---|
| color/brand/tertiary | Color | → Modes/color/tertiary/500 | Accent |
|---|
| color/brand/on-primary | Color | → Global/color/white (most brands) | Foreground on primary surfaces |
|---|
2.3 · Color · Surface — alias of neutral DNA
Modes surface tokens
| Token | Aliases (Light) | Aliases (Dark) |
|---|
| color/surface/page | → neutral/100 | → neutral/900 |
|---|
| color/surface/raised | → neutral/50 | → neutral/800 |
|---|
| color/surface/sunken | → neutral/200 | → neutral/950 |
|---|
| color/surface/sidebar | → neutral/100 | → neutral/800 |
|---|
| color/surface/bottomsheet | → neutral/50 | → neutral/800 |
|---|
2.4 · Color · Text — alias of neutral / brand DNA
Modes text color tokens
| Token | Aliases | Notes |
|---|
| color/text/primary | → neutral/900 (Light) / neutral/100 (Dark) | Body text |
|---|
| color/text/secondary | → neutral/700 (Light) / neutral/300 (Dark) | Helper, supportive |
|---|
| color/text/disabled | → neutral/400 | Use sparingly |
|---|
| color/text/link | → Modes/color/primary/500 | Brand-coloured links |
|---|
| color/text/on-brand | → Global/color/white (most brands) | Foreground on brand surfaces · brand can override (888 yellow uses black) |
|---|
| color/text/on-surface-dark | → neutral/100 | Foreground on darker surfaces |
|---|
2.5 · Color · Icon — 3-way split
Modes icon color tokens
| Token | Aliases | Notes |
|---|
| color/icon/content | → neutral/700 | Content icons (heading prefix, list bullets) |
|---|
| color/icon/action | → Modes/color/primary/500 | Tappable / interactive icons |
|---|
| color/icon/descriptive | → neutral/600 | Decorative / informational |
|---|
| color/icon/inverse | → neutral/100 | On dark surfaces |
|---|
Mobilespin overrides action to charcoal (DNA neutral/900) — black icons, red CTAs is the brand rule.
2.6 · Color · Border — alias of alpha or neutral
Modes border tokens
| Token | Aliases | Notes |
|---|
| color/border/subtle | → Global/color/black-alpha/10 (Light) / white-alpha/10 (Dark) | Faint dividers |
|---|
| color/border/default | → neutral/300 | Standard borders |
|---|
| color/border/strong | → Global/color/black-alpha/30 | Emphatic borders |
|---|
| color/border/focus | → Modes/color/primary/500 | Focus ring base · see WCAG 2.4.13 |
|---|
2.8 · Banner / Landing — alias chrome
Modes banner and landing tokens
| Token | Aliases |
|---|
| color/banner/background | → neutral/700 / brand override |
|---|
| color/banner/text | → neutral/100 |
|---|
| color/banner/cta | → Modes/color/primary/500 |
|---|
| color/landing/icon-cta/bg | → neutral/100 |
|---|
| color/landing/icon-cta/icon | → Modes/color/primary/500 |
|---|
| color/landing/secondary-cta/bg | → Modes/color/tertiary/500 |
|---|
| color/landing/tag | → Modes/color/tertiary/500 (5 of 9 brands use a third accent here) |
|---|
2.10 · Radius — alias of Global/scale
Modes radius tokens
| Token | Aliases | Notes |
|---|
| radius/base-3 | → Global/scale/4 | Legacy 3 rounded up |
|---|
| radius/cta | → Global/scale/4 | Default CTA · brand may override |
|---|
| radius/input | → Global/scale/4 | |
|---|
| radius/box | → Global/scale/8 | Legacy 6 rounded |
|---|
| radius/card | → Global/scale/12 | Already on grid |
|---|
| radius/large | → Global/scale/24 | Hero / promo |
|---|
| radius/navigation | → Global/scale/12 (Reviant-A) / 0 (Reviant-B) | Brand-divergent |
|---|
| radius/pill | → Global/scale/96 (or 160 for true pill) | Legacy 100 rounded down |
|---|
2.11 · Typography family + weight — STRING per brand
Modes typography family and weight
| Token | Type | Example |
|---|
| typography/family/heading | String | brand-defined (Open Sauce One, etc.) |
|---|
| typography/family/body | String | brand-defined |
|---|
| typography/family/mono | String | JetBrains Mono / IBM Plex Mono |
|---|
| typography/weight/regular .. extrabold | String × ~5 | brand-defined |
|---|
Collection 3 · Theme Light + Dark
31 variables × 2 modes. 100% alias. Every Theme token chains through Modes back to brand DNA. Switching Theme = Dark at the frame swaps only the Theme leg.
3.1 · Surface
Theme surface tokens
| Token | Light | Dark |
|---|
| theme/surface/page | → Modes/color/surface/page | → Modes/color/surface/page (Dark stop) |
|---|
| theme/surface/raised | → Modes/color/surface/raised | → Modes/color/surface/raised (Dark) |
|---|
| theme/surface/sunken | → Modes/color/surface/sunken | → Modes/color/surface/sunken (Dark) |
|---|
| theme/surface/sidebar | → Modes/color/surface/sidebar | → Modes/color/surface/sidebar (Dark) |
|---|
| theme/surface/bottomsheet | → Modes/color/surface/bottomsheet | → Modes/color/surface/bottomsheet (Dark) |
|---|
3.2 · Text
Theme text tokens
| Token | Light | Dark |
|---|
| theme/text/primary | → Modes/color/text/primary | → Modes/color/text/primary (Dark) |
|---|
| theme/text/secondary | → Modes/color/text/secondary | → Modes/color/text/secondary (Dark) |
|---|
| theme/text/disabled | → Modes/color/text/disabled | → Modes/color/text/disabled (Dark) |
|---|
| theme/text/link | → Modes/color/text/link | → Modes/color/text/link (Dark) |
|---|
3.3 · Border
Theme border tokens
| Token | Light | Dark |
|---|
| theme/border/subtle | → Global/color/black-alpha/10 | → Global/color/white-alpha/10 |
|---|
| theme/border/default | → Modes/color/border/default | → Modes/color/border/default (Dark) |
|---|
| theme/border/strong | → Global/color/black-alpha/30 | → Global/color/white-alpha/30 |
|---|
| theme/border/focus | → Modes/color/border/focus | → Modes/color/border/focus (Dark) |
|---|
3.4 · Icon
Theme icon tokens
| Token | Light | Dark |
|---|
| theme/icon/content | → Modes/color/icon/content | → Modes/color/icon/content-dark |
|---|
| theme/icon/action | → Modes/color/icon/action | → Modes/color/icon/action-dark |
|---|
| theme/icon/descriptive | → Modes/color/icon/descriptive | → Modes/color/icon/descriptive-dark |
|---|
3.5 · Nav
Theme nav tokens
| Token | Light | Dark |
|---|
| theme/nav/background | → Modes/color/nav/background | → Modes/color/nav/background (Dark) |
|---|
| theme/nav/shadow | → Global/color/black-alpha/10 | → Global/color/black-alpha/0 |
|---|
Collection 4 · Semantic single mode · all aliases
53 variables. Role-named tokens for designers and developers. Spacing + icon-size are new in v3.2 — components consume these instead of free FLOATs.
4.1 · Spacing v3.2 — alias of Global/scale
Semantic spacing scale
| Token | Aliases | px / rem | Use |
|---|
| spacing/xxs | → Global/scale/4 | 4 / 0.25 | Hairline gap |
|---|
| spacing/xs | → Global/scale/8 | 8 / 0.5 | Inline padding |
|---|
| spacing/sm | → Global/scale/12 | 12 / 0.75 | List row gap |
|---|
| spacing/md | → Global/scale/16 | 16 / 1 | Card padding |
|---|
| spacing/lg | → Global/scale/24 | 24 / 1.5 | Section padding |
|---|
| spacing/xl | → Global/scale/32 | 32 / 2 | Hero padding |
|---|
| spacing/2xl | → Global/scale/48 | 48 / 3 | Large hero |
|---|
| spacing/3xl | → Global/scale/64 | 64 / 4 | Page sections |
|---|
4.2 · Icon size v3.2 — alias of Global/scale
Semantic icon sizes
| Token | Aliases | px | Use |
|---|
| icon-size/sm | → Global/scale/16 | 16 | Inline with body |
|---|
| icon-size/md | → Global/scale/20 | 20 | Default UI icons |
|---|
| icon-size/lg | → Global/scale/24 | 24 | Touch-friendly · meets WCAG 2.5.8 minimum |
|---|
| icon-size/xl | → Global/scale/32 | 32 | Feature icons |
|---|
4.3 · Color · all roles — 36 aliases
Same shape as Modes color groups but consumed at the role level. Components prefer Semantic over Modes when the role does not need component-specific naming.
Semantic color tokens summary
| Group | Tokens | Aliases |
|---|
| color/brand/* | primary, primary-hover, secondary, tertiary, on-brand | → Modes/color/brand/* |
|---|
| color/surface/* | page, raised, sunken, sidebar, bottomsheet | → Theme/surface/* |
|---|
| color/text/* | primary, secondary, disabled, link, on-brand | → Theme/text/* |
|---|
| color/icon/* | content, action, descriptive, inverse | → Theme/icon/* |
|---|
| color/border/* | subtle, default, strong, focus | → Theme/border/* |
|---|
| color/system/* | success, warning, error, info (× state) | → Global/color/system/*/500 |
|---|
Collection 5 · Component Packs 38 vars · all aliases
Last-mile alias packs for component masters. Used when a component needs a token name that does not generalise to a Semantic role.
5.1 · cta.*
Component pack cta tokens
| Token | Aliases |
|---|
| cta/primary/background | → Semantic/color/brand/primary |
|---|
| cta/primary/text | → Semantic/color/text/on-brand |
|---|
| cta/primary/hover | → Modes/color/brand/primary-hover |
|---|
| cta/secondary/background | → Semantic/color/surface/raised |
|---|
| cta/secondary/border | → Modes/color/border/strong |
|---|
| cta/disabled/background | → Modes/color/neutral/200 |
|---|
| cta/disabled/text | → Modes/color/neutral/500 |
|---|
| cta/radius | → Modes/radius/cta |
|---|
| cta/padding-x | → Semantic/spacing/md |
|---|
| cta/padding-y | → Semantic/spacing/sm |
|---|
5.3 · nav.*
Component pack nav tokens
| Token | Aliases |
|---|
| nav/icon-default | → Modes/color/nav/default-icon |
|---|
| nav/icon-selected | → Modes/color/nav/selected-icon |
|---|
| nav/text-default | → Modes/color/nav/default-text |
|---|
| nav/text-selected | → Modes/color/nav/selected-text |
|---|
| nav/background | → Theme/nav/background |
|---|
| nav/shadow | → Theme/nav/shadow |
|---|
5.5 · other packs
Other component packs
| Pack | Vars | Notes |
|---|
| view-all/* | 3 | label, chevron, hover |
|---|
| pill/* | 4 | surface, on-surface, border, radius |
|---|
| badge/* | 3 | surface, on-surface, radius |
|---|
| banner/* | 3 | surface, on-surface, cta |
|---|
| notification/* | 4 | background, text, icon, dismiss · status × bg/text computed at use site |
|---|
Collection 6 · Regulatory 7 modes
4 variables × 7 jurisdictional modes (default, SE, DK, MT, ON, NL, PL). Compliance owns this collection.
6.1 · All tokens
Regulatory tokens
| Token | Type | Notes |
|---|
| reg/rg/program-name | String | "Spelpaus" (SE), "ROFUS" (DK), "Cruks" (NL), "ConnexOntario" (ON), … |
|---|
| reg/rg/program-url | String | Self-exclusion program URL |
|---|
| reg/age-gate | Number | Minimum age (18 / 19 / 21) |
|---|
| reg/bonus-disclaimer | String | Jurisdiction-specific disclaimer |
|---|
Appendix · v3.1 → v3.2 migration map
Renames preserve binding IDs in Figma. Components pick up new names without per-instance edits.
v3.1 to v3.2 migration map
| v3.1 token / family | v3.2 location | Change |
|---|
| color/brand/primary-N | Modes/color/primary/N | Renamed · group flat |
|---|
| color/brand/secondary-N | Modes/color/secondary/N | Renamed |
|---|
| color/brand/tertiary-N | Modes/color/tertiary/N | Promoted from optional |
|---|
| color/neutral-N | Modes/color/neutral/N | Brand-tinted, moved to Modes |
|---|
| color/status/* | Global/color/system/* | Renamed · Global, brand-invariant |
|---|
| color/always/{black,white} | Global/color/{black,white} | Flat in Global |
|---|
| color/always/transparent | Global/color/black-alpha/0 | Subsumed |
|---|
| color/special/* | case-by-case | Pitch / jackpot / live-pulse map to Modes/color/tertiary or remain as raw if invariant |
|---|
| spacing/N | Global/scale/N + Semantic/spacing/{xxs..3xl} | Two-layer · scale + named |
|---|
| radius/{base-3,input,box,card,pill,navigation,large} | Modes/radius/* → Global/scale/* | All aliased to scale |
|---|
| icon/sizes | Semantic/icon-size/{sm,md,lg,xl} | Promoted to Semantic |
|---|
| elevation tokens | Global/elevation/0..4 (Effect Style) | Effect Styles · 5 levels |
|---|
| launcher/* · platform/* | — | Stays deferred · backlog |
|---|
Appendix · Audit rules
Run these checks any time. They make a v3.2 violation cheap to find and cheap to fix.
Hex invariant audit
getLocalVariablesAsync() filtered to COLOR; for each var, if collection is Modes and name does not match color/(primary|secondary|neutral|tertiary)/*, the value must be a VARIABLE_ALIAS in every mode. If collection is Theme / Semantic / Component Packs / Regulatory, same rule (no exceptions). The only places raw hex is allowed are Global/color/{black, white, black-alpha/*, white-alpha/*, system/*} and the four DNA ramps in Modes.
Strict 4-point scale audit
For every Global/scale/N, assert N is in the canonical 20-stop set. For every other dimension consumer (Modes/radius/*, Semantic/spacing/*, Semantic/icon-size/*, Global/typography/{size, line-height}/*, Global/stroke/*), assert it aliases a scale/N. Letter-spacing is the explicit exception.
Header rule audit
For each brand mode, resolve Modes/color/header/active-selected and Modes/color/header/surface-primary. If both resolve to the same neutral/N stop, fail — re-point active-selected to primary/500.