# BrandBadge

> A rounded pill in any brand colour, in three weights: solid, outline and subtle.

## Facts

- **Product**: Crew OS
- **Family**: Marketing
- **Global**: `window.DigitalCrew.BrandBadge`
- **Source**: `digitalcrew-orchestrator: components/dc/index.ts`
- **Import in the app**: `import { BrandBadge } from "@/components/dc";`
- **Live preview**: /design/components/brand-badge/preview.html
- **Page**: /design/components/brand-badge

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

## API

```ts
interface BrandBadgeProps {
    children: React.ReactNode;
    color: string;
    variant?: "solid" | "outline" | "subtle";
}
export declare function BrandBadge({ children, color, variant }: BrandBadgeProps): any;
```

## Example

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

- [BentoSection](/design/components/bento-section.md): The landing-page bento: a `SectionHeader` over a two-by-two grid of animated tiles (collaboration, security, insights, automation), each with a title and description.
- [BrandIconSet](/design/components/brand-icon-set.md): The Crew OS brand icon set, `Icons` in the app and `DC.BrandIcons` here: the Digital Crew mark, compliance seals, and partner and integration marks as inline SVG components.
- [BrandStatCard](/design/components/brand-stat-card.md): A frosted summary card for a headline number, tinted with one brand colour: icon tile, badge, uppercase label, big value and a subtitle.
- [ConnectSection](/design/components/connect-section.md): The "Connect your context" section: one rounded panel with a heading, a tools row (integration logos orbiting the Digital Crew mark) and a knowledge row (the `CosmicSynapseCanvas` neuron sphere).
- [CpuSuperposition](/design/components/cpu-superposition.md): The features block of the Crew OS landing page: the `CpuArchitecture` circuit on top, overlapping the five glowing value cards of `FeaturesGridWithGlowingEffect` below it.
- [CrewNetwork](/design/components/crew-network.md): The "How work moves through the network" section: a live mission card and a four-step timeline (ask, match, work, paid) that plays through six real-looking missions, showing a Digital Worker handing a brief to a human operator.
- [CTASection](/design/components/cta-section.md): The closing call to action: a dark gradient panel with Camille's looping portrait video, a heading, a short line and one glass button to contact the team.
- [FAQSection](/design/components/faq-section.md): The landing-page FAQ: a `SectionHeader` and seventeen questions in a single-open, collapsible accordion.
- [FeatureSection](/design/components/feature-section.md): The Crew Network hero: a giant three-line headline ("Discover / the internet / of actions") over a slowly turning WebGL globe laced with glowing connection arcs, then a description and three stats.
- [FeaturesGridWithGlowingEffect](/design/components/features-grid-with-glowing-effect.md): The five value cards of the Crew OS landing page (cut waste, run lean, always on, reliable by default, shared knowledge), each wrapped in a pointer-following `GlowingEffect`.
- [SectionHeader](/design/components/section-header.md): The centred intro block that opens every Crew OS marketing section: generous padding, a bottom rule, and whatever eyebrow, heading and lede you pass in.
- [SectionSolutions](/design/components/section-solutions.md): The "Hire your Crew" section: a numbered roster of six Digital Workers beside a dossier card for the selected one, advancing on its own until the visitor picks someone.
- [SocialProofTestimonials](/design/components/social-proof-testimonials.md): A wall of customer quotes: `TestimonialCard`s stacked in columns that scroll vertically at different speeds, fading out at the top and bottom.