20-Brand White Label · Casino & Sportsbook · v2

Design Token Reference

Every token that needs to exist in Figma, organised by collection and group. Use this alongside the architecture presentation, which explains why the structure looks this way.

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

How to read these tables

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).

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

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 · <10 tokens

Last resort. Only add here if a token genuinely cannot live in Semantic or Primitives. Most v1 Component entries migrated to layout/* or z-index/* in Primitives.

5.1 · Component overrides

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, not system-wide
Budget: keep under 10. If this collection grows, Semantic is under-specified — audit before adding.
← Architecture presentation Why the system looks this way — 22 slides

Design Token Reference v2 · 2026-04-17 · 20-Brand White Label Casino & Sportsbook

Architecture presentation · Top

↑ Top