Brand Audit

Per-brand evidence of the differences and edge cases that need to be absorbed into Token Architecture v3. Data pulled directly from the Token Explorations Figma file (canvas 156:9095), 9 brand rows × 9 screens, with Payment/Wallet, Casino Lobby, and Landing Page sampled in depth.

01Overview — 9 brands, same component set

Values below are what each brand resolves for a handful of semantic roles. Bolded cells are the outliers driving the edge cases that follow.

Brand	Primary	Text-Primary	Action-Icons	Big-Icons	Icons	Card r	CTA r*	Pill r	Nav r	Header bg
lyllo.com	#f02884	#fd6a00	#f02884	#fd6a00	#fd6a00	12	100	100	0	#ffffff
snabbare.se	#12ce67	#10b75b	#12ce67	—	—	12	3	100	0	#0086ff
mobilebet.com	#57b902	#57b902	#57b902	—	—	12	3	100	0	#1e2021
comeon.com	#39f56a	#39f56a	#39f56a	—	—	12	3	100	0	#1a1e1a =page
mobilespin.com	#d6112b	#d6112b	#212121	#212121	#212121	12	3	100	0	#d6112b
getlucky.com	#ff993d	#e26591	#ff993d	#333333	#ff993d	12	3	100	0	#ff993d
reviant.com (A)	#e71f00	#e71f00	#e71f00	#2e3236	#b18378	12	3	100	12	#ffffff
888.nl	#fce403	#fce403	#f8f9fd	#ffffff	#ffffff	12	3	100	0	#000000
reviant.com (B)	#ff4655	#ff4655	#ff4655	#5330ff	#ff878f	0	0	0	0	#ffffff

*Footnote on CTA Radius: the token resolves to different values depending on the screen context — lyllo's Button component shows CTA Radius = 3 but the Payment/Wallet and Landing CTAs both resolve to 100. This proves the token is already context-mode-switchable; we just need to name and document the contexts.

02Per-brand breakdown

One card per brand. "Intentional splits" are the ones marketing designers will be tempted to "fix" — don't.

lyllo

lyllo.com

Dual-brand palettePill CTA

Palette

Main/Primary #f02884 (pink)
Main/Text-Primary #fd6a00 (orange)
Main/Big-Icons #fd6a00 (orange)
Main/Icons #fd6a00 (orange)
Main/Action-Icons #f02884 (pink)

Radii in context

Extras/CTA Radius (Button cmp) = 3
Extras/CTA Radius (Wallet/Landing) = 100
Extras/Card Radius = 12
Extras/Pill Radius = 100

Intentional splits Menu-row icon is orange, chevron is pink — orange is the text/content colour, pink is the action colour. "View all" → orange label + pink chevron. Landing/Wallet CTAs are fully rounded (pill), but form/button-component CTAs are radius 3. The context switch is real and wanted.

snabbare

snabbare.se

Two brand colours

Palette

Main/Primary #12ce67 (green)
Lobby Header/Background #0086ff (blue)
Lobby Header/Surface-Primary #12ce67 (green)
Landing/Tag #ef7171 (coral)
Banner/Background #006bcc (deep blue)

Rule

Header lives in blue.
Brand CTAs (everywhere else) live in green.
Landing tags use a third coral accent.
Nothing on the page should derive "brand green" from the header.

