Agent avatars

tier 2 — classes

Who an agent is: a sphere lit from inside, in one of six identity tones, drawn in CSS with no image and no script, so it is there in the first paint and follows the theme. The tone stays fixed for an agent; its state changes how the sphere moves, never its colour. For an agent with a face, see Mochi.

A roster of agents

.agent-avatar wherever a person's .avatar would go: a list row, a chat message, a card head. It is never the only thing that names the agent — the name beside it is — so aria-label repeats the name for a reader who lands on the image alone. The status pill says what the agent is doing; the sphere only moves with it.

Agents4 of 5 online

<div class="card" style="max-width:560px">
    <div class="card-head"><strong>Agents</strong><span class="text-muted text-sm">4 of 5 online</span></div>
    <ul class="list">
        <li>
            <a class="list-row" href="#">
                <span class="agent-avatar agent-avatar--lg" data-state="working" role="img" aria-label="Ops agent"></span>
                <span class="list-main"><span class="list-title">Ops agent</span><span class="list-sub">Maintenance windows, incidents, restarts</span></span>
                <span class="list-meta"><span class="agent-status"><span class="orb" data-orb="working" role="img" aria-label="Working"></span><span class="agent-status-label text-shimmer">Querying src-db-14</span></span></span>
            </a>
        </li>
        <li>
            <a class="list-row" href="#">
                <span class="agent-avatar agent-avatar--lg" data-tone="aurora" data-state="thinking" role="img" aria-label="Research agent"></span>
                <span class="list-main"><span class="list-title">Research agent</span><span class="list-sub">Reads docs and logs, answers with sources</span></span>
                <span class="list-meta"><span class="agent-status"><span class="orb" data-orb="thinking" role="img" aria-label="Thinking"></span><span class="agent-status-label text-shimmer">Thinking</span></span></span>
            </a>
        </li>
        <li>
            <a class="list-row" href="#">
                <span class="agent-avatar agent-avatar--lg" data-tone="ember" role="img" aria-label="Billing agent"></span>
                <span class="list-main"><span class="list-title">Billing agent</span><span class="list-sub">Invoices, credits and refunds</span></span>
                <span class="list-meta"><span class="agent-status agent-status--warn"><span class="orb" data-orb="waiting" role="img" aria-label="Waiting"></span><span class="agent-status-label">Needs approval</span></span></span>
            </a>
        </li>
        <li>
            <a class="list-row" href="#">
                <span class="agent-avatar agent-avatar--lg" data-tone="orbit" role="img" aria-label="Support agent"></span>
                <span class="list-main"><span class="list-title">Support agent</span><span class="list-sub">First reply on every new ticket</span></span>
                <span class="list-meta">Idle</span>
            </a>
        </li>
        <li>
            <a class="list-row" href="#">
                <span class="agent-avatar agent-avatar--lg" data-tone="glacier" data-state="offline" role="img" aria-label="Archive agent"></span>
                <span class="list-main"><span class="list-title">Archive agent</span><span class="list-sub">Paused by Alex Fischer</span></span>
                <span class="list-meta">Offline</span>
            </a>
        </li>
    </ul>
</div>

Tones

data-tone picks one of six: sedna, the default, in the two colours of the mark; aurora, ember, orbit, nebula and glacier. Give each agent one tone and keep it: the tone is how a reader tells two agents apart in a long thread, so it is identity, not state.

sedna

aurora

ember

orbit

nebula

glacier

<div class="sedna-row-wrap sedna-gap-3">
    <div class="sedna-col sedna-center sedna-gap-1"><span class="agent-avatar agent-avatar--xl" role="img" aria-label="Sedna agent"></span><code>sedna</code></div>
    <div class="sedna-col sedna-center sedna-gap-1"><span class="agent-avatar agent-avatar--xl" data-tone="aurora" role="img" aria-label="Aurora agent"></span><code>aurora</code></div>
    <div class="sedna-col sedna-center sedna-gap-1"><span class="agent-avatar agent-avatar--xl" data-tone="ember" role="img" aria-label="Ember agent"></span><code>ember</code></div>
    <div class="sedna-col sedna-center sedna-gap-1"><span class="agent-avatar agent-avatar--xl" data-tone="orbit" role="img" aria-label="Orbit agent"></span><code>orbit</code></div>
    <div class="sedna-col sedna-center sedna-gap-1"><span class="agent-avatar agent-avatar--xl" data-tone="nebula" role="img" aria-label="Nebula agent"></span><code>nebula</code></div>
    <div class="sedna-col sedna-center sedna-gap-1"><span class="agent-avatar agent-avatar--xl" data-tone="glacier" role="img" aria-label="Glacier agent"></span><code>glacier</code></div>
