20-Brand White Label · Casino & Sportsbook · v3 · 2026-04-20

Design Token Reference v3

The full catalogue — every token that needs to exist in Figma, organised by the 5 collections. v3 is the current architecture; it inherits the v2 foundation and absorbs the 9-brand edge-case audit. See the Architecture v3 deck for the rationale and implementation diagram, and the Brand Audit for per-brand evidence.

20 brands light + dark SE · DK · MT · ON · NL · PL + default Figma Enterprise · native 4-pt · 1rem = 16px marketing edits Collection 1
5
collections
~585
tokens
~2.4K
values
4px
scale base
7
jurisdictions

How to read v3

Token path is the Figma Variable name (slashes become groups). Type is the Figma Variable type (Color, Number, String, Boolean). Value / Alias shows the raw value or what it aliases to. Dimension Numbers are px in Figma; the export script converts to rem (rem = px / 16).

Status badges mark what changed from v2: stable unchanged from v2 · evolved v2 token with renamed / expanded semantics · v3 introduced in v3 based on the brand audit.

What v3 adds over v2

  • Collection 3 · Semantic — five new families: icon.* (3-way split explicit), pill.*, badge.*, banner.* (overlay + on-surface), and radius.modal / radius.badge.
  • Collection 5 · Component — expanded from v2's <10 last-resort tokens to ~35 proper alias packs: menu-row.*, view-all.*, nav.* (with icon/text split), header.*, cta.* with 4 component variants (form / card / wallet / landing).
  • No structural change — five collections, same axes. Brand remains a 20-mode axis on Collection 1. Theme = 2 modes on Collection 2. Jurisdiction = 7 modes on Collection 4. Semantic + Component are global.

Collection 1 · Primitives 20 brand modes

Raw values only — never referenced directly by components. Mix of brand-moded (20 modes: ramps, typography families, radius, layout, gradient) and global (single value: spacing, opacity, breakpoint, etc.). The 4-point scale applies to every dimension token.

1.1 · Color · Brand — brand-moded

Each brand defines its own ramp. 9 stops per scale. Values below are example hexes; each of the 20 brand modes holds its own colour set.

Token pathTypeExample valueNotes
color/brand/primary-100Color#EDEBFFLightest tint
color/brand/primary-200Color#DAD6FF
color/brand/primary-300Color#B9B0FF
color/brand/primary-400Color#9487F2
color/brand/primary-500Color#6C5CE7Focus rings
color/brand/primary-600Color#5A4BCFDefault action bg
color/brand/primary-700Color#483BA6Hover
color/brand/primary-800Color#362B7DPressed
color/brand/primary-900Color#241C54Darkest
color/brand/secondary-100 … 900Color × 9brand-definedSecondary accent ramp
color/brand/tertiary-100 … 900Color × 9brand-definedTertiary / support
color/brand/gradient-startColorbrand-definedFor gradient compounds
color/brand/gradient-endColorbrand-defined

29 tokens in this group × 20 brand modes = 580 values.

1.2 · Color · Neutral — brand-moded

Each brand's own grey / warm / cool scale. 11 stops. Theme collection flips which end is used for surface/text.

Token pathTypeExample valueNotes
color/neutral-50Color#F9F9FBLightest — light-theme surface
color/neutral-100Color#F1F1F5
color/neutral-200Color#E4E4EC
color/neutral-300Color#C9C9D3
color/neutral-400Color#9A9AAC
color/neutral-500Color#72728A
color/neutral-600Color#555568
color/neutral-700Color#3A3A4A
color/neutral-800Color#1F1F2C
color/neutral-900Color#14141CDark-theme raised
color/neutral-950Color#0B0B12Dark-theme page

1.3 · Color · Status — brand-moded

Brand-adjusted per theme. 3 stops each: 100 (tint), 500 (base), 900 (deep). 6+ stops optional for Semantic flexibility.

Token pathTypeExampleNotes
color/status/success-100Color#E0F5EBTint — backgrounds
color/status/success-300Color#7FD3A6Borders
color/status/success-500Color#00B894Base
color/status/success-600Color#009E7FSolid bg / icon
color/status/success-800Color#005A48Text on tint
color/status/success-900Color#003D30Deep
color/status/warning-{100,300,500,600,800,900}Color × 6ambersSame pattern
color/status/error-{100,300,500,600,800,900}Color × 6redsSame pattern
color/status/info-{100,300,500,600,800,900}Color × 6bluesSame pattern

1.4 · Color · Always — same across all brand modes

Token pathTypeValueNotes
color/always/whiteColor#FFFFFFNever overridden across brands
color/always/blackColor#000000Never overridden
color/always/transparentColorrgba(0,0,0,0)Explicit transparent

1.5 · Color · Special — brand-moded (can default across all)

iGaming-specific primitives that don't fit in a brand ramp but must remain overridable per brand.

Token pathTypeDefaultNotes
color/special/pitch-greenColor#1A4731Football pitch diagram
color/special/pitch-linesColor#FFFFFF @ 40%Pitch markings
color/special/jackpot-goldColor#FFD700Jackpot ticker; some brands override to brand/primary
color/special/live-pulseColor#EF4444Live indicator — near-global but overridable

1.6 · Color · VIP new — brand-moded

Loyalty tier colours. Each brand defines its own palette; standard is warmer-to-cooler up the ladder.

Token pathTypeExampleNotes
color/vip/bronzeColor#CD7F32Tier 1
color/vip/silverColor#C0C0C0Tier 2
color/vip/goldColor#FFD700Tier 3
color/vip/platinumColor#E5E4E2Tier 4
color/vip/diamondColor#B9F2FFTier 5 — highest

1.7 · Typography

Family — brand-moded

TokenTypeExampleNotes
typography/family/baseStringInterBody / UI
typography/family/headingStringSoraHeadings
typography/family/displayStringbrand-definedHero / jackpot numbers
typography/family/monoStringJetBrains MonoOdds, stakes, data

Size — global · 4-point (with one sanctioned half-step)

TokenTypepx / remNotes
typography/size/xsNumber12 · 0.75remCaptions, footnotes
typography/size/smNumber14 · 0.875remHalf-step — only sanctioned exception to 4-pt rule
typography/size/mdNumber16 · 1remBody base
typography/size/lgNumber20 · 1.25rem
typography/size/xlNumber24 · 1.5rem
typography/size/2xlNumber32 · 2rem
typography/size/3xlNumber40 · 2.5rem
typography/size/4xlNumber48 · 3remHero / promo

Weight — global

TokenTypeValueNotes
typography/weight/regularNumber400
typography/weight/mediumNumber500
typography/weight/semiboldNumber600
typography/weight/boldNumber700

Line-height · Letter-spacing · Transform — global

TokenTypeValueNotes
typography/line-height/tightNumber1.2Unitless
typography/line-height/normalNumber1.5
typography/line-height/relaxedNumber1.75
typography/letter-spacing/noneNumber0em at consumption
typography/letter-spacing/wideNumber0.04em
typography/letter-spacing/widerNumber0.08Uppercase labels
typography/letter-spacing/widestNumber0.14All-caps display
typography/transform/noneStringnone
typography/transform/uppercaseStringuppercaseAll-caps brands
typography/transform/capitalizeStringcapitalize

1.8 · Spacing — global · strict 4-point

All values are multiples of 4. v1's earlier fractional suggestion (2/6/10/14px) is dropped. Engineers receive rem via the export script.

TokenTypepx / remNotes
spacing/1Number4 · 0.25remFinest gap
spacing/2Number8 · 0.5rem
spacing/3Number12 · 0.75rem
spacing/4Number16 · 1remBase / body
spacing/5Number20 · 1.25rem
spacing/6Number24 · 1.5rem
spacing/7Number28 · 1.75rem
spacing/8Number32 · 2rem
spacing/10Number40 · 2.5rem
spacing/12Number48 · 3rem
spacing/16Number64 · 4rem
spacing/20Number80 · 5remSection gaps

1.9 · Radius — brand-moded · 4-point

Brand shape identity. Each brand can pick sharper or rounder values per token. All multiples of 4; v1's radius/xs: 2px is dropped.

