# Colour

> 102 colour tokens, one vocabulary across four themes. A neutral shell, and colour that always means something.

## Themes

Four themes share every token name; only the values change.

| Theme | background | foreground | primary | accent |
|---|---|---|---|---|
| Crew OS · Light (`crew-light`) | `oklch(0.985 0 0)` | `oklch(0.16 0 0)` | `oklch(0.2 0 0)` | `oklch(0.94 0 0)` |
| Crew OS · Dark (`crew-dark`) | `oklch(0.13 0 0)` | `oklch(0.97 0 0)` | `oklch(1 0 0)` | `oklch(0.28 0 0)` |
| Max · Light (`max-light`) | `oklch(1 0 0)` | `oklch(0.147 0.004 49.25)` | `#c2410c` | `oklch(0.97 0.001 106.424)` |
| Max · Dark (`max-dark`) | `oklch(0.13 0.005 60)` | `oklch(0.98 0.002 80)` | `#fb923c` | `oklch(0.26 0.006 60)` |

## Semantic core

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

| Token | crew-light | crew-dark | max-light | max-dark | Usage |
|---|---|---|---|---|---|
| `background` | `oklch(0.985 0 0)` | `oklch(0.13 0 0)` | `oklch(1 0 0)` | `oklch(0.13 0.005 60)` | Page ground. Crew OS: near-white / near-black achromatic. Max: white / warm near-black. |
| `foreground` | `oklch(0.16 0 0)` | `oklch(0.97 0 0)` | `oklch(0.147 0.004 49.25)` | `oklch(0.98 0.002 80)` | Body text and icons on `background`, `card` and `popover` (18:1 or better in every theme). |
| `card` | `oklch(1 0 0)` | `oklch(0.19 0 0)` | `oklch(1 0 0)` | `oklch(0.19 0.005 60)` | Raised surface: cards, panels, dialogs. One step above `background` in dark themes so panels read as elevated. |
| `card-foreground` | `oklch(0.16 0 0)` | `oklch(0.97 0 0)` | `oklch(0.147 0.004 49.25)` | `oklch(0.98 0.002 80)` | Text on `card` (16.9:1 or better in every theme). |
| `popover` | `oklch(1 0 0)` | `oklch(0.19 0 0)` | `oklch(1 0 0)` | `oklch(0.19 0.005 60)` | Menus, popovers, select lists, tooltips-on-surface. |
| `popover-foreground` | `oklch(0.16 0 0)` | `oklch(0.97 0 0)` | `oklch(0.147 0.004 49.25)` | `oklch(0.98 0.002 80)` | Text on `popover`. |
| `primary` | `oklch(0.2 0 0)` | `oklch(1 0 0)` | `#c2410c` | `#fb923c` | The brand ink. Crew OS: near-black (light) / white (dark) — the brand reads as ink, not a tint. Max: orange-700 #c2410c (light) / orange-400 #fb923c (dark). Default Button fill, links, active nav. |
| `primary-foreground` | `oklch(1 0 0)` | `oklch(0 0 0)` | `oklch(1 0 0)` | `oklch(0.147 0.004 49.25)` | Text and icons on `primary`. Crew OS 18:1 / 21:1; Max 5.2:1 (white on orange-700) / 8.7:1 (near-black on orange-400). |
| `secondary` | `oklch(0.93 0 0)` | `oklch(0.26 0 0)` | `oklch(0.97 0.001 106.424)` | `oklch(0.26 0.006 60)` | Quiet filled controls (secondary Button), chips, hero ground gradient end. |
| `secondary-foreground` | `oklch(0.2 0 0)` | `oklch(0.97 0 0)` | `oklch(0.268 0.007 34.298)` | `oklch(0.98 0.002 80)` | Text on `secondary` (13.9:1 or better). |
| `muted` | `oklch(0.96 0 0)` | `oklch(0.26 0 0)` | `oklch(0.97 0.001 106.424)` | `oklch(0.26 0.006 60)` | Subdued fills: code blocks, blockquotes, skeletons, disabled wells. |
| `muted-foreground` | `oklch(0.5 0 0)` | `oklch(0.72 0 0)` | `oklch(0.444 0.011 73.639)` | `oklch(0.709 0.01 56.259)` | Secondary text: descriptions, help text, placeholders, timestamps. Reads on `muted`, `background`, `card` and `sidebar` at 5.3:1 or better in every theme. |
| `accent` | `oklch(0.94 0 0)` | `oklch(0.28 0 0)` | `oklch(0.97 0.001 106.424)` | `oklch(0.26 0.006 60)` | Hover and selected fills for ghost/outline Buttons, menu items, list rows. |
| `accent-foreground` | `oklch(0.2 0 0)` | `oklch(0.97 0 0)` | `oklch(0.268 0.007 34.298)` | `oklch(0.98 0.002 80)` | Text on `accent` (13.3:1 or better). |
| `destructive` | `oklch(0.577 0.245 27.325)` | `oklch(0.704 0.191 22.216)` | `oklch(0.577 0.245 27.325)` | `oklch(0.704 0.191 22.216)` | Errors and irreversible actions: destructive Button fill, invalid-field border and ring, error text on `background`/`card` (4.5:1 or better). |
| `destructive-foreground` | `oklch(1 0 0)` | `oklch(0.12 0 0)` | `oklch(1 0 0)` | `oklch(0.12 0 0)` | Text on `destructive`. Defined by Crew OS; Max's destructive Button paints literal white text, which these values match in light themes. The destructive Button in dark themes draws `destructive` at 60% over the ground with white text (6.6:1). |
| `border` | `oklch(0.9 0 0)` | `oklch(0.3 0 0)` | `oklch(0.923 0.003 48.717)` | `oklch(1 0 0 / 0.12)` | Default hairline for cards, dividers, tables and outline Buttons (decorative: 1.3–1.5:1 on `background`). Max dark uses white at 12%. |
| `input` | `oklch(0.85 0 0)` | `oklch(0.34 0 0)` | `oklch(0.869 0.005 56.366)` | `oklch(1 0 0 / 0.18)` | Text field and switch-track border/fill. Source values sit at about 1.5:1 on `background` in every theme — under the 3:1 non-text floor; kept exact, so pair fields with a visible `Label`. |
| `ring` | `oklch(0.556 0 0)` | `oklch(0.708 0 0)` | `#c2410c` | `#fb923c` | Focus ring (3px, drawn at 50% by `outline-ring/50` defaults and at full strength by `focus-visible:ring-ring`). Crew OS neutral grey 4.5:1 / 7.8:1 so it shows beside a black button; Max matches `primary`. |

