The Brand Toolkit: building a motion factory inside our website

Motion is the first thing that goes off brand. I've written about this before, and in my experience, motion is the first to drift away from how a brand was conceived and packaged for release, because in most cases it's still considered decorative. Even when the strategy and design phases get a lot of care, as soon as the visual identity moves out of design files and into the world, every social post, Instagram story, event creative and website block needs some sort of motion that the brand system isn't prepared to offer.

Producing consistent, quality motion assets is something that's almost expected from a brand system these days, yet businesses and agencies alike too often forget to plan for it programmatically, and for small teams it can still be too expensive to sustain. In our team, I would normally take the time to build simple vector animations in code myself and with the help of AI, and export them as videos, or we would bring in a motion designer for a few days to produce more complex animations when we need them. Either way, creating new assets from scratch always means translating Figma designs to Jitter or After Effects, and coming up with easings and motion principles as you go, with little to no plan.

This year we took the time to refine our visual identity, our website and design system, so we decided to use AI and build a proprietary motion studio, fully on-brand, that exports production-ready video assets for social posts, event announcements and newsletters. The idea was to put as much care as possible into the system at the beginning, during the design and exploration stage, and then let the system and agents carry it into production, so that the website, the socials and the newsletters keep moving along coherently.

I've been writing my thoughts about this in my notebook over the last weeks, because working on this gave me a chance to think about where design work and creative teams are heading, and to measure what we built against the conversation that is unfolding right now in technology and design. This article is my attempt to put some of those thoughts in order.

Why we started with motion

Motion has a big place in how we think about brand and design at the Büro, and I think it deserves a lot more attention than it usually gets.

On one hand, brands and agencies alike too often tend to think of motion as an add-on. They spend big money and time on strategy, design and development, and motion enters the conversation only later on, usually just to make a launch reel rather than contribute to how a brand behaves and feels.

As soon as you need an unplanned motion asset, the brand designer hands off assets and a design system to a motion designer who imports them in After Effects or Jitter to create the animation. In the design system, there is little information at this stage about how things should move and the strategy doesn't provide examples of how the brand should feel once it's in motion. Creative directors have already moved on to bigger things and the pressure of upcoming projects makes everyone cut corners.

On the other hand, motion is where a brand is most exposed once it's out in the world. Not only do users expect a certain interactivity layer from a respectable brand, but it's also a big opportunity space to create things that are surprising and original. A lot can be communicated with a well thought-through motion strategy.

For us at NeueHaus, keeping up with our ambitions by hand was simply not realistic. Next to the design work, we run a community, an app, client work at the Büro, we organize events across continents and have a weekly rhythm of content production, and we needed motion that stays on-brand without someone rethinking it every week.

So we ended up building a custom motion studio that lives inside our website, with around 50 composition types, some directly designed in Figma, some taking the website components and other ones AI-generated from the design system. A composition has several controls: font style, colors, animation type, timings etc, and a "screen" option which allows users to mix different templates together like slideshows, mosaics and smart animate transitions, and build even really advanced reels. What changes from one asset to the next is only the content and the "arrangement", which is what lends itself perfectly to agentic workflows.

Agents already played a big part in building the studio. Much of it was built using Claude Code working directly from our design system, our motion templates and from the documentation. In the same repository, we documented in detail how the studio works and what has to change together, so agents can easily add new templates and create compositions that feel on brand. More importantly, every composition is a structured document with a JSON schema, so an agent only has a few options, and can fill it the same way a person does through the dashboard: pick a composition, write the copy, choose images from the media library and set the animation type. It can't come up with a new easing or a colour outside the palette, because the brand system only gives it the materials we approved.

While working on this I kept thinking about the painter Rubens and how he set up his workshop in Antwerp. He designed the compositions himself, but his assistants painted large parts of them, and then he came back to finish the critical passages that mattered most to his art. Nobody thinks less of Rubens' work because of it, since his craft sat in the design of the composition and in the final pass, and the workshop allowed it to reach far more walls than he could have painted alone. Similarly, we took real care of designing the compositions and tuning how our brand should move, we built the studio so the agents can take on a large part of the production, and we keep the final pass for ourselves.

How we built it

