1 · Colour tokens

Contrast pairs verified: white on pink 5.6:1, cacao on cyan 6.2:1, pink on cream 5.3:1. Cream or white text on cyan fails and is never used — cyan text on light backgrounds uses Cyan Ink instead.

2 · Headline treatments

.ffp-pop on cream or white · .ffp-puff on pink or cacao · .ffp-ink on cyan. Shadow offsets drop about 30% below 767px.

3 · Buttons

Hover drops 2px to a 3px shadow; active drops 5px to none. Tab to any button to see the focus ring — 3px solid, 3px offset, cream on dark or pink.

4 · Eyebrows

5 · Sticker cards & tilt

Alternate .ffp-tilt-l and .ffp-tilt-r along a row. Hover lifts to a 9px shadow and straightens. Phones get a 4px shadow and no tilt.

6 · Flavour card (16 oz) with the scoop swap

Real catalogue data. Hover a card on a mouse: the plate turns pink and scales 1.05, the tub pops to 1.08 and −5°, and the scoops photo crossfades in over 0.28s. Touch devices get no swap, and reduced motion removes the movement while keeping the crossfade off.

7 · Gold ribbon, Spécial, French name, size pill

The ribbon's dark middle stops are load-bearing: they hold white Nunito 900 at 4.5:1 or better. Do not lighten them.

8 · Chips

9 · Marquee ribbon

40s linear loop, pauses on hover and on keyboard focus. Under reduced motion it stops and centres.

10 · Shop-by-size panels

11 · Size filter bar

Real buttons with aria-pressed inside a group labelled “Shop by size”, a polite live region, and 44px minimum targets. Wired to real sections in Phase 4 — here the targets are absent, so the chips self-disable to prove they never go dead.

12 · Scalloped edge & footer colours

13 · Reduced motion

With “reduce motion” on in the OS, the marquee stops and centres, the seal stops spinning, the hero cycle holds on Vanilla, and every hover transform is removed. Hover crossfades and colour changes remain, because they convey state rather than movement.