StageColors

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.

Facts#

Group	Pipeline
Product	Max
Kind	Showcase page (tokens and patterns, not a single export)
Source	max-agent: src/features/pipeline/constants.ts

Example#

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

<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#