Results
This means designers build a component once and it adapts everywhere. No duplicating work per mode, no hard coded colors breaking when things change.
MyCAREER
TheW
Tier 3: Component Tokens
Apply semantic tokens to specific UI elements. A settings button's selected state pulls from the semantic token, so the same component works across all modes without any manual overrides. This also works in full screen motion pieces and backgrounds.
When my MyCAREER
Settings Button
Deselected
Settings Button
Deselected
Selected
When my MyNBA
Settings Button
Deselected
Settings Button
Deselected
Selected
When my MyTEAM
Settings Button
Deselected
Settings Button
Deselected
Selected
Settings Button
Deselected
Tier 1: Primitive Tokens
The raw values. Each game mode has its own highlight color. Designed in figma and set in a JSON file.
MyCAREER
Teal
#FF6B3B
MyNBA
Yellow
#FF6B3B
MyTEAM
Blue
#FF6B3B
TheW
Orange
#FF6B3B
Tier 2: Semantic Tokens
Dynamic references that resolve to the correct primitive based on context. A single token like highlight-gamemode.color automatically maps to the right color depending on which mode the user is in.
highlight-gamemode.
color
"color" resolves to current mode's primitive