Designing the visual language for an agent-native system

Quiet Intelligence

FERMÀT 2.0 · Staff Product Designer · Visual direction, motion, and interaction design

Most AI products announce themselves. Sparkles, glowing gradients, and a chat bubble that wants your attention all work when AI is a feature you call up now and then.

The Behavior Graph is different. Its agents watch every brand's shoppers, run automations, and turn what they find into action items, whether or not anyone is looking. When the AI is everywhere, it can't shout everywhere. The design question shifts from “How do we make the AI stand out?” to “How do we make it feel present without ever competing for attention?”

Rethinking the primitives

FERMÀT's look has changed with each new idea of what the product is.

FERMÀT 0 was cold and mechanical. Using it felt cumbersome and clunky. It also didn't have the visual bandwidth to grow in an AI direction: AI experiences didn't match, looked out of place, and limited what we could try.

FERMÀT 1.0 was warm and intentional. We built Tangent, the FERMÀT platform design system, around a feeling we called quiet inspiration. It pairs geometric and organic materials with a warm, earthy palette, and it's flexible enough to grow with the product. It suited a platform where people build funnels and pages by hand.

FERMÀT 2.0 is agent-native, and that asks the interface to communicate three things a tool never had to:

Where is the work? What the agent produced, and what needs a decision

Is it there? Whether the agent is on and paying attention, even when nothing needs you

Is it working? Whether it's busy right now, and on what

Each question got its own material. The direction moved from quiet inspiration to quiet intelligence.

A calm, dense surface for the work

Where is the work?

The work is the data, so the surface stays out of its way. This is Tangent, changed as little as possible. Agent output (action items, artifacts, dashboards) uses the same tables, type, and palette as the rest of FERMÀT. It isn't fenced off in a glowing “AI zone.” That's the point: what the agent produces should feel like part of the product, not a novelty sitting on top of it.

Detail lives in the interaction layer instead of the layout. The surface is simple at a glance and special underneath:

Custom animated icons

Controls where you expect them, without crowding a component that's already dense

A moving-gradient AI button, done in plain CSS

A breathing material for an agent that's always on

Is it there?

An always-on agent needs a presence that's easy to notice but never demands a response. The answer was the orb: a sphere, a small world model for a graph that models every shopper. It's dynamic, intelligent, fluid, and spontaneous.

The orb is a live WebGL shader, not a flat animation, so it has depth and life even at the size of an icon. It breathes. It doesn't blink, badge, or count. Its only job is to say I'm here, the way a colleague's presence in the room does.

A systematic material for an agent at work

Is it working?

Being on and being busy are different states, so they look different. If presence and progress shared one visual, “always on” would read as “always busy,” and users would learn to tune it out.

When the agent is actually doing something (thinking, starting an action, working through several in progress, building a funnel), the interface switches to a second material: particles arranged in a Braille grid. Where the orb is fluid and spontaneous, Braille is rigid and systematic. It looks like a computer at work, because it is one.

It isn't “always on.” It's working for you. And it only appears when there's work happening.

One system, three jobs

Taken together, the materials let someone read the platform's state at a glance, without a single status label:

Calm surface: here's the work

Breathing orb: the agent is with you

Braille particles: the agent is working

The AI feels present without ever competing for attention.

Where it goes next

Today the Behavior Graph has one agent with one face. But each workspace is its own agent, with its own goal, sources, and behavior, so it should have its own identity too.

The next step is giving every workspace a persona of its own, expressed through material. Some might lean more orb, some more particle, and some may need a material we haven't designed yet. The goal hasn't changed: an interface that lets the agent carry more of the work, and asks for attention only when it matters.