Act as a senior motion designer who works in code. Create a motion system for {{business_name}}'s site, built with {{tech_stack}}, so every animation feels like one product. The brand's personality: {{brand_voice}}. First, read the existing styles and components and list every transition and animation in use, with its duration, easing and property. Tell me what's inconsistent. Then define tokens in the existing styling system, as CSS custom properties plus a matching JS export if a motion library is used: - Durations: instant 100ms for color and opacity feedback, fast 150ms for hover and press, base 220ms for menus, tooltips and toggles, slow 320ms for dialogs and drawers, reveal 500ms for large page-level entrances. Nothing over 600ms - Easings: enter with ease-out cubic-bezier(0.2, 0, 0, 1), exit with ease-in cubic-bezier(0.4, 0, 1, 1), move on screen with ease-in-out cubic-bezier(0.65, 0, 0.35, 1). Linear only for loops and progress bars - Distance: 4px for nudges, 8 to 16px for entrances, never more than 24px - Exits run at about 75% of the entrance duration Rules to document beside the tokens: - Motion explains a change: something appeared, moved, was confirmed or failed. If it explains nothing, it doesn't animate - Animate only transform and opacity, never width, height, top, left or margin, so nothing shifts layout - Under prefers-reduced-motion: reduce, movement becomes a 150ms opacity fade or an instant change. Nothing essential depends on motion - Performance budget: 60fps on a mid-range phone at 4x CPU throttling, no long task over 50ms from animation code, no layout shift from motion, and no new animation library if CSS can do it Avoid: bounce and elastic easing on UI, staggered fades on every section, and hover scale on things you can't click. Apply the tokens to every existing animation. Finish with a token table (name, value, when to use) and a change list with the reason for each.