Colour

Crew OS is monochrome by design — the whole crew, every colour combined. primary is near-black on light grounds and white on dark ones, so the brand reads as ink, not a tint. Neutrals are achromatic. Colour enters only through the agents, the brand accents and what people choose.

Max has one dominant hue: orange, the default for one agent's product. primary is orange-700 #c2410c in max-light (white text on it at 5.2:1) and orange-400 #fb923c in max-dark (near-black text on it at 8.7:1). Neutrals are Tailwind's warm stone ramp so greys lean toward the accent. People can change Max's accent in Settings (Orange by default; Blue, Violet, Emerald, Rose, Neutral or a custom hex): the picker rewrites only primary, ring, sidebar-primary and sidebar-ring, deriving a deep shade for light mode and a light shade for dark mode so text on it stays at 5:1 or better. Build with the tokens, never with a literal orange, and the picker keeps working.

Surfaces. Pages sit on background; raised panels, dialogs and cards on card (one step lighter than the ground in dark themes, so elevation reads without shadow); menus on popover; the app sidebar on sidebar. Quiet fills use muted (code, skeletons, wells), secondary (quiet buttons, chips) and accent (hover and selected rows).

Text. foreground for body copy on background, card and popover (16.9:1 or better in every theme). muted-foreground for descriptions, help, placeholders and timestamps (5.3:1 or better on muted, background, card and sidebar in every theme). Put text on a fill only with that fill's *-foreground partner.

Lines. border is the hairline for cards, tables, dividers and outline buttons (1.3–1.5:1: decorative). input borders text fields and fills the switch track; the source values sit near 1.5:1 against the page, under the 3:1 guideline for control boundaries — keep a visible Label on every control so the border never has to carry identification alone.

Status. destructive is the only error colour in shared components (button fill, invalid border and ring, error text at 4.5:1 or better). Across Max, state is a tinted pill — an outline Badge with border-{c}-500/30 bg-{c}-500/10 text-{c}-700 dark:text-{c}-300 — with one mapping per domain (tasks, priority, meetings, deals, campaigns, 17 pipeline stage colours); the StatusColors card lists them. Violet means suggested by AI, sky to do or open, amber in progress or needs attention, emerald done or won, red failed or lost, muted cancelled. Amber is also the colour of a fixable problem: a missing merge field, an unsupported filter, out of credits. Max also defines a tinted status scale: ds-blue-100/ds-blue-900 (info), ds-amber-100/ds-amber-900 (warning), ds-red-100/ds-red-900 (error), ds-gray-100/ds-gray-1000 (neutral), each 900-on-100 pair at 4.7:1 or better in both modes. Always pair a status colour with an icon or a word.

Brand accents — dc-magenta, dc-ocean, dc-forest, dc-gold, dc-amber — colour stat cards (magenta: spend, ocean: tasks, forest: active), glows and gradients on Crew OS. Use them as fills, marks and tints (stat cards tint at about 9–13% alpha with a 25–31% border of the same hue), not as text on light grounds: only dc-ocean reaches 4.5:1 there.

Agent colours. Each Digital Worker owns one hue, used for its avatar ring, cards and personal gradient: dc-sophie (sky), dc-claire (violet), dc-max (amber), dc-camille (pink), dc-kate (emerald), dc-andre (indigo), dc-jeanne (orange), dc-boss (red). Never reuse an agent's colour for a status or for another agent. Most agent hues are light; put near-black text on them, not white.

AI and NEW. Inside Max, accent-ai (purple) marks AI-generated or AI-active surfaces — the chat drop zone, "drafted by Max" markers — and accent-new (green) marks new items. Both are identical in light and dark. Use them as dots, tints and borders, with a word beside them.

Charts. Series take chart-1 … chart-5 in order. In Max, chart-1 is the brand orange in both modes; in Crew OS it is slate blue.

