01Foundations

Space and motion.

A four-unit spacing scale, and four curves, one per job. Shared by every theme.

02Space

Eleven steps on a four-unit base.

--s14px
--s28px
--s312px
--s416px
--s524px
--s632px
--s748px
--s864px
--s988px
--s10120px
--s11160px

03Motion

Four curves, one per job.

Every animation honours reduced motion and the motion toggle, and finishes in its end state when either is on. The full motion rules are in the rulebook, section 5.

--ease-revealcubic-bezier(.165,.84,.44,1)content arriving, 1 to 1.2s
--ease-uicubic-bezier(.77,0,.175,1)state that moves a surface, .25 to .4s
--ease-popcubic-bezier(.34,1.56,.64,1)small pops with a little overshoot, .5s
--ease-hovercubic-bezier(.25,.46,.45,.94)hover micro-states, .2 to .25s