Home
Bookmarks
Leagues
LEARN
Courses
Career Paths
Assessments
Tutorials
Arcade
Glossary
GROW
Certifications
Log in
Glossary
Log inSign up
Courses/Introduction to Design Systems/Design Tokens: The DNA of a Design System/
Exercise #3

Tier 1: Global Primitive Tokens

Global tokens form the raw bedrock of your design system palette. They have no opinion on how, where, or why they are used. They simply enumerate the total allowable creative materials.

Examples of Global Tokens:

  • Color Scales: color-palette-blue-50, ...blue-500, ...blue-900.
  • Base Units: dimension-base = 8px.
  • Font Families: font-family-sans = 'Inter', -apple-system, sans-serif.
  • Transition Timing: duration-instant = 100ms, duration-standard = 250ms.

Rule of Global Tokens: Never let feature squads write background-color: var(--color-blue-500) directly in a product layout! If the brand changes from blue to purple, every line of feature code will have to be rewritten.

Topics

What Are Design Tokens?
The 3-Tier Token Architecture
Tier 1: Global Primitive Tokens
Tier 2: Semantic (Alias) Tokens
Tier 3: Component-Scoped Tokens
Token Naming Taxonomies: The CTI Convention
Cross-Platform Token Compilation (Style Dictionary)
Composite Tokens: Typography Sets and Shadows
Resolving Token Dependency Chains
Token Versioning, Renaming & Safe Migration

From lesson

1

Design Tokens: The DNA of a Design System

Level 3 · Design Tokens & Foundations

Top contributors

Community contribution details will appear here once real learner activity is available.

Share