Token Audit 0 hardcoded values 3-layer token architecture Source: Figma JSON (auto-generated) Brand switch = data-attribute only
Token Reference — Differentiating Values Across Brands Layer 1: Primitive → Layer 2: Semantic → Layer 3: Component
Token (CSS Custom Property) Brand 1 — Navy Brand 2 — Brown Brand 3 — Green Source
Layer 1 — Brand Primitive Colors
--color-brand-primary
#2c4e7e
#5a2f1f
#15613f
 Color/Brand/Primary
--color-brand-secondary
#2f71d4
#987e75
#6e9c88
 Color/Brand/Secondary
Layer 2 — Semantic: Button Colors
--btn-solid-default
#142d51
#5a2f1f
#15613f
 Buttons/Solid/Default
--btn-solid-hover
#255090
#79574a
#417f63
 Buttons/Solid/Hover
--btn-solid-pressed
#2f71d4
#987e75
#6e9c88
 Buttons/Solid/Pressed
--btn-solid-focus-fill
#e4eaf4
#c6b9b4
#c8d7d1
 Buttons/Solid/Focus-Fill
--btn-solid-focus-ring
#90a5c4
#b7a69f
#6e9c88
 Buttons/Solid/Focus-Ring
--btn-outline-default
#142d51
#5a2f1f
#15613f
 Buttons/Outline/Default
--btn-outline-hover
#255090
#79574a
#417f63
 Buttons/Outline/Hover
--btn-outline-pressed
#2f71d4
#987e75
#6e9c88
 Buttons/Outline/Pressed
--btn-outline-focus-fill
#e4eaf4
#c6b9b4
#c8d7d1
 Buttons/Outline/Focus-Fill
--btn-outline-focus-ring
#90a5c4
#b7a69f
#9bbaac
 Buttons/Outline/Focus-Ring
--btn-outline-text
#142d51
#5a2f1f
#15613f
 Buttons/Outline/Text
Layer 2 — Semantic: Typography & Shape
--font-family-brand Proxima Nova Canela (Cormorant) Nunito Buttons/Font-Family/Default
--btn-radius 4px 0px 16px Buttons/Radius/Default
--color-border-focus
#2c4e7e
#5a2f1f
#15613f
 Color/Border/Focus
Layer 3 — Component: ProductDiscovery
--discovery-filter-hover-bg
#e4eaf4
#c6b9b4
#c8d7d1
 Buttons/Outline/Focus-Fill
--discovery-card-accent-new
#142d51
#5a2f1f
#15613f
 Color/[Brand]/[Scale]-900
--discovery-card-accent-wrinkle
#255090
#79574a
#417f63
 Color/[Brand]/[Scale]-700
--discovery-card-accent-perf
#8e2231
#987e75
#6e9c88
 Color/Brand/Secondary

All 3 Brands — Same Component, Switched Token Values

Brand 1 — Navy
Brand 2 — Brown
Brand 3 — Green