Course Directory
0 / 7 completed
Lesson 2

Design Tokens

The atomic foundation of design systems

Design tokens are the most fundamental variables in a design system, storing design decisions like colors, fonts, and spacing. They are platform-agnostic and can be transformed into any format—CSS, iOS, Android, and more.

Key Points
  • Primitive Tokens — The most basic values, like `blue-500: #3B82F6`
  • Semantic Tokens — Meaningful naming, like `color-primary: blue-500`
  • Component Tokens — Component-specific usage, like `button-background: color-primary`
Token Hierarchy Example
/* Primitive Tokens */
--blue-500: #3B82F6;
--gray-100: #F3F4F6;

/* Semantic Tokens */
--color-primary: var(--blue-500);
--color-background: var(--gray-100);

/* Component Tokens */
--button-bg: var(--color-primary);
--card-bg: var(--color-background);

Use semantic naming (like primary, background) rather than descriptive naming (like blue, light-gray), so when brand colors change, you only need to modify one place.

PreviousComplete & Continue