Transformation Grid

A field of rounded squares that morph into circles, the graphic for change stories.

Grid of Dark Tan tiles whose corners round into circles across one patch of the field

When to use

Use the transformation grid for stories about change: fragmented → resolved, data → understanding, manual → automated, or before → after. It's a statement graphic, so use it in select moments rather than everywhere.

Anatomy

Element Spec
Tiles A regular grid of squares
Shape change Only the corner radius changes, from a slightly rounded square (about 10%) to a full circle. Position, size, and color never change.
Colors Tiles one step off the ground: Tan #F2F0EE or Dark Tan #CEC8C4 on Light Tan. Accent variants use Ultra Light Purple, Purple, or Dark Purple tiles. Use one tile color per grid.
Static versions A frozen moment: a soft patch of circles easing back to squares across the field

Motion

  • One soft bump of roundness travels a figure-8 across the grid in a 20-second seamless loop. Never let the field stop or reset.
  • On the web, the bump can follow the cursor instead, rounding tiles near the pointer into circles.
  • Tiles never move, scale, or change color.
  • Always honor prefers-reduced-motion by showing a static version.
Square transformation grid with circles easing back to rounded squares

Transformation Grid documentation last updated Tuesday, October 20, 2026