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.
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.