Intentional splits Header is its own identity (blue) distinct from brand-primary (green). Never let a component pull its accent from Lobby Header/* when it sits outside the header; it must go through color.primary / Main/Primary.

mobilebet

mobilebet.com

Dark theme

Palette

Main/Primary #57b902 (green)
Main/Background #0f1010
Main/On-Primary #0f1010 (dark text on green)
Lobby Header/Background #1e2021

Rule

Dark brand with bright-green CTAs.
On-primary flips to dark text (unlike the default white).
Header has its own "surface-2" elevation instead of matching page.

Note No splits — a clean mode where every role resolves predictably. Useful as the "canonical" brand for regression-testing the architecture.

comeon

comeon.com

Header = page

Palette

Main/Primary #39f56a (neon)
Main/Background #1a1e1a
Lobby Header/Background #1a1e1a (same as page)
Landing/Tag #c3ff00 (acid green)

Rule

Only brand where header bg matches page bg.
Sub-menu inverts on selection (mint text/icon ↔ dark bg).
Secondary tags (landing) use a third accent (acid green #c3ff00).

Intentional splits The "header equals page" look is deliberate — don't force a different Lobby Header/Background. The component should still keep its own token so the other 8 brands can vary.

mobilespin

mobilespin.com

Black chevronsYellow-on-red CTA

Palette

Main/Primary #d6112b (red)
Main/On-Primary #ffee00 (yellow text on red)
Main/Action-Icons #212121 (black chevrons)
Main/Big-Icons / Icons = #212121
Bottom Navbar/Background #212121

Rule

Brand red is reserved for CTAs and selected states.
All icons go black — chevrons, menu icons, content illustrations.
Yellow is the on-primary contrast (not white).

Intentional splits Do NOT tint chevrons red "for consistency" — it would flood the UI. Keep color.icon.action = #212121 and let red appear only on CTAs and selected tabs.

getlucky

getlucky.com

Dual-brand paletteBlue landing tag

Palette

Main/Primary #ff993d (orange)
Main/Text-Primary #e26591 (pink)
Main/Icons #ff993d (orange)
Main/Action-Icons #ff993d (orange)
Main/Big-Icons #333333 (dark)
Landing/Tag #639bf4 (blue)
Banner/Background #e26591 (pink)

Rule

Orange for action (CTAs, icons, chevrons).
Pink for text-accent and banner backgrounds.
Big content icons stay dark grey (not orange) for legibility.
Landing has a third brand-blue accent on tags.

Intentional splits "View all" here reads pink label + orange chevron. This is the cleanest example of why view-all.label and view-all.icon must be separate tokens. Landing tag blue is a third brand colour — keep Landing/Tag as its own token, not aliased to primary.

reviant (A)

reviant.com · nav-radius variant

Bottom-nav splitElevated nav

Palette

Main/Primary #e71f00 (red)
Main/Big-Icons #2e3236 (dark)
Main/Icons #b18378 (muted brown)
Main/Action-Icons #e71f00 (red)
Bottom Navbar/Selected-Icon #e71f00
Bottom Navbar/Selected-Text #2e3236
Extras/Navigation Radius = 12
Extras/Navigation Shadow = #0000001a

Rule

Three distinct icon colours in the same screen (dark / muted / red).
Only brand that splits bottom-nav selected icon ≠ text.
Only brand with a rounded, elevated bottom nav.
Landing tag is muted brown (#b18378) — the "softer" accent.

Intentional splits Bottom-nav selected-icon = red / selected-text = dark. This is the brand signature — keep nav.selected-icon and nav.selected-text as separate tokens across all brands so reviant can split without the others having to.

888.nl

Light chevronsYellow brand

Palette

Main/Primary #fce403 (yellow)
Main/Background #171717
Main/On-Primary #0a0a0a
Main/Action-Icons #f8f9fd (near-white)
Main/Big-Icons / Icons = #ffffff
Lobby Header/Background #000000

Rule

Yellow too low-contrast for small icons → all icons go white / off-white.
Yellow reserved for CTAs and selected states only.
Header uses pure black, page uses near-black — subtle elevation.

Intentional splits This is the canonical "primary ≠ icon" case — don't assume color.icon.action = color.primary. The icon tokens must be independently settable in brand mode.

reviant (B) · sharp-edge variant

reviant.com

Zero radiusThree-icon splitThree brand colours

Palette

Main/Primary #ff4655 (red)
Main/Big-Icons #5330ff (purple)
Main/Icons #ff878f (light red)
Main/Action-Icons #ff4655 (red)
Landing/Tag #5330ff (purple)
Banner/Stroke #ff4655 (only brand with a non-transparent banner stroke)

Radii

Extras/Card Radius = 0
Extras/Input Radius = 0
Extras/Pill Radius = 0
Extras/CTA Radius = 0 (even landing)
Nav radius = 0, Navigation shadow = transparent

Intentional splits Sharp-edges identity — everything is radius 0 except where 100 is used for true circles (pill-text badges are flat rectangles here). Three-colour icon system (purple content / light-red descriptive / red action). Banner has a visible stroke unique to this brand.

03Cross-brand patterns to absorb into v3

The recurring edge-case categories. Each one maps to a token-architecture change in v3.

Three-icon split is real

Big / Descriptive / Action icons already have distinct tokens but only 4 of 9 brands actually diverge them.

reviant(B): #5330ff / #ff878f / #ff4655
reviant(A): #2e3236 / #b18378 / #e71f00
getlucky: #333333 / #ff993d / #ff993d
lyllo: #fd6a00 / #fd6a00 / #f02884

Menu row: icon ≠ chevron

User-reported concern. The primary-icon and action-icon tokens are independent; we need a component alias so designers can split without editing the Menu Item master.

menu-row.icon → color.icon.descriptive
menu-row.action → color.icon.action
lyllo / getlucky = split
mobilespin / 888.nl = merged (equal)

CTA radius is context-scoped

Same brand, different radius depending on whether the CTA is in a form, in a card, or on landing. Not a bug — the design system intends it.

lyllo Button component: 3
lyllo Wallet CTA: 100
lyllo Landing CTA: 100
mobilespin everywhere: 3

Bottom-nav split

Only reviant(A) splits selected-icon ≠ selected-text today. The tokens exist everywhere; we should keep the split as a first-class option.

8 brands: icon === text
reviant(A): icon #e71f00 ≠ text #2e3236

Header is its own namespace

Lobby Header/* tokens are rightly isolated from Main/*. The gap is components inside the header that still reach for Main/Primary instead of Lobby Header/Surface-Primary.

snabbare: page-CTA green, header-accent green, header-bg blue
reviant(B): header-bg white, header-surface-1 red

Landing has its own mini-system

Landing/Primary CTA, Landing/Secondary CTA, Landing/Icon CTA (tertiary outline), Landing/Tag — all brand-mode overridable. Extras/Pill Radius lives here too.

getlucky Landing/Tag = #639bf4 blue
reviant(B) Landing/Tag = #5330ff purple
reviant(A) Landing/Tag = #b18378 brown
→ third-colour brand accents are common on landing

Pills have no semantic tokens

Extras/Pill Radius exists, but pill surface/on-surface/border colours today are plumbed through Sub Menu/* or Main/Badge inconsistently.

mobilespin pill looks yellow-on-red
lyllo pill is pink-on-light
comeon pill is mint-on-dark
→ pill.surface / pill.on-surface / pill.border needed

View all: label vs icon

"View all" can be one colour or two, per brand. Must be a pair of aliased tokens at the component layer.

view-all.label → text.primary
view-all.icon → icon.action
lyllo: orange label / pink icon
getlucky: pink label / orange icon
most others: same colour on both

Data sourced from Figma file qnPOhVnKHuYo7t0g6PgrcS (Token Explorations) · canvas 156:9095 · 9 brand rows × 9 screens. See Architecture v3 for how these findings translate to token changes.