Skip to content
Living Pagebrand
Chapter 05

It opens

One gesture runs through the whole brand: a page turning. Motion is short, eased, and always reversible. If a movement can’t be explained as “a page opened” or “a thing arrived”, cut it.

Fig. 3 — the two curves

How things ease

Signature is symmetrical — a page opens the way it closes. Arrival overshoots slightly and settles, for things entering the screen.

0t 0.5101x — time · y — progress · one cycle = 1.8 s, there and back0.65, 00.35, 10.16, 10.3, 1signature · cubic-bezier(.65, 0, .35, 1) · 900 msarrival · cubic-bezier(.16, 1, .3, 1) · 150–800 mssignaturearrival

Timing

900ms for the fan, staggered 0/80/160ms from the centre page outward. 150ms for everything UI. Click a row to copy it.

Reduced motion is not a downgrade.

Under prefers-reduced-motion the fan holds open, and the reader falls back to vertical scroll instead of page-flip. Every state must be legible with all motion removed — the animation is a flourish on top of a complete design, never the thing that communicates.

Next — 06Voice