Blog

Designing a visual language for Stacks Agents

Designing a visual language for Stacks Agents

Written by

Quillen Villadeamigo

Published on

What should AI look like in a finance product?

AI was becoming part of more of the work people do in Stacks: answering questions in a chat, explaining something inside a table, or working quietly in the background before bringing it back for review. We wanted people to see at a glance when AI had been involved and when it hadn’t.

For accountants, that transparency matters. They spend hours in dense tables, where even a small visual change can affect how much they trust a number, so they need to know where AI is at work.

But putting an “AI” label everywhere didn’t feel right either. And we didn’t want agents to feel like a separate product inside Stacks. We already had a brand, so we gave its new agentic layer a visual language of its own: distinctive, and recognizable as the AI from Stacks.

That meant working through a few connected decisions: the principles behind the design, how it would fit into our busiest screens, and the shape, motion and color that would make it recognizable.

Setting the principles

We started by sitting down as a team and defining what the identity needed to do. We drew on what we knew about our users, how we wanted AI to work in the product, and what we could learn from other companies.

These principles gave us something to come back to as we explored:

  • Restraint over expressiveness. Present and understated, never dominant.

  • System-first, not asset-first. Parts of a coherent system, not standalone visuals.

  • Clarity over novelty. If someone has to figure out what an AI element is, it doesn't work.

  • Precision over personality. Precise, intelligent and reliable, not friendly or human-like.

  • Quiet over attention-seeking. Never the loudest thing on the screen.

  • Timelessness over trends. Something that would still feel right years from now.

  • Density-aware design. It works in tables, task lists and dashboards, and supports scanning instead of interrupting it.

Designing for the densest screen

With the principles in place, our next step was to consider the different places the brand would appear and how it would behave. An agent might spend a few seconds thinking before answering, add an explanation inside a table, appear in a badge, or mark a piece of work as complete.

The identity also had to work across very different sizes, from a few pixels wide in a dense interface to a much larger expression on our website or in a launch film. That meant we were not designing one icon, we were designing a small system.

Shaping the identity

The Stacks AI identity is built to be recognized without being loud. It tells people when an agent is involved, shows what the agent is doing, and helps accountants stay in control of their work. Its fundamental parts are shape, size, motion and color, each used with restraint. Those same elements also make the product easier to use: they show which work an agent prepared, when it is still thinking, and when something is ready for a person to review.

Next came the shape. AI is always thinking and processing, so we needed a brand that could express movement. We tried a few predefined symbols and figures, but they felt too rigid and too limited to show a process in motion. That is how we landed on dots: they can move, adapt and change, which brings the brand closer to what AI actually does.

Dots also already appear in parts of the Stacks visual language, and they are easy to rearrange, resize and animate. They sit on a square grid, and the Stacks S emerges through changes in size and tone.

At large sizes the S is easy to see, at small sizes it becomes a subtle connection. The brand belongs to Stacks without having to reproduce the logo every time.

We worked with Sebastian Graz, who had also helped create the original Stacks brand. That continuity mattered. We wanted to introduce something new while keeping the connection to what was already there.

Moving with intention

With the shape in place, the next step was to bring it to life. If an agent is thinking, working or waiting for something, the product needs a way to say so, and we wanted the brand itself to do that.

The dot system gave us room for it; the same elements move into different formations and transition between states, instead of swapping between unrelated icons.

We tried several approaches. Some animations felt too fast, others too slow, and some made it unclear what was happening. We kept refining them until the motion felt natural and organic, never rigid and never frantic.

In the thinking state, for example, the movement follows the underlying S, resulting in movement without a new form.

We also did not want everything to move all the time. A small animation helps draw attention, but constant motion quickly becomes a distraction. Some states animate, settle and become quiet again.

This was the point where the identity started to feel less like a logo and more like part of the interface.

Choosing the right palette

Color was the last piece. Our user research showed that too many colors distract people, and the people using Stacks are in the middle of specific work. The brand needed to be present, but it should not call attention to itself all the time. AI mostly works in the background, so it doesn't always need to pop up. We looked for a balance.

Rather than introduce a new palette, we built on what Stacks already has: a gradient of black, which is already part of our brand identity. Shades of gray and blue add accents and highlights where they help.

That way the AI never competes with the colors of the product itself, or makes every AI-generated element look like something to click. Sometimes the brand only needs to say that an agent generated an explanation. Other times, a little accent can introduce a new feature or draw attention to an action.

It gave us a way of deciding when color should show up at all, not just which color to use.

Looking back at what we learned

  • People need to know when AI is involved. That was the need we started with, and it is why the brand exists.

  • Less color keeps people focused. Our research showed how easily extra color could pull attention away from a task. The identity needed to be visible without demanding attention.

  • Motion has to feel natural. Speed and rhythm changed how the animations felt, but they also affected how clearly people could understand what was happening.

  • AI is always working, so the brand needed to move. The fixed symbols we tried felt too limited for the different states an agent could be in. Dots gave us the flexibility to show those changes.

Zooming out, where do we go from here?

A brand is always adapting and evolving. It begins as a set of decisions, and then it meets the product and the people who use it.

As AI keeps evolving and powers more of Stacks, it will become increasingly important for people to feel connected to it.

AI is an integral part of the Stacks experience, and we are committed to staying ahead of a fast-moving landscape: adapting as our users' needs change and keeping our visual language clear, helpful and relevant.

When we started, the product didn’t always clearly indicate when AI had been involved. We now have a way to make that more visible, and a foundation we can build on; something we are incredibly excited about. Now that we have a basis, what comes next is the part I'm most curious about: watching it scale into different areas of the product, and learning what new requirements we find along the way.

-Quillen

See how Stacks maps to your close process

Book a 30-minute walkthrough. We’ll discuss your close process, show you which tasks run automatically, and outline the next step from there.

"Stacks has transformed how our finance team operates... it's saved us time and reduced frustration."

Graham B.

SVP of Finance at Volt

Trusted by fast-growing companies including:

See how Stacks maps to your close process

Book a 30-minute walkthrough. We’ll discuss your close process, show you which tasks run automatically, and outline the next step from there.

"Stacks has transformed how our finance team operates... it's saved us time and reduced frustration."

Graham B.

SVP of Finance at Volt

Trusted by fast-growing companies including:

See how Stacks maps to your close process

Book a 30-minute walkthrough. We’ll discuss your close process, show you which tasks run automatically, and outline the next step from there.

"Stacks has transformed how our finance team operates... it's saved us time and reduced frustration."

Graham B.

SVP of Finance at Volt

Trusted by fast-growing companies including: