Skip to content
Motif
All tracks

Track 3

Design systems & tokens

Tokens, components, theming, and the governance that keeps a product coherent at scale.

  1. Lesson 1:
    Beginner20 min

    Design systems gallery

    A tour of the major public design systems — what each is built for, what to steal, and what to skip — so you can choose well or build your own.

  2. Lesson 2:
    Beginner14 min

    What is a design system?

    A design system is four layers working together — tokens, components, patterns, and governance. See what each layer does and why the order matters.

  3. Lesson 3:
    Beginner16 min

    Design tokens

    Named design decisions — color, space, type, radius, motion — stored once, referenced everywhere. Inspect Motif's own tokens and the three-tier model.

  4. Lesson 4:
    Beginner14 min

    Atomic design

    Brad Frost's atomic design names five levels — atoms, molecules, organisms, templates, pages — so a UI composes from primitives instead of one-off screens.