3-Layer Token System
Design tokens organized in a hierarchical system: Core → Semantic → Component
Core (Brand)
Semantic (DS Team)
Component (Designers)
Core Tokens
Lowest level - Raw values editable by Brand / Design Ops
color
(9)Brand / Design Ops
Brand / Design Ops
Brand / Design Ops
Brand / Design Ops
Brand / Design Ops
Brand / Design Ops
Brand / Design Ops
Brand / Design Ops
Brand / Design Ops
typography
(12)Brand / Design Ops
Brand / Design Ops
Brand / Design Ops
Brand / Design Ops
Brand / Design Ops
Brand / Design Ops
Brand / Design Ops
Brand / Design Ops
Brand / Design Ops
Brand / Design Ops
Brand / Design Ops
Brand / Design Ops
spacing
(6)Brand / Design Ops
Brand / Design Ops
Brand / Design Ops
Brand / Design Ops
Brand / Design Ops
Brand / Design Ops
elevation
(6)Brand / Design Ops
Brand / Design Ops
Brand / Design Ops
Brand / Design Ops
Brand / Design Ops
Brand / Design Ops
motion
(3)Brand / Design Ops
Brand / Design Ops
Brand / Design Ops
References
Semantic Tokens
Middle level - Context meaning editable by Design System Team
color
(9)Design System Team
Design System Team
Design System Team
Design System Team
Design System Team
Design System Team
Design System Team
Design System Team
Design System Team
typography
(5)Design System Team
Design System Team
Design System Team
Design System Team
Design System Team
spacing
(4)Design System Team
Design System Team
Design System Team
Design System Team
elevation
(5)Design System Team
Design System Team
Design System Team
Design System Team
Design System Team
motion
(2)Design System Team
Design System Team
Maps To
Component Tokens
Highest level - UI mapping editable by Designers / Developers
color
(8)Designers / Developers
Designers / Developers
Designers / Developers
Designers / Developers
Designers / Developers
Designers / Developers
Designers / Developers
Designers / Developers
typography
(1)Designers / Developers
spacing
(9)Designers / Developers
Vertical padding
Designers / Developers
Vertical padding
Designers / Developers
Horizontal padding
Designers / Developers
Horizontal padding
Designers / Developers
Designers / Developers
Vertical padding
Designers / Developers
Vertical padding
Designers / Developers
Horizontal padding
Designers / Developers
Horizontal padding
elevation
(5)Designers / Developers
Designers / Developers
Designers / Developers
Designers / Developers
Designers / Developers
motion
(1)Designers / Developers