Foundations

Motion

Motion is calm and physical — no bounce, no scale-pop, no decorative spin. One ease-out curve carries almost everything; the line-art draw-in is the house signature. Every motion has a final resting frame that reduced-motion users see instantly.

Durations

--pds-dur-instant

100ms

State flips that must feel immediate.

--pds-dur-fast

150ms

Hover tints, small affordance changes.

--pds-dur-base

200ms

The default transition for most properties.

--pds-dur-invert

250ms

Primary-button fill + text-color inversion.

--pds-dur-theme

400ms

Theme swap across the whole surface.

--pds-dur-draw

1400ms

The line-art draw-in, front-to-back.

Easing

--pds-ease

cubic-bezier(0.22, 1, 0.36, 1)

Default ease-out — calm, physical, no bounce.

--pds-ease-inout

cubic-bezier(0.2, 0, 0, 1)

Symmetric in-out for reversible motion.

The draw-in

Line-art fields render front-to-back on the ease-out curve — hundreds of strokes drawn in over --pds-dur-draw. The field below animates on load.

Marquee

The one continuous motion in the system: a logo wall that translates on a linear loop, its edges faded by a horizontal mask. Used sparingly for “trusted by” strips.

Trusted by

ATLASMERIDIANNORTHWINDCOBALTHELIXVANTAAXION

Reduced motion

Under prefers-reduced-motion: reduce, every animation is suppressed and its final frame renders immediately — the draw-in shows the completed field, transitions become instant, the marquee holds still. No information ever lives only in the motion, so nothing is lost. The line-art components accept an explicit animate=false to opt out per instance as well.