The Logo's Magic Was Never the Spiral

I had a logo I loved and couldn't reproduce. It was variant something-or-other out of more than a hundred, a "Galaxy Twin-Arm" mark made of tiny amber pixel squares tracing two overlapping arcs. Every time I asked an agent to iterate on it, the result came back flat — recognizably the same idea, drained of the one quality that made the original work. It took two failed rounds to figure out that the thing I was trying to preserve wasn't the thing I thought it was.

The playground

This was a multi-session design effort run inside an internal /design-system route built on React Flow (@xyflow/react). The canvas holds every logo variant as a node so I can compare them side by side at real size. By the end the SVG component file was ~3,900 lines and 100+ variants deep.

The working pattern, hardened by earlier sessions: never let parallel agents edit the same file. They fight over it and you get File has been modified since read errors. Instead, each Sonnet agent returns its variants as code in its response, and the orchestrator consolidates into the shared files. Clean, no conflicts.

By Round 10 the gradient was locked — an amber ember running #fde68a → #d97706 → #451a03 — and the Galaxy Twin-Arm had emerged as the breakout. Two arms of 3.5px squares, dark arm rendered first, light arm on top. That render order was doing more work than I realized.

Losing it, twice

Round 11 was supposed to iterate the galaxy into a clean ring. All ten variants came back flat. The agents placed pixels in a single layer around a circle — no overlap, no depth. Round 12, I tried it myself with trigonometry: two concentric rings offset by 15 degrees. It looked mechanical, nothing like the hand-placed original.

So I stopped and actually read the galaxy SVG. The two arms don't trace the same circle offset by a rotation. They trace different paths through the same region:

<!-- Dark arm, rendered first -->
<rect x="14" y="24" fill="#d97706"/>
<rect x="9"  y="22" fill="#92400e"/>
<!-- Light arm, rendered on top -->
<rect x="24" y="14" fill="#fde68a"/>
<rect x="22" y="9"  fill="#fbbf24"/>

Where a light pixel lands near — but not on — a dark pixel, the dark one peeks out behind it. That peek is the entire effect. The depth wasn't the spiral. It was two layers at slightly different positions.

The bottom-right gave it away

I kept the exact 14 hand-placed galaxy pixels and added four to each arm to close a gap. First attempt: the new gap-closing pixels sat at identical coordinates in both arms. Screenshot showed the top-left stacking beautifully while the bottom-right went flat — the dark pixels were perfectly hidden under the light ones.

That confirmed the theory. Same coordinates means the bottom layer is invisible. The fix was to offset the dark arm's gap pixels by 2-3px so they peek through, matching the irregular spacing of the original:

// Before — dark hidden behind light at the same spot:
{ key: 'rfd-7', x: 22, y: 9 }   // identical to light rfl-1
// After — dark nudged so it peeks out:
{ key: 'rfd-7', x: 25, y: 11 }  // offset from light (22,9)

Shipping it

Fraunces won the font pairing across 11 candidates — a variable serif whose soft, slightly wonky axes contrast nicely with the rigid geometric pixels. I swapped the old organic-blob mark for the ring ember in the marketing logo component and set the wordmark to Fraunces 600.

One non-obvious detail in generating icon assets from the SVG: the density flag.

magick -background none -density 1200 logo.svg -resize 512x512 logo-512.png

Without -density 1200, ImageMagick rasterizes the SVG at 72dpi before downscaling, and the small pixel squares come out blurry. Rasterize high, then resize down.

The takeaway

Stacking depth in flat SVG comes from render order plus a positional offset — never from coordinates that coincide. But the durable lesson is about iteration, not rendering: when something works and you can't reproduce it, you probably don't understand why it works yet. I burned two rounds asking agents to refine "the spiral" because I'd misnamed the source of the appeal. The galaxy's magic was never the spiral. It was that each arm traced a slightly different path through the same space — and hand-placed irregularity beat anything trig could compute.