Marketing

BrandStatCard

A frosted summary card for a headline number, tinted with one brand colour: icon tile, badge, uppercase label, big value and a subtitle.

Crew OSMarketingMarkdown

Open

Usage#

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#

ProductCrew OS

FamilyMarketing

Globalwindow.DigitalCrew.BrandStatCard

Sourcedigitalcrew-orchestrator: components/dc/index.ts

Import in the appimport { BrandStatCard } from "@/components/dc";

API#

TypeScript declarations emitted from components/dc/index.ts.

interface BrandStatCardProps {
    icon: LucideIcon;
    label: string;
    value: string | number;
    subtitle?: string;
    badge?: string;
    color: string;
}
export declare function BrandStatCard({ icon: Icon, label, value, subtitle, badge, color }: BrandStatCardProps): any;

Code#

The preview above, as plain React.createElement against window.DigitalCrew with realistic data. Copy it into a page that loads the bundle.

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