CrewAgents

Guidelines#

The agents (from lib/brand.ts, landing copy from messages/en.json): Sophie — HR Business Partner (sky); Claire — Market Mastermind (violet); Max — Outbound Sales Force (amber); Kate — Marketing Maestro (emerald); Camille — Customer Support Champion (pink, coming soon); André — Finance & Admin (indigo, coming soon); Jeanne — Project Manager (orange, internal); Boss — Chief Executive Officer (red, internal). Sophie, Claire, Max and Kate have live apps at <name>.digitalcrew.tech.

Palette: each agent has five tokens — dc-<agent> (primary), -secondary, -accent (lighter stops), -glass and -glass-2 (deeper shades); the agent gradient is 135°, primary → secondary → accent. Most primaries are light: put near-black text on them; the glass shades state their contrast on white in their notes.

Media: each agent has a looping video face. Sophie's, Max's, Kate's, André's and Camille's are stored in assets/Agents/videos/ and play in their cards through AgentAvatar (Camille's is the file lib/brand.ts calls sophie.mp4). Claire, Jeanne and the Boss show their initial on their gradient, which is also the app's fallback.

Rules: one agent, one colour; show the crew as ink or as its colours side by side. Skill chips tint the agent colour at 8% with a 35% border.

Known drift in the source: Kate's and Camille's bios in AGENT_DETAILS still describe older roles; the brand guide page uses different glass shades for Sophie and Max.

Facts#

Group	Agents
Product	Crew OS
Kind	Showcase page (tokens and patterns, not a single export)
Source	digitalcrew-orchestrator: lib/brand.ts

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;
var AGENTS = [
  { k: "sophie", name: "Sophie", role: "HR Business Partner", text: "Runs first-round interviews, screens candidates and shortlists the strongest ones.", skills: ["HR Interviews", "Talent acquisition"], status: "Online", app: "sophie.digitalcrew.tech", video: "/design/assets/Agents/videos/sophie.mp4" },
  { k: "claire", name: "Claire", role: "Market Mastermind", text: "Researches your market, your competitors and your accounts.", skills: ["Deep Search", "Data Analysis"], status: "Online", app: "claire.digitalcrew.tech" },
  { k: "max", name: "Max", role: "Outbound Sales Force", text: "Qualifies leads, sends personalised outreach and books meetings.", skills: ["Lead Qualification", "Cold Outreach"], status: "Online", app: "max.digitalcrew.tech", video: "/design/assets/Agents/videos/max.mp4" },
  { k: "kate", name: "Kate", role: "Marketing Maestro", text: "Plans campaigns, writes copy and ships content across email, social and your site.", skills: ["Campaign Creator", "Campaign Generator"], status: "Online", app: "kate.digitalcrew.tech", video: "/design/assets/Agents/videos/kate.mp4" },
  { k: "camille", name: "Camille", role: "Customer Support Champion", text: "Handles tier-1 support, monitors customer health and flags churn risk.", skills: ["Client Management", "Retention Strategy"], status: "Coming soon", video: "/sophie.mp4" },
  { k: "andre", name: "André", role: "Finance & Admin", text: "Invoicing, reporting, and the admin that's eating your week.", skills: ["Finance Administration"], status: "Coming soon", video: "/design/assets/Agents/videos/andre.mp4" },
  { k: "jeanne", name: "Jeanne", role: "Project Manager", text: "Drives project delivery and keeps teams aligned on goals and deadlines.", skills: ["Project Management", "Sprint Planning"], status: "Internal" },
  { k: "boss", name: "Boss", role: "Chief Executive Officer", text: "Oversees operations, sets strategic direction and ensures team excellence.", skills: ["Leadership", "Strategy"], status: "Internal" }];
function v(n) { return "var(--dc-" + n + ")"; }
function Card(a) {
  var steps = [a.k, a.k + "-secondary", a.k + "-accent", a.k + "-glass", a.k + "-glass-2"];
  var face = a.video
    ? h(DC.AgentAvatar, { videoUrl: a.video, color: getComputedStyle(document.documentElement).getPropertyValue("--dc-" + a.k).trim() || "#ec4899", name: a.name, size: "md", isActive: a.status === "Online" })
    : h("div", { className: "grid size-14 shrink-0 place-content-center rounded-xl text-xl font-bold text-white", style: { background: "linear-gradient(135deg, " + v(a.k) + ", " + v(a.k + "-secondary") + ", " + v(a.k + "-accent") + ")" } }, a.name[0]);
  return h("div", { className: "flex flex-col gap-3 rounded-xl border bg-card p-4" },
    h("div", { className: "h-1.5 rounded-full", style: { background: "linear-gradient(90deg, " + v(a.k) + ", " + v(a.k + "-secondary") + ", " + v(a.k + "-accent") + ")" } }),
    h("div", { className: "flex items-center gap-3" }, face,
      h("div", { className: "grid min-w-0" },
        h("span", { className: "font-semibold" }, a.name),
        h("span", { className: "truncate text-xs text-muted-foreground" }, a.role))),
    h("p", { className: "min-h-[60px] text-sm text-muted-foreground" }, a.text),
    h("div", { className: "flex flex-wrap gap-1.5" }, a.skills.map(function (s) {
      return h("span", { key: s, className: "rounded-full border px-2 py-0.5 text-[11px] font-medium", style: { borderColor: "color-mix(in srgb, " + v(a.k) + " 35%, transparent)", background: "color-mix(in srgb, " + v(a.k) + " 8%, transparent)" } }, s);
    })),
    h("div", { className: "mt-auto flex items-center justify-between gap-2" },
      h("div", { className: "flex gap-1" }, steps.map(function (n) { return h("span", { key: n, title: "dc-" + n, className: "size-4 rounded-full ring-1 ring-border", style: { background: v(n) } }); })),
      h("span", { className: "whitespace-nowrap text-[11px] text-muted-foreground" }, a.status)),
    a.app ? h("span", { className: "-mt-1 truncate font-mono text-[11px] text-muted-foreground" }, a.app) : null);
}
function App() {
  return h("div", { className: "grid gap-4" },
    h("div", { className: "flex items-center gap-3" },
      h("div", { className: "h-8 w-24 rounded-md bg-foreground" }),
      h("div", { className: "flex h-8 flex-1 overflow-hidden rounded-md" }, AGENTS.map(function (a) { return h("div", { key: a.k, className: "flex-1", style: { background: v(a.k) } }); })),
      h("span", { className: "text-xs text-muted-foreground" }, "ink → every agent")),
    h("div", { className: "grid grid-cols-4 gap-3" }, AGENTS.map(function (a) { return h(Card, Object.assign({ key: a.k }, a)); })));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Agents#