Brand 1 — Navy / Proxima Nova / Radius 4px
All 3 Brands — Same Component, Switched Token Values
Brand 1 — Navy
Brand 2 — Brown
Brand 3 — Green
Token Reference — Differentiating Values Across Brands
Layer 2: Semantic → Layer 3: Component
| Token (CSS Custom Property) | Brand 1 | Brand 2 | Brand 3 | Source |
|---|---|---|---|---|
--btn-solid-default |
#142d51 |
#5a2f1f |
#15613f |
Buttons/Solid/Default |
--btn-solid-hover |
#24508f |
#79574a |
#417f63 |
Buttons/Solid/Hover |
--btn-radius |
4px | 0px | 16px | Buttons/Radius/Default |
--font-family-brand |
Proxima Nova | Canela (Cormorant) | Nunito | Buttons/Font-Family/Default |
--discovery-card-accent-new |
#142d51 |
#5a2f1f |
#15613f |
Color/[Brand]/[Scale]-900 |
--discovery-filter-hover-bg |
#e4eaf4 |
#c6b9b4 |
#c8d7d1 |
Buttons/Outline/Focus-Fill |
--color-border-focus |
#2c4e7e |
#5a2f1f |
#15613f |
Color/Border/Focus |