AutomationOne simple symmetrical shape. While it runs, it steps round its own symmetry.
Google Gemini's sparkleThe usual AI sparkle, cut out
AgentOne roughly round shape, with a sparkle cut out of its centre.
AppFour pieces in a 2x2 square, so it reads as an app icon.

Icons for Erstan’s AI agents

See it live at erstan.com

What I did

Erstan is Annexa’s AI operating system for NetSuite. I was the sole designer and developer on the rebuild of its website, and its creative lead. The new scope was my own pitch.

Role
Sole designer and developer, creative lead
Client
Annexa, for Erstan
Studio
Now We Collide
Dates
October 2026
Built with
Code, with Claude Code

Visual language

  1. No coherent way to show an AI agent.
  2. No way to tell an agent from an automation.

Three kinds

They look alike at first glance, so the marks have to tell them apart.

  • Automation

    Runs a fixed process the same way every time, like a scheduled instruction or a set multi-step process.

  • Agent

    You give it a task in plain language and it works out the steps, using its connectors and skills. The site calls them assistants.

  • App

    A working tool for one process, like collections, with agents working inside it.

Anatomy

Eight agents, one per team

Eight colours, one per team, in Erstan’s order. Hover one to see it work.

  • Finance
  • Accounts Payable
  • Accounts Receivable
  • NetSuite Solution
  • Technical
  • Inventory
  • Sales
  • Support

Working

To show it's working, an agent or automation steps round its own symmetry. Apps never move; the agents inside them do.

At rest
Working
At rest
Working

Every size

From a website hero down to 20px, the size of a chip on a task card. If a mark doesn’t read at 20px, it doesn’t work.

Make your own

Customers pick a shape from an approved library rather than generating one. Pick a kind, a team and a shape.

Kind
Team
Shape, from the approved library
State

QuatrefoilAgent, Accounts Payable

The rules

The rules that govern the visual language.

Automations

  • One simple symmetrical shape.
  • While it runs it steps round its own symmetry. The circle pulses.
  • Shapes can repeat across teams. The shape mostly says something is running.

Agents

  • One shape, roughly round, that reads as a single mark from a distance.
  • A four-point sparkle cut out of the centre, on every agent.
  • Told apart by silhouette, never by sharp versus rounded points.
  • Never spins like a loading sign.

Apps

  • Exactly four pieces, two by two, so it reads as an app icon.
  • Solid pieces, no holes, so an app never echoes an agent.
  • Apps don't move.

What an agent can’t look like

Symbols that already mean something. Every new agent shape is checked against this row.

  • A gear
  • An atom
  • A loading ring
  • A spinner
  • A Star of David
  • A cross
  • An asterisk
  • Linked rings

The research behind the rules

About 22 B2B products checked on 6 October, grouped by how each one shows an agent, and five gaps none of them had solved.

Characters with faces

The consumer route, and where the AI labs went in 2026.

  • ChatGPT dots, screenshotChatGPT dots
  • Meta Muse, screenshotMeta Muse
  • Microsoft Copilot, Mico, screenshotMicrosoft Copilot, Mico
  • xAI Grok bot, screenshotxAI Grok bot
  • Claude Code, Clawd, screenshotClaude Code, Clawd

Mascots at work

An abstract character for each agent. Some have eyes.

  • Asana AI Teammates, screenshotAsana AI Teammates
  • Relevance AI, screenshotRelevance AI
  • Gumloop, screenshotGumloop
  • ChatGPT workspace agents, screenshotChatGPT workspace agents
  • Lindy, screenshotLindy

An icon in a tile

Consistent inside one company; every customer's library ends up different.

  • Microsoft 365 agents, screenshotMicrosoft 365 agents
  • Notion custom agents, screenshotNotion custom agents

Coloured shapes, no face

Easy to tell apart and businesslike, but the state is only a word.

  • OpenAI Codex, screenshotOpenAI Codex

One brand mark for every agent

Easy to keep consistent, impossible to tell agents apart.

  • Salesforce Agentforce, screenshotSalesforce Agentforce
  • Google Gemini, screenshotGoogle Gemini
  • Intercom Fin, screenshotIntercom Fin

