Marketing
BrandIconSet
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.
Guidelines#
Use it for the logo in marketing headers and chat avatars, trust rows (SOC 2, HIPAA, GDPR), and "works with" rows (Vercel, Replit, PostHog, Google Drive, WorkOS, Runway, Gemini, Boat, Supabase, Figma).
What you provide: render a key as a component, e.g. <BrandIcons.logo className="size-6" />. The keys are logo, soc2, soc2Dark, hipaa, hipaaDark, gdpr, gdprDark, vercel, replit, posthog, googleDrive, workos, runwayml, gemini, boat, supabase, figma. Only logo and the seals accept className; the partner marks take no props.
Anatomy: logo is a 42 × 24 mark defaulting to size-4 and fill-[var(--secondary)]; pass a fill class such as fill-foreground (the paths inherit it). The seals are 46 × 45 (soc2 and gdpr default to size-4), with …Dark variants for dark surfaces. Partner marks render at a fixed 52 × 60 (Google Drive 100 × 100) with their own colours and badge backgrounds.
Behaviour: static SVG.
Don't recolour partner marks, use a light seal on a dark surface (use the …Dark key), or stretch the logo out of its 7 : 4 ratio.
Facts#
| Group | Marketing |
|---|---|
| Product | Crew OS |
| Kind | Showcase page (tokens and patterns, not a single export) |
| Source | digitalcrew-orchestrator: components/icons.tsx |
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, B = DC.BrandIcons;
// logo and the compliance seals take a className; the partner marks render at their own 52 × 60 size.
var sized = { logo: "h-8 w-auto fill-foreground", soc2: "size-12", soc2Dark: "size-12", hipaa: "size-12", hipaaDark: "size-12", gdpr: "size-12", gdprDark: "size-12" };
function App() {
return h("div", { className: "grid grid-cols-6 gap-3" }, Object.keys(B).map(function (k) {
var dark = /Dark$/.test(k);
return h("figure", { key: k, className: "grid justify-items-center gap-2 rounded-xl border bg-card p-3" },
h("div", { className: "flex h-16 w-full items-center justify-center rounded-lg [&_svg]:max-h-14 [&_svg]:max-w-full " + (dark ? "bg-neutral-900" : "") }, h(B[k], { className: sized[k] })),
h("figcaption", { className: "text-muted-foreground font-mono text-xs" }, k));
}));
}
ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>