Calibrate Design System

Motion

Durations and easing curves for transitions and animation. Use these tokens so motion stays consistent across the system.

Duration

var(--clbr-motion-duration-0)

Instantaneous duration.

var(--clbr-motion-duration-50)

Micro duration step.

var(--clbr-motion-duration-100)

Default duration. Pick the step that matches the size and emphasis of the motion.

var(--clbr-motion-duration-150)

Quick duration step.

var(--clbr-motion-duration-200)

Moderate duration step.

var(--clbr-motion-duration-250)

Comfortable duration step.

var(--clbr-motion-duration-300)

Extended duration step.

var(--clbr-motion-duration-600)

Long duration step.

var(--clbr-motion-duration-3000)

Ambient duration step.

Easing

var(--clbr-motion-easing-ease-in)

Ease-in curve. Use for elements leaving the viewport — slow start, accelerating exit.

var(--clbr-motion-easing-ease-in-out)

Ease-in-out curve. Use for movements that both originate and settle on screen (e.g. expansions in place).

var(--clbr-motion-easing-ease-out)

Ease-out curve. Use for elements entering the viewport — fast start, gentle settle.

var(--clbr-motion-easing-emphasized)

Emphasised easing curve. Use for transitions that should feel more expressive (e.g. brand-led page transitions, hero reveal motion).