</div>

States

data-state changes the motion: thinking turns faster, working turns faster still inside a ring, listening and speaking follow --level, and offline is grey and still. With no state the sphere turns slowly. Under prefers-reduced-motion every state is still, and the ring and glow stay as the cue.

--level, from 0 to 1, is the number the app's audio code writes — on the avatar or any element above it, so one write on a voice session moves the avatar, the bars and the mic button together. The two here are fixed so the page holds still.

idle

thinking

working

listening

speaking

offline

<div class="sedna-row-wrap sedna-gap-3">
    <div class="sedna-col sedna-center sedna-gap-1"><span class="agent-avatar agent-avatar--xl" data-tone="aurora" role="img" aria-label="Research agent, idle"></span><code>idle</code></div>
    <div class="sedna-col sedna-center sedna-gap-1"><span class="agent-avatar agent-avatar--xl" data-tone="aurora" data-state="thinking" role="img" aria-label="Research agent, thinking"></span><code>thinking</code></div>
    <div class="sedna-col sedna-center sedna-gap-1"><span class="agent-avatar agent-avatar--xl" data-tone="aurora" data-state="working" role="img" aria-label="Research agent, working"></span><code>working</code></div>
    <div class="sedna-col sedna-center sedna-gap-1"><span class="agent-avatar agent-avatar--xl" data-tone="aurora" data-state="listening" style="--level: 0.5" role="img" aria-label="Research agent, listening"></span><code>listening</code></div>
    <div class="sedna-col sedna-center sedna-gap-1"><span class="agent-avatar agent-avatar--xl" data-tone="aurora" data-state="speaking" style="--level: 0.6" role="img" aria-label="Research agent, speaking"></span><code>speaking</code></div>
    <div class="sedna-col sedna-center sedna-gap-1"><span class="agent-avatar agent-avatar--xl" data-tone="aurora" data-state="offline" role="img" aria-label="Research agent, offline"></span><code>offline</code></div>
</div>

Sizes

.agent-avatar--xs (20px), --sm (24px), the bare .agent-avatar (32px), --lg (40px), --xl (56px), --2xl (96px) and --hero (200px).

--xs

--sm

.agent-avatar

--lg

--xl

--2xl

<div class="sedna-row-wrap sedna-gap-3" style="align-items: end">
    <div class="sedna-col sedna-center sedna-gap-1"><span class="agent-avatar agent-avatar--xs" data-tone="nebula" role="img" aria-label="Release agent"></span><code>--xs</code></div>
    <div class="sedna-col sedna-center sedna-gap-1"><span class="agent-avatar agent-avatar--sm" data-tone="nebula" role="img" aria-label="Release agent"></span><code>--sm</code></div>
    <div class="sedna-col sedna-center sedna-gap-1"><span class="agent-avatar" data-tone="nebula" role="img" aria-label="Release agent"></span><code>.agent-avatar</code></div>
    <div class="sedna-col sedna-center sedna-gap-1"><span class="agent-avatar agent-avatar--lg" data-tone="nebula" role="img" aria-label="Release agent"></span><code>--lg</code></div>
    <div class="sedna-col sedna-center sedna-gap-1"><span class="agent-avatar agent-avatar--xl" data-tone="nebula" role="img" aria-label="Release agent"></span><code>--xl</code></div>
    <div class="sedna-col sedna-center sedna-gap-1"><span class="agent-avatar agent-avatar--2xl" data-tone="nebula" role="img" aria-label="Release agent"></span><code>--2xl</code></div>
</div>

Beside people

In an .avatar-group, write class="avatar agent-avatar": the group's size, overlap and cut-out apply, and the sphere fills the circle. An agent on a ticket is then counted with the people on it.

AF PN Alex Fischer, Priya Nair and two agents are on this ticket

<div class="sedna-row sedna-gap-2">
    <span class="avatar-group">
        <span class="avatar avatar--lg">AF</span>
        <span class="avatar avatar--lg avatar--viz-2">PN</span>
        <span class="avatar avatar--lg agent-avatar" data-tone="aurora" role="img" aria-label="Research agent"></span>
        <span class="avatar avatar--lg agent-avatar" role="img" aria-label="Ops agent"></span>
    </span>
    <span class="text-muted">Alex Fischer, Priya Nair and two agents are on this ticket</span>
</div>

Where the agent is the page

.agent-avatar--hero for a voice call or a first-run screen, where the agent is the one thing to look at.

Ops agent

<div class="sedna-col sedna-center sedna-gap-2">
    <span class="agent-avatar agent-avatar--hero" data-state="speaking" style="--level: 0.4" role="img" aria-label="Ops agent, speaking"></span>
    <strong>Ops agent</strong>
</div>