Foundations
Tokens
Design tokens are all the semantic names for data needed to construct and maintain a design system — spacing, color, typography, object styles etc.
Overview
Design tokens point to style values like colors, fonts, and measurements
Using design tokens instead of hardcoded values can streamline the work of building, maintaining, and scaling products with a design system.
Anatomy
Base
Category
M
Property
M
Hierarchy
O
Concept
M
Modifiers
Variant
O
State
M
M
Mandatory
O
Optional
Parts
Base
Base names define the specific elements that make up a component
Category
Static
Action
Feedback
Component
Property
Content
Surface
Border
Button
Link
Hierarchy
Primary
Secondary
Tertiary
Concept
Color
Font
Elevation
Radius
etc...
Modifier
Base names define the specific elements that make up a component
Variant
Default
Subtle
Emphasis
Left
Right
State
Hover
Active
Selected
Focus
Disabled
Dictionary
Base
Category
Property
Hierarchy
Concept
Modifiers
Variant
State