TokenTypepx / remNotes
radius/noneNumber0 · 0Sharp
radius/smNumber4 · 0.25remSubtle curve
radius/mdNumber8 · 0.5remDefault cards
radius/lgNumber12 · 0.75remModals
radius/xlNumber16 · 1remHeroes
radius/2xlNumber24 · 1.5remFeatured cards
radius/fullNumber9999 · px exceptionShip as px, not rem — pill needs absolute cap

1.10 · Opacity new — global

Eliminates hardcoded "X at 96%" in Semantic. Stored as 0–1 decimal.

TokenTypeValueNotes
opacity/0Number0Fully transparent
opacity/10Number0.1Faint tint
opacity/20Number0.2
opacity/40Number0.4Disabled states
opacity/60Number0.6
opacity/80Number0.8
opacity/95Number0.95Near-opaque overlay

1.11 · Breakpoint new — global

Responsive contract shared with engineering. Breakpoints target device classes, not pixel-perfect fidelity.

TokenTypepx / remNotes
breakpoint/xsNumber320 · 20remSmall mobile
breakpoint/smNumber576 · 36remLarge mobile
breakpoint/mdNumber768 · 48remTablet
breakpoint/lgNumber1024 · 64remDesktop
breakpoint/xlNumber1280 · 80remWide desktop
breakpoint/2xlNumber1536 · 96remUltra wide

1.12 · Icon size new — global · 4-point

TokenTypepx / remNotes
icon/size/xsNumber16 · 1remInline with body
icon/size/smNumber20 · 1.25remButtons, inputs
icon/size/mdNumber24 · 1.5remDefault UI
icon/size/lgNumber32 · 2remNav, prominent
icon/size/xlNumber40 · 2.5remHero / feature

1.13 · Z-index promoted — global

Stacking order is a primitive concern, not a component one. Keep gaps so new layers can slot in.

TokenTypeValueNotes
z-index/baseNumber0Default flow
z-index/dropdownNumber800
z-index/headerNumber900Sticky header
z-index/betslipNumber1000Above page, below toasts
z-index/toastNumber1100
z-index/modalNumber1200Above toasts? Debatable
z-index/tooltipNumber1300Always top

1.14 · Motion — global

TokenTypeValueNotes
motion/duration/instantNumber0msNo animation
motion/duration/fastNumber100msMicro-interactions
motion/duration/baseNumber200msDefault
motion/duration/slowNumber350msPage transitions
motion/duration/slowerNumber500msOdds price flash
motion/easing/ease-inStringcubic-bezier(0.4,0,1,1)
motion/easing/ease-outStringcubic-bezier(0,0,0.2,1)
motion/easing/ease-in-outStringcubic-bezier(0.4,0,0.2,1)Default
motion/easing/springStringcubic-bezier(0.34,1.56,0.64,1)Betslip add

1.15 · Shadow — global (glow is brand-adjusted)

TokenTypeValueNotes
shadow/noneStringnone
shadow/xsString0 1px 2px rgba(0,0,0,.06)Subtle lift
shadow/smString0 2px 8px rgba(0,0,0,.10)Cards
shadow/mdString0 4px 16px rgba(0,0,0,.14)Dropdowns
shadow/lgString0 8px 32px rgba(0,0,0,.18)Modals
shadow/overlayString0 16px 64px rgba(0,0,0,.32)Full screen
shadow/glowString0 0 20px {brand.primary} @ 40%Casino tiles

1.16 · Transition new — global · compound

Pre-paired duration + easing. Prevents designer-engineer mismatch from picking duration separately from easing.

TokenTypeValueNotes
transition/microString100ms cubic-bezier(0,0,0.2,1)fast + ease-out
transition/interactiveString200ms cubic-bezier(0.4,0,0.2,1)base + ease-in-out · default
transition/pageString350ms cubic-bezier(0,0,0.2,1)slow + ease-out
transition/springString200ms cubic-bezier(0.34,1.56,0.64,1)Betslip add, toast entrance

1.17 · Layout new — brand-moded · all 4-pt

Brand-varying dimensions that v1 hid as "240 or 280" strings in Semantic. Promoting to primitives makes Figma track them properly.

TokenTypeExample (px · rem)Notes
layout/header-heightNumber64 · 4rem (or 72 · 4.5rem)Both multiples of 4
layout/sidebar-widthNumber240 · 15rem (or 280 · 17.5rem)
layout/input-heightNumber40 · 2.5rem (or 48 · 3rem)
layout/tile-min-widthNumber160 · 10remCasino tile
layout/launcher-top-bar-heightNumber48 · 3remGame wrapper
layout/launcher-bottom-bar-heightNumber56 · 3.5rem
layout/footer-heightNumberbrand-defined
layout/page-max-widthNumber1440 · 90remContent container cap

1.18 · Gradient new — brand-moded · compound

iGaming promos are gradient-heavy. Store full gradients as strings; reference brand-ramp stops rather than literal hex.