## Sidebar

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

| Token | crew-light | crew-dark | max-light | max-dark | Usage |
|---|---|---|---|---|---|
| `sidebar` | `oklch(0.97 0 0)` | `oklch(0.16 0 0)` | `oklch(0.985 0.001 106.423)` | `oklch(0.16 0.005 60)` | App sidebar ground, one step off `background`. |
| `sidebar-foreground` | `oklch(0.16 0 0)` | `oklch(0.97 0 0)` | `oklch(0.147 0.004 49.25)` | `oklch(0.98 0.002 80)` | Nav text on `sidebar` (17.8:1 or better). |
| `sidebar-primary` | `oklch(0.2 0 0)` | `oklch(1 0 0)` | `#c2410c` | `#fb923c` | Active nav item fill; tracks `primary` (Max: re-applied at runtime by the primary-colour picker). |
| `sidebar-primary-foreground` | `oklch(1 0 0)` | `oklch(0 0 0)` | `oklch(1 0 0)` | `oklch(0.147 0.004 49.25)` | Text on `sidebar-primary`. |
| `sidebar-accent` | `oklch(0.93 0 0)` | `oklch(0.26 0 0)` | `oklch(0.97 0.001 106.424)` | `oklch(0.23 0.006 60)` | Hovered nav item fill. |
| `sidebar-accent-foreground` | `oklch(0.2 0 0)` | `oklch(0.97 0 0)` | `oklch(0.268 0.007 34.298)` | `oklch(0.98 0.002 80)` | Text on `sidebar-accent`. |
| `sidebar-border` | `oklch(0.9 0 0)` | `oklch(0.3 0 0)` | `oklch(0.923 0.003 48.717)` | `oklch(1 0 0 / 0.1)` | Sidebar edge and section dividers. |
| `sidebar-ring` | `oklch(0.556 0 0)` | `oklch(0.708 0 0)` | `#c2410c` | `#fb923c` | Focus ring inside the sidebar; tracks `ring`. |

## Charts

Series colours for charts, in order.

| Token | crew-light | crew-dark | max-light | max-dark | Usage |
|---|---|---|---|---|---|
| `chart-1` | `oklch(0.48 0.08 235)` | `oklch(0.78 0.08 235)` | `oklch(0.646 0.222 41.116)` | `oklch(0.646 0.222 41.116)` | First data series. Crew OS: slate blue; Max: brand orange (both themes). |
| `chart-2` | `oklch(0.6 0.118 184.704)` | `oklch(0.696 0.17 162.48)` | `oklch(0.6 0.118 184.704)` | `oklch(0.696 0.17 162.48)` | Second data series (teal / green). |
| `chart-3` | `oklch(0.646 0.222 41.116)` | `oklch(0.769 0.188 70.08)` | `oklch(0.398 0.07 227.392)` | `oklch(0.769 0.188 70.08)` | Third data series. |
| `chart-4` | `oklch(0.828 0.189 84.429)` | `oklch(0.627 0.265 303.9)` | `oklch(0.828 0.189 84.429)` | `oklch(0.627 0.265 303.9)` | Fourth data series. |
| `chart-5` | `oklch(0.769 0.188 70.08)` | `oklch(0.645 0.246 16.439)` | `oklch(0.769 0.188 70.08)` | `oklch(0.645 0.246 16.439)` | Fifth data series. |

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

