Design Systems

Design Token Exploration

Design tokens are the core of your design system. They are colors, spacing, typography, and other values that ensure consistency. This exercise helps you define, name, and structure tokens that scale across products.

Duration
2 hours
Group Size
4-6
Category
Design Systems
Difficulty
Easy
Participants will:

  • Understand design token roles in design systems.

  • Structure tokens for scalability and maintainability.

  • Create semantic and contextual token layers.

  • Develop naming conventions for various teams.

  • Plan for theming and platform variations.

Participants will produce:

  • A token architecture for scalability and theming.

  • Naming conventions for design and development.

  • A foundation for consistent design implementation.

  • Clear token documentation.

Key decisions:

  • Decide between semantic vs. primitive token layers.

  • Consider platform-specific token needs.

  • Plan token inheritance and theming.


Common pitfalls:

  • Too many tokens can be confusing.

  • Names that don't scale create problems later.

  • Missing semantic layers complicate component creation.

  • Ignoring dark mode from the beginning adds rework.


  1. Token Type Identification (30 minutes)


  • List variable design properties.

  • Categories: color, spacing, typography, elevation, motion, radius.

  • Review code/CSS for token usage.

  • Identify gaps between intent and implementation.


  1. Color Token Exploration (30 minutes)


  • Audit color usage.

  • Define semantic color tokens (primary, secondary, success, error).

  • Create contextual tokens (background, surface, text, border).

  • Consider dark mode and accessibility.


  1. Spacing & Typography (30 minutes)


  • Define a spacing scale (4px, 8px, 16px, etc.).

  • Map typography tokens: font family, size, weight, line-height.

  • Consider responsive typography.

  • Create scalable naming conventions.


  1. Token Naming Workshop (20 minutes)


  • Explore naming (semantic vs. descriptive).

  • Example: color-primary vs. blue-500.

  • Test names against use cases.

  • Document naming rationale.


  1. Synthesis (10 minutes)


  • Compile token documentation.

  • Identify implementation priorities.

  • Plan token governance.

Unlock Step-by-Step Instructions

Create a free account to access step-by-step instructions, agendas, and resources for all activities.

For Facilitators

  • Review participant profiles and expectations
  • Prepare all materials and supplies
  • Test technology and room setup

For Participants

  • Complete pre-session survey
  • Review background materials
  • Prepare examples or case studies

Unlock Pre-Work Requirements

Create a free account to access step-by-step instructions, agendas, and resources for all activities.


  • Color picker tools

  • Typography specimens

  • Spacing measurement tools

  • Whiteboard

  • Sticky notes

  • Token documentation template

  • Reference design systems (Material, Carbon, etc.)

Unlock Materials Required

Create a free account to access step-by-step instructions, agendas, and resources for all activities.

Discussion

0/2000
Loading comments...

Related Exercises

See all exercises

Component Audit And Categorization

3 hours

A component audit catalogs every UI element across your product. It reveals inconsistencies and redundancies that you might not know exist. This exerc...

Design systems

Design System Landscape Mapping

2 hours

Before building a new design system, map what already exists. Design system landscape mapping inventories all components, patterns, styles, and docume...

Design systems

Design System Governance Framework Development

2 hours

A design system needs governance to thrive. Without it, components become outdated. This exercise helps you establish rules, roles, and processes. We'...

Design systems