02 Expressions · 02

The Ikon

The isotype in motion. The big square holds still; el punto flows around it like mercury and comes home to the top-right step.

The orbit — 2.4s linear loop, goo-welded, corners dwell as the icon

Anatomy

Two 90° squares whose union alone is rounded. A gooey filter — blur, alpha-contrast, crisp source re-composited — creates the concave fillet wherever the squares touch; every outer corner stays perfectly square. One color, one mark.

  • The big square never moves.
  • El punto rides each edge in a straight lane, elongating slightly in the direction of travel.
  • At every corner the union settles into the icon: a diagonal seat at the step, a brief dwell.
  • Home is the top-right step. The loop always lands there.

Where it lives

  • Loading — the primary indicator, replacing generic spinners. In chat, the agent’s avatar becomes the Ikon while the agent thinks; the mark stops moving when the answer arrives.
  • Brand moments — heroes, transitions, the 404.
  • Never as decoration running in a corner of a finished screen. Motion confirms; it never performs.

Rules

  • 2.4s, linear, continuous. Never faster, never eased.
  • Bugambilia by default; ink or white variants where the surface demands.
  • Honors prefers-reduced-motion — it rests as the static icon.
  • Never redraw the geometry. Use the system’s component or the published keyframes.