BrandBadge

Guidelines#

Use it for short statuses and labels on Crew OS dashboards and marketing surfaces: "Active now" on a worker card, "Premium", "New". Crew OS marks active workers with color="#22c55e" variant="subtle" and a 6px bg-green-500 dot as the first child.

What you provide: children (text, optionally led by a 12px icon or a dot), color (required; a 6-digit hex, because alpha is appended: read --dc-gold, --dc-magenta, --dc-ocean, --dc-forest or an agent colour), variant (solid, outline, subtle; default subtle).

Anatomy: inline-flex, 6px gap, px-2.5 py-1, rounded-full, 12px semibold text, 1px border. solid: the colour as background and border, white text. outline: transparent, coloured text, border at alpha 60 (about 38%). subtle: background at alpha 15 (about 8%), border at 30 (about 19%), coloured text.

Behaviour: static.

Don't use solid for more than one badge per card, pass non-hex colours, or use light colours such as --dc-gold with solid for small text on light themes without checking contrast.

Facts#

Group	Marketing
Product	Crew OS
Global	window.DigitalCrew.BrandBadge
Source	digitalcrew-orchestrator: components/dc/index.ts
Import in the app	import { BrandBadge } from "@/components/dc";

API#

TypeScript declarations emitted from components/dc/index.ts (the module also exports AgentAvatar, AgentSkillTag, BrandBadge, BrandStatCard, EquipmentBadge).

/**
 * Digital Crew Component Library
 * Reusable branded components for the admin dashboard
 */
export { BrandStatCard } from './BrandStatCard';
export { AgentAvatar } from './AgentAvatar';
export { EquipmentBadge } from './EquipmentBadge';
export { BrandBadge } from './BrandBadge';
export { AgentSkillTag } from './AgentSkillTag';

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 tok(name) { return getComputedStyle(document.documentElement).getPropertyValue("--dc-" + name).trim(); }
  var rows = [["solid"], ["outline"], ["subtle"]];
  function App() {
    return h("div", { className: "grid gap-3" }, ["solid", "outline", "subtle"].map(function (v) {
      return h("div", { key: v, className: "flex flex-wrap items-center gap-2" },
        h("code", { className: "text-muted-foreground w-16 text-xs" }, v),
        h(DC.BrandBadge, { color: "#22c55e", variant: v }, h("span", { className: "size-1.5 rounded-full bg-green-500" }), "Active now"),
        h(DC.BrandBadge, { color: tok("gold"), variant: v }, h(I.Sparkles, { className: "size-3" }), "Premium"),
        h(DC.BrandBadge, { color: tok("magenta"), variant: v }, "New skill"),
        h(DC.BrandBadge, { color: tok("ocean"), variant: v }, h(I.Clock, { className: "size-3" }), "Scheduled"));
    }));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Marketing#