BrandStatCard

Guidelines#

Use it for the summary row of the Crew OS control centre (spend, tasks, active workers), three across from lg.

What you provide: icon (a Lucide component, not an element), label, value (string or number, already formatted), color (required, 6-digit hex; Crew OS uses STAT_CARD_THEMES: spend #DD7BBB, tasks #4C7894, active #5A922C, i.e. --dc-magenta, --dc-ocean, --dc-forest), optional subtitle and badge (short uppercase words such as "TODAY", "LIVE").

Anatomy: glass-card glass-hover, rounded-2xl, 24px padding, border tinted with the colour at alpha 25. A 128px blurred circle of the colour (alpha 25, 60% opacity) glows from the top-right corner. The icon tile is 48px, rounded-xl, colour at alpha 15, with a 24px icon in the colour. The label is 14px medium, uppercase, tracking-wide, in the colour; the value 36px bold text-foreground; the subtitle 14px text-muted-foreground. The badge is a rounded-full 12px semibold pill on the colour at alpha 15.

Behaviour: on Crew themes the glass brightens and its shadow deepens on hover (glass-hover, 0.3s); the card transitions over 300ms.

Don't put more than one number in a card, or use it for data that needs a trend (use KpiCard).

Facts#

Group	Marketing
Product	Crew OS
Global	window.DigitalCrew.BrandStatCard
Source	digitalcrew-orchestrator: components/dc/index.ts
Import in the app	import { BrandStatCard } 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(); }
  function App() {
    return h("div", { className: "grid grid-cols-3 gap-6" },
      h(DC.BrandStatCard, { icon: I.TrendingUp, label: "Total spend", value: "48,210", subtitle: "tokens consumed", badge: "TODAY", color: tok("magenta") }),
      h(DC.BrandStatCard, { icon: I.Zap, label: "Total tasks", value: 312, subtitle: "completed today", badge: "ACTIVE", color: tok("ocean") }),
      h(DC.BrandStatCard, { icon: I.Users, label: "Active workers", value: "4/6", subtitle: "workers online", badge: "LIVE", color: tok("forest") }));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Marketing#