Novus Motion Lab

Overview

A self-set challenge. Can a whole family of marks come from one geometric grammar, and can each mark's animation explain how it is built instead of decorating it?

Novus is Pendo's product agent. It scans a codebase, builds a product map out of what it finds, and puts analytics live through a pull request. Those three moves are also the three steps a new user is walked through on the way in, so the set had somewhere real to land: the marks were drawn against that sequence, and the three that shipped sit on those steps.

It started in Figma. I drew the logo there and extracted the SVG, then built a first reference, a line and a few boxes, for Cursor to work from as the generator took shape.

Blocks, 45 degree diagonals, a fixed grid. Twelve marks. Grid, Cross, Stack, Chevron, Ladder, Zigzag, Arrow, Triangle, Frame, Bolt, Spark, and the Novus logo itself, each captioned with the rule that produces it.

Designer and creative technologist, solo and self-initiated, July 2026. Built for Novus, an emerging Pendo product with its own visual identity, deliberately distinct from the main design system.

01 · Constrain hard, get coherence free

One grammar generates the whole set. That is the entire trick. Every mark is blocks on a grid with diagonals locked to 45 degrees, so twelve marks made months apart still look like siblings without anyone maintaining a style guide.

Motion follows the same logic. A lattice snaps together. Arms chase each other around a centre. Lightning strikes rather than fades. Each animation is the construction of the mark performed rather than an effect applied to a finished thing.

The two module sizes are 24 and 12, a real 2:1 in the generator rather than a rounded description of one, and every mark reads that ratio at a glance because nothing in the system is allowed a third size. Every animated mark also shares one rate: a single --dur token set once at the root, currently 2.5 seconds, that every keyframe reads its timing from rather than carrying its own. Slow the lab down and the whole set slows together, because nothing in it owns a duration of its own.

Those three, in order, are the three sentences above.

02 · The linter caught me

The 45 degree rule was the constraint holding the whole set together, and the tier data had quietly drifted to about 41 degrees.

I did not notice by eye. A linter I had written to enforce the rule noticed.

The rule had existed as a written principle the whole time, and the drift happened anyway. It only became enforceable when it became a lint failure.

03 · Build the generator, not the outputs

The piece I would actually show is the builder. Constrained generation behind a gate I called Laws, so a teammate could produce a new on-brand mark without me and without breaking the system.

That changes what the deliverable actually is: the machinery that makes a correct thirteenth mark, whenever the brand needs one.

The gate is eight Laws and seven Guidelines, run against a mark's raw SVG before it can call itself Style 1. A Law is an invariant: square modules, sharp corners, two sizes at 2:1, connectors locked to 0, 45, or 90 degrees, every drawn line paired with a faint track, colour riding a token instead of a hardcoded hex, only the sanctioned shapes, no curves anywhere. Fail one and the export is blocked, no matter how good the mark looks. A Guideline is closer to taste: motion on the shared rate, one dominant module, a legible node count, a single pink accent, connectors kept short, modules kept clear of each other, and one rule that a box must land after the line feeding it. Guidelines warn instead of blocking, because whether a mark feels right is a call the system can flag but should not make alone.

That last guideline has a date on it. A module was landing before the connector that feeds it, so for a moment a solid box sat beside a half drawn line and the mark looked broken rather than built. I caught that one by eye, at expanded size, where boxes arrived at .5 and .6 and .7 against lines that did not finish until .68, .78 and .88.

The lag was in every size. It only became visible at large ones, because the gap is a fixed slice of time and the distance it covers grows with the mark. That is the kind of defect that ships.

So I wrote it down as a check, and the check found the same timing sitting in the canonical onboarding mark, where it had been shipping and where nobody had flagged it. I saw this one myself first, then the check confirmed it was everywhere else too — the opposite order from the 45 degree rule, which I only ever caught because it was written down.

It has since drifted the other way. The draw constant was calibrated against an earlier, slower assemble, so the check now asks for a little more margin than the animation needs, and a very even cascade can trip a warning it has not earned.

I also formalised responsive tiers, condensed through regular through expanded, and later reframed them as two axes, size and density, which is the version that actually held up.

04 · Arguing for the option I liked less

The style debate is the part worth telling.

Two candidate directions. Style 1 was the restrained one. Style 2 was more expressive, and I preferred Style 2. So did one of the senior designers.

I argued for Style 1 as the production path anyway, because Style 2 was too distracting in flow. A mark that appears next to text someone is reading has a different job from a mark on a landing page, and my preference was formed looking at it in isolation.

I let the deployed lab and the builder carry the argument rather than my opinion, which meant the people disagreeing with me could go and check.

Calling it two directions is the tidy version. There were four.

Style 3 was an LED treatment, the mark resolving on a dot matrix. It had the best case for scale of any of them, because a grid of lights is modular by construction and would have survived any size I threw at it. It was also the hardest to read. At the sizes these actually appear the dots stop being a mark and start being a texture, and I could not make that go away.

Style 4 scrambled and resolved, characters landing one by one until the word appeared. People liked that one, and it fits the brand better than it has any right to. It is also the one I would not put in a product. A mark that looks like it is decrypting something reads as is my computer being hacked, not the app is thinking. That is a fine feeling on a marketing page and the wrong one next to somebody's data, so it is parked rather than dead.

SCANNING

Style 1 won because it reads as the brand mark. The others were all recognisably a system; this one was recognisably ours, and that is why it kept getting worked on while the rest sat still.

Style 1 is what went forward. The reviewer it was built for described it as something to raise more broadly and try to get into production, and floated swapping the generic loading spinners as an easy first win.

Reflection

I hate AI slop. I hate hearing "let's worry about how it looks later," as if looks are separate from the thing itself. We used to kill each other over beautiful things. Looks are function: they're the reason something feels fun to use instead of just working. I don't think every product needs to look the same, and 139 commits on a motion system nobody asked for is me acting on that. Also, deeply, it looked hella cool.

The marks were later ported into Novus's real codebase, replacing hardcoded hex illustrations with ones that inherit theme colour. That was the point at which a self-set exercise became the product's actual motion identity.

▸ run the prototype

Want the whole system, not just the spike? The full lab is nine views: the builder, the rules, the tiers, the loaders.

▸ run the prototype