Learning Goal

To understand the concept of token layers and their application in design systems.

Who

Designers, developers, and project managers interested in learning about design systems and token architecture.

What

This lesson covers the basics of token layers, including base, semantic, and component layers, and their application in multi-platform outputs.

Where

This lesson takes place in a virtual classroom setting, with access to relevant design resources and tools.

When

This lesson is part of a 17-day course on design systems, and it is recommended to complete it within that timeframe.

Why it matters

Understanding token layers is crucial for creating consistent and maintainable design systems. By learning about the different layers, you can better understand how to apply them in real-world projects and ensure cross-platform consistency.

How

To learn about token layers, you can follow these steps:

Study the different layers (base, semantic, component) and their roles in design systems.
Understand the naming conventions (color.brand.primary, space.md, radius.sm) and how they are applied in real-world projects.
Explore the pipeline and ban (UI should not use base directly) to ensure consistent outputs across platforms.
Practice applying consistently across courses to ensure a solid understanding of the concepts.

Guided Exercise

Write a brief description of the token layers you would like to explore in your next project.
Create 10 sample tokens (color, space, radius, motion, z-index) and define the ban (UI uses semantic/component only).
Document your pipeline and ban (UI should not use base directly).

Independent Exercise

Replace hard-coded values with tokens on one screen.

Self-Check

Layers defined.
Naming set.
Base → semantic → component chain works.

Bibliography (sources used)

Style Dictionary: https://amzn.github.io/style-dictionary/#/

Token Architecture