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);
}