v4 was an architecture; v3.2 is a discipline.

v4 proposed flattening Primitives into a brand-prefixed library and moving the brand mode axis onto Semantic. After three iteration sessions the team concluded the migration cost outweighed the structural win — and that the real problem was not the shape of the collections but the discipline applied inside them. v3.2 keeps the v3.1 collection model and locks two rules that make it stay clean.

The shape of v3.2.

Each axis lives in exactly one collection. Aliases flow downward only: Global is the floor, Component Packs is the ceiling.

Total: ~382 active tokens across ~2,180 distinct values when unrolled across all modes. Down from v3.1's ~525 because the chrome layer collapsed when Modes absorbed it.

How a token resolves at the component.

Components bind Component Packs or Semantic. Each layer aliases the layer below. Frame mode = brand × theme. The chain ends at Global or Modes DNA.

# Frame mode: brand=Lyllo, theme=Light

Component Packs/cta/primary/background
  → Semantic/color/brand/primary
    → Modes/color/brand/primary # resolves per brand mode
      → Modes/color/primary/500 # Lyllo: #F02884 · raw hex (DNA)

Component Packs/cta/primary/text
  → Theme/color/text/on-brand
    → Modes/color/text/on-brand # Light: aliases Global/color/white
      → Global/color/white # #FFFFFF · raw hex

Component Packs/cta/radius
  → Semantic/radius/sm
    → Modes/radius/cta
      → Global/scale/4 # 4px (rounded from legacy 3)

Component Packs/cta/padding/x
  → Semantic/spacing/md
    → Global/scale/16 # 16px

Read this as: component → role → brand-or-theme → DNA-or-Global. Switching Theme=Dark at the frame swaps only the Theme leg; switching Modes=Snabarre swaps the Modes leg. Global is invariant across everything.

The floor: brand-invariant raw values.

116 variables + 5 elevation Effect Styles. Single Default mode. Holds black, white, system colours, the 4-point scale, typography sizes, breakpoints, strokes — anything that does not change per brand or theme.

Brand DNA + brand-tinted chrome.

140 variables across 9 brand modes. Brand DNA holds the only raw hex outside Global. Everything else in Modes is an alias to brand DNA or Global.

Alias chrome inside Modes

Every other Modes token aliases DNA — radii, brand chrome (header, banner, landing, menu-row, nav, surface, text, icon, border), typography family/weight, flag/meta strings.

Modes/color/header/surface-primary
  → Modes/color/neutral/600   # Lyllo: #5b5c60 (brand-tinted grey)

Modes/radius/cta
  → Global/scale/4           # 4px — rounded from legacy 3

Modes/radius/pill
  → Global/scale/160         # 160px — true pill

Light and Dark, 100% alias.

31 variables, 2 modes (Light, Dark). Every token in Theme is an alias — never raw hex. The Light alias chains through Modes to brand DNA; the Dark alias does the same with the dark-side stop.

theme/surface/page
  Light → Modes/color/surface/page
            → Modes/color/neutral/100   # brand-tinted off-white
  Dark  → Modes/color/surface/page
            → Modes/color/neutral/900   # brand-tinted near-black

theme/text/primary
  Light → Modes/color/text/primary
            → Modes/color/neutral/900   # near-black text on light
  Dark  → Modes/color/text/primary
            → Modes/color/neutral/100   # off-white text on dark

theme/nav/shadow
  Light → Global/color/black-alpha/10
  Dark  → Global/color/black-alpha/0    # no shadow needed on dark

Role tokens for designers and devs.

53 variables, single mode, 100% alias. Spacing, icon-size, and 36 colour roles. Components bind Semantic when they need a role-named token without component-specific naming.

Plus 36 colour aliases mapping common roles (text, surface, border, icon, status, brand) to Modes or Theme tokens.

Last-mile alias packs for component masters.

38 variables. Component-specific aliases that sit one layer above Semantic — used when a component master needs a token name that does not generalise (e.g. menu-row/label/on-icon).

Component Packs/menu-row/icon
  → Semantic/color/icon/content
    → Theme/color/icon/content
      → Modes/color/icon/content
        → Modes/color/neutral/700

Component Packs/cta/primary/background
  → Semantic/color/brand/primary
    → Modes/color/brand/primary
      → Modes/color/primary/500

Component Packs/header/active-selected
  → Modes/color/header/active-selected
    → Modes/color/primary/500   # NOT neutral — must contrast surface-primary

Raw hex lives in two homes. Everywhere else is an alias.

This is the discipline rule. It is enforced by a single Plugin API audit that any session can run.

Strict 4-point scale. No exceptions.

Global/scale/* contains only 0 or multiples of 4. Twenty stops. Off-grid legacy values round to the closest stop — type rounds up, radii round to closest.

Canonical scale (20 stops):
0, 4, 8, 12, 16, 20, 24, 28, 32, 40,
48, 56, 64, 72, 80, 96, 112, 128, 144, 160

Same DNA, nine personalities.

Each brand mode in Modes overrides the four DNA ramps. Everything else in Modes (chrome aliases, radii, typography family, meta strings) re-resolves automatically when the frame's brand mode flips.

Three brands have visible frames in fysBbW10LRJUNgisaBKXJo; the remaining six exist as Modes entries ready for future visual coverage.

v3.1 → v3.2 in one table.

Renames preserve binding IDs in Figma — components pick up new names without per-instance edits.

Who can edit what.

Marketing edits brand DNA only. Compliance edits Regulatory. The DS lead owns the rest. This boundary is what makes the architecture survive contact with day-to-day work.

The single-edit-point property of brand DNA is what enables marketing self-service: edit one ramp stop, the whole chain updates. Component bindings never need touching at the marketing level.

v3.2 ships in the variable layer. Components are next.

The variables landed on 2026-04-29. Component masters on the Components page still bind earlier library names — see the component audit for the full gap analysis and remediation plan.