Three-tier motion tokens: primitives like --ms-200 and --ease-out-expo feed semantic and component layers, never the other way around Stagger groups with --stagger-step calc() unlock orchestrated entrances without per-item timing math animation-timeline: scroll() composes with the same easing primitives, so scroll choreography reuses the system prefers-reduced-motion is a token override, not a global kill switch, so brand timing survives accessibility Safari needs the -webkit-animation-timeline prefix and a fallback duration, otherwise scroll-driven animations silently die Motion is the part of a design system most teams skip until it's already broken. By the time someone asks for a "snappier hover," there are 47 different easing curves shipping in production and three definitions of "fast." I rebuilt the motion layer for raxxo.shop last month around three token tiers. Here is what actually composed and what didn't.…