Practice

Interaction & motion.

Aceve products feel like a desktop app. Transitions are short, linear, decisive — never bouncy. Spring animations belong in consumer apps.

Principles

Fast over fluid
50–250ms for UI feedback. 500ms for drawers and modals. 1000ms for page-level only.
Linear or ease-std
One easing curve everywhere. Don't pick a custom curve per component.
No press scaling
Buttons don't shrink on click. They commit, instantly.
State, not theatre
Animation tells the user what changed — never decorates.
Drawers slide
Right-side drawers slide in over 500ms. Backdrop is a hairline only — no blur.
No bounces
No springs. No overshoots. We're estimating concrete here.

Durations

--sprout-motion-duration-xfastInstant feedback — hover, toggle, icon swap50ms
--sprout-motion-duration-fastHover, focus, button press150ms
--sprout-motion-durationDefault — dropdown, tooltip, color change250ms
--sprout-motion-duration-slowDrawer slide, modal enter500ms
--sprout-motion-duration-xslowPage-level transitions, complex sequences1000ms

Try it

· hover the buttons; click cells; toggle theme
← PreviousContext menu
Sprout · Aceve Design System · v3.12.1