Component Audit · v3.2

01Scope & method

v3.2 landed in the variable layer on 2026-04-29. The components on this page were authored against earlier token states (v3.0 / v3.1 + remote libraries). This audit measures the gap between component reality today and the v3.2 invariants, plus WCAG 2.2 AA conformance.

Two locked invariants drive the token-side findings:

• Hex invariant — raw hex only in Global/{black, white, black-alpha/*, white-alpha/*, system/*} and Modes/color/{primary, secondary, neutral, tertiary}/{50..900}. Everything else aliases.
• Strict 4-point scale — Global/scale/* contains exactly [0, 4, 8, 12, 16, 20, 24, 28, 32, 40, 48, 56, 64, 72, 80, 96, 112, 128, 144, 160]. No off-grid stops.

Probed via Figma MCP: full canvas metadata (179 KB XML) plus visual screenshots and resolved variable bindings for the ten highest-impact component groups (Buttons, Inputs, Toggle, Modal Dialogs, Bottom sheets, Navigation, Cards, Headers, List Items, Pills, Banners, Notifications).

02The 34 component groups

Top-level frames on canvas 4050:50253, listed roughly by audit priority.

03Component structure

3.1 · OLD/NEW duplication shipped live

• List Items / Payment Method NEW + Payment Method OLD are both shipped. Cancel-button styles diverge between them.
• Navigation / Sub Tabs has two parallel chip rows ("Recommended", "New", "Jackpots"…) drawn twice with subtly different fills/strokes — a migration mid-flight.
• Inputs / Whiteframe typography (Whiteframe/Heading 5 new, Whiteframe / Label Regular in Museo Sans) coexists with Open Sauce One body styles inside the same component sheet.
• Buttons / Button Core holds 20+ permutations including a "Default Button" set + a "Button Core / Text Before/After" set that visually overlap.

3.2 · Variant axes that should be properties, not separate components

• Headers is split into "Main Header (Responsive)", "Main Header (Mobile)", "Page Header", "Grid Header (Responsive)" — four components for what is one logical pattern with Size = Desktop|Mobile and Layout = Logo+CTA | Logo+Title | Logo+Title+Balance axes.
• Banners has 8+ near-identical size variants of the "We are celebrating!" template — should be one banner with a Size = sm|md|lg|xl variant.
• Pills / Pill / Navigation Pill / Small Pill / New Filters are 4 separate components for one pill family. Variants should fold into a single Pill with Size · Trailing · Leading · State.

3.3 · Cards — uncontrolled growth

The Cards group is 20,017 px tall — the largest group on the page. Game-tile / promo-tile patterns have grown organically into many one-off variants. Without consolidation, downstream consumers cannot reliably pick one "card" — every product team forks a new variant.

3.4 · Slot vs. instance

Notifications mixes the "container with leading icon + dismiss + optional CTA" pattern across 3 colors × 4 variants instead of using one component with Status = info|success|warning|error + Action = none|inline|stacked + Dismissible = true|false properties. Tournament rebuilds list-item/header patterns instead of instancing List Items / Tournament / Header — the file already has the master, but Tournament also has hand-built copies.

3.5 · Documentation frames mixed with components

Compliance Header Token System Components and Originals Title Animated / Originals Logo are documentation/asset frames mixed into the component canvas. They are not reusable components — should move to a separate "Tokens & Assets" page. Spacers and Effects are scaffolding; they belong in a foundations page beside the token tables.

3.6 · Naming inconsistency

Multiple naming conventions co-exist on the canvas: List Item / Tournament / Header (forward slash, title case) · Variant =Main (space-equals) · User=No, Initials=Yes (CSV-style) · Whiteframe/Heading 5 new (legacy product prefix). Pick one convention and rename the rest.

04Spacing & layout

4.1 · Off-grid radii — violates strict 4-point invariant

~41 affected radius aliases were already remapped in the variable layer on 2026-04-29; the components on this page still show the old values because component bindings have not been swept.

4.2 · Off-grid typography — applies to type too

Typography rounds up per the locked rule.

4.3 · Magic-number spacing

token('space.100') = 8 appears bound on most components — Atlassian-style legacy naming. v3.2 already exposes Semantic/spacing/{xxs..3xl}. Components should consume Semantic spacing tokens, not the literal.

4.4 · Layout alignment

• Cards group is 1864 px wide — exceeds desktop-wide breakpoint (1440) and tablet (768). Frame should be sized to a representative breakpoint, not free.
• Buttons / Inputs / Toggle / Pills are presented at fluid/free width with no breakpoint bands. Designers cannot tell which width a given variant is intended for.

05Token application — v3.2 conformance

5.1 · Components still bind legacy library tokens

Every probed component (Buttons, Inputs, Modals, Headers, Notifications, List Items) returns variable names from the old library:

Main/Text  ·  Main/Primary  ·  Main/Background  ·  Main/On-Primary
Main/Text-Disabled  ·  Main/Text-Supportive  ·  Main/Disabled CTA
Generic/Stroke 10  ·  Generic/Stroke 30  ·  Generic/Dividers
Generic/Input-Border  ·  Generic/Overlay-80  ·  Generic/IOS-Bar
Lobby Header/Background  ·  Lobby Header/Surface-Primary  ·  Lobby Header/Active-Selected
Lobby Header/On-Surface-Primary  ·  Lobby Header/CTA  ·  Lobby Header/Text  ...
Extras/CTA Radius  ·  Extras/Input Radius  ·  Extras/Pill Radius
Extras/Box Radius  ·  Extras/Card Radius
Font/Size/*  ·  Font/Line Height/*  ·  Font/Family/*  ·  Font/Weight/*
Whiteframe/*   # Museo Sans family — clearly stale
Base/Base White  ·  Base/Base Black  ·  Base/Base White 10  ·  Base/Radius 3
System/Error  ·  System/Success  ·  System/Informative  ·  System/Orange  ·  System/Purple

None of these match the v3.2 namespace (Global/*, Modes/*, Theme/*, Semantic/*, Component Packs/*). The variable rename + restructure landed in collections; component bindings did not follow.

5.2 · v3.2 tokens that exist but are not consumed

• Semantic/spacing/{xxs..3xl} — components hold space.100 literal instead.
• Semantic/icon-size/{sm,md,lg,xl} — icon sizes are free FLOATs.
• Global/scale/* — radii / sizes still bound to Extras/* and Font/Size/*.
• Global/elevation/0..4 Effect Styles — components hold raw inline Effect(type: DROP_SHADOW, …).
• Global/breakpoint/* — zero references on this canvas.

This is the largest single gap: the v3.2 abstractions exist but nothing on the component page reaches them.

5.3 · Three font families coexist

Open Sauce One (current) · Museo Sans (legacy Whiteframe/*) · SF Pro Text (iOS native — fine for iOS Elements only). Museo Sans appears inside Inputs and Modal Dialogs — these are NOT iOS-only contexts. Audit and remove Museo Sans bindings everywhere except where intentionally legacy.

06Raw-hex violations

Tokens currently carrying raw hex outside the two allowed homes (Global / Modes DNA).

07WCAG 2.2 AA accessibility

Computed from the hex values returned by get_variable_defs. AA thresholds: 4.5:1 normal text, 3:1 large text (≥18pt or 14pt bold) and UI components.

08Contrast failures

Text size minimums

• Font/Size/X Small = 8 px is below any reasonable readable minimum. Used in Headers (X Small Bold). Recommend retiring from semantic use; keep only for non-essential decorative numerals if at all.
• Font/Size/Small = 11 px is borderline. WCAG doesn't set a minimum but mobile platforms recommend 12 px. Round to 12.

09Touch / pointer target sizes

WCAG 2.2 SC 2.5.8 (AA) requires interactive targets ≥ 24×24 CSS px (with exceptions for inline links and dense lists). Mobile lift to 44×44 (Apple HIG) / 48 dp (Material).

10Focus visibility

Components do not show a defined focus state in any screenshot probed. There is no Theme/focus-ring or Global/focus/* token in the variable defs returned. Without a focus token, every interactive primitive (Buttons, Pills, Inputs, Toggle, List Items, Pagination, Tabs) lacks a designed :focus-visible style.

WCAG 2.2 adds 2.4.11 Focus Not Obscured (Minimum) and 2.4.13 Focus Appearance at AA — focus must be ≥ 2 px outline at 3:1 contrast against both component and adjacent background. None of this is currently encoded.

Color-only state encoding

• Inputs error state is signalled by System/Error border only. Helper text presence is good — but if helper text is omitted in production, error state would be color-only (fails 1.4.1 Use of Color).
• Toggle states distinguished by colour blue/grey only. Add an icon (✓ inside the thumb when on) or position-based affordance.
• Pagination "current" page shown by filled background only. Add aria-current="page" requirement and a non-color visual (underline / weight).

Component-specific accessibility

• Calendar needs role="grid", arrow-key model, aria-selected. No "today" indicator visible — required for orientation.
• Search combobox with listbox results — verify input + popup + active-descendant relationship encoded in the design.
• Accordion disclosure pattern — needs collapsed/expanded variant pair with aria-expanded mapping documented.
• Modal Dialogs dismissable via × only. Add Esc affordance in spec, document focus-return target. "Congrats!" modals with no dismiss are an a11y risk if non-blocking.
• Bottom sheets — verify drag-handle has alt method for keyboard users; document close gesture parity.
• Notifications — production handoff should include aria-live polite/assertive mapping per status.
• Originals Title Animated — no prefers-reduced-motion reduced variant exists. Add motion tokens or a static fallback.

11Responsiveness

11.1 · No breakpoint-driven layout

Variable defs returned zero Global/breakpoint/* consumption across all probed components. v3.2 declares breakpoint/{mobile, tablet, desktop, desktop-wide} but they are unused.

11.2 · Responsive variants are separate components

• Headers / Main Header (Responsive) and Main Header (Mobile) are siblings, not breakpoint variants.
• Headers / Grid Header (Responsive) is a third sibling for grid contexts.
• Breaks responsive parity — when desktop changes, mobile must be edited separately.

11.3 · Mobile-first patterns missing breakpoint adaptation

• Bottom sheets is mobile-only by name but has no desktop fallback (modal). Spec which breakpoint promotes a bottom sheet to a modal.
• iOS Elements is platform-specific; OK to keep separate but tag clearly.
• Hero Sections is 612 px wide. No mobile/tablet variants. Heroes need 2–3 breakpoint variants.

11.4 · Dark mode

v3.2 ships Light + Dark in Theme. Components on this canvas are presented in Light only. There is no Dark-mode preview frame to validate token resolution. Add a Dark variant frame per major component group, or a single "Component canvas (Dark)" page.

12Severity summary

13Header active-state rule

Today's bindings on the Components page:

• Lobby Header/Surface-Primary = #5b5c60 (≈ neutral/600)
• Lobby Header/Active-Selected = #1c1d20 (≈ neutral/900)

Two stops apart — passes the rule by hex, but contrast is weak (3.74:1) so the active state is visually muddy. Re-point active-selected to primary/500 per the rule.

14Phased remediation

15Auto-layout & padding deep audit

Second-pass structural audit run via the Figma Plugin API on 2026-04-30, after the user asked us to look harder at paddings, auto-layout, and element grouping. We walked the 11 highest-impact component masters and tagged every frame for layout-mode, padding values, item-spacing, sizing modes, asymmetry, group-vs-frame, and nesting depth. The aggregate is below; the table beneath it has per-group counts.

15.1 · Aggregate across 11 masters

The audit walked ~70,683 nodes across 28,695 frame-like containers in: Buttons, Inputs, Toggle, Modal Dialogs, Navigation, Cards, Headers, List Items, Banners, Pills, Notifications.

15.2 · Per-master counts

15.3 · Off-grid padding values that recur most

The top off-grid padding values across the 6 deeply-counted masters (Cards · Headers · List Items · Banners · Pills · Notifications). Bulk-fixable by editing the underlying token alias once each.

15.4 · Off-grid itemSpacing values that recur most

15.5 · Specific concerning patterns

15.6 · GROUP node patterns to dismantle

• Cards — 310 GROUPs, every single one inside an auto-layout parent. The dominant culprit.
• Modal Dialogs — 33 GROUPs, including six "Checckbox old" (typo) at depth 11.
• Banners — 25 GROUPs, all inside auto-layout.
• List Items — 20 GROUPs, all inside auto-layout.
• Toggle — 6 GROUPs in 17 total frames (35% group ratio); three are named "Old".
• Notifications — 7 GROUPs, all inside auto-layout.
• Buttons — 9 GROUPs; recurring "Gray Logo" pattern at depth 8 across Social Buttons.

For every GROUP inside auto-layout: convert to a Frame with the same auto-layout direction. Where the GROUP wraps a single instance, unwrap it. The "Old" / "Checckbox old" GROUPs are leftover migration artefacts — delete after the new variant is signed off.

15.7 · Adjacent interactive children with zero gap (WCAG 2.5.8)

989 instances across the 11 masters where two interactive-looking children (INSTANCE nodes or items named button · cta · chip · tab · item · link · toggle) sit at itemSpacing = 0. WCAG 2.2 SC 2.5.8 (Target Size — Minimum, AA) allows targets smaller than 24×24 only if there is at least 24 px of spacing between centers — zero gap with small tap targets fails by both prongs.

Worst offenders:

• Navigation: 135 — chip rows, sub-tabs, segmented buttons
• Cards: 291 — game-tile + adjacent CTA buttons
• Headers: 51 — chip filters, balance + Login pairings
• Buttons: 46 — paired CTAs in Payment Method clusters
• Notifications: 16 — Section message inline CTA pairs
• Pills: 16 — filter / chip rows

15.8 · Refactor priorities for the layout pass

1. Toggle — convert 3 component variants to auto-layout. Tiny scope, immediate quality lift, blocks the larger Toggle target-size fix.
2. "_ System Component / Label" base — change vertical padding from 6 → 8. Single edit, ripples to ~6 masters.
3. "Payment Left" / "Payment Right" pattern — collapse asymmetric children into itemSpacing on the parent. Bulk-applicable across Buttons, Inputs, Modal Dialogs.
4. "itemSpacing = 962 / 142" hacks — replace with SPACE_BETWEEN. 28 instances.
5. GROUP-inside-auto-layout — 429 conversions to Frame. Cards is 310 of those; treat Cards as its own project.
6. Recurring 18/18/18/18 and 15/15/15/15 — introduce a Semantic alias and re-point.
7. Modal "Campaign Modal" — replace [100, 100, 100, 100] with scale/96 or rebuild on a viewport-relative wrapper. Single component.
8. Cards rebuild — last; do this from scratch on auto-layout, splitting into named families. Do not try to fix in place.

Method: Plugin API walk via use_figma, figma.skipInvisibleInstanceChildren = true, BFS over each master root, recording layoutMode, paddingTop/Right/Bottom/Left, itemSpacing, layoutSizingHorizontal/Vertical, type, depth, and parent-LM context. Off-grid = not in the canonical 20-stop scale set. Read-only — no mutations.

16Verification plan

After each phase, verify with read-only Plugin API (use_figma in dry-run mode):

1. Token sweep audit — getLocalVariablesAsync() filtered to COLOR; assert every var outside Global/* and Modes/color/{primary,secondary,neutral,tertiary}/* resolves to VARIABLE_ALIAS in every mode. Zero raw hex tolerated.
2. Scale audit — assert every Global/scale/* value is in the canonical 20-stop set; assert every dimension consumer aliases a scale/N.
3. Contrast audit — for every (text-token, surface-token) pair used on the page, compute APCA + WCAG 2.x ratios; assert ≥ 4.5:1 for normal text, ≥ 3:1 for large/UI.
4. Target-size audit — walk every interactive component; assert hit area ≥ 24×24 (desktop) and ≥ 44×44 (mobile variants).
5. Focus state audit — assert every interactive component has a State = Focus variant or :focus-visible styling layer with the focus tokens applied.
6. Variant audit — assert no two siblings on the page differ only by Size or Status (must be variants, not separate components).
7. Visual regression — render a per-brand snapshot of each component group at start and after each phase; diff against pixel baseline. Tolerate ≤ 2 px drift on radii (3 → 4 round-up).
8. Dark-mode resolution — render the same component grid under Theme = Dark; assert no token resolves to its Light value.