01 Foundations · 05

Motion

Smart Certainty in movement: motion confirms, it never performs.

One curve

cubic-bezier(0.4, 0, 0.2, 1) — for everything. There is no second curve.

Three durations

Hover each tile to feel the difference. Nothing animates longer than 300ms. No springs, no bounces, no parallax, no decorative motion.

Loading — the Ikon in motion

The primary loading indicator is the isotype in motion: two squares whose union alone is rounded, welded by a gooey fillet. The big square holds still; el punto flows around it like mercury — at every corner the composition settles into the icon, then melts along the edge. Home is the top-right step.

The full anatomy — and what the Ikon may and may not do — lives in Expressions → The Ikon.

Entrances

Fade in at 200ms. Slide up or down at 250ms with 8px of travel. Overlays combine a scrim fade with a slide-up panel. Theme switching cross-fades background and text colors at 200ms.

Respect

Honor prefers-reduced-motion: reduce entrances to opacity only, and rest the Ikon as the static icon.