# AgentAccents

> Each Max agent owns one of 16 Tailwind hues, used as its initials tile, card hover ring, bar and dot.

## Facts

- **Product**: Max
- **Family**: Foundations
- **Kind**: Showcase page (tokens and patterns)
- **Live preview**: /design/components/agent-accents/preview.html
- **Page**: /design/components/agent-accents

## Guidelines

**Template**: tile `bg-{c}-500/12 text-{c}-600 dark:bg-{c}-500/15 dark:text-{c}-400`; ring `group-hover:border-{c}-500/40`; bar and dot `bg-{c}-500`.

**Assignments**: violet Max Carter (Max chat); indigo Nora Hale (onboarding), workspace intelligence, revenue analyst; amber Emma Laurent (campaign writer); orange Hugo Silva (workflows), proposal builder; rose Sofia Rossi (lead discovery), signal analyst; lime Simon Keller (ICP); sky Iris Chen (reply suggestions), account researcher; cyan Nolan Park (reply classifier); blue Nova Lane (page navigator), inbox reply; emerald meetings, customer growth; teal Theo Kim (summaries); green Clara Bennett (action items); fuchsia Jade Lin (action drafting); pink Leo Mercer (action suggestions); slate Victor Cole (deal routing); zinc Orion Reed (agent drafter).

**Don't** reuse an agent's hue for a status or another agent. Crew OS's own agent palette (Sophie, Claire, Max, Camille, Kate, André) is the `dc-*` tokens.

## Example

