Design practice

Build a Motion Token Scale

Define duration, easing, and delay tokens following Material Design 3's token model

Start the exercise

01 / Prepare

What you’ll
work on.

Design and implement a complete motion token system for a small design system. Define duration scales, easing curves, delay values, and choreography patterns — then apply them to real UI interactions to verify they work.

Before you begin

  • Understanding of CSS transitions and animations
  • Familiarity with cubic-bezier curves
  • Familiarity with animation duration, easing, and design tokens
  • Basic CSS custom properties knowledge

02 / Practice

The work,
step by step.

Work through these 5 parts at your own pace. Keep your notes and work together so you can review them when you finish.

  1. Define Duration Tokens

    45 min

    1. Define a duration scale with 6–8 named values

      --motion-duration-instant: 50ms;   /* Micro-feedback: ripples, toggles */
--motion-duration-quick: 100ms;    /* Hover states, small reveals */
--motion-duration-short: 150ms;    /* Button presses, icon transitions */
--motion-duration-medium: 200ms;   /* Standard transitions */
--motion-duration-long: 300ms;     /* Page transitions, large reveals */
--motion-duration-slow: 400ms;     /* Complex choreography */
--motion-duration-deliberate: 500ms; /* Full-page transitions, onboarding */

    2. Document when to use each value with examples

    3. Rationale: why these increments? (NNGroup research: 100–300ms for most UI, 500ms max)

  2. Define Easing Tokens

    45 min

    1. Define 4–5 easing curves as named cubic-bezier values

      --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);      /* Default movement */
--motion-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);     /* Attention-drawing */
--motion-ease-decelerate: cubic-bezier(0, 0, 0, 1);       /* Entering elements */
--motion-ease-accelerate: cubic-bezier(0.3, 0, 1, 1);     /* Exiting elements */
--motion-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Playful overshoot */

    2. Visualize each curve (use cubic-bezier.com or a similar tool)

    3. Document which curve to use for: entrances, exits, persistent motion, emphasis

  3. Define Choreography Patterns

    30 min

    1. Define stagger delay values

      --motion-stagger-tight: 30ms;
--motion-stagger-normal: 50ms;
--motion-stagger-loose: 80ms;

    2. Document choreography patterns: Cascade (sequential top-to-bottom reveal), Radiate (center-outward stagger), Sequential (one after another in flow order)

  4. Apply to Real Components

    60 min

    1. Button — hover (quick + standard ease), press (instant + accelerate), focus ring

    2. Dropdown menu — open (short + decelerate), close (quick + accelerate), item stagger

    3. Card list — scroll-reveal with cascade stagger

    4. Toast notification — enter (medium + decelerate), exit (short + accelerate)

  5. Reduced Motion Variant

    30 min

    1. Create a prefers-reduced-motion override: reduce all durations to instant or remove transitions

    2. Replace motion with opacity-only fades where appropriate

    3. Keep functional animations (progress indicators) but simplify decorative ones

    4. Test with reduced motion enabled in OS settings

03 / Review

Look at what
you’ve made.

Gather your deliverables, then use the criteria to find what worked and what you would change. They also give a peer something specific to respond to.

What to bring together

  • CSS file with all motion tokens (durations, easings, staggers)
  • Documentation: when to use each token, with examples
  • Demo page with 4 components using the token system
  • Reduced motion variant
  • Easing curve visualizations

How to assess your work

Scale logic
Durations and easings form a coherent, intentional system
Naming
Token names communicate intent (not just values)
Application
Components feel consistent because they share the same motion language
Reduced motion
Graceful alternative, not just animation: none
Documentation
Another designer could use these tokens without asking questions

Choose your
next exercise.

Browse all exercises