StatusColors

Guidelines#

Template: outline Badge + border-{c}-500/30 bg-{c}-500/10 text-{c}-700 dark:text-{c}-300; neutral states use border-border bg-muted text-muted-foreground.

Meanings: violet = suggested by AI; sky = to do / open; amber = in progress, paused or needs attention; emerald = done, won, active; red = failed, lost, stopped, recording; blue = processing; muted = cancelled, archived, scheduled. Warning icons appear only for something that blocks.

Rules: every pill carries its word; never tell success and failure apart by hue alone; reuse these mappings rather than inventing a colour for a new state.

Facts#

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div class="grid gap-4 p-6"><div class="grid grid-cols-[160px_1fr] items-center gap-4"><span class="text-sm font-medium">Tasks</span><div class="flex flex-wrap gap-2"><span data-slot="badge" class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap border-violet-500/30 bg-violet-500/10 text-violet-700 dark:text-violet-300">Suggested</span><span data-slot="badge" class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap border-sky-500/30 bg-sky-500/10 text-sky-700 dark:text-sky-300">To do</span><span data-slot="badge" class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300">In progress</span><span data-slot="badge" class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300">Done</span><span data-slot="badge" class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap border-border bg-muted text-muted-foreground">Cancelled</span></div></div><div class="grid grid-cols-[160px_1fr] items-center gap-4"><span class="text-sm font-medium">Priority</span><div class="flex flex-wrap gap-2"><span data-slot="badge" class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap border-red-500/30 bg-red-500/10 text-red-700 dark:text-red-300">Urgent</span><span data-slot="badge" class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap border-orange-500/30 bg-orange-500/10 text-orange-700 dark:text-orange-300">High</span><span data-slot="badge" class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap border-border bg-muted/50 text-muted-foreground">Medium</span><span data-slot="badge" class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap border-border bg-muted/30 text-muted-foreground">Low</span></div></div><div class="grid grid-cols-[160px_1fr] items-center gap-4"><span class="text-sm font-medium">Meetings</span><div class="flex flex-wrap gap-2"><span data-slot="badge" class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap border-border bg-muted text-muted-foreground">Scheduled</span><span data-slot="badge" class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap border-red-500/40 bg-red-500/10 text-red-600 dark:text-red-400">Recording</span><span data-slot="badge" class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap border-blue-500/40 bg-blue-500/10 text-blue-600 dark:text-blue-400">Processing</span><span data-slot="badge" class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400">Ready</span><span data-slot="badge" class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap border-red-500/40 bg-red-500/10 text-red-600 dark:text-red-400">Needs attention</span><span data-slot="badge" class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap border-border bg-muted text-muted-foreground line-through">Cancelled</span></div></div><div class="grid grid-cols-[160px_1fr] items-center gap-4"><span class="text-sm font-medium">Deals</span><div class="flex flex-wrap gap-2"><span data-slot="badge" class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap border-sky-500/30 bg-sky-500/10 text-sky-600 dark:text-sky-400">Open</span><span data-slot="badge" class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">Won</span><span data-slot="badge" class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap border-red-500/30 bg-red-500/10 text-red-600 dark:text-red-400">Lost</span></div></div><div class="grid grid-cols-[160px_1fr] items-center gap-4"><span class="text-sm font-medium">Campaigns (analytics)</span><div class="flex flex-wrap gap-2"><span data-slot="badge" class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">Active</span><span data-slot="badge" class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400">Paused</span><span data-slot="badge" class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap border-red-500/30 bg-red-500/10 text-red-600 dark:text-red-400">Stopped</span></div></div><div class="grid grid-cols-[160px_1fr] items-center gap-4"><span class="text-sm font-medium">Pipeline stages</span><div class="flex flex-wrap gap-2"><span class="size-5 rounded-full bg-slate-500" title="slate"></span><span class="size-5 rounded-full bg-blue-500" title="blue"></span><span class="size-5 rounded-full bg-sky-500" title="sky"></span><span class="size-5 rounded-full bg-cyan-500" title="cyan"></span><span class="size-5 rounded-full bg-teal-500" title="teal"></span><span class="size-5 rounded-full bg-emerald-500" title="emerald"></span><span class="size-5 rounded-full bg-green-500" title="green"></span><span class="size-5 rounded-full bg-lime-500" title="lime"></span><span class="size-5 rounded-full bg-amber-500" title="amber"></span><span class="size-5 rounded-full bg-orange-500" title="orange"></span><span class="size-5 rounded-full bg-red-500" title="red"></span><span class="size-5 rounded-full bg-rose-500" title="rose"></span><span class="size-5 rounded-full bg-pink-500" title="pink"></span><span class="size-5 rounded-full bg-fuchsia-500" title="fuchsia"></span><span class="size-5 rounded-full bg-purple-500" title="purple"></span><span class="size-5 rounded-full bg-violet-500" title="violet"></span><span class="size-5 rounded-full bg-indigo-500" title="indigo"></span></div></div><p class="text-sm text-muted-foreground">Template: <code class="font-mono text-xs">border-{c}-500/30 bg-{c}-500/10 text-{c}-700 dark:text-{c}-300</code>; neutral states use <code class="font-mono text-xs">border-border bg-muted text-muted-foreground</code>. Every pill carries its word.</p></div>

More in Foundations#