How updating our logo turned into a generative design system

We updated our mark recently — three stripes with curled ends, rebuilt so that every place it appears is drawing from one definition instead of nine hand-copied ones. With videos coming up too, that raised a question I had been avoiding: past the mark itself, what actually is our visual identity? We had colours written down, and fonts. What we did not have was anything that could tell you whether a given composition was ours or wasn’t.

So I went back to the designers who solved this properly. Otl Aicher’s identity system for the 1972 Munich Olympics is the reference point: a limited palette, a strict geometric module, and rules applied so consistently that hundreds of posters, pictograms and signage pieces read as one system rather than as one-off illustrations. His Fackellauf (Torch Relay) poster — catalogued in the HfG-Archiv in Ulm alongside the rest of the programme — is the clearest single instance of that language: bars, quarter-turn curves, and almost nothing else.

So I drew one. Not a copy — the same vocabulary in our colours, with our mark seated on the guide line at the foot. That is the poster at the top of this page. Getting it to stop looking like an imitation took a while, and nearly all of that time went on decisions I could not have explained to anyone: why this boundary turns here, why that colour stops after two bars and never comes back.

Which is the part that turned out to be interesting. Every decision I couldn’t explain was a rule I hadn’t written down yet. So the question stopped being "how do I make more of these" and became something better: could we write the rules down precisely enough that a machine generates new ones that are unmistakably ours — and animates between them, so the identity moves as well as sits still?

The answer turned out to be twelve invariants, split across geometry (how bars and boundaries are laid out) and colour (how eight colours plus a ground colour are allowed to move through the composition). Every boundary between two colours is a quarter turn of a fixed radius — never a straight edge, never a different curve. Every colour holds exactly one run across the whole piece and never returns. A colour can’t sit on top of itself for more than 20% of a bar’s width, which forces colours to cross the composition diagonally instead of pooling into blocks. The lattice, the palette, the closing ground colour — all twelve are specified, not implied.

What makes the twelve invariants a grammar rather than just a checklist is that they collapse to one shape. Both moves the system allows — a boundary curving left or curving right — are the same cubic Bézier, with the same control handles, differing only in the sign of one displacement parameter. Set that parameter to zero and you get an exact straight cut, which the geometry rules explicitly forbid. So the primitive is one parameter wide, and every animation in the tool is just a slide along it — not an interpolation between unrelated shapes, but movement along the one curve the grammar has.

That is also why the tool can offer an Animate mode: each beat proposes one legal mutation — slide a boundary a column, exchange two colours (substituting an unused one is the same move, not a separate one), or flip a pair of turns so a capsule becomes an S-curve — checks it against all twelve invariants, and discards it if it fails. Turns flip in pairs deliberately: a single flip would shift every position below it and break the alternating tangent state the grammar requires. Every frame you see mid-animation is itself a fully valid composition, not an approximation moving toward one.

Eight colours, each capped at three bars by the one-run rule, gives a hard ceiling of 24 colour-bar slots in the whole system. Requiring all eight colours to appear, each needing at least two bars, sets a floor of 16. That range — 16 to 24 — isn’t a design choice, it’s arithmetic, and it closes the system from both ends: five bars can’t reach the 16-slot floor no matter how they’re filled, and past eleven bars the budget saturates so completely that every seed collapses into the same alternating pattern.

The tool derives that bound directly and uses it to raise the affected slider’s minimum, so a setting with zero feasible compositions can never be selected in the first place — not shown-but-disabled, simply unreachable. It is the same instinct as the rest of what we build: an independent checker re-verifies every generated composition against all twelve invariants before it’s shown, and a generation attempt that can’t find a legal composition after 600 retries says so honestly instead of quietly emitting a violation.

The mark came first. The poster this grammar was formalised from was composed in the same visual language as the logo, with the mark already sitting in it — the grammar didn’t predate either. So it’s not a coincidence that the mark and the grammar share a curve; the honest claim is narrower and, we think, more interesting: once the grammar was written down as twelve precise rules, we could go back and measure whether the mark actually is an instance of it, rather than just resembling one.

It is. The logo’s three stripes are exactly 300 units thick, and each curled end is a quarter turn of radius 300. The measured chord across that curl is 423.9 units; a true quarter arc of radius 300 gives 424.26 — a 0.08% deviation, consistent with the cubic Bézier approximation a design tool exports for a quarter circle. That is precisely the grammar’s B1 primitive: a boundary between two colours as a quarter turn of a fixed radius, never a straight edge. The mark isn’t merely reminiscent of the grammar — measured against B1’s own tolerance, it’s an exact instance of it.

The tool is a self-contained page with no dependencies and no build step: it generates every composition the twelve rules allow, walks between them one legal move at a time, and tells you honestly when a setting has no valid answer instead of showing you something broken. Open it and turn the dials — every composition it shows you is provably legal, because the same code that drew it also checked it.

One detail I enjoyed: of the nine colours in there, two turned out to be ours already — the tan is our Bronze exactly, and the ground is our Cream. The other seven came out of the poster and stayed.

Mostly, though, I built it for the movement. There are videos coming, and I would rather the artwork in them be generated by the rules than drawn a frame at a time.