TokenTypeExampleNotes
gradient/promo-heroStringlinear-gradient(135deg, brand/primary-700, brand/primary-900)Promo banners
gradient/jackpotStringlinear-gradient(90deg, special/jackpot-gold, #FFA500)Ticker background
gradient/hero-fadeStringlinear-gradient(180deg, transparent, neutral-950)Image overlay
gradient/vip-diamondStringlinear-gradient(135deg, vip/diamond, vip/platinum)Tier badges

Collection 2 · Theme 2 modes · light · dark

Only the tokens that flip direction based on theme. References Primitives (brand-moded) for the actual neutral stops. Every "neutral-X or neutral-Y" from v1 lives here. ~25 tokens · ~50 values.

2.1 · Theme · Surface

TokenTypeLight modeDark modeNotes
theme/surface/pageColorneutral-50neutral-950Root page bg
theme/surface/raisedColorneutral-100neutral-900Cards, panels
theme/surface/elevatedColorneutral-50neutral-850Popovers, floating
theme/surface/sunkenColorneutral-200neutral-950Input fields, inset
theme/surface/inverseColorneutral-900neutral-50Inverted sections
theme/surface/skeletonColorneutral-200neutral-800Loading base
theme/surface/skeleton-shimmerColorneutral-100neutral-700Shimmer highlight
theme/surface/tooltipColorneutral-900whiteInverts vs theme
theme/surface/codeColorneutral-100neutral-950Code / odds blocks

2.2 · Theme · Text

TokenTypeLightDarkNotes
theme/text/primaryColorneutral-900whiteBody
theme/text/secondaryColorneutral-600neutral-300Supporting
theme/text/mutedColorneutral-400neutral-500Hints
theme/text/disabledColorneutral-300neutral-700
theme/text/inverseColorwhiteneutral-900On dark bg (light mode) / on light bg (dark mode)
theme/text/captionColorneutral-500neutral-400
theme/text/heading-colorColorneutral-900white
theme/text/placeholderColorneutral-400neutral-500Inputs

2.3 · Theme · Border & Divide

TokenTypeLightDarkNotes
theme/border/defaultColorneutral-200neutral-700Cards, dividers
theme/border/subtleColorneutral-100neutral-800Faint separators
theme/border/strongColorneutral-400neutral-500Emphasis
theme/border/inverseColorneutral-700neutral-200On inverse surfaces
theme/border/divideColorneutral-100neutral-800HR / list dividers

2.4 · Theme · Overlay

TokenTypeLightDarkNotes
theme/overlay/backdrop-opacityNumber0.50.7Modal backdrop

Collection 3 · Semantic global · no modes

The intent layer. Every component reads from here. References Theme and Primitives — never raw values. ~340 tokens.

3.1 · Surface

TokenTypeAliasNotes
surface/pageColortheme/surface/pageRoot page bg
surface/raisedColortheme/surface/raisedCards, panels
surface/elevatedColortheme/surface/elevatedPopovers
surface/sunkenColortheme/surface/sunkenInputs
surface/overlayColortheme/surface/raised × opacity/95Modals
surface/overlay-tintColorcolor/brand/primary-900 × opacity/80Brand-tinted overlay
surface/inverseColortheme/surface/inverse
surface/headerColorcolor/always/transparent or color/brand/primary-600Brand-choice: 2 brands use transparent
surface/header-scrolledColortheme/surface/raisedAfter scroll
surface/footerColortheme/surface/inverse
surface/sidebarColortheme/surface/raised
surface/bannerColorcolor/brand/primary-600Promo bars
surface/skeletonColortheme/surface/skeleton
surface/skeleton-shimmerColortheme/surface/skeleton-shimmer
surface/scrimColorcolor/always/black × opacity/60Behind modals
surface/tooltipColortheme/surface/tooltip
surface/codeColortheme/surface/code

3.2 · Text & Typography

Text color

TokenTypeAliasNotes
text/primaryColortheme/text/primaryBody
text/secondaryColortheme/text/secondaryLabels
text/mutedColortheme/text/mutedHints
text/disabledColortheme/text/disabled
text/inverseColortheme/text/inverse
text/on-brandColorcolor/always/white or color/brand/primary-50On brand-primary bg
text/on-status-successColorcolor/always/white
text/on-status-warningColorcolor/always/white
text/on-status-errorColorcolor/always/white
text/on-status-infoColorcolor/always/white
text/link/defaultColorcolor/brand/primary-600
text/link/hoverColorcolor/brand/primary-700
text/link/visitedColortext/link/defaultDefault = unchanged; opt-in per brand
text/link/activeColorcolor/brand/primary-800
text/headingColortheme/text/heading-color
text/displayColorcolor/brand/primary-600 or text/primaryHero / jackpot
text/placeholderColortheme/text/placeholder
text/captionColortheme/text/caption

Text · Typography rules — brand-level transforms

TokenTypeDefault → Brand variantNotes
text/body/weightNumbertypography/weight/regular → boldSome brands are all-bold
text/body/transformStringtypography/transform/none → uppercaseSome brands all-caps
text/body/letter-spacingNumberletter-spacing/none → widerPaired with uppercase
text/body/sizeNumbersize/md → size/smSome brands smaller when bold
text/heading/weightNumbertypography/weight/semibold → bold
text/heading/transformStringtypography/transform/none → uppercase
text/heading/letter-spacingNumberletter-spacing/none → wide
text/body/label-weightNumbertypography/weight/medium → boldLabels reuse body stack
text/body/label-transformStringtext/body/transformNo separate label rule

Data typography — odds, scores, balances

TokenTypeAliasNotes
typography/data/familyStringtypography/family/monoOdds, scores, timers, balances
typography/data/weightNumbertypography/weight/medium or bold
typography/data/sizeNumbertypography/size/md
typography/data/tabularStringtnumAlways tabular — prevents shift on odds ticks

3.3 · Border

TokenTypeAliasNotes
border/defaultColortheme/border/defaultCards, inputs
border/subtleColortheme/border/subtle
border/strongColortheme/border/strong
border/focusColorcolor/brand/primary-500Keyboard focus ring
border/focus-offsetColorcolor/always/white or surface/pageOffset ring
border/inverseColortheme/border/inverse
border/brandColorcolor/brand/primary-500Accent borders
border/errorColorcolor/status/error-500
border/successColorcolor/status/success-500
border/width/defaultNumber1 (px)px exception — hairline
border/width/thickNumber2 (px)Focus rings, active
divide/colorColortheme/border/divideHR / list

3.4 · Interactive

Primary actions

TokenTypeAliasNotes
interactive/primary/bg-defaultColorcolor/brand/primary-600
interactive/primary/bg-hoverColorcolor/brand/primary-700
interactive/primary/bg-pressedColorcolor/brand/primary-800
interactive/primary/bg-disabledColorcolor/neutral-200
interactive/primary/text-defaultColorcolor/always/whiteSome brands differ
interactive/primary/text-hoverColorcolor/always/white
interactive/primary/text-disabledColorcolor/neutral-400
interactive/primary/border-defaultColorcolor/always/transparent
interactive/primary/border-hoverColorcolor/brand/primary-800
interactive/primary/icon-colorColorcolor/always/whiteChevron / icon
interactive/primary/cursorStringpointerBrand variation possible

Secondary actions

TokenTypeAliasNotes
interactive/secondary/bg-defaultColorcolor/always/transparent
interactive/secondary/bg-hoverColorcolor/brand/primary-50
interactive/secondary/bg-pressedColorcolor/brand/primary-100
interactive/secondary/bg-disabledColorcolor/always/transparent
interactive/secondary/text-defaultColorcolor/brand/primary-600
interactive/secondary/text-hoverColorcolor/brand/primary-700
interactive/secondary/text-disabledColorcolor/neutral-300
interactive/secondary/border-defaultColorcolor/brand/primary-600
interactive/secondary/border-hoverColorcolor/brand/primary-700
interactive/secondary/icon-colorColorcolor/brand/primary-600
interactive/secondary/cursorStringpointer

Tertiary / Ghost actions

TokenTypeAliasNotes
interactive/tertiary/text-defaultColorcolor/brand/primary-600
interactive/tertiary/text-hoverColorcolor/brand/primary-700
interactive/tertiary/bg-hoverColorcolor/brand/primary-50
interactive/tertiary/icon-colorColorcolor/brand/primary-600

Destructive actions

TokenTypeAliasNotes
interactive/destructive/bg-defaultColorcolor/status/error-600Delete, close account
interactive/destructive/bg-hoverColorcolor/status/error-700
interactive/destructive/text-defaultColorcolor/always/white
interactive/destructive/borderColorcolor/status/error-600

View-all / inline links

TokenTypeAliasNotes
interactive/viewall/textColorcolor/brand/primary-600
interactive/viewall/text-hoverColorcolor/brand/primary-700
interactive/viewall/chevron-colorColorcolor/brand/primary-600
interactive/viewall/chevron-activeColorcolor/brand/secondary-600Some brands differ
interactive/viewall/cursorStringpointer
interactive/viewall/underlineStringnone or underlineBrand variation

3.5 · Status & Feedback

Same shape × 4 statuses (success, warning, error, info). Tables show the success set; other three follow the same pattern with status/* swapped.

Per-status (success example)

TokenTypeAliasNotes
status/success/bgColorcolor/status/success-100Tint
status/success/bg-strongColorcolor/status/success-600Solid badge
status/success/textColorcolor/status/success-800On tint
status/success/text-on-bgColorcolor/always/whiteOn strong
status/success/borderColorcolor/status/success-300
status/success/iconColorcolor/status/success-600
Repeat the same 6 tokens for: status/warning/*, status/error/*, status/info/* — total 24 status tokens.

Toast / Alert

TokenTypeAliasNotes
feedback/toast/success-bgColorstatus/success/bg-strong
feedback/toast/warning-bgColorstatus/warning/bg-strongv2 fix — was missing
feedback/toast/error-bgColorstatus/error/bg-strong
feedback/toast/info-bgColorstatus/info/bg-strongv2 fix — was missing
feedback/toast/textColorcolor/always/white
feedback/toast/shadowStringshadow/lg
feedback/toast/border-radiusNumberradius/md

3.6 · Navigation

Header

TokenTypeAliasNotes
nav/header/bgColorsurface/headerTransparent on 2 brands
nav/header/bg-scrolledColorsurface/header-scrolled
nav/header/textColortext/primary or color/always/white
nav/header/iconColortext/primary or color/always/white
nav/header/border-bottomColorborder/default or transparent
nav/header/logo-bgColortransparent or color/brand/primary
nav/header/heightNumberlayout/header-height→ Primitives

Sidebar

TokenTypeAliasNotes
nav/sidebar/bgColorsurface/sidebar
nav/sidebar/item-textColortext/secondary
nav/sidebar/item-text-activeColorcolor/brand/primary or color/always/white
nav/sidebar/item-bg-defaultColorcolor/always/transparent
nav/sidebar/item-bg-hoverColorcolor/brand/primary-50 or color/neutral-800
nav/sidebar/item-bg-activeColorcolor/brand/primary-100 or color/brand/primary-700
nav/sidebar/item-border-activeColorcolor/brand/primary-500Left accent bar
nav/sidebar/icon-defaultColortext/muted
nav/sidebar/icon-activeColorcolor/brand/primary or color/always/white
nav/sidebar/widthNumberlayout/sidebar-width→ Primitives

Tabs · Bottom nav · Breadcrumb

TokenTypeAliasNotes
nav/tab/text-defaultColortext/muted
nav/tab/text-activeColorcolor/brand/primary-600
nav/tab/bg-defaultColorcolor/always/transparent
nav/tab/bg-activeColorcolor/brand/primary-50
nav/tab/indicator-colorColorcolor/brand/primary-600
nav/tab/indicator-heightNumber2 or 3 (px)Brand variation
nav/tab/border-bottomColorborder/default
nav/bottom/bgColorsurface/raisedMobile
nav/bottom/item-activeColorcolor/brand/primary-600
nav/bottom/item-defaultColortext/muted
nav/breadcrumb/textColortext/muted
nav/breadcrumb/separatorColortext/muted/ > or chevron
nav/breadcrumb/currentColortext/primary

3.7 · Form & Input

TokenTypeAliasNotes
form/input/bgColorsurface/sunken
form/input/bg-focusColorsurface/sunkenOften same
form/input/bg-disabledColorcolor/neutral-100 or color/neutral-900
form/input/textColortext/primary
form/input/placeholderColortext/placeholder
form/input/borderColorborder/default
form/input/border-focusColorborder/focusBrand primary ring
form/input/border-errorColorborder/error
form/input/border-successColorborder/success
form/input/border-radiusNumberradius/sm or radius/mdBrand choice
form/input/heightNumberlayout/input-height→ Primitives
form/label/textColortext/secondary
form/label/requiredColorcolor/status/error-500* marker
form/helper/textColortext/muted
form/error/textColorstatus/error/text
form/error/iconColorstatus/error/icon
form/select/bgColorsurface/sunken
form/select/chevronColortext/muted
form/checkbox/bg-checkedColorcolor/brand/primary-600
form/checkbox/borderColorborder/strong
form/checkbox/checkmarkColorcolor/always/white
form/radio/bg-checkedColorcolor/brand/primary-600
form/toggle/bg-offColorcolor/neutral-300
form/toggle/bg-onColorcolor/brand/primary-600
form/toggle/thumbColorcolor/always/white
form/slider/trackColorcolor/neutral-200
form/slider/fillColorcolor/brand/primary-500
form/slider/thumbColorcolor/always/white
form/slider/thumb-borderColorcolor/brand/primary-600

3.8 · Overlay

TokenTypeAliasNotes
overlay/modal/bgColorsurface/overlay
overlay/modal/borderColorborder/default
overlay/modal/border-radiusNumberradius/lg
overlay/modal/shadowStringshadow/overlay
overlay/modal/backdropColorsurface/scrim
overlay/modal/backdrop-opacityNumbertheme/overlay/backdrop-opacity
overlay/drawer/bgColorsurface/overlay
overlay/drawer/overlay-bgColorsurface/scrim
overlay/drawer/header-bgColorsurface/raised
overlay/tooltip/bgColorsurface/tooltip
overlay/tooltip/textColortext/inverse or text/primary
overlay/tooltip/border-radiusNumberradius/sm
overlay/tooltip/shadowStringshadow/md
overlay/popover/bgColorsurface/elevated
overlay/popover/borderColorborder/default
overlay/popover/shadowStringshadow/lg
overlay/popover/border-radiusNumberradius/md
overlay/sheet/bgColorsurface/overlayMobile bottom sheet
overlay/sheet/handleColorcolor/neutral-300Drag handle

3.9 · iGaming · Odds & Betting

The most volatile UI surface in sportsbook. States must be airtight.

TokenTypeAliasNotes
gaming/odds/default/bgColorsurface/raisedUnselected
gaming/odds/default/textColortext/primary
gaming/odds/default/borderColorborder/default
gaming/odds/hover/bgColorcolor/brand/primary-50
gaming/odds/hover/textColorcolor/brand/primary-700
gaming/odds/hover/borderColorcolor/brand/primary-300
gaming/odds/selected/bgColorcolor/brand/primary-600Added to betslip
gaming/odds/selected/textColorcolor/always/white
gaming/odds/selected/borderColorcolor/brand/primary-700
gaming/odds/suspended/bgColorcolor/neutral-100 or color/neutral-800Market suspended
gaming/odds/suspended/textColortext/disabled
gaming/odds/suspended/borderColorborder/subtle
gaming/odds/suspended/iconColortext/mutedLock icon
gaming/odds/boosted/bgColorcolor/status/warning-100Price boost
gaming/odds/boosted/textColorcolor/status/warning-800
gaming/odds/boosted/borderColorcolor/status/warning-400
gaming/odds/boosted/badge-bgColorcolor/status/warning-500
gaming/odds/price-up/flashColorcolor/status/success-200
gaming/odds/price-down/flashColorcolor/status/error-200
gaming/odds/price-up/arrowColorcolor/status/success-600
gaming/odds/price-down/arrowColorcolor/status/error-600
gaming/odds/border-radiusNumberradius/sm or radius/md
gaming/odds/font-familyStringtypography/family/mono
gaming/odds/font-weightNumbertypography/weight/bold

3.10 · iGaming · Live & Streaming

TokenTypeAliasNotes
gaming/live/indicator-colorColorcolor/status/error-500Pulse dot
gaming/live/indicator-bgColorcolor/status/error-100Pulse ring
gaming/live/label-bgColorcolor/status/error-600LIVE badge
gaming/live/label-textColorcolor/always/white
gaming/live/label-border-radiusNumberradius/sm
gaming/live/score/home-bgColorcolor/brand/primary-50
gaming/live/score/away-bgColorsurface/raised
gaming/live/score/textColortext/primary
gaming/live/score/dividerColorborder/default
gaming/live/timer/textColortext/secondaryMatch clock
gaming/live/pitch/bgColorcolor/special/pitch-greenPitch diagram
gaming/live/streaming/bgColorcolor/always/blackVideo player bg
gaming/live/streaming/controlsColorcolor/always/white
gaming/live/streaming/icon-colorColorcolor/brand/primary-500
gaming/live/in-play-label/bgColorcolor/status/success-600
gaming/live/in-play-label/textColorcolor/always/white

3.11 · iGaming · Betslip

The revenue-critical surface. stake-input uses form/input/* directly; CTA uses interactive/primary/*.

TokenTypeAliasNotes
gaming/betslip/container-bgColorsurface/overlay
gaming/betslip/container-borderColorborder/default
gaming/betslip/header-bgColorcolor/brand/primary-700iGaming-specific
gaming/betslip/header-textColorcolor/always/white
gaming/betslip/header-count-bgColorcolor/always/whiteSelection count
gaming/betslip/header-count-textColorcolor/brand/primary-700
gaming/betslip/selection-bgColorsurface/raisedEach bet row
gaming/betslip/selection-borderColorborder/default
gaming/betslip/selection-textColortext/primary
gaming/betslip/selection-oddsColorcolor/brand/primary-600
gaming/betslip/remove-iconColortext/mutedKept separate from destructive
gaming/betslip/remove-hoverColorcolor/status/error-500
gaming/betslip/est-returns-labelColortext/muted
gaming/betslip/est-returns-valueColortext/primary
gaming/betslip/keyboard-bgColorsurface/sunkenMobile numeric
gaming/betslip/keyboard-key-bgColorsurface/raised
gaming/betslip/keyboard-key-textColortext/primary
gaming/betslip/empty-textColortext/muted
gaming/betslip/empty-iconColortext/muted
gaming/betslip/price-change-bgColorcolor/status/warning-50Odds changed banner
gaming/betslip/price-change-textColorcolor/status/warning-800
gaming/betslip/each-way-textColortext/secondaryE/W toggle

3.12 · iGaming · Results & History

TokenTypeAliasNotes
gaming/result/win/textColorcolor/status/success-800
gaming/result/win/borderColorcolor/status/success-300
gaming/result/win/iconColorcolor/status/success-600Tick / trophy
gaming/result/loss/textColorcolor/status/error-800
gaming/result/loss/borderColorcolor/status/error-300
gaming/result/loss/iconColorcolor/status/error-600X
gaming/result/void/textColortext/muted
gaming/result/void/borderColorborder/default
gaming/result/pending/textColorcolor/status/info-800
gaming/result/pending/iconColorcolor/status/info-600Clock
gaming/result/cashout-full/textColorcolor/status/warning-800v2 split
gaming/result/cashout-full/cta-bgColorcolor/status/warning-500v2 split
gaming/result/cashout-full/cta-textColorcolor/always/whitev2
gaming/result/cashout-partial/textColorcolor/status/warning-800v2 split
gaming/result/cashout-partial/cta-bgColorcolor/status/warning-400Distinct from full
gaming/result/cashout-partial/cta-textColorcolor/always/whitev2
gaming/result/stake-textColortext/muted
gaming/result/returns-textColortext/primary

3.13 · iGaming · Casino Surfaces

TokenTypeAliasNotes
gaming/casino/tile/bgColorsurface/raised
gaming/casino/tile/overlay-bgColorcolor/always/black × opacity/60Hover overlay
gaming/casino/tile/overlay-textColorcolor/always/white
gaming/casino/tile/border-radiusNumberradius/md or radius/lg
gaming/casino/tile/borderColorborder/default
gaming/casino/tile/shadowStringshadow/sm
gaming/casino/tile/badge-new-bgColorcolor/status/info-600
gaming/casino/tile/badge-new-textColorcolor/always/white
gaming/casino/tile/badge-hot-bgColorcolor/status/error-600
gaming/casino/tile/badge-hot-textColorcolor/always/white
gaming/casino/jackpot/bgColorcolor/always/transparentTicker
gaming/casino/jackpot/font-familyStringtypography/family/display
gaming/casino/jackpot/font-weightNumbertypography/weight/bold
gaming/casino/rtp/textColortext/mutedRTP % label
gaming/casino/rtp/valueColorcolor/status/success-600High RTP
gaming/casino/provider/label-bgColorcolor/neutral-100 or color/neutral-800
gaming/casino/provider/label-textColortext/muted
gaming/casino/exclusive/bgColorcolor/brand/tertiary-600
gaming/casino/exclusive/textColorcolor/always/white
gaming/casino/favourite/iconColorcolor/status/warning-500Heart / star
gaming/casino/lobby/category-textColortext/primary
gaming/casino/lobby/see-all-textColorinteractive/viewall/text→ interactive tokens
gaming/casino/demo/badge-bgColorcolor/neutral-700
gaming/casino/demo/badge-textColorcolor/always/white

3.14 · iGaming · Promotions

TokenTypeAliasNotes
gaming/promo/banner/bgColorcolor/brand/primary-700Or gradient/promo-hero
gaming/promo/banner/textColorcolor/always/white
gaming/promo/banner/cta-bgColorcolor/always/white
gaming/promo/banner/cta-textColorcolor/brand/primary-700
gaming/promo/badge/bgColorcolor/brand/secondary-500Small offer
gaming/promo/badge/textColorcolor/always/white
gaming/promo/badge/border-radiusNumberradius/fullPill
gaming/promo/highlightColorcolor/brand/tertiary-500
gaming/promo/countdown/bgColorsurface/raised
gaming/promo/countdown/textColortext/primary
gaming/promo/countdown/accentColorcolor/brand/primary-600
gaming/promo/card/bgColorsurface/raised
gaming/promo/card/borderColorborder/default
gaming/promo/card/border-radiusNumberradius/lg
gaming/promo/tag/bonus-bgColorcolor/status/success-100
gaming/promo/tag/bonus-textColorcolor/status/success-800
gaming/promo/tag/fs-bgColorcolor/brand/secondary-100Free spins
gaming/promo/tag/fs-textColorcolor/brand/secondary-800

3.15 · iGaming · Responsible Gambling

Regulator-gated. Every token here aliases through reg/* from Collection 4 — never directly to Primitives. Guarantees jurisdiction overrides take effect.

TokenTypeAliasNotes
gaming/rg/warning/bgColorreg/rg/warning/bg→ Regulatory
gaming/rg/warning/textColorreg/rg/warning/text
gaming/rg/warning/borderColorreg/rg/warning/border
gaming/rg/warning/iconColorreg/rg/warning/icon
gaming/rg/limit/bar-trackColorreg/rg/limit/bar-track
gaming/rg/limit/bar-fillColorreg/rg/limit/bar-fill
gaming/rg/limit/bar-fill-nearColorreg/rg/limit/bar-fill-near
gaming/rg/limit/bar-fill-atColorreg/rg/limit/bar-fill-at
gaming/rg/limit/textColortext/secondary
gaming/rg/reality-check/bgColorsurface/overlay
gaming/rg/reality-check/textColortext/primary
gaming/rg/reality-check/ctaColorinteractive/primary/bg-default
gaming/rg/self-excl/bgColorreg/rg/self-excl/bg
gaming/rg/self-excl/textColorreg/rg/self-excl/text
gaming/rg/self-excl/cta-bgColorreg/rg/self-excl/cta-bg
gaming/rg/self-excl/program-nameStringreg/rg/self-excl/program-nameSpelpaus / ROFUS / Cruks / ConnexOntario
gaming/rg/session-timer/textColortext/muted
gaming/rg/logo/colorColorreg/logo/color
gaming/rg/logo/hoverColorreg/logo/hover
gaming/rg/age-gate/min-ageNumberreg/age-gate/min-age18 / 19 (ON) / 24 (NL ads)

3.16 · iGaming · Payments & KYC

TokenTypeAliasNotes
gaming/payment/method-card/bgColorsurface/raised
gaming/payment/method-card/borderColorborder/default
gaming/payment/method-card/selectedColorcolor/brand/primary-100
gaming/payment/method-card/border-selectedColorborder/focus
gaming/payment/amount/preset-bgColorsurface/sunken
gaming/payment/amount/preset-bg-selColorcolor/brand/primary-600
gaming/payment/amount/preset-textColortext/primary
gaming/payment/amount/preset-text-selColorcolor/always/white
gaming/payment/progress/trackColorcolor/neutral-200
gaming/payment/progress/fillColorcolor/brand/primary-600
gaming/payment/progress/step-doneColorcolor/status/success-600
gaming/payment/progress/step-activeColorcolor/brand/primary-600
gaming/payment/progress/step-pendingColorcolor/neutral-300
gaming/payment/kyc/pending-bgColorcolor/status/warning-50
gaming/payment/kyc/pending-textColorcolor/status/warning-800
gaming/payment/kyc/verified-bgColorcolor/status/success-50
gaming/payment/kyc/verified-textColorcolor/status/success-800
gaming/payment/kyc/rejected-bgColorcolor/status/error-50
gaming/payment/kyc/rejected-textColorcolor/status/error-800
gaming/payment/kyc/upload-borderColorborder/default
gaming/payment/kyc/upload-bgColorsurface/sunken
gaming/payment/kyc/upload-active-borderColorborder/focusDrag-over
gaming/payment/balance/textColortext/primary
gaming/payment/balance/positiveColorcolor/status/success-600
gaming/payment/balance/currencyColortext/muted

3.17 · Sportsbook · Bet Builder new

Same-game multi (SGM) / Bet Builder surface. Legs have correlation warnings absent from standard odds.

TokenTypeAliasNotes
sportsbook/bet-builder/leg-default/bgColorsurface/raised
sportsbook/bet-builder/leg-default/borderColorborder/default
sportsbook/bet-builder/leg-default/textColortext/primary
sportsbook/bet-builder/leg-selected/bgColorcolor/brand/primary-100
sportsbook/bet-builder/leg-selected/borderColorcolor/brand/primary-500
sportsbook/bet-builder/leg-selected/textColorcolor/brand/primary-800
sportsbook/bet-builder/correlation-warning/bgColorcolor/status/warning-50Mutually-exclusive selections
sportsbook/bet-builder/correlation-warning/textColorcolor/status/warning-800
sportsbook/bet-builder/correlation-warning/iconColorcolor/status/warning-600
sportsbook/bet-builder/price-liveColorcolor/brand/primary-600Live computed price

3.18 · Sportsbook · Accumulator new

TokenTypeAliasNotes
sportsbook/accumulator/row-bgColorsurface/raised
sportsbook/accumulator/row-borderColorborder/subtle
sportsbook/accumulator/boosted-bgColorcolor/status/warning-100Boosted acca
sportsbook/accumulator/boosted-textColorcolor/status/warning-800
sportsbook/accumulator/multiplier-badge-bgColorcolor/brand/tertiary-500
sportsbook/accumulator/multiplier-badge-textColorcolor/always/white
sportsbook/accumulator/total-odds-textColortext/primary

3.19 · Sportsbook · Stats & Form new

W/D/L form guide colours. Distinct from status/success/error — sports form isn't a success state, and needs to work in strings of letters (W-W-D-L-W).

TokenTypeAliasNotes
sportsbook/stats/form/winColorcolor/status/success-500W indicator
sportsbook/stats/form/win-bgColorcolor/status/success-100
sportsbook/stats/form/drawColorcolor/neutral-500D — neutral, not status
sportsbook/stats/form/draw-bgColorcolor/neutral-200
sportsbook/stats/form/lossColorcolor/status/error-500L
sportsbook/stats/form/loss-bgColorcolor/status/error-100
sportsbook/stats/momentum/upColorcolor/status/success-600Trend indicator
sportsbook/stats/momentum/downColorcolor/status/error-600
sportsbook/stats/momentum/flatColorcolor/neutral-500
sportsbook/stats/h2h/headingColortext/headingH2H section
sportsbook/stats/market-group/header-bgColorsurface/sunkenMarket Winner / O/U / BTTS
sportsbook/stats/market-group/header-textColortext/secondary
sportsbook/stats/market-group/collapsed-indicatorColortext/mutedChevron

3.20 · Casino · Live Dealer new

TokenTypeAliasNotes
casino/live-dealer/studio-chrome/bgColorcolor/always/blackVideo frame
casino/live-dealer/studio-chrome/textColorcolor/always/white
casino/live-dealer/dealer-name/textColorcolor/always/white
casino/live-dealer/dealer-name/bgColorcolor/always/black × opacity/60Overlay on video
casino/live-dealer/seat-count/textColortext/secondary"3 / 7 seats"
casino/live-dealer/seat-count/iconColortext/muted
casino/live-dealer/seat/fullColorcolor/status/error-500Table full
casino/live-dealer/seat/availableColorcolor/status/success-500
casino/live-dealer/min-max-chips/bgColorsurface/sunkenBet range display
casino/live-dealer/min-max-chips/textColortext/primary
casino/live-dealer/countdown/textColorcolor/always/whiteBetween-round timer
casino/live-dealer/countdown/bgColorcolor/status/error-600Urgent red
casino/live-dealer/chat/bgColorsurface/overlayDealer chat
casino/live-dealer/chat/bubble-mineColorcolor/brand/primary-600
casino/live-dealer/chat/bubble-dealerColorcolor/neutral-700

3.21 · Casino · Jackpot Tiers new

v1 had a single jackpot-gold primitive — insufficient. v2 splits into four tiers with distinct styling per tier.

TokenTypeAliasNotes
casino/jackpot/mini/bgColorcolor/neutral-700Subtle
casino/jackpot/mini/textColorcolor/always/white
casino/jackpot/mini/tickerColorcolor/neutral-300
casino/jackpot/minor/bgColorcolor/brand/tertiary-600
casino/jackpot/minor/textColorcolor/always/white
casino/jackpot/minor/tickerColorcolor/brand/tertiary-200
casino/jackpot/major/bgColorcolor/brand/secondary-600
casino/jackpot/major/textColorcolor/always/white
casino/jackpot/major/tickerColorcolor/brand/secondary-200
casino/jackpot/grand/bgColorgradient/jackpotGradient — top tier
casino/jackpot/grand/textColorcolor/always/blackAgainst gold
casino/jackpot/grand/tickerColorcolor/special/jackpot-gold

3.22 · Casino · Tournament & Leaderboard new

TokenTypeAliasNotes
casino/tournament/leaderboard-bgColorsurface/raised
casino/tournament/row-bgColorsurface/raised
casino/tournament/row-bg-mineColorcolor/brand/primary-50Highlight current user
casino/tournament/rank-1Colorcolor/vip/gold🥇
casino/tournament/rank-2Colorcolor/vip/silver🥈
casino/tournament/rank-3Colorcolor/vip/bronze🥉
casino/tournament/rank-top-10Colorcolor/brand/primary-600
casino/tournament/rank-defaultColortext/secondary
casino/tournament/prize-textColorcolor/status/success-700
casino/tournament/countdown-textColorcolor/status/warning-700

3.23 · VIP / Loyalty Tiers new

Same shape × 5 tiers. Shows bronze; repeat for silver/gold/platinum/diamond swapping color/vip/*.

TokenTypeAliasNotes
vip/tier/bronze/bgColorcolor/vip/bronze × opacity/20Badge bg
vip/tier/bronze/textColorcolor/vip/bronze
vip/tier/bronze/borderColorcolor/vip/bronze
vip/tier/bronze/iconColorcolor/vip/bronze
Repeat 4 tokens for: vip/tier/silver/*, vip/tier/gold/*, vip/tier/platinum/*, vip/tier/diamond/* — total 20 VIP tokens.
vip/progress/trackColorcolor/neutral-200Next-tier progress bar
vip/progress/fillColorcolor/brand/primary-600
vip/points/textColorcolor/brand/primary-700Loyalty points display

3.24 · Launcher chrome new

The wrapper around 3rd-party game iframes. Players spend most of their session in here — it's where brand identity lives while the game is running.

Top bar

TokenTypeAliasNotes
launcher/top-bar/bgColorsurface/raised
launcher/top-bar/textColortext/primaryGame title
launcher/top-bar/close-iconColortext/secondary
launcher/top-bar/close-icon-hoverColorcolor/status/error-500
launcher/top-bar/balance-textColortext/primary
launcher/top-bar/balance-currencyColortext/muted
launcher/top-bar/heightNumberlayout/launcher-top-bar-height→ Primitives

Bottom bar

TokenTypeAliasNotes
launcher/bottom-bar/bgColorsurface/raised
launcher/bottom-bar/deposit-shortcut-bgColorinteractive/primary/bg-default
launcher/bottom-bar/deposit-shortcut-textColorinteractive/primary/text-default
launcher/bottom-bar/favorite-iconColortext/muted
launcher/bottom-bar/favorite-icon-activeColorcolor/status/warning-500Heart / star
launcher/bottom-bar/session-timer-textColortext/mutedRG
launcher/bottom-bar/fullscreen-toggleColortext/secondary
launcher/bottom-bar/heightNumberlayout/launcher-bottom-bar-height

States

TokenTypeAliasNotes
launcher/loading/bgColortheme/surface/skeletonGame booting
launcher/loading/shimmerColortheme/surface/skeleton-shimmer
launcher/loading/spinnerColorcolor/brand/primary-500
launcher/error-state/bgColorcolor/status/error-50Game failed to load
launcher/error-state/textColorcolor/status/error-800
launcher/error-state/retry-ctaColorinteractive/primary/bg-default
launcher/frame-borderColorborder/defaultAround iframe

Live-casino specific

TokenTypeAliasNotes
launcher/live-casino/mute-iconColorcolor/always/whiteOverlay on video
launcher/live-casino/mute-icon-activeColorcolor/status/error-400Muted state
launcher/live-casino/chat-iconColorcolor/always/white
launcher/live-casino/chat-badge-bgColorcolor/status/error-500Unread count
launcher/live-casino/chat-badge-textColorcolor/always/white

3.25 · Platform surfaces new

Notifications / inbox

TokenTypeAliasNotes
platform/notification/inbox-bgColorsurface/elevated
platform/notification/item-bgColorsurface/raised
platform/notification/item-bg-unreadColorcolor/brand/primary-50
platform/notification/item-textColortext/primary
platform/notification/item-metaColortext/mutedTimestamp
platform/notification/badge-count-bgColorcolor/status/error-500Header bell dot
platform/notification/badge-count-textColorcolor/always/white
platform/notification/type-promoColorcolor/brand/secondary-500
platform/notification/type-accountColorcolor/status/info-500
platform/notification/type-rgColorcolor/status/warning-500

Chat / support

TokenTypeAliasNotes
platform/chat/bubble-mine-bgColorcolor/brand/primary-600
platform/chat/bubble-mine-textColorcolor/always/white
platform/chat/bubble-agent-bgColorsurface/raised
platform/chat/bubble-agent-textColortext/primary
platform/chat/agent-avatar-bgColorcolor/brand/primary-100
platform/chat/widget-trigger-bgColorcolor/brand/primary-600Floating button
platform/chat/unread-indicatorColorcolor/status/error-500

Geo-block

Wrong-jurisdiction page. A legal incident if shown unclearly. Tokenize.

TokenTypeAliasNotes
platform/geo-block/bgColorsurface/page
platform/geo-block/textColortext/primary
platform/geo-block/iconColorcolor/status/error-500
platform/geo-block/cta-bgColorinteractive/secondary/bg-defaultContact / legal info

Receipt (emailed / printed)

TokenTypeAliasNotes
platform/receipt/bgColorcolor/always/whiteAlways light for print
platform/receipt/header-bgColorcolor/brand/primary-700
platform/receipt/header-textColorcolor/always/white
platform/receipt/dividerColorcolor/neutral-300
platform/receipt/total-textColorcolor/neutral-900Always dark for print
platform/receipt/stake-textColorcolor/neutral-600

3.26 · Icon v3 — three-way split, informed by the brand audit

Three distinct icon roles that 4 of 9 audited brands diverge (getlucky, reviant-A, reviant-B, 888.nl). color.icon.action is never auto-aliased to color.primary — brands that reserve the primary for CTAs (mobilespin, 888.nl) must be free to tint icons independently.

TokenTypeDefault aliasNotes
color/icon/contentColorcolor/brand/primary-600 or text/primaryIllustrative content icons (hero illustrations, category art)
color/icon/descriptiveColorcolor/brand/primary-600 or text/secondarySmall icons that label menu rows
color/icon/actionColorcolor/brand/primary-600 or text/mutedChevrons, arrows, carets — brands can diverge from primary
color/icon/nav-selectedColorcolor/brand/primary-600Bottom-nav selected icon — reviant-A splits this from nav label
color/icon/disabledColortext/disabledAny icon in disabled state
color/icon/inverseColortext/inverseIcons on inverse surfaces

3.27 · Pill v3 — new semantic family (was borrowed from Sub Menu in v2)

Dedicated role family for Pill / Filter Pill / Navigation Pill / Small Pill / segmented pill component-sets. Replaces the accidental Sub Menu/* borrowing that caused cross-brand pill drift in v2.

TokenTypeDefault aliasNotes
pill/surfaceColorcolor/brand/primary-100 or color/neutral-100Default state bg
pill/on-surfaceColorcolor/brand/primary-800 or text/primaryDefault label + icon
pill/borderColorcolor/always/transparent or color/brand/primary-500Outline-style brands (reviant-B) use visible stroke
pill/surface-hoverColorcolor/brand/primary-200Hover state
pill/surface-selectedColorcolor/brand/primary-600Selected / active
pill/on-surface-selectedColorcolor/always/whiteLabel on selected
pill/border-selectedColorcolor/brand/primary-700Stroked selected
pill/surface-disabledColorcolor/neutral-100
pill/on-surface-disabledColortext/disabled
pill/padding-xNumberspacing/3 · 12pxHorizontal padding
pill/padding-yNumberspacing/1 · 4pxVertical padding
pill/gapNumberspacing/1 · 4pxGap between icon + label

3.28 · Badge v3 — formalises the single Main/Badge primitive from v2

Extends v2's lone Main/Badge primitive into a full family so brands can set on-surface and border independently.

TokenTypeDefault aliasNotes
badge/surfaceColorcolor/brand/secondary-500 or color/status/error-500Was Main/Badge in v2
badge/on-surfaceColorcolor/always/whiteLabel / count
badge/borderColorcolor/always/transparentOptional stroke
badge/min-sizeNumber16Smallest dot indicator
badge/dot-surfaceColorcolor/status/error-500Unread-dot variant (no count)

3.29 · Banner v3 — evolved from Banner/Background + Banner/Stroke (v2)

Completes the banner family with banner.on-surface and banner.overlay so hero cards stop using inline fills.

TokenTypeDefault aliasNotes
banner/surfaceColorcolor/brand/primary-700evolved was Banner/Background
banner/strokeColorcolor/always/transparentevolved was Banner/Stroke; reviant-B sets to #ff4655
banner/on-surfaceColorcolor/always/whiteBanner text + icon
banner/overlayColorcolor/always/black × opacity/40Gradient / scrim over hero imagery
banner/accentColorcolor/brand/secondary-500Secondary brand accent within banner

3.30 · Radius roles v3 — semantic mapping on top of radius primitives

Role-level radius tokens that map intent ("this is a modal") to a primitive ("radius/lg"). v3 adds radius.modal and radius.badge so brands can tune modal/badge corners independently from cards.

TokenTypeDefault aliasNotes
radius/cardNumberradius/md or radius/lgevolved role-layer over primitive
radius/inputNumberradius/sm or radius/mdevolved role-layer
radius/pillNumberradius/fullevolved role-layer
radius/badgeNumberradius/sm · 4pxv3 independent from card
radius/modalNumberradius/xl · 16pxv3 independent from card (reviant-B 0)
radius/navigationNumberradius/none · 0evolved reviant-A sets to 12
radius/focus-ringNumberradius/smFocus ring around interactive

Note on CTA radius: in v3 cta.radius is resolved via Figma component variants (form / card / wallet / landing), not a semantic role alias. See Collection 5 cta.*.

Collection 4 · Regulatory 7 modes · default · SE · DK · MT · ON · NL · PL

Narrow override layer. Only tokens that regulators actually constrain. Sits above Semantic in the alias chain. Every token has 7 values (one per mode); the table shows example defaults — jurisdiction-specific values are populated by the DS lead in consultation with legal/compliance.

4.1 · Regulatory tokens

TokenTypeDefault valueJurisdiction notes
reg/rg/warning/bgColorcolor/status/warning-50NL: higher contrast required
reg/rg/warning/textColorcolor/status/warning-900NL & SE: WCAG AAA required
reg/rg/warning/borderColorcolor/status/warning-400
reg/rg/warning/iconColorcolor/status/warning-600
reg/rg/warning/min-size-hintNumber14 (px)Minimum font size for warning text
reg/rg/self-excl/bgColorcolor/status/error-50
reg/rg/self-excl/textColorcolor/status/error-900
reg/rg/self-excl/cta-bgColorcolor/status/error-600
reg/rg/self-excl/program-nameString"Self-exclusion"SE: Spelpaus · DK: ROFUS · NL: Cruks · ON: ConnexOntario · MT: Gaming-related harm support
reg/rg/self-excl/program-urlStringbrand-definedDirect link to register
reg/rg/limit/bar-trackColorcolor/neutral-200Deposit limit progress
reg/rg/limit/bar-fillColorcolor/status/success-500
reg/rg/limit/bar-fill-nearColorcolor/status/warning-500Near limit
reg/rg/limit/bar-fill-atColorcolor/status/error-500At / over limit
reg/bonus-disclaimer/textColortext/secondarySE: strict "bonus" language rules
reg/bonus-disclaimer/min-contrast-hintString"AA"NL: "AAA"
reg/bonus-disclaimer/min-size-hintNumber12 (px)Regulator minimum
reg/logo/colorColortext/mutedGamCare / Stödlinjen / Cruks / MGA seal / Spillemyndigheden seal / ConnexOntario
reg/logo/hoverColortext/primary
reg/logo/min-size-hintNumber24 (px)Per regulator spec
reg/age-gate/min-ageNumber18ON: 19 · NL ads: 24
reg/age-gate/textString"18+""19+" (ON) · "24+ in advertising" (NL)

Per-jurisdiction reference

ModeRegulatorSelf-exclusionMin ageKey constraint
default—generic18Fallback
SESpelinspektionenSpelpaus18Strict bonus language · deposit-limit mandatory
DKSpillemyndighedenROFUS18Seal placement · mandatory RG info
MTMGAMGA support18MGA seal visibility · play reminder
ONiGO / AGCOConnexOntario19No celebrity ads · strict promo restrictions
NLKansspelautoriteit (KSA)Cruks18 · 24+ for adsKOA compliance · deposit-limit mandatory
PLMinisterstwo Finansów—18State monopoly on sports betting · restricted game types

Collection 5 · Component global · ~35 tokens expanded in v3

In v2 this was a last-resort bucket (<10 tokens). v3 expands it into proper alias packs that match the component masters in the WEB Design System. Every pack aliases through Semantic tokens — brand-mode changes on Collection 1 cascade here automatically. Marketing designers never edit this collection; they change brand-mode values on Collection 1 and see the result.

5.1 · menu-row.* v3 — Menu Item master alias pack

Binds the Menu Item master shape-by-shape. Defaults align icon-and-action-icon; brand modes can split them (lyllo, getlucky, reviant-A). Answers the "icon ≠ chevron" edge case from the brand audit.

TokenTypeDefault aliasSplits in
menu-row/iconColorcolor/icon/descriptivelyllo · getlucky · reviant-A
menu-row/action-iconColorcolor/icon/actionlyllo · getlucky · reviant-A
menu-row/labelColortext/primary—
menu-row/label-mutedColortext/secondarySupporting label
menu-row/surfaceColorsurface/raisedcomeon inverts on selection
menu-row/surface-selectedColorcolor/brand/primary-50 or color/brand/primary-700comeon
menu-row/surface-hoverColorcolor/brand/primary-50
menu-row/dividerColordivide/color
menu-row/padding-yNumberspacing/3 · 12px

5.2 · view-all.* v3 — "View all" / inline-link alias pair

Addresses the "label colour ≠ chevron colour" case. Evolves v2's interactive/viewall/* into an explicit label/icon split so the divergence is discoverable in brand-mode editing.

TokenTypeDefault aliasSplits in
view-all/labelColortext/link/defaultlyllo orange · getlucky pink
view-all/label-hoverColortext/link/hover
view-all/iconColorcolor/icon/actionlyllo pink · getlucky orange
view-all/icon-hoverColorcolor/icon/action
view-all/underlineStringnone or underlineBrand variation
view-all/gapNumberspacing/1 · 4pxLabel-to-icon gap

5.3 · nav.* v3 — Bottom-navbar alias pack, with icon/text split

Every nav state is two tokens: one for the icon, one for the text, defaulting equal. reviant-A splits selected-icon (red) from selected-text (dark); all other brands keep them matched.

TokenTypeDefault aliasSplits in
nav/backgroundColorsurface/raised or color/always/blackBrand choice
nav/default-iconColortext/muted—
nav/default-textColortext/muted—
nav/selected-iconColorcolor/icon/nav-selectedreviant-A diverges from text
nav/selected-textColornav/selected-iconreviant-A: text/primary while icon is red
nav/hover-iconColortext/primary
nav/disabled-iconColortext/disabled
nav/radiusNumberradius/navigationreviant-A: 12
nav/shadowStringshadow/nonereviant-A: shadow/sm (elevated)
nav/heightNumber56 · 3.5rem
nav/safe-area-bottomNumberenv(safe-area-inset-bottom)iOS home indicator

5.4 · header.* v3 — Lobby Header master alias pack

Formalises the Lobby Header/* primitives into a component-layer namespace. Prevents shapes inside the header from ever reaching for color.primary directly — crucial for snabbare's blue-header / green-brand identity.

TokenTypeDefault aliasNotes
header/surfaceColorsurface/headersnabbare blue · comeon = page
header/surface-1Colorcolor/brand/primary-600Elevated surface (pill-in-header)
header/surface-2Colorcolor/brand/primary-700Further-elevated surface
header/accent-surfaceColorcolor/brand/primary-500Primary accent inside header
header/secondary-surfaceColorcolor/brand/secondary-500Secondary accent
header/on-surfaceColornav/header/textDefault text/icon
header/on-accentColorcolor/always/whiteText on accent
header/active-selectedColorcolor/brand/primary-500Active-state indicator (tab underline, chip)
header/scrolled-surfaceColorsurface/header-scrolledAfter scroll
header/logo-bgColorcolor/always/transparent
header/ios-barColorcolor/always/black or color/always/whiteiOS status bar tint
header/heightNumberlayout/header-height
header/border-bottomColorborder/default or transparent

5.5 · cta.* with context variants v3 — Button / CTA master alias pack + 4 component variants

The CTA component has a "Context" variant property with values form · card · wallet · landing. Each variant binds cta.radius to a different Primitive-backed role, so the same CTA component picks the right radius based on where the designer drops it. This is a Figma component-variant axis, not a mode axis.

TokenTypeDefault aliasNotes
cta/primary/surfaceColorinteractive/primary/bg-default
cta/primary/surface-hoverColorinteractive/primary/bg-hover
cta/primary/surface-pressedColorinteractive/primary/bg-pressed
cta/primary/surface-disabledColorinteractive/primary/bg-disabled
cta/primary/on-surfaceColorinteractive/primary/text-defaultmobilespin: yellow on red
cta/primary/iconColorcta/primary/on-surfaceCan split from label
cta/secondary/surfaceColorinteractive/secondary/bg-default
cta/secondary/on-surfaceColorinteractive/secondary/text-default
cta/secondary/borderColorinteractive/secondary/border-default
cta/tertiary/surfaceColorcolor/always/transparentOutline / ghost
cta/tertiary/on-surfaceColorinteractive/tertiary/text-default
cta/tertiary/borderColorcolor/brand/primary-600
cta/destructive/surfaceColorinteractive/destructive/bg-defaultDelete / close account
cta/destructive/on-surfaceColorinteractive/destructive/text-default
cta/labelColorcta/primary/on-surfaceSplit when CTA has leading icon
cta/leading-iconColorcta/label
cta/trailing-iconColorcta/labelArrow / chevron
cta/heightNumberlayout/input-heightMatches input when in forms
cta/padding-xNumberspacing/4 · 16px
cta/gapNumberspacing/2 · 8pxIcon ↔ label
cta/focus-ringColorborder/focus

Context variants

A Figma component variant property. Each value of "Context" binds cta.radius to a different Primitive-backed radius. No new modes; just four variants of the same master.

Variantcta/radius resolves toTypical valueWhen to use
context = formradius/input or radius/sm3–4 pxInside a form, next to text inputs
context = cardradius/card8–12 pxInside a card; matches card corners
context = walletradius/full9999 pxDeposit / withdraw — pill-shaped on 6 of 9 audited brands
context = landingradius/full9999 pxMarketing hero CTAs — pill-shaped

5.6 · Last-resort overrides stable — keep under 5

Reserved for brand-specific overrides that genuinely can't live in Primitives or Semantic. Most v1/v2 Component entries migrated to layout/* or z-index/* in Primitives. If this subsection grows, audit the semantic layer first.

TokenTypeExample valueWhy it exists here
component/modal/backdrop-opacity-overrideNumberbrand-definedRare brand-specific legal/UX spec above theme default
component/card/border-radius-overrideNumberbrand-definedOnly if a brand varies card radius at component level specifically
Budget: keep under 5. The v3 alias packs above absorb most of what historically ended up here.
← Architecture v3 Why the system looks this way — 19 slides Brand Audit → 9-brand edge-case evidence

Design Token Reference v3 · 2026-04-20 · 20-Brand White Label Casino & Sportsbook · ~585 tokens across 5 collections

Architecture v3 · Brand Audit · Component Audit · Home · Top

↑ Top