Guidelines
Motion
Motion is slow and settles. Things arrive quickly and take their time to stop, the way a heavy door closes. Nothing bounces, nothing spins, nothing moves on its own.
Tokens
Two curves and one long duration, declared in @theme.
--ease-coachcubic-bezier(0.22, 1, 0.36, 1)Everything that arrives: hovers, reveals, underlines.
--ease-coach-in-outcubic-bezier(0.65, 0, 0.35, 1)Things that travel and stop: a sheet, a carousel.
--ease-coach
--ease-coach-in-out
linear
--duration-image: 900ms is the image hover. Interface transitions run at 300ms, content changes at 350 to 600ms.
Small moments
Hover each one.
Content changes
The real blocks. Pick a category, then load more.
Explore the world of Coach
Guides
The Best Top-Handle Bags
Press
Coach is serving up coffee with handbags as it looks to build on Gen Z success
Part café, part store, and built on a simple idea: give people a reason to stay. How Coach is meeting a younger audience where it already spends its time, and why the bag is still the point.
Continue reading
Our story
The hangtag, and the hands behind it
Press
Coach is serving up coffee with handbags as it looks to build on Gen Z success
Part café, part store, and built on a simple idea: give people a reason to stay. How Coach is meeting a younger audience where it already spends its time, and why the bag is still the point.
Continue reading
Guides
How to charm a bag
Every moment
| Moment | Movement | Duration | Curve | Reduced motion |
|---|---|---|---|---|
| Image on hover | Scale 1 → 1.03 | 900ms | --ease-coach | No scale |
| Nav underline | Draws from the left, scale-x 0 → 1 | 300ms | --ease-coach | Appears |
| Text link | Underline fades to 30% | 300ms | ease | Same |
| Category filter | Grid fades out, new one rises 8px | 350ms | --ease-coach | Fade only |
| Load more | New rows rise 24px and fade in | 600ms | --ease-coach | Fade only |
| Index cards | Rise 16px, staggered per row by 60ms | 600ms | --ease-coach | Fade only |
Rules
- Motion answers something the reader did. Nothing autoplays, loops or parallaxes.
- Opacity and transform only. Never animate layout, colour on photographs, or blur.
- With
prefers-reduced-motion, travel and scale go; fades stay, because they tell you something changed. - Exits are quicker than entrances, and a hover that ends returns without delay.