Token Reference v4

How to read v4

Each section belongs to one collection. Status badges tell you what changed from v3.1:

Reading the alias notation

Throughout the document, → means "aliases to." Example:

Semantic.interactive/primary/bg (mode: snabbare)
  → Primitives.color/snabbare/primary-600
  = #1e8f3e

v3.1 → v4 · the structural diff

Two collections change. Three stay identical.

1 · Primitives changed

Naming shape

# Colour ramps — fully-qualified per brand
color/lyllo/primary-{50,100,200,...,950}
color/lyllo/secondary-{50..950}
color/lyllo/tertiary-{50..950}
color/snabbare/primary-{50..950}
color/comeon/primary-{50..950}
# ... same shape for each brand

# Shared neutrals — not brand-specific
color/neutral-{0,50,100,...,950,1000}

# Shared status — not brand-specific
color/status/success-{50..950}
color/status/warning-{50..950}
color/status/error-{50..950}
color/status/info-{50..950}

# Chrome — per-brand where brands need a specific chrome
color/lyllo/header-chrome     # = #ffffff
color/snabbare/header-chrome  # = #0b5ed7  (isolated from brand primary)
color/comeon/header-chrome    # = brand-primary tone
# ... per brand

Brand ramps (one per brand)

Each audited brand gets a complete set of ramps under color/<brand>/*. The ramp step count (9 steps: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) is preserved from v3.1 — no ramp steps are trimmed.

Shared tokens (not per-brand)

Tokens that don't vary across brands live under flat, non-brand-prefixed names:

color/neutral-{0,50,100,200,300,400,500,600,700,800,900,950,1000}
color/status/success-{50..950}
color/status/warning-{50..950}
color/status/error-{50..950}
color/status/info-{50..950}
color/always/white    # = #ffffff
color/always/black    # = #000000

Chrome (per-brand where needed)

Chrome tokens that were color/chrome/* in v3.1 (added in the 2026-04-21 Theme rewire) keep their role but become brand-prefixed where they vary:

color/lyllo/header-chrome
color/snabbare/header-chrome
color/comeon/header-chrome
# ... per brand

# Universal chrome stays under shared namespace
color/neutral/scrim
color/neutral/divider

Typography, radius, layout

Typography families, radius scale, and layout tokens remain per-brand where they differ (e.g. typography/lyllo/family-display) and shared otherwise (radius/scale-4, space/4). Identical shape to v3.1, just with the brand prefix flattened into the name.

2 · Theme unchanged

Surface

Text & border

3 · Semantic brand modes

The mode table at a glance

Below, each row is a Semantic token. Columns show its alias under three representative brand modes (lyllo · snabbare · comeon). Italic rows are brand-identical. Coloured rows are brand-divergent.

Interactive · diverges per brand

Text · mostly brand-identical

Icon · partially diverges

Pill & badge · diverges

Radius · structural (mostly brand-identical)

4 · Regulatory unchanged

Regulatory sits beside Semantic as a narrow override layer — it aliases Primitives directly for a small set of compliance-related tokens that must vary per jurisdiction regardless of brand or theme. Devs consume these only in compliance contexts (rg-limit-display, bonus-terms-footer, age-gate-cover).

Why Regulatory stays separate: the jurisdiction axis is independent of brand and theme. SE rules apply regardless of which brand the user is on. Moving it onto Semantic would force a 7× multiplier on an already 9-mode collection for zero UX gain.

5 · Component unchanged

Component's one rule: aliases only Semantic. Never reaches around to Primitives directly. Never touches Theme directly. Because Semantic resolves brand per mode, Component inherits brand-correct values automatically.

Three worked examples

Example 1 · CTA primary

Component.cta/primary/bg
  → Semantic.interactive/primary/bg   (brand-dependent)

# When Semantic.mode = snabbare:
  → Primitives.color/snabbare/primary-600 = #1e8f3e

# When Semantic.mode = lyllo:
  → Primitives.color/lyllo/primary-600 = #ff6699

Example 2 · Snabbare's isolated header

Component.header/bg
  → Semantic.chrome/header/bg   (brand-dependent)

# When Semantic.mode = snabbare:
  → Primitives.color/snabbare/header-chrome = #0b5ed7

# When Semantic.mode = lyllo:
  → Primitives.color/lyllo/header-chrome = #ffffff

Example 3 · Menu-row icon split

Component.menu-row/action-icon
  → Semantic.icon/action              (brand-dependent)

Component.menu-row/chevron
  → Semantic.icon/chevron             (brand-identical, neutral)

Migration · v3.1 → v4 token map

First 20 high-traffic tokens and their v4 equivalents. The full map covers ~340 Semantic tokens × 9 brand modes.

Migration phases

1. Brand-collapse audit — read-only against brand-audit.html. Flag sub-brands.
2. Flatten Primitives — start with Snabbare (99.5% hex parity). Rename moded → flat. Verify byte-for-byte.
3. Add Semantic brand modes — lyllo + snabbare first. Bind ~340 aliases per mode.
4. Style Dictionary pipeline — emit dist/tokens/<brand>-<theme>.css.
5. Swap prototype — Global Search Casino off hand-written theme.css to generated bundles at localhost:5180.
6. Scale & cut-over — all 9 active brands × 2 themes = 18 bundles. Archive v3.1 Figma as read-only reference.