Design System

Motion

One easing covers everything: --ease = cubic-bezier(0.22, 1, 0.36, 1). It's a gentle out-quint that feels confident but not springy.

Durations are not tokenized — components pick from a small set inline (140 / 180 / 220 / 320 ms). The consistency comes from the easing.

import from @halwel/ui/tokens (motion)

Variants

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

default easing for hover, focus, transitions