← Design Tokens home Audit · v3 input

Component Hex Audit

Which master components in the WEB Design System are fully tokenised, which have gaps, and what v3 needs to add or rewire. Derived from the 9 brand instances in the Token Explorations file — if a fill/radius comes through as a variable in get_variable_defs for all brands, it's tokenised; if it varies without an explaining token, it's a literal.

Tokenised every fill/radius resolves to a brand-mode variable Partial primary fills tokenised, sub-elements or a state hard-coded Missing tokens no semantic role exists yet; fills reach to borrowed tokens

TL;DR

01Component-by-component findings

Components are from WEB Design System (Brandtokens) — library key lk-46d42c00…. Findings below are observed via brand-instance variable resolution, not direct master inspection (master files sit in a separate library and are read-only from this vantage point).

Button / Default Tokenised

component_set · key 8c1f6e9e538abe54d6151844ba11a3876de5849b

Fill = Main/Primary, label = Main/On-Primary, radius = Extras/CTA Radius. All 9 brands resolve cleanly. Secondary / tertiary button variants use Main/Surface-1-Sidebar and Main/Text — all tokenised.

  • Gap to address in v3: context-specific CTA radii (form vs. wallet vs. landing) need to be named modes rather than implicit overrides.

Menu Item Partial

component_set · key 6e615bb17f10e539f5924acd77876151fd39404d

Three fills: leading icon (Main/Icons), label (Main/Text), trailing chevron (Main/Action-Icons). All tokenised — but the master binds leading icon and chevron to two different semantic tokens, not to aliased component tokens. That means marketing designers who want to split them must first understand the whole semantic layer.

  • Proposal v3: add component aliases menu-row.icon → color.icon.descriptive and menu-row.action → color.icon.action. Master repointed to these aliases; designers flip them in brand mode.
  • Evidence of split in the wild: getlucky (pink / orange), reviant-A (brown / red), lyllo (orange / pink).
// v3 master rewire menu-row.icon = color.icon.descriptive // default alias menu-row.action = color.icon.action // default alias menu-row.label = text.primary menu-row.label-muted = text.supportive

Pill (and variants: Filter / Navigation / Small / segmented) Missing tokens

component_set · key ecd16be07167361a6034d7ec298bec449269811b (Pill)
+ Filter Pill fc9ca8a6…, Navigation Pill 823de0bb…, Small Pill 9c443177…, segmented pill aaf35b82…

No pill.* semantic family exists. Today the Pill component reaches for Sub Menu/* (default/selected colours) or for Main/Badge and Lobby Header/Surface-Secondary depending on the instance. That's why pills look different across brands in ways the brand team didn't plan.

  • Proposal v3: introduce pill.surface, pill.on-surface, pill.border, pill.surface.selected, pill.on-surface.selected, and use Extras/Pill Radius (already exists, resolves correctly).
  • Default the new tokens as aliases to the current values so nothing changes visually on day-one; flip brand-mode values only where pill identity should diverge.
// v3 semantic additions pill.surface // today: Sub Menu/Default or Main/Badge pill.on-surface // today: Sub Menu/On-Default or On-Badge pill.border // NEW for outline-pill brands (reviant-B) pill.surface.selected // today: Sub Menu/Selected pill.on-surface.selected // today: Sub Menu/On-Selected

Lobby Header Tokenised

Lives in its own namespace (Lobby Header/Background, Surface-1, Surface-2, Surface-Primary, Surface-Secondary, On-Surface-1/2/Primary/Secondary, Text, Active-Selected, IOS-Bar). All 9 brands resolve independently.

  • Lightweight audit: confirm no shape inside the header fills from Main/* — if so it'll pick up the page-primary rather than the header-primary and break snabbare's blue-header-green-brand split.

Bottom Navbar Tokenised

Bottom Navbar/Background, Default, Selected-Icon, Selected-Text. All 9 brands resolve. The only brand that splits Selected-Icon ≠ Selected-Text today is reviant-A — no action needed beyond documenting the split as intentional.

Banner / Hero Partial

Banner/Background and Banner/Stroke tokens exist per brand. Stroke is #00000000 on 8 brands, #ff4655 on reviant-B (the only brand with a visible banner border).

  • Gap: landing-specific banner content (hero imagery, text overlays) may still use inline fills. Needs a direct inspection of the Landing component master, beyond what brand-instance variables expose.
  • Proposal v3: keep banner.surface / banner.stroke as-is; add banner.overlay and banner.on-surface so marketing can re-skin hero cards without forking.

Landing (screen-level, not a single component) Tokenised

Already has its own mini-collection: Landing/Primary CTA, On-Primary CTA, Secondary CTA, On-Secondary CTA, Icon CTA (tertiary outline), On-Icon CTA, Tag, On-Tag, Text. Extras/CTA Radius and Extras/Pill Radius resolve per brand. This is the cleanest part of the system today.

  • Every landing-tag brand uses a third accent — keep Landing/Tag as its own role, not an alias to primary.

"View all" link Missing tokens

Not a dedicated component — appears inline in Section headers on Casino Lobby. Today the label uses Main/Text-Primary and the chevron uses Main/Action-Icons; fine, but the pattern isn't named, so designers don't realise the divergence is expected.

  • Proposal v3: create a "ViewAll" component (or at minimum a well-named style) with component aliases.
// v3 component aliases view-all.label = text.primary // can diverge from primary view-all.icon = icon.action // can diverge from label

Badge Partial

Main/Badge exists per brand (values: #f02884 / #ef7171 / #c2185b / #c3ff00 / #ffee00 / #e26591 / #e71f00 / #ffffff / #5330ff). But there's no badge.radius, badge.on-surface, or badge.border. Currently the badge component inherits badge-surface and invents on-surface.

  • Proposal v3: formalise badge.surface (alias to Main/Badge), add badge.on-surface, badge.radius.

Modal / Dialog Missing tokens

Not visible in the 9 sampled screens, but user reported that rounded-corners "differ between brands" and some brands use square modals (reviant-B). Likely uses Extras/Card Radius today which is wrong — a card radius of 12 on modals that want sharp edges would get overridden inline.

  • Proposal v3: add radius.modal with per-brand values, independent of Card radius.

Input / Form field Tokenised

Extras/Input Radius is already independent of CTA / Card / Nav radius. reviant-B sets it to 0 while Card is also 0; most other brands set it to 3. Fills route through Main/Background-Sidebar and Main/Text.

Sub-menu / Dropdown Partial

Sub Menu/Background, Default, On-Default, Selected, On-Selected all resolve. But these tokens are currently also being borrowed by pills (as noted above). v3 should make these strictly sub-menu-scoped and let Pill get its own family.

02Next steps

What I can verify from here vs. what has to happen inside Figma.

From the Figma MCP (read-only)

  • Pull get_design_context on the Pill and Menu Item masters to confirm literal hexes vs. tokens — needs the master file keys from the Library.
  • Compare get_variable_defs on every brand-instance permutation to catch silent drift.
  • Screenshot each brand × each screen for a visual regression baseline before the v3 rewire.

Inside Figma (manual / plugin)

  • Add the new semantic roles (pill.*, badge.*, radius.modal, banner.overlay/on-surface).
  • Add the component aliases (menu-row.*, view-all.*, nav.selected-*).
  • Default all new tokens as aliases to today's values, then override per brand only where a deliberate split is required.
  • Repoint Pill / Filter Pill / Navigation Pill masters from Sub Menu/* to the new pill.* tokens.
  • Lock Primitives (collection 1) + Component aliases (collection 3) as read-only for marketing designers; give them edit rights on Brand Modes (collection 4) only.