Gradients are the exception, not the ground. The signature Digital Crew gradient runs indigo → pink → amber (#6366f1, #ec4899, #f59e0b) and belongs to the Digital Worker onboarding and its report: the animated border of the Digital Worker onboarding card (.dc-gradient-border, 5s loop, still under reduced motion), gradient text on a single word of an onboarding heading ("Let's build your Digital Crew"), and a sober static variant at 10% or less behind report panels (.dc-gradient-sober). Agent cards may carry their agent's own three-stop gradient from the agent palette, and Max's marketing surfaces use a soft orange radial mesh (.gradient-mesh). Don't invent new gradients, and never put body text on one.

Themes#

Four themes share every token name. Switch theme in the header: the swatches below read the live values.

Semantic core#

The shell. Every theme defines these; build surfaces, text and structure from them.

Sidebar#

The app sidebar's own set, so a workspace can tint it separately.

Charts#

Series colours for charts, in order.

Agent palettes#

One colour per agent, five steps each: primary, secondary, accent, glass, glass-2.

Token	Value	Usage
dc-sophie	#0ea5e9	Agent colour — Sophie, HR Business Partner (screening, interviews). Her avatar ring, cards and gradient; fills take near-black text (7.6:1). Live at sophie.digitalcrew.tech.
dc-sophie-secondary	#38bdf8	Second stop of Sophie (HR)'s palette: lighter fills, hover tints, the middle of the agent gradient.
dc-sophie-accent	#7dd3fc	Lightest stop of Sophie (HR)'s palette: soft tints and the end of the agent gradient (135°, primary → secondary → accent).
dc-sophie-glass	#0284c7	Deep shade of Sophie (HR)'s palette for glass surfaces and marks; 4.1:1 on white (not for text on white).
dc-sophie-glass-2	#0369a1	Deepest shade of Sophie (HR)'s palette for glass borders and pressed states; 5.9:1 on white (text-safe on white).
dc-claire	#8b5cf6	Agent colour — Claire, Market Mastermind (market and account research). Marks at 4.1:1 on light and 4.8:1 on dark grounds.
dc-claire-secondary	#a78bfa	Second stop of Claire (market research)'s palette: lighter fills, hover tints, the middle of the agent gradient.
dc-claire-accent	#c4b5fd	Lightest stop of Claire (market research)'s palette: soft tints and the end of the agent gradient (135°, primary → secondary → accent).
dc-claire-glass	#7c3aed	Deep shade of Claire (market research)'s palette for glass surfaces and marks; 5.7:1 on white (text-safe on white).
dc-claire-glass-2	#6d28d9	Deepest shade of Claire (market research)'s palette for glass borders and pressed states; 7.1:1 on white (text-safe on white).
dc-max	#f59e0b	Agent colour — Max, Outbound Sales Force, on Digital Crew surfaces. Inside the Max product the brand accent is primary (orange) and Max Carter's roster accent is violet.
dc-max-secondary	#fbbf24	Second stop of Max (outbound sales)'s palette: lighter fills, hover tints, the middle of the agent gradient.
dc-max-accent	#fcd34d	Lightest stop of Max (outbound sales)'s palette: soft tints and the end of the agent gradient (135°, primary → secondary → accent).
dc-max-glass	#d97706	Deep shade of Max (outbound sales)'s palette for glass surfaces and marks; 3.2:1 on white (not for text on white).
dc-max-glass-2	#b45309	Deepest shade of Max (outbound sales)'s palette for glass borders and pressed states; 5.0:1 on white (text-safe on white).
dc-camille	#ec4899	Agent colour — Camille, Customer Support Champion (tier-1 support, churn risk; coming soon). Pink stop of the signature gradient.
dc-camille-secondary	#f472b6	Second stop of Camille (customer support)'s palette: lighter fills, hover tints, the middle of the agent gradient.
dc-camille-accent	#f9a8d4	Lightest stop of Camille (customer support)'s palette: soft tints and the end of the agent gradient (135°, primary → secondary → accent).
dc-camille-glass	#db2777	Deep shade of Camille (customer support)'s palette for glass surfaces and marks; 4.6:1 on white (text-safe on white).
dc-camille-glass-2	#be185d	Deepest shade of Camille (customer support)'s palette for glass borders and pressed states; 6.0:1 on white (text-safe on white).
dc-kate	#10b981	Agent colour — Kate, Marketing Maestro (campaigns, copy, content). Fills take near-black text (8.3:1).
dc-kate-secondary	#34d399	Second stop of Kate (marketing)'s palette: lighter fills, hover tints, the middle of the agent gradient.
dc-kate-accent	#6ee7b7	Lightest stop of Kate (marketing)'s palette: soft tints and the end of the agent gradient (135°, primary → secondary → accent).
dc-kate-glass	#14b8a6	Deep shade of Kate (marketing)'s palette for glass surfaces and marks; 2.5:1 on white (not for text on white).
dc-kate-glass-2	#0d9488	Deepest shade of Kate (marketing)'s palette for glass borders and pressed states; 3.7:1 on white (not for text on white).
dc-andre	#6366f1	Agent colour — André, Finance & Admin (invoicing, reporting; coming soon). Indigo stop of the signature gradient.
dc-andre-secondary	#818cf8	Second stop of André (finance & admin)'s palette: lighter fills, hover tints, the middle of the agent gradient.
dc-andre-accent	#a5b4fc	Lightest stop of André (finance & admin)'s palette: soft tints and the end of the agent gradient (135°, primary → secondary → accent).
dc-andre-glass	#4f46e5	Deep shade of André (finance & admin)'s palette for glass surfaces and marks; 6.3:1 on white (text-safe on white).
dc-andre-glass-2	#4338ca	Deepest shade of André (finance & admin)'s palette for glass borders and pressed states; 7.9:1 on white (text-safe on white).
dc-jeanne	#f97316	Agent colour — Jeanne, Project Manager. From lib/brand.ts (no CSS variable in the source; not on the public site).
dc-jeanne-secondary	#fb923c	Second stop of Jeanne (project delivery)'s palette: lighter fills, hover tints, the middle of the agent gradient.
dc-jeanne-accent	#fdba74	Lightest stop of Jeanne (project delivery)'s palette: soft tints and the end of the agent gradient (135°, primary → secondary → accent).
dc-jeanne-glass	#ea580c	Deep shade of Jeanne (project delivery)'s palette for glass surfaces and marks; 3.6:1 on white (not for text on white).
dc-jeanne-glass-2	#c2410c	Deepest shade of Jeanne (project delivery)'s palette for glass borders and pressed states; 5.2:1 on white (text-safe on white).
dc-boss	#dc2626	Agent colour — the Boss, Chief Executive Officer of the crew. From lib/brand.ts (no CSS variable; not on the public site). Never used as an error colour.
dc-boss-secondary	#ef4444	Second stop of the Boss (operations lead)'s palette: lighter fills, hover tints, the middle of the agent gradient.
dc-boss-accent	#fca5a5	Lightest stop of the Boss (operations lead)'s palette: soft tints and the end of the agent gradient (135°, primary → secondary → accent).
dc-boss-glass	#b91c1c	Deep shade of the Boss (operations lead)'s palette for glass surfaces and marks; 6.5:1 on white (text-safe on white).
dc-boss-glass-2	#991b1b	Deepest shade of the Boss (operations lead)'s palette for glass borders and pressed states; 8.3:1 on white (text-safe on white).

Brand accents#

Marketing accents and the AI / new markers.

Max agent surfaces#

The .maxchat surface scale (Max's agent chat and Ask Max).

Status shades#

Max's status pills and Snippet tones.