| Token | crew-light | crew-dark | max-light | max-dark | Usage |
|---|---|---|---|---|---|
| `bento-accent` | `oklch(0.85 0 0)` | `oklch(0.4 0 0)` | `oklch(0.85 0 0)` | `oklch(0.4 0 0)` | Crew OS marketing only: the shield and chart strokes in the Bento visuals, calibrated to stay visible without competing. Max columns repeat Crew OS values. |
| `dc-magenta` | `#dd7bbb` | `#dd7bbb` | `#dd7bbb` | `#dd7bbb` | Brand accent. Default glow for `.glass-glow`; Spend stat cards. Fill or mark only: 2.6:1 on light grounds, 7.3:1 on dark. |
| `dc-ocean` | `#4c7894` | `#4c7894` | `#4c7894` | `#4c7894` | Brand accent. Tasks stat cards; the ocean gradient. 4.6:1 on light and 4.2:1 on dark grounds — usable as a mark in both. |
| `dc-forest` | `#5a922c` | `#5a922c` | `#5a922c` | `#5a922c` | Brand accent. Active stat cards; the forest gradient. Mark only on light grounds (3.6:1). |
| `dc-gold` | `#d79f1e` | `#d79f1e` | `#d79f1e` | `#d79f1e` | Brand accent. Premium and ember gradients. Fill or mark on dark grounds only (2.3:1 on light). |
| `dc-amber` | `#f59e0b` | `#f59e0b` | `#f59e0b` | `#f59e0b` | Brand accent; same value as `dc-max`. Fill with near-black text (9.8:1), never white text (2.2:1). |
| `accent-ai` | `oklch(68% 0.20 295)` | `oklch(68% 0.20 295)` | `oklch(68% 0.20 295)` | `oklch(68% 0.20 295)` | Max's AI accent (purple), identical in both themes: Max chat file-drop zone, AI-generated markers in the onboarding packet. Mark or tint only on light grounds (3.0:1). |
| `accent-ai-2` | `oklch(60% 0.22 295)` | `oklch(60% 0.22 295)` | `oklch(60% 0.22 295)` | `oklch(60% 0.22 295)` | Deeper AI purple for pressed/hover states of `accent-ai` fills. |
| `accent-new` | `oklch(74% 0.18 148)` | `oklch(74% 0.18 148)` | `oklch(74% 0.18 148)` | `oklch(74% 0.18 148)` | Max's NEW accent (green), identical in both themes: new-item dots and badges in the onboarding packet and chat. Fill with near-black text (9.8:1). |
| `accent-new-2` | `oklch(68% 0.18 148)` | `oklch(68% 0.18 148)` | `oklch(68% 0.18 148)` | `oklch(68% 0.18 148)` | Deeper NEW green for hover/pressed states of `accent-new` fills. |

## Max agent surfaces

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

| Token | crew-light | crew-dark | max-light | max-dark | Usage |
|---|---|---|---|---|---|
| `mx-bg` | `oklch(98% 0.002 260)` | `oklch(13% 0.003 260)` | `oklch(98% 0.002 260)` | `oklch(13% 0.003 260)` | Ground of Max's agent surfaces (chat, Ask Max panel, meetings assistant, onboarding): a cool 260° neutral, deliberately apart from the warm app `background`. Only inside `.maxchat`; Crew OS columns repeat Max's values. |
| `mx-surface` | `oklch(100% 0 0)` | `oklch(15% 0.003 260)` | `oklch(100% 0 0)` | `oklch(15% 0.003 260)` | Raised cards on `mx-bg`: confirm cards, the composer. |
| `mx-surface-2` | `oklch(97% 0.002 260)` | `oklch(18% 0.004 260)` | `oklch(97% 0.002 260)` | `oklch(18% 0.004 260)` | Quiet fills on agent surfaces: history rows, chips at rest. |
| `mx-surface-hi` | `oklch(94% 0.003 260)` | `oklch(22% 0.004 260)` | `oklch(94% 0.003 260)` | `oklch(22% 0.004 260)` | Hover and pressed fills on agent surfaces; the active header icon. |
| `mx-ink` | `oklch(18% 0.006 260)` | `oklch(98% 0 0)` | `oklch(18% 0.006 260)` | `oklch(98% 0 0)` | Text on agent surfaces (17.8:1 / 19:1 on `mx-bg`) and the fill of their primary buttons — send, confirm — which are ink, not orange. |
| `mx-ink-2` | `oklch(32% 0.006 260)` | `oklch(82% 0.003 260)` | `oklch(32% 0.006 260)` | `oklch(82% 0.003 260)` | Secondary text on agent surfaces; the user's own messages (italic). |
| `mx-ink-3` | `oklch(48% 0.006 260)` | `oklch(62% 0.004 260)` | `oklch(48% 0.006 260)` | `oklch(62% 0.004 260)` | Meta and help text on agent surfaces (6.2:1 light, 5.5:1 dark on `mx-bg`). |
| `mx-ink-4` | `oklch(62% 0.005 260)` | `oklch(44% 0.005 260)` | `oklch(62% 0.005 260)` | `oklch(44% 0.005 260)` | Placeholders, disabled glyphs and decorative marks only: 3.4:1 light and 2.6:1 dark on `mx-bg`, below the text floor (source values, kept). |
| `mx-line` | `oklch(18% 0.006 260 / 0.08)` | `oklch(100% 0 0 / 0.08)` | `oklch(18% 0.006 260 / 0.08)` | `oklch(100% 0 0 / 0.08)` | Hairlines on agent surfaces: ink or white at 8%. |
| `mx-line-strong` | `oklch(18% 0.006 260 / 0.18)` | `oklch(100% 0 0 / 0.16)` | `oklch(18% 0.006 260 / 0.18)` | `oklch(100% 0 0 / 0.16)` | Composer and card borders on agent surfaces (decorative, about 1.5:1). |

