Hardcoded duration and easing in component code
Writing `transition: opacity 250ms ease-in-out` instead of using motion tokens bypasses the system and creates animations that visually disagree across the product.
The wrong way
Setting a transition with a magic-number duration and a CSS-keyword easing, neither of which appears in the token system.
.accordion-content {
transition:
max-height 250ms ease-in-out,
opacity 200ms linear;
}Why
The motion tokens exist for the same reason the color tokens do: so two engineers building two features end up with motion that visually agrees. A hand-picked 250ms and 200ms might feel fine in isolation, but they're a touch out of step with the rest of the product, and once the system has a hundred of those tiny disagreements, the product feels uncoordinated. Worse, when the motion system evolves (different easings tuned for accessibility, slower defaults for cognitive load), your hardcoded values stay frozen and visually drift away from everything around them.
The right way
Reference the duration and easing tokens via their CSS custom properties.
.accordion-content {
transition:
max-height var(--motion-duration-normal) var(--motion-easing-default),
opacity var(--motion-duration-normal) var(--motion-easing-default);
}