Internship
Student login
← Design Systems learning path
Design Systems · Module 2 of 10

Design tokens

Tokens are named values for colour, spacing, type and more.

📖 Key ideas

  1. A token gives a value a name, like color-primary = #0B7A3E.
  2. Primitive tokens hold raw values; semantic tokens give meaning (color-text-danger).
  3. Change one token and every component using it updates.
  4. Tokens are exported to CSS variables, iOS and Android code.
  5. Dark mode often swaps semantic tokens, not components.
💡 Real-life example: Like naming the school colours "house red" and "house blue": you change the shade once and every jersey follows.
Design tokenNamed design value
Primitive tokenRaw value like blue-500
Semantic tokenMeaning-based name like text-danger
CSS variableCustom property such as --color-primary