Motion Studio is a custom application that's part of our website CMS, and by now has around 50 different starter compositions. Many of these come from frames we designed ourselves and selected in Figma, built on our brand assets and new visual identity, and the rest are the live blocks of our website, the real components but with fully editable content from the studio dashboard. So our rolodex interaction, our hero blocks and our team network graph can play in the studio exactly as they do on neuehaus.io, and with a couple of clicks they can be exported as a 9:16, 4:5 or 16:9 mp4 for whatever platform.

Each composition leaves plenty of room to edit and to mix with the others, and it takes as many screens as you want, so the number of combinations is, in practice, almost limitless. The studio is built using the Sanity App SDK and runs inside our Sanity CMS dashboard, which means it sits right next to all of our content and only people in our organisation can operate it. A composition is a Sanity document like any other, and so is every image, film and export it produces.

The first part is a canvas engine, written in pure JavaScript. This is where the compositions based on our Figma work live: slideshows, carousels, story swipes, word rolls, kinetic type, camera tours, split panels, overview grids, marquees and smart-animate screens. The foundation for all these combinations is a strong but flexible design system of colors, typography and layout that AI can use to generate new options following the same "rhythm." In the studio, the combinations play in real time as you edit, each with content inputs, controls for timing, colours from our palette and fonts from our type system.

The second part is the one I'm most proud of. The studio has a small stage built from the same web components that render the website, so when you pick a block, the studio loads its content and renders the actual component from the website. When we add or change how a block looks, it shows up in the studio after the next build, with nothing to copy or redraw. The sync only goes in one direction, though, so whatever you edit inside a composition stays in the studio and doesn't touch the website.

What connects the two parts is a unified motion language. Every easing and spring in our brand lives in one shared package which uses anime.js as a foundation and powers the motion studio, the website, our app, and anything else we will build. That means a card on the homepage moves with the same easings and principles it would on a social video or a launch reel, and if we decide to change how it feels, the change updates everything at once.

The new brand toolkit

Working on the motion studio connected me to some of the recent writing about the future of brand work and creative teams. Paul Jun ↗ wrote about this in his brand as software essay, and the Little Plains team spoke about agentic brand systems ↗. Both are trying to capture a similar idea, a brand that keeps evolving in real time, long after the launch, and building the studio gave me a more personal and practical view of what that means.

The way I picture it, a brand system is more like a toolkit rather than a uniform that is packaged and ready to wear. It's something people pick up and use every day to build, fix and maintain things in their business. A lot of brand systems these days still arrive as a set of static templates and files arranged as references, or worse, incoherent systems with AI plugged in the wrong places. Today, professionals can build something you can interact with directly, a complete kit that may include:

But most importantly, no monoliths! All the parts of the toolkit are connected, all of it is manageable and easy to adjust, grow or, who knows, even scale back if need be.

In my head, that is what a brand toolkit is: the system that you need to actually produce and maintain a brand, where the same components, tokens, motion and content generate its outputs, whether that's a web page, an app screen, a newsletter, a social video or a slide deck.

Kits and agents

A kit like this is also what makes agents genuinely useful. I've spent a big part of 2026 building workflows for companies such as Moonfare and Langdock, and the repeating lesson is:

If you ask a video model for a motion asset, you will probably get something that looks ok, but probably not exactly what you're looking for, because there is too much guesswork to do. Instead, an agent working inside a brand engine has far less to guess, because the components, fonts and springs are the material it works with. Agents can still pick the wrong composition or write a weak headline, so they need the same final pass Rubens kept for himself, but the design decisions underneath stay in place. That's the idea behind the brand-accurate deck builder we built for Langdock, where an agent fills slots in 66 slide masters the design team approved, and it's the direction we would like to take the motion studio next.

What's next

We built the motion studio in a few weeks with a team of 3, alongside a new identity, a new website, a redesigned member app and a showcase in New York. I doubt a team our size could have done that a year ago. It also changed how I see my own work. For a long time, design work mostly ended with a launch and a set of guidelines handed over to someone else, and whatever happened after that was largely out of our hands. More and more, I think the meaningful part of the work is the system that keeps producing and maintaining the brand after the launch.

A lot is changing and fast, but I find it empowering that designers and engineers can now build tools that can power whole teams and companies, and consistently. What will make the difference is the amount of care teams are willing to put into building systems like this while resisting the temptation to produce output without a plan. It's like Rubens's workshop, where the utmost care goes into the first design and then again in the final pass, and the workshop executes the rest following clear guidelines.