No mark, just a name and a status

Most finance tools.

  • Ramp, screenshotRamp
  • Brex, screenshotBrex
  • Linear, screenshotLinear
  • Slack's agent guidance, screenshotSlack's agent guidance

Five gaps nobody had solved

  1. Telling an automation from an assistantNo product shows the difference at a glance.
  2. One mark for what it does and what it's doingSome marks show the role, some the state. None showed both.
  3. Agents customers build themselvesNone keeps a customer's library looking like one family.
  4. “Needs your approval” on the agentApproval shows on the task, never on the agent that is waiting.
  5. Slack and TeamsEvery agent there becomes a small square icon, so expressive characters rarely survive.

Earlier versions

  1. JuneFirst ideas

    First ideas, on the Erstan review site

    The usual ways to signal AI: a gradient token, a sparkle, an orb.

  2. July8-bit sprites

    Ryan's idea, which I turned into a cast with one character per agent.

  3. 30 Sep to 1 OctLiving agents and the orb

    Living agents and the orb, on the Erstan review site

    For the pitch, the sprites got faces that change with their work.

  1. 1 Oct8-bit dropped

    8-bit dropped, on the Erstan review site

    Too playful for a finance buyer, and the orb read as a voice agent.

  2. 6 OctResearch

    Research, on the Erstan review site

    About 22 products, grouped by how each one shows an agent.

  3. 8 to 9 OctTwo directions

    Two directions, on the Erstan review site

    A shape kit, and Erstan's own mark at work. Moved to phase two.

21 to 22 OctThree kinds of mark

  1. 1. Automations firstSimple, symmetrical shapes.
  2. 2. Then appsFour pieces in a square, the form agents had.
  3. 3. Agents, revisitedOne shape with a sparkle cut out, as apps now looked like the old agents.

Confirmed on 22 October, the day before launch.

Showing the product

Wherever we could, the site shows the product working instead of describing it.

What other sites show

  • Ramp's product demo, from the researchRampA before and after of using the product. The idea behind our About page demo.
  • Digits's product demo, from the researchDigitsThe product inside a device frame, so it’s clearly the product.
  • n8n's product demo, from the researchn8nHow an agent is built, from its inputs to its outputs. Our agent diagram is drawn the same way.
  • Gumloop's product demo, from the researchGumloopAlmost every feature in one builder window, and the real product in the hero.
  • Clay's product demo, from the researchClayA prompt box with suggested questions.
  • Campfire's product demo, from the researchCampfireThe approval, zoomed in, with Approve the only colour.

What we built

  • Demo: Assistants and automations
    Assistants and automationsSide by side, because at first glance they look alike.
  • Demo: An assistant at work
    An assistant at workAn agent doing a job, the one thing other sites animate.
  • Demo: Slack and Teams
    Slack and TeamsWork where your team already talks, through one @erstan bot.
  • Demo: An app
    An appA tool for one process, with an agent working inside it.
  • Demo: A month-end close app
    A month-end close appThe home page hero. Every team feeds a close, so it fits all eight agents.
  • Demo: The task board
    The task boardEvery agent’s work in one place, with the product’s own states.
  • Demo: Approval before NetSuite
    Approval before NetSuiteEvery change to NetSuite waits for a person to approve it.
  • Demo: Building an automation
    Building an automationThe real builder, with each step as a node.
  • Demo: The audit log
    The audit logA record of what each agent did.

Rules for a product window

  • The real product, recreated, with no features it doesn't have
  • One made-up company, never a real customer
  • NetSuite in the data, with a record visibly changing
  • One idea each, readable in about three seconds
  • A fixed size, like a real app window
  • Plays once, then stays still
  • Nothing important disappears
  • Little small text
  • A dark Approve button: brand colour means agent work

Launch

Live since 23 October

About three weeks from pitch to launch

  1. 1 OctPitch to the client
  2. 12 OctCharacter directions presented
  3. 15 OctAccess to the product
  4. 16 OctSite build starts
  5. 21 to 22 OctV8 marks
  6. 23 OctLive

In the product

The client has since taken the marks into the Erstan product itself, beyond the marketing site.

See it live at erstan.com