*Demo only — showing a small set of tokens so we can clearly see how they apply across 3 brands.
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 |
Blue-Brand 1/Primary#2c4e7e |
Brown-Brand 2/Primary#5a2f1f |
Green-Brand 3/Primary#15613f |
Color/Brand/Primary |
--color-brand-secondary |
Blue-Brand 1/Secondary#2f71d4 |
Brown-Brand 2/Secondary#987e75 |
Green-Brand 3/Secondary#6e9c88 |
Color/Brand/Secondary |
| Layer 2 — Semantic: Button Colors | ||||
--btn-solid-default |
Blue-Brand 1/Blue-900#142d51 |
Brown-Brand 2/Brown-900#5a2f1f |
Green-Brand 3/Green-900#15613f |
Buttons/Solid/Default |
--btn-solid-hover |
Blue-Brand 1/Blue-700#255090 |
Brown-Brand 2/Brown-700#79574a |
Green-Brand 3/Green-700#417f63 |
Buttons/Solid/Hover |
--btn-solid-pressed |
Blue-Brand 1/Blue-500#2f71d4 |
Brown-Brand 2/Brown-500#987e75 |
Green-Brand 3/Green-500#6e9c88 |
Buttons/Solid/Pressed |
--btn-solid-focus-fill |
Blue-Brand 1/Blue-100#e4eaf4 |
Brown-Brand 2/Brown-100#c6b9b4 |
Green-Brand 3/Green-100#c8d7d1 |
Buttons/Solid/Focus-Fill |
--btn-solid-focus-ring |
Blue-Brand 1/Blue-300#90a5c4 |
Brown-Brand 2/Brown-300#b7a69f |
Green-Brand 3/Green-500#6e9c88 |
Buttons/Solid/Focus-Ring |
--btn-outline-default |
Blue-Brand 1/Blue-900#142d51 |
Brown-Brand 2/Brown-900#5a2f1f |
Green-Brand 3/Green-900#15613f |
Buttons/Outline/Default |
--btn-outline-hover |
Blue-Brand 1/Blue-700#255090 |
Brown-Brand 2/Brown-700#79574a |
Green-Brand 3/Green-700#417f63 |
Buttons/Outline/Hover |
--btn-outline-pressed |
Blue-Brand 1/Blue-500#2f71d4 |
Brown-Brand 2/Brown-500#987e75 |
Green-Brand 3/Green-500#6e9c88 |
Buttons/Outline/Pressed |
--btn-outline-focus-fill |
Blue-Brand 1/Blue-100#e4eaf4 |
Brown-Brand 2/Brown-100#c6b9b4 |
Green-Brand 3/Green-100#c8d7d1 |
Buttons/Outline/Focus-Fill |
--btn-outline-focus-ring |
Blue-Brand 1/Blue-300#90a5c4 |
Brown-Brand 2/Brown-300#b7a69f |
Green-Brand 3/Green-300#9bbaac |
Buttons/Outline/Focus-Ring |
--btn-outline-text |
Blue-Brand 1/Blue-900#142d51 |
Brown-Brand 2/Brown-900#5a2f1f |
Green-Brand 3/Green-900#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 |
Blue-Brand 1/Primary#2c4e7e |
Brown-Brand 2/Primary#5a2f1f |
Green-Brand 3/Primary#15613f |
Color/Border/Focus |
| Layer 3 — Component: ProductDiscovery | ||||
--discovery-filter-hover-bg |
Blue-Brand 1/Blue-100#e4eaf4 |
Brown-Brand 2/Brown-100#c6b9b4 |
Green-Brand 3/Green-100#c8d7d1 |
Buttons/Outline/Focus-Fill |
--discovery-card-accent-new |
Blue-Brand 1/Blue-900#142d51 |
Brown-Brand 2/Brown-900#5a2f1f |
Green-Brand 3/Green-900#15613f |
Color/[Brand]/[Scale]-900 |
--discovery-card-accent-wrinkle |
Blue-Brand 1/Blue-700#255090 |
Brown-Brand 2/Brown-700#79574a |
Green-Brand 3/Green-700#417f63 |
Color/[Brand]/[Scale]-700 |
--discovery-card-accent-perf |
Color/Brand/Logo#8e2231 |
Brown-Brand 2/Brown-500#987e75 |
Green-Brand 3/Green-500#6e9c88 |
Color/Brand/Secondary |
All 3 Brands — Same Component, Switched Token Values
Brand 1 — Navy
Brand 2 — Brown
Brand 3 — Green