# StageColors

> The 17-colour palette for pipeline and deal stage accents, with helpers that return static Tailwind classes and a hex value for each colour.

## Facts

- **Product**: Max
- **Family**: Pipeline
- **Kind**: Showcase page (tokens and patterns)
- **Source**: `max-agent: src/features/pipeline/constants.ts`
- **Live preview**: /design/components/stage-colors/preview.html
- **Page**: /design/components/stage-colors

## Guidelines

**Use it for** anything that shows a stage: board column dots and count badges, stage pickers, stage badges in tables, and canvas minimaps.

**What you get**:
- `STAGE_COLORS`: `slate, blue, sky, cyan, teal, emerald, green, lime, amber, orange, red, rose, pink, fuchsia, purple, violet, indigo`.
- `stageColorClasses(color)` returns three class strings:
  - `dot`: `bg-<c>-500`
  - `badge`: `border-<c>-500/30 bg-<c>-500/10 text-<c>-800 dark:text-<c>-300`. Slate, blue, sky, cyan and teal use `text-<c>-700` instead.
  - `swatch`: `bg-<c>-500`
- `stageColorHex(color)`: the colour's 500 step as hex, for surfaces that can't take a class, such as the SVG minimap. For example, `slate` is `#64748b` and `indigo` is `#6366f1`.
- An unknown or empty colour falls back to `slate` (`DEFAULT_STAGE_COLOR`).

**Defaults**:
- People pipeline: Prospect (blue), Contacted (orange), Replied (emerald), Interested (teal), Not Interested (red), Client (violet).
- Deals: Qualified (blue), Meeting booked (sky), Proposal (amber), Negotiation (orange), Won (emerald), Lost (red).

**Don't** build class names at runtime (`bg-${c}-500`). Tailwind only generates classes it finds written out in full, which is why every option is a literal string. Don't add colours outside this list: a stage's colour is validated against it.

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  function Tile(props) {
    var c = props.color, cls = DC.stageColorClasses(c), hex = DC.stageColorHex(c);
    return h("div", { className: "flex flex-col gap-2 rounded-lg border bg-card p-3" },
      h("div", { className: DC.cn("h-8 rounded-md", cls.swatch) }),
      h("div", { className: "flex items-center gap-2" },
        h("span", { className: DC.cn("size-2 rounded-full", cls.dot) }),
        h("span", { className: "text-sm font-medium" }, c),
        h(DC.Badge, { variant: "outline", className: DC.cn("ml-auto", cls.badge) }, props.count)),
      h("code", { className: "font-mono text-[11px] text-muted-foreground" }, hex));
  }
  function App() {
    return h("div", { className: "space-y-4" },
      h("div", { className: "flex items-baseline justify-between" },
        h("p", { className: "text-sm font-semibold" }, "Stage colours"),
        h("p", { className: "text-xs text-muted-foreground" }, "DC.STAGE_COLORS · stageColorClasses(c) · stageColorHex(c) · default slate")),
      h("div", { className: "grid grid-cols-6 gap-3" },
        DC.STAGE_COLORS.map(function (c, i) { return h(Tile, { key: c, color: c, count: (i * 7) % 23 + 1 }); })));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Pipeline

- [DealCard](/design/components/deal-card.md): One draggable deal on the deals board, plus `DealCardPreview`, the tilted copy shown under the cursor while dragging.
- [DealColumn](/design/components/deal-column.md): One column of the deals board: a droppable, infinitely scrolling list of `DealCard`s under a header with the stage dot, a count badge and money totals.
- [MovableCardGrid](/design/components/movable-card-grid.md): A card grid the reader can rearrange.
- [SalesWorkspaceMap](/design/components/sales-workspace-map.md): A read-only React Flow map of how a workspace's lists, signals, campaigns, rules and pipelines connect.