## Status shades

Max's status pills and Snippet tones.

| Token | crew-light | crew-dark | max-light | max-dark | Usage |
|---|---|---|---|---|---|
| `ds-blue-100` | `oklch(97.32% 0.0141 251.56)` | `oklch(22.17% 0.069 259.89)` | `oklch(97.32% 0.0141 251.56)` | `oklch(22.17% 0.069 259.89)` | Max status scale — info tint ground (callouts, info badges). Crew OS columns repeat Max's values. |
| `ds-blue-900` | `oklch(53.18% 0.2399 256.99)` | `oklch(71.7% 0.1648 250.79)` | `oklch(53.18% 0.2399 256.99)` | `oklch(71.7% 0.1648 250.79)` | Info text and icons on `ds-blue-100` (4.9:1 / 6.8:1) or on `background`. |
| `ds-red-100` | `oklch(96.5% 0.0223 13.09)` | `oklch(22.1% 0.0657 15.11)` | `oklch(96.5% 0.0223 13.09)` | `oklch(22.1% 0.0657 15.11)` | Max status scale — error tint ground. |
| `ds-red-900` | `oklch(54.99% 0.232 25.29)` | `oklch(69.96% 0.2136 22.03)` | `oklch(54.99% 0.232 25.29)` | `oklch(69.96% 0.2136 22.03)` | Error text on `ds-red-100` (4.7:1 / 5.7:1). Always pair with an icon or word: red and green are never told apart by hue alone. |
| `ds-amber-100` | `oklch(97.48% 0.0331 85.79)` | `oklch(22.46% 0.0538 76.04)` | `oklch(97.48% 0.0331 85.79)` | `oklch(22.46% 0.0538 76.04)` | Max status scale — warning tint ground. |
| `ds-amber-900` | `oklch(52.79% 0.1496 54.65)` | `oklch(77.21% 0.1991 64.28)` | `oklch(52.79% 0.1496 54.65)` | `oklch(77.21% 0.1991 64.28)` | Warning text on `ds-amber-100` (5.2:1 / 7.7:1). |
| `ds-gray-100` | `hsla(0, 0%, 95%, 1)` | `hsla(0, 0%, 10%, 1)` | `hsla(0, 0%, 95%, 1)` | `hsla(0, 0%, 10%, 1)` | Max neutral scale — quiet tint ground (code snippets, keycaps). |
| `ds-gray-1000` | `hsla(0, 0%, 9%, 1)` | `hsla(0, 0%, 93%, 1)` | `hsla(0, 0%, 9%, 1)` | `hsla(0, 0%, 93%, 1)` | Strongest neutral text on `ds-gray-100` (16:1 / 15:1). |
| `ds-gray-alpha-400` | `hsla(0, 0%, 0%, 0.08)` | `hsla(0, 0%, 100%, 0.14)` | `hsla(0, 0%, 0%, 0.08)` | `hsla(0, 0%, 100%, 0.14)` | Translucent neutral wash and hairlines over any ground. |
| `ds-background-100` | `hsla(0, 0%, 100%, 1)` | `hsla(0, 0%, 4%, 1)` | `hsla(0, 0%, 100%, 1)` | `hsla(0, 0%, 4%, 1)` | Snippet and panel ground in the Max ds-* scale. |

**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`](/design/components/label.md) 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**](/design/components/status-colors.md) 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.