2–7 lavender squares, anchored to a section corner. The corner-most square must touch the corner itself; squares must share an edge (no gaps); shape is composed at design time and varies per section. Keep clear space — clusters must not touch the text; place copy in the opposite corner. Hint: borrow shapes from Conway's Game of Life — R-pentomino, glider, boat, loaf, acorn — they read as alive.
Hero · R-pentomino · 5 px
Features · boat · 4 px
Testimonials · L (3) + pair (2)
CTA · acorn · 7 px
--u defaults to 32px at marketing scale and steps to 16–20px in product UI. Each square renders at --u + 1px so neighbours overlap by 1 px — this kills the sub-pixel gutter that appears at fractional zoom levels. Always lavender #AEABFF. The corner-most pixel sits at {top|left}: 0; every other pixel shares an edge with another. Place body copy in the opposite corner so the cluster never touches text. Never repeat the exact same cluster twice on a page.