Motion

Snap motion — mechanical, physical, no fades

Motion Tokens

--ease-snap

cubic-bezier(.2,.9,.3,1.3)

--dur-fast

90ms

--dur-base

150ms

Rules

DoHover lifts up-left, shadow grows (sm → md/lg)

DoPress slams down, shadow collapses to 0

DoAlways use --ease-snap for interactions

Don'tNo opacity fades or scale transitions

Don'tNo translateY floats or blurred shadows

Don'tNo durations above 200ms for UI

Buttons — hover & press

Clickable card

Card item

Hover → lift · Click → slam

Checkbox

Click me

Done

Filter pills

✕ Don't — avoid these patterns

no fades

no translateY floats