```html
<div class="grid grid-cols-4 gap-x-6 gap-y-4 p-6"><div class="flex items-center gap-3"><span class="grid size-11 shrink-0 place-content-center rounded-full border border-border/60 font-semibold tracking-tight bg-violet-500/12 text-violet-600 dark:bg-violet-500/15 dark:text-violet-400">MC</span><div class="grid min-w-0"><span class="truncate text-sm font-medium">Max Carter</span><span class="truncate text-xs text-muted-foreground">violet · Head of Sales</span></div></div><div class="flex items-center gap-3"><span class="grid size-11 shrink-0 place-content-center rounded-full border border-border/60 font-semibold tracking-tight bg-indigo-500/12 text-indigo-600 dark:bg-indigo-500/15 dark:text-indigo-400">NH</span><div class="grid min-w-0"><span class="truncate text-sm font-medium">Nora Hale</span><span class="truncate text-xs text-muted-foreground">indigo · Onboarding Interviewer</span></div></div><div class="flex items-center gap-3"><span class="grid size-11 shrink-0 place-content-center rounded-full border border-border/60 font-semibold tracking-tight bg-amber-500/12 text-amber-600 dark:bg-amber-500/15 dark:text-amber-400">EL</span><div class="grid min-w-0"><span class="truncate text-sm font-medium">Emma Laurent</span><span class="truncate text-xs text-muted-foreground">amber · Campaign Writer</span></div></div><div class="flex items-center gap-3"><span class="grid size-11 shrink-0 place-content-center rounded-full border border-border/60 font-semibold tracking-tight bg-orange-500/12 text-orange-600 dark:bg-orange-500/15 dark:text-orange-400">HS</span><div class="grid min-w-0"><span class="truncate text-sm font-medium">Hugo Silva</span><span class="truncate text-xs text-muted-foreground">orange · Workflow Generator</span></div></div><div class="flex items-center gap-3"><span class="grid size-11 shrink-0 place-content-center rounded-full border border-border/60 font-semibold tracking-tight bg-rose-500/12 text-rose-600 dark:bg-rose-500/15 dark:text-rose-400">SR</span><div class="grid min-w-0"><span class="truncate text-sm font-medium">Sofia Rossi</span><span class="truncate text-xs text-muted-foreground">rose · Lead Discovery</span></div></div><div class="flex items-center gap-3"><span class="grid size-11 shrink-0 place-content-center rounded-full border border-border/60 font-semibold tracking-tight bg-lime-500/12 text-lime-600 dark:bg-lime-500/15 dark:text-lime-400">SK</span><div class="grid min-w-0"><span class="truncate text-sm font-medium">Simon Keller</span><span class="truncate text-xs text-muted-foreground">lime · ICP & Scoring</span></div></div><div class="flex items-center gap-3"><span class="grid size-11 shrink-0 place-content-center rounded-full border border-border/60 font-semibold tracking-tight bg-sky-500/12 text-sky-600 dark:bg-sky-500/15 dark:text-sky-400">IC</span><div class="grid min-w-0"><span class="truncate text-sm font-medium">Iris Chen</span><span class="truncate text-xs text-muted-foreground">sky · Reply Suggestions</span></div></div><div class="flex items-center gap-3"><span class="grid size-11 shrink-0 place-content-center rounded-full border border-border/60 font-semibold tracking-tight bg-cyan-500/12 text-cyan-600 dark:bg-cyan-500/15 dark:text-cyan-400">NP</span><div class="grid min-w-0"><span class="truncate text-sm font-medium">Nolan Park</span><span class="truncate text-xs text-muted-foreground">cyan · Reply Classifier</span></div></div><div class="flex items-center gap-3"><span class="grid size-11 shrink-0 place-content-center rounded-full border border-border/60 font-semibold tracking-tight bg-blue-500/12 text-blue-600 dark:bg-blue-500/15 dark:text-blue-400">NL</span><div class="grid min-w-0"><span class="truncate text-sm font-medium">Nova Lane</span><span class="truncate text-xs text-muted-foreground">blue · Page Navigator</span></div></div><div class="flex items-center gap-3"><span class="grid size-11 shrink-0 place-content-center rounded-full border border-border/60 font-semibold tracking-tight bg-emerald-500/12 text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-400">MB</span><div class="grid min-w-0"><span class="truncate text-sm font-medium">Maya Brooks</span><span class="truncate text-xs text-muted-foreground">emerald · Meeting Assistant</span></div></div><div class="flex items-center gap-3"><span class="grid size-11 shrink-0 place-content-center rounded-full border border-border/60 font-semibold tracking-tight bg-teal-500/12 text-teal-600 dark:bg-teal-500/15 dark:text-teal-400">TK</span><div class="grid min-w-0"><span class="truncate text-sm font-medium">Theo Kim</span><span class="truncate text-xs text-muted-foreground">teal · Meeting Summarizer</span></div></div><div class="flex items-center gap-3"><span class="grid size-11 shrink-0 place-content-center rounded-full border border-border/60 font-semibold tracking-tight bg-green-500/12 text-green-600 dark:bg-green-500/15 dark:text-green-400">CB</span><div class="grid min-w-0"><span class="truncate text-sm font-medium">Clara Bennett</span><span class="truncate text-xs text-muted-foreground">green · Meeting Action Items</span></div></div><div class="flex items-center gap-3"><span class="grid size-11 shrink-0 place-content-center rounded-full border border-border/60 font-semibold tracking-tight bg-fuchsia-500/12 text-fuchsia-600 dark:bg-fuchsia-500/15 dark:text-fuchsia-400">JL</span><div class="grid min-w-0"><span class="truncate text-sm font-medium">Jade Lin</span><span class="truncate text-xs text-muted-foreground">fuchsia · Action Drafting</span></div></div><div class="flex items-center gap-3"><span class="grid size-11 shrink-0 place-content-center rounded-full border border-border/60 font-semibold tracking-tight bg-pink-500/12 text-pink-600 dark:bg-pink-500/15 dark:text-pink-400">LM</span><div class="grid min-w-0"><span class="truncate text-sm font-medium">Leo Mercer</span><span class="truncate text-xs text-muted-foreground">pink · Action Suggestions</span></div></div><div class="flex items-center gap-3"><span class="grid size-11 shrink-0 place-content-center rounded-full border border-border/60 font-semibold tracking-tight bg-slate-500/12 text-slate-600 dark:bg-slate-500/15 dark:text-slate-400">VC</span><div class="grid min-w-0"><span class="truncate text-sm font-medium">Victor Cole</span><span class="truncate text-xs text-muted-foreground">slate · Deal Routing</span></div></div><div class="flex items-center gap-3"><span class="grid size-11 shrink-0 place-content-center rounded-full border border-border/60 font-semibold tracking-tight bg-zinc-500/12 text-zinc-600 dark:bg-zinc-500/15 dark:text-zinc-400">OR</span><div class="grid min-w-0"><span class="truncate text-sm font-medium">Orion Reed</span><span class="truncate text-xs text-muted-foreground">zinc · Agent Drafter</span></div></div></div>
```

## More in Foundations

- [StatusColors](/design/components/status-colors.md): How Max colours state: one tinted-pill template, a mapping per domain, and 17 pipeline stage colours.