# Digital Crew Design System — full text
> Every page of https://www.digitalcrew.tech/design in Markdown, in reading order. Index: https://www.digitalcrew.tech/design/llms.txt
# Digital Crew Design System
> Everything you need to design, build and market Digital Crew: the brand, the foundations, 146 live components and ready-to-use assets for Crew OS and Max.
## Find your way
- [Designers](/design/start/designers.md): Colours, type and components that stay on-brand in both products.
- [Developers](/design/start/developers.md): Tokens as CSS or Tailwind, the component bundle, types and APIs.
- [Marketers](/design/start/marketers.md): The story, the voice, logos and agent media for every campaign.
- [Freelancers & agencies](/design/start/freelancers.md): Everything to deliver a page or an asset for Digital Crew today.
- [AI agents & LLMs](/design/start/ai-agents.md): Machine-readable docs: llms.txt, Markdown twins, tokens and types.
## Sections
- [Brand](/design/story.md)
- [Foundations](/design/foundations/colour.md)
- [Components](/design/components.md)
- [Resources](/design/resources.md)
## Themes
- `crew-light` (Crew OS · Light): Crew OS and the public site, ink.
- `crew-dark` (Crew OS · Dark): Crew OS and the public site, ink.
- `max-light` (Max · Light): Max, orange by default.
- `max-dark` (Max · Dark): Max, orange by default.
## The crew
- Sophie, HR Business Partner: `dc-sophie`
- Claire, Market Mastermind: `dc-claire`
- Max, Outbound Sales Force: `dc-max`
- Kate, Marketing Maestro: `dc-kate`
- Camille, Customer Support Champion: `dc-camille`
- André, Finance & Admin: `dc-andre`
- Jeanne, Project Manager: `dc-jeanne`
- Boss, Chief Executive Officer: `dc-boss`
## About this system
Digital Crew builds AI **Digital Workers**: teammates that take a role, connect to your tools and ship work alongside your people. Two products share this system. **Crew OS** is the platform, admin and public site where people build and run their crew. **Max** is the go-to-market workspace (CRM, campaigns, inbox, meetings) run by the sales Digital Worker of the same name. Both are Next.js + Tailwind v4 + shadcn (new-york) apps with the same semantic token names, the same component vocabulary and the same typeface; Max's component library is the reference implementation. They differ in one decision, and the brand story below explains it: **Crew OS is ink, Max is orange.**
Pick the theme for the product you are building: `crew-light` / `crew-dark` for Crew OS and the marketing site, `max-light` / `max-dark` for Max. Every token name means the same thing in all four themes; only the values change.
---
# For designers
> Colours, type and components that stay on-brand in both products.
## Start here
1. **Pick the product.** Crew OS and the public site are ink; Max is orange. Switch the theme from the header and every swatch, type sample and preview follows.
2. **Build the shell in ink.** Surfaces, text, borders and structure use the neutral tokens (`background`, `foreground`, `muted`, `border`). A hue never decorates the frame.
3. **Colour always means something**: an agent (`dc-*`), the user's choice (`primary`) or a state (`destructive`, the status pills).
4. **Start from a component.** 146 live previews show every state; each page lists the exact sizes, radii, durations and colours.
## Your toolkit
- [Colour & themes](/design/foundations/colour): 102 tokens across four themes, click to copy.
- [Typography](/design/foundations/typography): Cabinet Grotesk, Inter and Instrument Serif, with every style.
- [Spacing, radii & surfaces](/design/foundations/layout) and [Motion](/design/foundations/motion).
- [Components](/design/components): filter by product or family, then open any preview in all four themes.
- [Figma tokens](/design/resources#tokens): the DTCG file imports into Tokens Studio, one set per theme.
- [Logos](/design/brand/logos), [Agents](/design/brand/agents) and [Iconography](/design/brand/iconography).
## Rules to design by
- One agent, one colour. Never reuse an agent's colour for another agent, a status or decoration.
- The mark stays black or white. It never takes a tint.
- Never hard-code the primary: a screen has to work with any primary colour and any workspace logo.
- Sentence case in the products; Title Case only in marketing headings.
- Everything meets the [accessibility](/design/foundations/accessibility) rules: contrast, visible focus, reduced motion.
---
# For developers
> Tokens as CSS or Tailwind, the component bundle, types and APIs.
## Start here
1. **Tokens first.** Load [tokens.css](/design/lib/tokens.css) and set `data-theme` on ``. With Tailwind v4, add the [@theme file](/design/tokens/tokens.tailwind.css) and use `bg-primary`, `text-muted-foreground`, `rounded-lg`.
2. **Components.** In Crew OS and Max, import from the file each component page names. Anywhere else, load the bundle and use `window.DigitalCrew`: see [Build with it](/design/develop).
3. **Types.** [index.d.ts](/design/lib/index.d.ts) documents every export with its props, and the data types the props use.
## Your toolkit
- [Downloads & tokens](/design/resources): CSS variables, Tailwind theme, DTCG JSON, source JSON.
- [Build with it](/design/develop): the CDN snippet, themes and providers.
- [Components](/design/components): each page has **Facts** (source, import, global), **API** and **Code**.
- [Known gaps](/design/known-gaps): what is stubbed in the bundle and what the apps do differently.
## Rules to build by
- Use token names, never raw values. The primary colour is chosen by each workspace.
- Wrap an app once in `TooltipProvider` and `ConfirmDialogProvider`, and mount one `Toaster`.
- Confirm destructive actions through `useConfirm()`, never `window.confirm`.
- Respect `prefers-reduced-motion`; use the motion tokens instead of ad-hoc durations.
- Keep strings translation-safe: text that changes sits in its own element.
---
# For marketers
> The story, the voice, logos and agent media for every campaign.
## Start here
1. **Read the story.** The mark is a D and a C, and a 0 and a 1; black and white hold every colour and each agent is one of them. [The story](/design/story) explains why Crew OS is ink and Max is orange.
2. **Write like the crew.** The product speaks to *you*; a Digital Worker speaks as *I*; the company says *we* only on the site. See [Voice & copy](/design/content).
3. **Show the agents.** Every agent has one colour and a video face; always show its name beside it. See [Agents](/design/brand/agents).
## Your toolkit
- [Logo pack](/design/brand/logos#files): lockups, mark and icons in black and white (.zip).
- [Agent media](/design/brand/agents): video loops, posters and portraits (.zip).
- [Illustrations and Lottie animations](/design/brand/assets).
- [Marketing sections](/design/components?group=Marketing): the landing page's real sections, live.
- [Brand kit](/design/resources#downloads): logos, agents, illustrations, tokens and the rules in one zip.
## Rules for campaigns
- Headlines and CTAs in Title Case; triads work ("Automate. Simplify. Thrive").
- Buttons start with a verb and name the outcome: "Build my Digital Worker".
- The mark is black or white, never tinted, never stretched.
- One agent, one colour. The crew as a whole is ink, or its colours side by side.
- No decorative emoji. Use real typography: … — ’ ·
---
# For freelancers & agencies
> Everything to deliver a page or an asset for Digital Crew today.
## Deliver for Digital Crew in four steps
1. **Download the [brand kit](/design/resources#downloads).** Logos, agent posters and portraits, illustrations, tokens in four formats, and the rules as a text file.
2. **Pick the theme.** `crew-light` / `crew-dark` for anything on digitalcrew.tech; `max-light` / `max-dark` for Max.
3. **Set the type.** Cabinet Grotesk for Crew OS and marketing ([Fontshare](https://www.fontshare.com/fonts/cabinet-grotesk)); Inter and Instrument Serif for Max ([Google Fonts](https://fonts.google.com/specimen/Inter)).
4. **Build with the real parts.** Reuse the [marketing sections](/design/components?group=Marketing) and components, or copy their exact values from each page.
## Checklist before you hand over
- [ ] The mark is black or white, from the logo pack, never redrawn or tinted.
- [ ] Colours come from the tokens; agent colours only mean their agent.
- [ ] Every agent face shows the agent's name.
- [ ] Copy follows [Voice & copy](/design/content): sentence case in product UI, Title Case in marketing headings, buttons start with a verb.
- [ ] Contrast, focus and reduced motion meet the [accessibility](/design/foundations/accessibility) rules.
- [ ] Works in light and dark, and with a different primary colour.
## Your toolkit
- [Downloads & tokens](/design/resources) · [Logos](/design/brand/logos) · [Agents](/design/brand/agents) · [Assets](/design/brand/assets)
- [Components](/design/components) with live previews and code
- [Build with it](/design/develop) if you ship code
---
# For AI agents
> Machine-readable docs: llms.txt, Markdown twins, tokens and types.
## Read the system as a model
- **[llms.txt](/design/llms.txt)** lists every page with a one-line summary, in the llms.txt format.
- **[llms-full.txt](/design/llms-full.txt)** is the whole site in one Markdown document.
- **[manifest.json](/design/manifest.json)** is the catalogue: pages, guides, components (name, group, product, summary, source, import, preview and Markdown URLs), agents, themes and files.
- **[tokens.json](/design/tokens.json)**, **[tokens.dtcg.json](/design/tokens/tokens.dtcg.json)** and **[index.d.ts](/design/lib/index.d.ts)** carry exact values and types.
## Markdown twins
Every page has a Markdown twin at the same path plus `.md`: `/design/components/button.md`, `/design/foundations/colour.md`; the overview is `/design/index.md`. Each HTML page links its twin with ``.
A component page in Markdown always has the same parts: a one-line summary, **Facts** (group, product, source, import), **Guidelines** (use, props, anatomy with exact values, behaviour, don'ts), **API** (TypeScript declarations) and **Example** (runnable code).
## Give it to your agent
```text
Use the Digital Crew design system: https://www.digitalcrew.tech/design/llms.txt
Read the overview and the story first. Before generating UI, read the page of each
component you use. Use token names (never raw values), the theme of the product
(crew-* or max-*), sentence case in product UI, and one colour per agent.
```
---
# The story
> The mark is a D and a C, and a 0 and a 1. Black and white hold every colour; each Digital Worker is one of them.
**The mark is two readings at once.** It is a D and a C — Digital Crew — and it is a 0 and a 1.
**Black and white are all colours and no colour.** Mix every colour of light and you get white; mix every pigment and you get black. That is the crew: **each Digital Worker is one colour**, and the crew as a whole is all of them mixed. Pushed to the extreme, the mix becomes black or white. **Break that black or white and each agent's identity comes out** — Sophie's sky, Claire's violet, Max's amber, Camille's pink, Kate's emerald, André's indigo.
**So the platform is neutral, and colour belongs to the agents and to the people using it.** The public site already gives every agent its colour. In the product, people set their own primary colour in Settings and put their own logo in the sidebar. The platform stays a quiet, customisable ground where each workspace adds its own touch.
What this means when you design:
- **Build the shell in ink.** Surfaces, text, borders and structure use the neutral tokens (`background`, `foreground`, `muted`, `border`). A hue never decorates the frame.
- **Colour always means something**: an agent (`dc-*`, the agent accents), the user's choice (`primary`), or a state (`destructive`, the status pills). If a colour means none of these, it is noise.
- **Never hard-code the primary.** Use `primary`, `ring` and `sidebar-primary`, so the colour a person picks flows everywhere and the derived shades keep text readable.
- **One agent, one colour.** Never reuse an agent's colour for another agent, a status or decoration, and never let one agent's colour stand for the whole crew. The crew is shown in ink, or as its colours side by side, breaking out of the ink.
- **The mark stays black or white.** It is where all the colours meet, so it never takes a tint.
- **Everything must survive customisation.** A screen has to work with any primary colour and any workspace logo. Don't pair `primary` with fixed brand hues that could clash with what a person picks.
Crew OS, the home of the whole crew, is therefore ink. Max is one agent's product and carries a colour of its own — orange by default — until its people choose theirs.
---
# Voice & copy
> Who speaks, how it sounds, and the copy rules both products follow.
**Who speaks.** The product speaks to the reader as *you*. A Digital Worker speaks as *I* ("Tell me about you", "I'll handle the rest"); the company speaks as *we* only on the public site and in legal or manifesto copy. Never let the interface say "we" about the product's own behaviour.
**Tone.** Plain, direct and a little warm. Say what happens and what to do next. Prefer short declaratives and, in headlines, triads: "Automate. Simplify. Thrive", "Liberty. Diversity. Reciprocity."
**Casing.**
- Product UI: sentence case everywhere — titles, buttons, menu items, labels ("Review drafts", "Daily sending limit").
- Marketing headings and CTAs use Title Case ("Empower Your Team with Digital Workers", "Contact Our Team"). Don't carry this into the apps.
- Proper nouns keep their capitals: Digital Crew, Crew OS, Max, Digital Worker, Unibox, Inbox Autopilot. Agents go by first names (Sophie, Claire, Max, Camille, Kate, André).
- Overlines and eyebrows are uppercase with 0.08em tracking (`crew-overline`, `max-overline`): "YOUR DIGITAL WORKERS".
**Buttons** start with a verb and name the outcome: "Build my Digital Worker", "Start free trial", "Review drafts". Destructive buttons name the object: "Delete campaign".
**Empty states and errors** state the fact, then the way forward, in one or two sentences:
- "No campaigns match. Create a campaign or try another name."
- "Add the Cal.com URL and API key."
- "Choose a calendar you own before saving."
- "Accounts from another workspace can't be changed here."
**Max's product copy rules** (from its design audit and reference docs):
- *Report the outcome, not the effort.* "Data found for 63 of 100 contacts", not "Contact enrichment complete for 100 contacts."
- *State the cost before the action*, and show estimates as ceilings: "Uses 1 AI credit · the 12 ideas below are free", "≤ 40 credits". Out of credits is said before the click, in an amber block with an **Add credits** link.
- *Name the gap before offering to fill it*, and spell out skip reasons: "needs a LinkedIn URL, or a first + last name plus a company".
- *Honest precision.* No invented clock times on far-off plans; projected times are labelled "projected".
- *No leaked internals.* No API routes, raw enum values (`in_progress`), "tool server (MCP) is unreachable" or "Runtime reported: …" in the interface.
- *One name per thing.* If people read "Tasks", the address says `/tasks`; pick "Organisation" or "Organization" and keep it.
- *Privacy in names.* Public booking pages say "With Mario and Jeanne", never a surname or an email.
- *Translation-safe strings.* Text that changes sits in its own element (`{saving ? : }{saving ? "Saving…" : "Save"}`); a multi-part string is one template literal; never `translate="no"`.
**Placeholders** show an example, not the label: "you@company.com", "+33 6 12 34 56 78", "Search people, companies, deals, tasks…".
**Typography in copy.** Use the real characters: … (ellipsis), — (em dash, spaced: "still running — one moment"), ’ (curly apostrophe), · (middle dot) as a separator in meta lines ("Free to start · No credit card · Ready in 2 min").
**Emoji.** None as decoration. A few glyphs carry meaning inline in Max and stay: ⚡ marks an automation rule on a pipeline column, 🔥 is the mailbox warm-up shortcut, ✓ and ⚠ mark health chips. Everything else is a Lucide icon.
**Language.** Crew OS ships in English, French, German, Spanish and Chinese; leave room for longer French and German strings.
---
# Agents
> Eight Digital Crew agents, each one colour, and Max's 24 Digital Workers.
## The Digital Crew
| Agent | Role | Status | Colour | Video loop |
|---|---|---|---|---|
| Sophie | HR Business Partner | Online | `dc-sophie` `#0ea5e9` | [mp4](/design/assets/Agents/videos/sophie.mp4) |
| Claire | Market Mastermind | Online | `dc-claire` `#8b5cf6` | none yet (initial on the agent gradient) |
| Max | Outbound Sales Force | Online | `dc-max` `#f59e0b` | [mp4](/design/assets/Agents/videos/max.mp4) |
| Kate | Marketing Maestro | Online | `dc-kate` `#10b981` | [mp4](/design/assets/Agents/videos/kate.mp4) |
| Camille | Customer Support Champion | Coming soon | `dc-camille` `#ec4899` | [mp4](/sophie.mp4) |
| André | Finance & Admin | Coming soon | `dc-andre` `#6366f1` | [mp4](/design/assets/Agents/videos/andre.mp4) |
| Jeanne | Project Manager | Internal | `dc-jeanne` `#f97316` | none yet (initial on the agent gradient) |
| Boss | Chief Executive Officer | Internal | `dc-boss` `#dc2626` | none yet (initial on the agent gradient) |
## Max's Digital Workers
| Portrait | Name | Craft |
|---|---|---|
| [max-carter.webp](/design/assets/Agents/max-carter.webp) | Max Carter | Head of Sales (crop at 50% 22%) |
| [nora-hale.webp](/design/assets/Agents/nora-hale.webp) | Nora Hale | Onboarding Interviewer |
| [emma-laurent.webp](/design/assets/Agents/emma-laurent.webp) | Emma Laurent | Campaign Writer |
| [hugo-silva.webp](/design/assets/Agents/hugo-silva.webp) | Hugo Silva | Workflow Generator |
| [sofia-rossi.webp](/design/assets/Agents/sofia-rossi.webp) | Sofia Rossi | Lead Discovery & Buyer Roles |
| [simon-keller.webp](/design/assets/Agents/simon-keller.webp) | Simon Keller | ICP & Scoring Framework |
| [iris-chen.webp](/design/assets/Agents/iris-chen.webp) | Iris Chen | Reply Suggestions |
| [nolan-park.webp](/design/assets/Agents/nolan-park.webp) | Nolan Park | Reply Classifier |
| [axel-moreau.webp](/design/assets/Agents/axel-moreau.webp) | Axel Moreau | Autopilot Reply |
| [maya-brooks.webp](/design/assets/Agents/maya-brooks.webp) | Maya Brooks | Meeting Assistant |
| [theo-kim.webp](/design/assets/Agents/theo-kim.webp) | Theo Kim | Meeting Summarizer |
| [clara-bennett.webp](/design/assets/Agents/clara-bennett.webp) | Clara Bennett | Meeting Action Items |
| [jade-lin.webp](/design/assets/Agents/jade-lin.webp) | Jade Lin | Action Drafting |
| [leo-mercer.webp](/design/assets/Agents/leo-mercer.webp) | Leo Mercer | Action Suggestions |
| [victor-cole.webp](/design/assets/Agents/victor-cole.webp) | Victor Cole | Deal Routing |
| [orion-reed.webp](/design/assets/Agents/orion-reed.webp) | Orion Reed | Agent Drafter |
**Crew OS — the Digital Crew** (see [**CrewAgents**](/design/components/crew-agents.md)). Eight agents, each one colour with a five-step palette: `dc-` (primary), `dc--secondary`, `dc--accent`, `dc--glass`, `dc--glass-2`; the agent gradient runs 135° from primary to accent. Sophie (HR Business Partner, sky), Claire (Market Mastermind, violet), Max (Outbound Sales Force, amber) and Kate (Marketing Maestro, emerald) are live at `.digitalcrew.tech`; Camille (Customer Support Champion, pink) and André (Finance & Admin, indigo) are coming soon; Jeanne (Project Manager, orange) and the Boss (CEO, red) are internal. Every agent has a looping video face (five are stored in `assets/Agents/videos/`); [`AgentAvatar`](/design/components/agent-avatar.md) shows it in a rounded square ringed and glowing in the agent colour, with a green ping when active. Skill tags tint the agent colour at 8% ([`AgentSkillTag`](/design/components/agent-skill-tag.md)), badges at 15%/30% ([`BrandBadge`](/design/components/brand-badge.md)).
**Max — 24 Digital Workers in seven teams** (see [**MaxRoster**](/design/components/max-roster.md), [**AgentAccents**](/design/components/agent-accents.md)): each has a name, a craft and one of 16 Tailwind accents; 16 have a 4:5 studio portrait, the rest show initials on their accent tile ([`AgentFace`](/design/components/agent-face.md)). Max Carter, Head of Sales, is the one people talk to all day; the others are specialists he works with (their faces stack in his chat header).
**Worker Builder faces**: people building a crew pick an appearance from ten video faces (Amara, Sofia, Marc, Raj, Chang, Priya, Koa, Jeff, Astrid, Mai) and a name from a pool of fifteen.
**Rules**: always show an agent's name beside its face; an agent's colour belongs to that agent only; the crew as a whole is ink.
---
# Logos
> The mark stays black or white: it is where every agent's colour meets.
The Digital Crew mark is a squared bracket that reads as a **D and a C** — and as a **0 and a 1**; the wordmark sets DIGITAL CREW in heavy capitals beside it. It is black or white because that is where every agent's colour meets. Files are in `assets/Logos/`, in black and white versions.
- Light grounds: `logo-black-complete.svg` (lockup) or `logo-black.svg` (mark). Dark grounds: `logo-white-complete.svg` or `logo-icon-white.png`. Swap on theme; the mark only exists in black and white, so never tint it with `primary` or an agent colour.
- The app sidebar shows the lockup at up to 206px wide when expanded and the 20px icon when collapsed. A workspace may replace both with its own uploaded logo; the Digital Crew mark is the fallback.
- Favicons and home-screen icons: `favicon-32x32.png`, `apple-touch-icon.png`, `android-chrome-512x512.png`.
## Files
- [android-chrome-512x512.png](/design/assets/Logos/android-chrome-512x512.png): image/png, 10 KB
- [apple-touch-icon.png](/design/assets/Logos/apple-touch-icon.png): image/png, 2 KB
- [favicon-32x32.png](/design/assets/Logos/favicon-32x32.png): image/png, 1 KB
- [logo-black-complete.svg](/design/assets/Logos/logo-black-complete.svg): image/svg+xml, 3 KB
- [logo-black.svg](/design/assets/Logos/logo-black.svg): image/svg+xml, 1 KB
- [logo-icon-black.png](/design/assets/Logos/logo-icon-black.png): image/png, 1 KB
- [logo-icon-white.png](/design/assets/Logos/logo-icon-white.png): image/png, 1 KB
- [logo-white-complete.svg](/design/assets/Logos/logo-white-complete.svg): image/svg+xml, 3 KB
- [logo.png](/design/assets/Logos/logo.png): image/png, 4 KB
---
# Iconography
> Lucide everywhere; in-house marks only where Lucide has nothing.
Both apps use **Lucide** (`lucide-react`): 24px grid, 2px stroke, round caps and joins, `currentColor`. Inside buttons and menus icons render at 16px (`size-4`) and inherit the text colour; they sit before the label, except a trailing arrow for "continue"-type actions. Icon-only buttons need an `aria-label`. Some Crew OS admin screens also import Tabler icons; use Lucide for new work. What Lucide lacks is drawn in-house: Max's `MaxIcons` (channel and CRM logos, message delivery ticks, appearance tiles; see [**MaxIconSet**](/design/components/max-icon-set.md)) and Crew OS's `BrandIcons` (the mark, compliance seals, partner marks; see [**BrandIconSet**](/design/components/brand-icon-set.md)).
Third-party marks for integrations and partners (`assets/Integrations/`, `assets/Partners/`) are single-ink black glyphs: show them beside the vendor's name and invert them to white in dark themes; never recolour them.
## Integrations
- [aircall.svg](/design/assets/Integrations/aircall.svg): image/svg+xml, 1 KB
- [airtable.svg](/design/assets/Integrations/airtable.svg): image/svg+xml, 1 KB
- [apolloio.svg](/design/assets/Integrations/apolloio.svg): image/svg+xml, 1 KB
- [asana.svg](/design/assets/Integrations/asana.svg): image/svg+xml, 1 KB
- [bamboohr.svg](/design/assets/Integrations/bamboohr.svg): image/svg+xml, 5 KB
- [brevo.svg](/design/assets/Integrations/brevo.svg): image/svg+xml, 1 KB
- [caldotcom.svg](/design/assets/Integrations/caldotcom.svg): image/svg+xml, 2 KB
- [calendly.svg](/design/assets/Integrations/calendly.svg): image/svg+xml, 2 KB
- [chatwoot.svg](/design/assets/Integrations/chatwoot.svg): image/svg+xml, 1 KB
- [clickup.svg](/design/assets/Integrations/clickup.svg): image/svg+xml, 1 KB
- [docker.svg](/design/assets/Integrations/docker.svg): image/svg+xml, 2 KB
- [figma.svg](/design/assets/Integrations/figma.svg): image/svg+xml, 1 KB
- [freshdesk.svg](/design/assets/Integrations/freshdesk.svg): image/svg+xml, 2 KB
- [github.svg](/design/assets/Integrations/github.svg): image/svg+xml, 1 KB
- [gmail.svg](/design/assets/Integrations/gmail.svg): image/svg+xml, 1 KB
- [googleads.svg](/design/assets/Integrations/googleads.svg): image/svg+xml, 1 KB
- [googleanalytics.svg](/design/assets/Integrations/googleanalytics.svg): image/svg+xml, 1 KB
- [googlecalendar.svg](/design/assets/Integrations/googlecalendar.svg): image/svg+xml, 1 KB
- [googledrive.svg](/design/assets/Integrations/googledrive.svg): image/svg+xml, 1 KB
- [googlesheets.svg](/design/assets/Integrations/googlesheets.svg): image/svg+xml, 1 KB
- [greenhouse.svg](/design/assets/Integrations/greenhouse.svg): image/svg+xml, 1 KB
- [helpscout.svg](/design/assets/Integrations/helpscout.svg): image/svg+xml, 1 KB
- [heyreach.svg](/design/assets/Integrations/heyreach.svg): image/svg+xml, 4 KB
- [hubspot.svg](/design/assets/Integrations/hubspot.svg): image/svg+xml, 1 KB
- [indeed.svg](/design/assets/Integrations/indeed.svg): image/svg+xml, 1 KB
- [instantly.svg](/design/assets/Integrations/instantly.svg): image/svg+xml, 1 KB
- [intercom.svg](/design/assets/Integrations/intercom.svg): image/svg+xml, 1 KB
- [jira.svg](/design/assets/Integrations/jira.svg): image/svg+xml, 1 KB
- [linear.svg](/design/assets/Integrations/linear.svg): image/svg+xml, 1 KB
- [linkedin.svg](/design/assets/Integrations/linkedin.svg): image/svg+xml, 1 KB
- [looker.svg](/design/assets/Integrations/looker.svg): image/svg+xml, 1 KB
- [mailchimp.svg](/design/assets/Integrations/mailchimp.svg): image/svg+xml, 4 KB
- [make.svg](/design/assets/Integrations/make.svg): image/svg+xml, 1 KB
- [meta.svg](/design/assets/Integrations/meta.svg): image/svg+xml, 1 KB
- [microsoftteams.svg](/design/assets/Integrations/microsoftteams.svg): image/svg+xml, 2 KB
- [mixpanel.svg](/design/assets/Integrations/mixpanel.svg): image/svg+xml, 1 KB
- [modelcontextprotocol.svg](/design/assets/Integrations/modelcontextprotocol.svg): image/svg+xml, 1 KB
- [n8n.svg](/design/assets/Integrations/n8n.svg): image/svg+xml, 2 KB
- [notion.svg](/design/assets/Integrations/notion.svg): image/svg+xml, 1 KB
- [odoo.svg](/design/assets/Integrations/odoo.svg): image/svg+xml, 1 KB
- [outlook.svg](/design/assets/Integrations/outlook.svg): image/svg+xml, 1 KB
- [personio.svg](/design/assets/Integrations/personio.svg): image/svg+xml, 1 KB
- [pipedrive.svg](/design/assets/Integrations/pipedrive.svg): image/svg+xml, 1 KB
- [postiz.svg](/design/assets/Integrations/postiz.svg): image/svg+xml, 1 KB
- [salesforce.svg](/design/assets/Integrations/salesforce.svg): image/svg+xml, 1 KB
- [shopify.svg](/design/assets/Integrations/shopify.svg): image/svg+xml, 1 KB
- [slack.svg](/design/assets/Integrations/slack.svg): image/svg+xml, 1 KB
- [stripe.svg](/design/assets/Integrations/stripe.svg): image/svg+xml, 1 KB
- [supabase.svg](/design/assets/Integrations/supabase.svg): image/svg+xml, 1 KB
- [telegram.svg](/design/assets/Integrations/telegram.svg): image/svg+xml, 1 KB
- [trello.svg](/design/assets/Integrations/trello.svg): image/svg+xml, 1 KB
- [twenty.svg](/design/assets/Integrations/twenty.svg): image/svg+xml, 1 KB
- [twilio.svg](/design/assets/Integrations/twilio.svg): image/svg+xml, 1 KB
- [typeform.svg](/design/assets/Integrations/typeform.svg): image/svg+xml, 2 KB
- [unipile.svg](/design/assets/Integrations/unipile.svg): image/svg+xml, 1 KB
- [webflow.svg](/design/assets/Integrations/webflow.svg): image/svg+xml, 1 KB
- [whatsapp.svg](/design/assets/Integrations/whatsapp.svg): image/svg+xml, 1 KB
- [wordpress.svg](/design/assets/Integrations/wordpress.svg): image/svg+xml, 1 KB
- [workable.svg](/design/assets/Integrations/workable.svg): image/svg+xml, 5 KB
- [x.svg](/design/assets/Integrations/x.svg): image/svg+xml, 1 KB
- [zapier.svg](/design/assets/Integrations/zapier.svg): image/svg+xml, 3 KB
- [zendesk.svg](/design/assets/Integrations/zendesk.svg): image/svg+xml, 1 KB
- [zoom.svg](/design/assets/Integrations/zoom.svg): image/svg+xml, 1 KB
## Partners
- [apple.svg](/design/assets/Partners/apple.svg): image/svg+xml, 2 KB
- [docker.svg](/design/assets/Partners/docker.svg): image/svg+xml, 3 KB
- [github.svg](/design/assets/Partners/github.svg): image/svg+xml, 2 KB
- [microsoft.svg](/design/assets/Partners/microsoft.svg): image/svg+xml, 1 KB
- [nvidia.svg](/design/assets/Partners/nvidia.svg): image/svg+xml, 2 KB
- [openai.svg](/design/assets/Partners/openai.svg): image/svg+xml, 2 KB
- [prisma.svg](/design/assets/Partners/prisma.svg): image/svg+xml, 1 KB
- [salesforce.svg](/design/assets/Partners/salesforce.svg): image/svg+xml, 12 KB
- [stripe.svg](/design/assets/Partners/stripe.svg): image/svg+xml, 1 KB
---
# Assets
> Every file the system ships: agent media, illustrations, animations and map data.
## Agent media
Faces of the Digital Workers.
**Max's roster** — 16 studio portraits, 4:5 (640 × 800) on a black ground, shown wherever the agent appears once approved:
| file | agent | craft |
|---|---|---|
| `max-carter.webp` | Max Carter | Head of Sales (crop at 50% 22%) |
| `nora-hale.webp` | Nora Hale | Onboarding Interviewer |
| `emma-laurent.webp` | Emma Laurent | Campaign Writer |
| `hugo-silva.webp` | Hugo Silva | Workflow Generator |
| `sofia-rossi.webp` | Sofia Rossi | Lead Discovery & Buyer Roles |
| `simon-keller.webp` | Simon Keller | ICP & Scoring Framework |
| `iris-chen.webp` | Iris Chen | Reply Suggestions |
| `nolan-park.webp` | Nolan Park | Reply Classifier |
| `axel-moreau.webp` | Axel Moreau | Autopilot Reply |
| `maya-brooks.webp` | Maya Brooks | Meeting Assistant |
| `theo-kim.webp` | Theo Kim | Meeting Summarizer |
| `clara-bennett.webp` | Clara Bennett | Meeting Action Items |
| `jade-lin.webp` | Jade Lin | Action Drafting |
| `leo-mercer.webp` | Leo Mercer | Action Suggestions |
| `victor-cole.webp` | Victor Cole | Deal Routing |
| `orion-reed.webp` | Orion Reed | Agent Drafter |
Nova Lane, Olivia Grant, Ezra Novak, Amara Okafor, Luca Moretti, Priya Nair, Daniel Ortiz and Ava Morgan have no portrait yet: they show initials on their accent tile.
**The Digital Crew's video faces** (`videos/`) — short muted loops, H.264 MP4, shown by [`AgentAvatar`](/design/components/agent-avatar.md) in a rounded square ringed in the agent's colour:
- `videos/sophie.mp4` — Sophie, HR Business Partner (sky).
- `videos/max.mp4` — Max, Outbound Sales Force (amber).
- `videos/kate.mp4` — Kate, Marketing Maestro (emerald).
- `videos/andre.mp4` — André, Finance & Admin (indigo).
- `videos/camille.mp4` and its still `videos/camille-poster.png` (1976 × 1942) — Camille, Customer Support Champion (pink). In the site repo they are `public/sophie.mp4` and `public/sophie.png`, the files `lib/brand.ts` assigns to Camille.
Claire, Jeanne and the Boss have no loop in this system yet: show their initial on the agent gradient (135°, primary → secondary → accent).
**Other media**
- `max_agent.png` — 512 × 555 poster for Max's looping video face in the Max app (auth page, dashboard hero, Ask Max bubble).
- `agent-cta-background.png` — 2202 × 721 background behind the agent call-to-action.
Crop portraits with `object-fit: cover` (a circle or rounded square), keep the face in the top third, and always show the agent's name beside the face.
- [axel-moreau.webp](/design/assets/Agents/axel-moreau.webp): image/webp, 23 KB
- [clara-bennett.webp](/design/assets/Agents/clara-bennett.webp): image/webp, 28 KB
- [emma-laurent.webp](/design/assets/Agents/emma-laurent.webp): image/webp, 22 KB
- [hugo-silva.webp](/design/assets/Agents/hugo-silva.webp): image/webp, 18 KB
- [iris-chen.webp](/design/assets/Agents/iris-chen.webp): image/webp, 21 KB
- [jade-lin.webp](/design/assets/Agents/jade-lin.webp): image/webp, 18 KB
- [leo-mercer.webp](/design/assets/Agents/leo-mercer.webp): image/webp, 28 KB
- [max-carter.webp](/design/assets/Agents/max-carter.webp): image/webp, 13 KB
- [maya-brooks.webp](/design/assets/Agents/maya-brooks.webp): image/webp, 25 KB
- [nolan-park.webp](/design/assets/Agents/nolan-park.webp): image/webp, 22 KB
- [nora-hale.webp](/design/assets/Agents/nora-hale.webp): image/webp, 16 KB
- [orion-reed.webp](/design/assets/Agents/orion-reed.webp): image/webp, 17 KB
- [simon-keller.webp](/design/assets/Agents/simon-keller.webp): image/webp, 19 KB
- [sofia-rossi.webp](/design/assets/Agents/sofia-rossi.webp): image/webp, 16 KB
- [theo-kim.webp](/design/assets/Agents/theo-kim.webp): image/webp, 16 KB
- [victor-cole.webp](/design/assets/Agents/victor-cole.webp): image/webp, 25 KB
- [videos/camille-poster.png](/sophie.png): image/png, 3.1 MB
- [videos/camille.mp4](/sophie.mp4): video/mp4, 3.2 MB
- [agent-cta-background.png](/agent-cta-background.png): image/png, 333 KB
- [max_agent.png](/design/assets/Agents/max_agent.png): image/png, 190 KB
- [videos/sophie.mp4](/design/assets/Agents/videos/sophie.mp4): video/mp4, 2.1 MB
- [videos/kate.mp4](/design/assets/Agents/videos/kate.mp4): video/mp4, 576 KB
- [videos/max.mp4](/design/assets/Agents/videos/max.mp4): video/mp4, 472 KB
- [videos/andre.mp4](/design/assets/Agents/videos/andre.mp4): video/mp4, 441 KB
## Illustrations
Thumbnails for Max's campaign workflow templates (email outreach, LinkedIn connection, LinkedIn message, connect-and-follow-up, last-resort letter), 240 × 140.
They draw simple node diagrams with their own fixed HSL blues and slate on a near-white card with an 8px radius, so they do not follow the theme; show them on `card` inside a hairline `border`, and in dark themes keep them on a light tile rather than inverting them.
- [email-outreach.svg](/design/assets/Illustrations/email-outreach.svg): image/svg+xml, 1 KB
- [last-resort-letter.svg](/design/assets/Illustrations/last-resort-letter.svg): image/svg+xml, 2 KB
- [linkedin-connect-followup.svg](/design/assets/Illustrations/linkedin-connect-followup.svg): image/svg+xml, 1 KB
- [linkedin-connection.svg](/design/assets/Illustrations/linkedin-connection.svg): image/svg+xml, 1 KB
- [linkedin-message.svg](/design/assets/Illustrations/linkedin-message.svg): image/svg+xml, 1 KB
- [collective-idea.svg](/design/assets/Illustrations/collective-idea.svg): image/svg+xml, 3 KB
## Animations (Lottie)
Crew OS's Lottie animations (bodymovin JSON, all assets embedded, no external references): ai-collaboration, check, cost-deduction, database, demolishing, dollar, filter, flash, girl-avatar, graduate, schedule, timer, trash, trend-arrow, users-team-profile, young-boy-avatar, young-boy-avatar-2, zap.
Play them with [**Lottie**](/design/components/lottie.md) (`lottie-react`): fetch the JSON and pass it as `animationData`, with `loop` and `autoplay` as needed. They are line-and-fill illustrations in their own colours, so show them on `card` or `background` at 48–160px. Nothing in either app uses them yet; pause or show the first frame under reduced motion.
- [ai-collaboration.json](/design/assets/Animations/ai-collaboration.json): application/json (Lottie), 100 KB
- [check.json](/design/assets/Animations/check.json): application/json (Lottie), 13 KB
- [cost-deduction.json](/design/assets/Animations/cost-deduction.json): application/json (Lottie), 315 KB
- [database.json](/design/assets/Animations/database.json): application/json (Lottie), 8 KB
- [demolishing.json](/design/assets/Animations/demolishing.json): application/json (Lottie), 66 KB
- [dollar.json](/design/assets/Animations/dollar.json): application/json (Lottie), 6 KB
- [filter.json](/design/assets/Animations/filter.json): application/json (Lottie), 15 KB
- [flash.json](/design/assets/Animations/flash.json): application/json (Lottie), 30 KB
- [girl-avatar.json](/design/assets/Animations/girl-avatar.json): application/json (Lottie), 42 KB
- [graduate.json](/design/assets/Animations/graduate.json): application/json (Lottie), 5 KB
- [schedule.json](/design/assets/Animations/schedule.json): application/json (Lottie), 56 KB
- [timer.json](/design/assets/Animations/timer.json): application/json (Lottie), 6 KB
- [trash.json](/design/assets/Animations/trash.json): application/json (Lottie), 7 KB
- [trend-arrow.json](/design/assets/Animations/trend-arrow.json): application/json (Lottie), 6 KB
- [users-team-profile.json](/design/assets/Animations/users-team-profile.json): application/json (Lottie), 10 KB
- [young-boy-avatar-2.json](/design/assets/Animations/young-boy-avatar-2.json): application/json (Lottie), 27 KB
- [young-boy-avatar.json](/design/assets/Animations/young-boy-avatar.json): application/json (Lottie), 27 KB
- [zap.json](/design/assets/Animations/zap.json): application/json (Lottie), 3 KB
## Map data
`world-countries-110m.geojson` — Natural Earth country outlines at 1:110m (174 KB), the land layer [**WorldGlobe**](/design/components/world-globe.md) draws for the prospect and organisation maps. Both apps serve it from `public/geo/`.
- [world-countries-110m.geojson](/design/assets/Geo/world-countries-110m.geojson): application/geo+json, 174 KB
---
# 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.
---
# Typography
> Cabinet Grotesk for Crew OS, Inter for Max, Instrument Serif for Max's agent surfaces.
**Cabinet Grotesk** (files in `fonts/`, weights 100–900; there is no 600 cut, so semibold renders from the Bold file) is the brand face. Crew OS sets everything in it — display, interface and body. Max uses it for display moments (onboarding, the first-day packet) and sets its interface in **Inter** (Google Fonts, 100–900). Monospace is the system stack (`mono`).
- Display: `display-hero` (60px, medium, tracking −0.05em, balanced and centred) for the one hero line; `display-page` (48px semibold) for public page titles; `display-section` (30px bold) for marketing section heads. Scale display sizes down a step per breakpoint (60 → 48 → 36 → 30).
- Interface: use the `crew-*` styles in Crew OS and the `max-*` styles in Max. They share sizes: title 24/32 (Crew semibold, Max bold, both tracking −0.025em), heading 18/28 semibold, body 14/20, body-lg 16/24, caption 12/16, label 14/1 medium, overline 12px semibold uppercase.
- 14px (`*-body`) is the default interface size; 12px (`*-caption`) is the most-used size in Max, for meta lines and tables.
- Text fields render 16px below the `md` breakpoint and 14px from `md` up, so phones don't zoom on focus.
- Code: `code-inline` (13.6px on a `muted` chip, radius 0.4rem) and `code-block` (12.8px on `muted` with a `border` hairline, radius 0.5rem).
- Max turns on the OpenType features `ss01`, `ss02`, `cv05` and `cv08` for body text; keep them on.
- Agent surfaces add **Instrument Serif** (Google Fonts, `serif`) for greetings and onboarding titles — `chat-empty-title` (46px) and `packet-title` (72px), each with a muted italic `em` — and set messages in `chat-message` (14.5px / 1.68).
- Keep text at 12px or larger, body at weight 400 or heavier, and no light weights under 20px. Max's design audit counts 763 uses of 8–11px sizes and asks for one 12px caption style instead: that is debt to pay down, not a pattern to copy.
## Display
Family: `--font-cabinet` ("Cabinet Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif)
| Style | Size | Line height | Weight | Tracking | Usage |
|---|---|---|---|---|---|
| `display-hero` | 60px | 1 | 500 | -0.05em | Marketing hero h1 at xl (text-6xl font-medium tracking-tighter); steps down to 48, 36 and 30px at smaller breakpoints. Balanced, centred, in `primary`. |
| `display-page` | 48px | 1 | 600 | -0.025em | Public page h1 (integrations, manifesto, blog index) at md; 60px at lg. |
| `display-section` | 30px | 36px | 700 | — | Marketing section headings (text-3xl font-bold). |
## Crew OS interface
Family: `--font-cabinet` ("Cabinet Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif)
| Style | Size | Line height | Weight | Tracking | Usage |
|---|---|---|---|---|---|
| `crew-title` | 24px | 32px | 600 | -0.025em | Crew OS page titles (text-2xl font-semibold tracking-tight). |
| `crew-heading` | 18px | 28px | 600 | — | Section and dialog titles (text-lg font-semibold). |
| `crew-body-lg` | 16px | 24px | 400 | — | Lead paragraphs and text fields below md (inputs render text-base on phones so iOS does not zoom). |
| `crew-body` | 14px | 20px | 400 | — | Default interface text: table cells, descriptions, buttons (text-sm). |
| `crew-label` | 14px | 1 | 500 | — | Form labels and Button text (text-sm leading-none font-medium). |
| `crew-caption` | 12px | 16px | 400 | — | Meta lines, badges, table footers (text-xs). |
| `crew-overline` | 12px | 1.5 | 600 | 0.08em | Eyebrows above section titles and settings group titles; always set uppercase, in `muted-foreground`. |
## Max interface
Family: `--font-inter` (Inter, -apple-system, "Helvetica Neue", Arial, sans-serif)
| Style | Size | Line height | Weight | Tracking | Usage |
|---|---|---|---|---|---|
| `max-title` | 24px | 32px | 700 | -0.025em | Max page titles (text-2xl font-bold tracking-tight). |
| `max-heading` | 18px | 28px | 600 | — | Card, sheet and dialog titles (text-lg font-semibold). |
| `max-body-lg` | 16px | 24px | 400 | — | Chat messages and long-form reading; text fields below md. |
| `max-body` | 14px | 20px | 400 | — | Default Max interface text (text-sm). |
| `max-label` | 14px | 1 | 500 | — | Form labels and Button text. |
| `max-caption` | 12px | 16px | 400 | — | The most used size in Max (text-xs): table meta, badges, timestamps, helper lines. |
| `max-overline` | 12px | 1.5 | 600 | 0.08em | Settings group titles; uppercase, in `muted-foreground`. |
## Max agent surfaces
Family: `--font-inter` (Inter, -apple-system, "Helvetica Neue", Arial, sans-serif)
| Style | Size | Line height | Weight | Tracking | Usage |
|---|---|---|---|---|---|
| `packet-title` | 72px | 0.96 | 400 | -0.025em | Onboarding packet page titles (Instrument Serif, `.page__title`); 44px on phones. |
| `chat-empty-title` | 46px | 1.02 | 400 | -0.02em | The Max chat empty state (`.mx-empty__title`), with a muted italic `em`; clamp(36px, 11vw, 46px) on phones. |
| `chat-message` | 14.5px | 1.68 | 400 | -0.005em | Max's messages (`.mx-bubble`), the composer text and onboarding bubbles: prose, no box. |
| `chat-meta` | 11px | 1.3 | 500 | — | Row meta, tool-call states and badges on agent surfaces, in `mx-ink-3`. |
| `mono-eyebrow` | 10.5px | 1 | 500 | 0.14em | Onboarding packet eyebrows and field labels (`.eyebrow`, `.field-label`); uppercase, in the dimmest readable ink. |
## Code
Family: `--font-mono` (ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)
| Style | Size | Line height | Weight | Tracking | Usage |
|---|---|---|---|---|---|
| `code-inline` | 13.6px | undefined | 400 | — | Inline code in editors and docs (0.85rem) on a `muted` chip, radius 0.4rem. |
| `code-block` | 12.8px | undefined | 400 | — | Code blocks (0.8rem) on `muted` with a `border` hairline, radius 0.5rem. |
---
# Spacing, radii & surfaces
> The 4px step, the radius scale, borders, shadows, glass and focus states.
Both apps use Tailwind's 4px step. Controls are 32px (`space-8`, small), 36px (`space-9`, default) or 40px (`space-10`, large) tall; fields pad 12px (`space-3`) inline; buttons 16px (`space-4`); cards pad and gap 24px (`space-6`). Settings sections use `crew-settings-gap` (24px; 16px at compact density). Compact density — a personal Appearance setting — only tightens table cell padding (6px block) and settings spacing; never shrink controls for it.
Max is a sidebar app (see [**Sidebar**](/design/components/sidebar.md)): a 16rem sidebar from `md` (768px) up that collapses to 3rem icons or hides (⌘/Ctrl+B), beside an inset content panel with 8px margins and `radius-xl` corners. The header is 56px (64px from `sm`) with the search trigger and ⌘K hint; `main` pads 16px × 24px and centres at 80rem (`max-w-7xl`) on wide screens. Page headers are an `h1` in `max-title` (24px bold, tight) over a 14px `muted-foreground` line, in a row that wraps its actions: `flex flex-wrap items-center justify-between gap-3`. Many sections sit in the glass shell `glass-panel border border-glass rounded-3xl px-6 py-6`. On phones a 56px bottom tab bar holds four destinations plus **More**; it is 3.5rem plus the safe-area inset, and anything anchored to the bottom adds `--app-bottom-inset` so nothing hides behind it. Below `lg`, views show one column at a time, filters move into a bottom sheet and the main create action floats as a **+** button. Crew OS's public hero centres in a `max-w-3xl` column; the sections below it run full-bleed.
## Radii
`--radius` is 10px in both apps. Buttons, inputs and textareas use `radius-md` (8px); cards `radius-xl` (14px); settings sections and toggles `r-lg` (12px); popovers and menus `radius-lg` (10px); small chips `radius-sm` (6px). Pills (`r-full`) are for switches, hero CTAs, the hero badge and avatars. The logo itself is square-cornered — don't round it.
## Borders, shadows and glass
Elevation is carried by surface steps and hairlines first, shadow second. `shadow-xs` sits under outline buttons and fields; `shadow-sm` under cards. Both apps have a **glass** layer for surfaces floating over imagery, video or gradient grounds: translucent white fill, `backdrop-glass*` blur-and-saturate, a translucent white hairline, and `shadow-glass-panel` or `shadow-glass-card`. Use glass only over something worth seeing through; on a plain ground use `card`. Respect `prefers-reduced-transparency` by dropping the backdrop filter.
The **Glass button finish** (Appearance setting) adds a frosted inset highlight to default buttons without changing their colour or size.
## Focus and states
Every interactive element shows a focus ring built from `ring`: primitives draw a 3px `ring` halo plus a `ring` border (`focus-visible` only); the switch and native selects draw a 2px `ring` outline offset by 2px. In Crew OS `ring` is a mid grey (4.5:1 light, 7.8:1 dark) so it shows next to a black button; in Max it follows `primary`. Hover drops a fill to 90% opacity (`primary`, `destructive`) or 80% (`secondary`), or lays `accent` under ghost and outline controls. Disabled is 50% opacity with no pointer events. Invalid is `aria-invalid` → `destructive` border and a faint `destructive` halo, with the message below the field.
## Spacing scale
Both apps use Tailwind v4's 4px step (--spacing: 0.25rem); these are the steps the shared components use.
| Token | Value | Usage |
|---|---|---|
| `space-1` | 4px | Tightest gap: icon-to-text in badges, stacked helper lines. |
| `space-1.5` | 6px | Small Button icon gap (gap-1.5); description offset under settings titles. |
| `space-2` | 8px | Button icon gap, CardHeader row gap, Textarea vertical padding, label-to-field gap. |
| `space-3` | 12px | Input/Textarea horizontal padding; small Button padding; gap between inline controls. |
| `space-4` | 16px | Default Button horizontal padding; compact settings gap; settings header gap. |
| `space-5` | 20px | Appearance toggle row inline padding. |
| `space-6` | 24px | Card padding and inner gap (px-6 py-6 gap-6); large Button padding. |
| `crew-settings-gap` | 24px | Settings section padding and field gap, comfortable density (16px when data-density is compact). |
| `space-8` | 32px | Small Button and icon-button height (h-8); appearance preview padding. |
| `space-9` | 36px | Default Button and Input height (h-9). |
| `space-10` | 40px | Large Button height (h-10). |
## Radius scale
Both apps set --radius: 0.625rem and derive sm/md/xl from it; values below are those calc() results.
| Token | Value | Usage |
|---|---|---|
| `radius` | 10px | The base radius both apps set; `radius-lg` equals it. |
| `radius-sm` | 6px | calc(radius - 4px): small chips, inner elements. |
| `radius-md` | 8px | calc(radius - 2px): Button, Input, Textarea (rounded-md). |
| `radius-lg` | 10px | Popovers, menus, sheets. |
| `r-lg` | 12px | Settings sections, appearance toggles and previews (0.75rem). |
| `radius-xl` | 14px | calc(radius + 4px): Card (rounded-xl). |
| `r-full` | 9999px | Pills: Switch track and thumb, hero CTAs, the hero badge, avatars. |
## Shadows
| Token | Value | Usage |
|---|---|---|
| `shadow-xs` | `0 1px 2px 0 rgba(0, 0, 0, 0.05)` | Outline Button, Input, Textarea. |
| `shadow-sm` | `0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)` | Card. |
| `shadow-glass-panel` | crew-light: `0 8px 32px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6)`; crew-dark: `0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08)`; max-light: `0 8px 32px 0 rgba(31, 38, 135, 0.07), inset 0 1px 1px 0 rgba(255, 255, 255, 0.9)`; max-dark: `0 8px 32px 0 rgba(0, 0, 0, 0.4), inset 0 1px 1px 0 rgba(255, 255, 255, 0.08)` | `.glass-panel`: floating panels over imagery or gradient grounds, with `backdrop-glass-panel`. |
| `shadow-glass-card` | crew-light: `0 4px 24px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03)`; crew-dark: `0 4px 24px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15)`; max-light: `0 4px 24px 0 rgba(31, 38, 135, 0.05), inset 0 1px 1px 0 rgba(255, 255, 255, 0.95)`; max-dark: `0 4px 24px 0 rgba(0, 0, 0, 0.3), inset 0 1px 1px 0 rgba(255, 255, 255, 0.06)` | `.glass-card`: cards on gradient or image grounds, with `backdrop-glass`. |
## Glass (backdrop)
| Token | Value | Usage |
|---|---|---|
| `backdrop-glass` | `blur(16px) saturate(180%)` | `.glass` and `.glass-card`. |
| `backdrop-glass-subtle` | `blur(12px) saturate(160%)` | `.glass-subtle`: light frosting behind small chips and bars. |
| `backdrop-glass-panel` | `blur(20px) saturate(180%)` | `.glass-panel`. |
| `backdrop-glass-strong` | `blur(24px) saturate(200%)` | `.glass-strong`: dialogs and menus over busy grounds. |
| `backdrop-glass-button` | `blur(12px) saturate(140%)` | `.glass-button` and the Glass button finish: surface-only, keeps the CTA's own colour. |
| `backdrop-glass-input` | `blur(8px)` | `.glass-input`. |
---
# Motion
> Durations, easings and the springs of the Unibox. Every demo on this page is live.
Max and Crew OS share one motion system, transitions.dev, in `transitions.css` (shipped in `bundle.css`). Reference its tokens instead of writing durations: `transition: transform var(--duration-fast) var(--ease-smooth-out)`, or in Tailwind `duration-(--acc-chevron) ease-(--acc-ease)`.
- **Scale.** Durations `--duration-stagger` 40ms, `-micro` 80, `-quick` 150 (closes, tooltips, text swaps), `-fast` 250 (opens: dropdowns, modals, tabs), `-medium` 350, `-slow` 400 (panels), `-very-slow` 500 (emphasis). Easings `--ease-smooth-out` `cubic-bezier(0.22, 1, 0.36, 1)` (the default for anything entering or moving), `--ease-bounce` `cubic-bezier(0.34, 1.36, 0.64, 1)` (badges popping in), `--ease-linear` (shimmer, spinners). Distances 4/6/8/12/30px, scales 0.96–0.99, blurs 2/3/8px.
- **Per component.** Dialog and AlertDialog `.t-modal`: in 250ms from 96%, out 150ms. Dropdown, Popover and Select `.t-dropdown`: in 250ms from 97%, out 150ms to 99%. Sheet: in 400ms, out 350ms. Tooltip `.t-tt`: in 150ms after 80ms, out 50ms. Accordion and Collapsible: 250ms. Switch `.t-toggle`: 350ms double-bounce thumb, 150ms track, only after the first toggle. Checkbox `.t-check`: box 150ms, tick draws 350ms. Skeleton: 1s pulse. Shimmer text: 2s linear.
- **Radix overlays animate with keyframes**, not transitions, and animate the individual `scale` and `opacity` properties so positioning transforms stay intact.
- **Agent surfaces** use their own ease, `cubic-bezier(0.16, 1, 0.3, 1)`: messages rise 6px over 300ms, the Ask Max panel opens from 92% in 240ms, typing dots bounce on a 1.4s loop, running tools pulse purple on 1.4s. Public-site reveals rise 30–40px over 0.8s on the same curve.
- **Unibox springs** (`uniboxMotion`): `SPRING_GLIDE` (stiffness 380, damping 34, mass 0.9) for rows moving, `SPRING_ENTER` (320/30/0.8) for arrivals with a blur-and-rise, `SPRING_POP` (520/28/0.6) for chevrons and small toggles, `FADE_SWAP` (0.16s ease-out) for content swaps, and `staggerDelay(i)` = 35ms per item, capped at 320ms. See [**UniboxMotion**](/design/components/unibox-motion.md).
- **Rewards are small.** Completing a task earns one bloom and two sparks (360–520ms), then stillness ([**JoyfulTaskCheckbox**](/design/components/joyful-task-checkbox.md)); finishing a focus session bursts five sparkles over 0.65s ([**ActionFocusSession**](/design/components/action-focus-session.md)).
- **Ambient effects are opt-in and decorative**: the seven canvas backgrounds ([**BackgroundEffect**](/design/components/background-effect.md)), the WebGL fluid cursor ([**SplashCursor**](/design/components/splash-cursor.md), off on touch, low-end devices and reduced motion), the cobe globe ([**Globe**](/design/components/globe.md)), the neuron sphere ([**CosmicSynapseCanvas**](/design/components/cosmic-synapse-canvas.md)), flickering grids, pixel cards and the pointer-following glow ([**GlowingEffect**](/design/components/glowing-effect.md)). They sit behind content, never take clicks, and still under reduced motion.
- [**Lottie**](/design/components/lottie.md): Crew OS ships 18 Lottie animations (`assets/Animations/*.json` — ai-collaboration, check, cost-deduction, database, dollar, filter, flash, schedule, timer, trend-arrow, users-team-profile, avatars…); play them with [**Lottie**](/design/components/lottie.md) (`lottie-react`). Nothing in the apps uses them yet.
- **Reduced motion.** Every snippet carries its own guard, and one global guard collapses all animations and transitions to 0.01ms (not `none`, so `animationend` still fires). JavaScript motion checks `useReducedMotion()`. Keep information in the end state, never only in the animation.
- **Known gaps** (Max's motion guide): no error shake — `aria-invalid` only recolours; Tabs have no sliding highlight; seven duplicate fade-up keyframes and three separate "thinking" treatments still exist. Don't add more; use the tokens above.
## Live demos
- [ActionFocusSession](/design/components/action-focus-session.md): The focus timebox for one task in the actions cockpit: a live billable clock with approve, start, pause, run and done, and a burst of sparkles on completion.
- [CardResize](/design/components/card-resize.md): A container that tweens its width and height when its content changes (`.t-resize`).
- [ChapterScrubber](/design/components/chapter-scrubber.md): A rail of ticks, one per chapter, that swell like a dock under the pointer, with a card previewing the hovered chapter.
- [ContainerScroll](/design/components/container-scroll.md): A hero block where a device-like frame starts tilted back in 3D and straightens as the page scrolls, with the title drifting up.
- [FeatureSlideshow](/design/components/feature-slideshow.md): A step-by-step feature explainer: an accordion of steps on the left that advances on a timer, a progress line on the open step, and a large media slot on the right.
- [FirstBentoAnimation](/design/components/first-bento-animation.md): A self-playing chat vignette for the bento grid: a user asks for a meeting slot, the Digital Crew avatar shows typing dots, then the reply streams in as a `Reasoning` block.
- [FourthBentoAnimation](/design/components/fourth-bento-animation.md): A scheduling vignette for the bento grid: a week ruler, three task bars that spring into place, and a time cursor that follows the pointer.
- [HyperText](/design/components/hyper-text.md): A monospaced, uppercase text effect: letters scramble through random characters, then lock in from left to right.
- [InfiniteSlider](/design/components/infinite-slider.md): A JavaScript-driven endless strip (Framer Motion) that renders its children twice and slides them in a loop, optionally slowing on hover.
- [JoyfulTaskCheckbox](/design/components/joyful-task-checkbox.md): A task checkbox with a small, restrained completion moment: one soft bloom, two sparks, then stillness.
- [Lottie](/design/components/lottie.md): The lottie-react player, exported as-is, for the Lottie animations that ship with Crew OS (`animations/*.json`).
- [Marquee](/design/components/marquee.md): An endless CSS scroll of repeated content, horizontal or vertical, speed set with two CSS variables.
- [MotionScale](/design/components/motion-scale.md): The shared motion scale made visible: the same distance travelled on each duration token and each easing, with a Replay button.
- [NumberFlowCounter](/design/components/number-flow-counter.md): A small dark pill that shows one number at a time and rolls its digits to the next value every two seconds (NumberFlow).
- [OrbitingCircles](/design/components/orbiting-circles.md): Places its children on a circular orbit around the centre of the parent and spins them, with an optional faint ring for the path.
- [ShimmerText](/design/components/shimmer-text.md): A status line with a light band sweeping across its glyphs — Max's "Thinking…" and live tool lines (`.t-shimmer`).
- [SignatureGradient](/design/components/signature-gradient.md): The signature Digital Crew gradient — indigo → pink → amber (`dc-andre`, `dc-camille`, `dc-amber`) — in its four forms.
- [SkeletonReveal](/design/components/skeleton-reveal.md): A skeleton that cross-blurs into the loaded content, so the swap reads as one motion (`.t-skel`).
- [StreamingText](/design/components/streaming-text.md): Streamed words resolving through a soft cross-blur, one after another (`.t-stream-w` → `.is-in`).
- [ThirdBentoAnimation](/design/components/third-bento-animation.md): An insight vignette for the bento grid: a smooth area line draws itself, a dot pulses at its midpoint and a dark pill above it ticks through values.
- [UniboxMotion](/design/components/unibox-motion.md): The Unibox's shared motion vocabulary: every surface moves on the same few springs, so the whole inbox feels like one physical material.
---
# Imagery & backgrounds
> Grounds, gradients and the ambient effects behind the work.
Digital Workers have faces: Max's roster pairs most agents with a 4:5 studio portrait on a black ground (`assets/Agents/`). The public site uses short looping agent videos. Workspaces may add a decorative background effect (pixel trail, neon flow, interactive gradient, halftone trail, liquid, sonar grid, kinetic grid) tinted from `primary`; it is off by default, sits behind content, never takes clicks and freezes to a still frame under reduced motion.
---
# Agent surfaces
> The .maxchat language: where Max's agents speak.
Everything a Max agent says happens on `.maxchat`, a scoped surface with its own language, shown on the [**MaxChat**](/design/components/max-chat.md) card:
- **Cool neutrals**: `mx-bg`, `mx-surface`, `mx-surface-2`, `mx-surface-hi`, `mx-ink` … `mx-ink-4`, `mx-line`, `mx-line-strong` — hue 260°, set apart from the app's warm stone. Text uses `mx-ink` to `mx-ink-3` (5.5:1 or better); `mx-ink-4` is for placeholders and marks only.
- **Two accents, never orange**: `accent-ai` purple for AI activity (thinking, tool calls, links, the drop zone, chip hover) and `accent-new` green for live status (online dot, connected tools, done). Primary buttons on agent surfaces are ink (`mx-ink` on `mx-bg`).
- **Prose, not bubbles**: Max's replies are 14.5px paragraphs with no box; the user's own messages are right-aligned italic in `mx-ink-2`. Tables, code and links sit inline.
- **Show the work**: a collapsible thinking box lists thoughts and tool calls with their state (running pulses purple, done green, failed red), and a meta line such as "3 tools · 6s".
- **Ask before acting**: anything that sends, spends or changes data appears as a confirm card with the draft and the choice; the foot note says what needs confirmation.
- **Faces**: every agent shows its portrait or accent-tile initials ([**AgentFace**](/design/components/agent-face.md)) and a name; the empty state greets in Instrument Serif ("Hey, I’m *Max*.") with three suggestion chips.
---
# Accessibility
> Contrast, focus, motion and language rules every screen meets.
- Targets: 32px (`icon-sm`) is the smallest control; use 36px or more by default and 44px on touch (mobile triggers, chat header buttons).
- Every icon-only button has an `aria-label` (the audit found 39 of 226 without one); every field has a visible [`Label`](/design/components/label.md), never a placeholder alone; logos and faces beside a name take `alt=""`.
- No `outline-none` without a `focus-visible` replacement; primitives draw the 3px `ring` halo.
- Use real elements: buttons and links, not clickable `div`s; one `h1` per page, no heading jumps, `nav` and `main` landmarks; chat output lives in an `aria-live` region.
---
# Components
> 131 live components and 15 showcase pages from Crew OS and Max, each with a live preview, guidelines, its API and example code.
`window.DigitalCrew` carries both products' libraries, bundled from their source at the repositories' pinned versions and running on React 19.2.3 (shipped in `components/lib/`). They read the semantic tokens, so each renders in ink under the Crew OS themes and in orange under the Max themes.
- **Primitives (Max's library)**: [Button](/design/components/button.md), [Badge](/design/components/badge.md), [Input](/design/components/input.md), [Textarea](/design/components/textarea.md), [Label](/design/components/label.md), [Checkbox](/design/components/checkbox.md), [RadioGroup](/design/components/radio-group.md), [Switch](/design/components/switch.md), [Select](/design/components/select.md), [SecretInput](/design/components/secret-input.md), [DateTimePicker](/design/components/date-time-picker.md), [Calendar](/design/components/calendar.md), [PhoneInput](/design/components/phone-input.md), [TypedOptionPicker](/design/components/typed-option-picker.md), [TimezoneSelector](/design/components/timezone-selector.md), [Dialog](/design/components/dialog.md), [AlertDialog](/design/components/alert-dialog.md), [ConfirmDialogProvider](/design/components/confirm-dialog-provider.md), [DiscardChangesDialog](/design/components/discard-changes-dialog.md), [Sheet](/design/components/sheet.md), [Popover](/design/components/popover.md), [DropdownMenu](/design/components/dropdown-menu.md), [Tooltip](/design/components/tooltip.md), [HelpTooltip](/design/components/help-tooltip.md), [Command](/design/components/command.md), [Tabs](/design/components/tabs.md), [Pagination](/design/components/pagination.md), [Sidebar](/design/components/sidebar.md), [Card](/design/components/card.md), [Separator](/design/components/separator.md), [Accordion](/design/components/accordion.md), [Collapsible](/design/components/collapsible.md), [ScrollArea](/design/components/scroll-area.md), [Table](/design/components/table.md), [PanelSplitter](/design/components/panel-splitter.md), [Skeleton](/design/components/skeleton.md), [Progress](/design/components/progress.md), [Toaster](/design/components/toaster.md), [Avatar](/design/components/avatar.md).
- **Primitives only Crew OS has**: [Alert](/design/components/alert.md), [Breadcrumb](/design/components/breadcrumb.md), [ChartContainer](/design/components/chart-container.md) (recharts 2 via `Recharts`), [Drawer](/design/components/drawer.md), [Form](/design/components/form.md) (`useForm`), [Slider](/design/components/slider.md), [Toggle](/design/components/toggle.md), [ToggleGroup](/design/components/toggle-group.md), [GlassButton](/design/components/glass-button.md).
- **App shell**: [Main](/design/components/main.md), [Header](/design/components/header.md), [ContentSection](/design/components/content-section.md), [ThemeSwitcher](/design/components/theme-switcher.md), [ListMapToggle](/design/components/list-map-toggle.md), [Snippet](/design/components/snippet.md), the data-table kit ([DataTableToolbar](/design/components/data-table-toolbar.md), DataTableColumnHeader, DataTablePagination, DataTableBulkActions, `useDataTable`).
- **Agents**: [AgentFace](/design/components/agent-face.md), AgentPortrait, [AgentAvatar](/design/components/agent-avatar.md), [AgentSkillTag](/design/components/agent-skill-tag.md), [BrandBadge](/design/components/brand-badge.md), [EquipmentBadge](/design/components/equipment-badge.md), [ThinkingBox](/design/components/thinking-box.md), [AskMaxAction](/design/components/ask-max-action.md), [ToolStatusIndicator](/design/components/tool-status-indicator.md), [OAuthRequestCard](/design/components/oauth-request-card.md), plus the [**CrewAgents**](/design/components/crew-agents.md), [**MaxRoster**](/design/components/max-roster.md), [**AgentAccents**](/design/components/agent-accents.md) and [**MaxChat**](/design/components/max-chat.md) pages.
- **AI text**: [Markdown](/design/components/markdown.md), [ResponseStream](/design/components/response-stream.md), [Reasoning](/design/components/reasoning.md), and the [ShimmerText](/design/components/shimmer-text.md) / [StreamingText](/design/components/streaming-text.md) motion cards.
- **Unibox**: [UniboxIdlePanel](/design/components/unibox-idle-panel.md), [ChatListItem](/design/components/chat-list-item.md), [MessageBubble](/design/components/message-bubble.md), [MessageComposer](/design/components/message-composer.md), [ChannelSegments](/design/components/channel-segments.md), [ReplySuggestions](/design/components/reply-suggestions.md), [SyncProgressPanel](/design/components/sync-progress-panel.md), [ChannelBadge](/design/components/channel-badge.md), [ProspectAvatar](/design/components/prospect-avatar.md).
- **Analytics and pipeline**: [KpiCard](/design/components/kpi-card.md), [HeroMetric](/design/components/hero-metric.md), [MetricTile](/design/components/metric-tile.md), [BrandStatCard](/design/components/brand-stat-card.md), [ActivityChart](/design/components/activity-chart.md), [FunnelChart](/design/components/funnel-chart.md), [InsightsCard](/design/components/insights-card.md), [QualificationContent](/design/components/qualification-content.md), [AnimateDigits](/design/components/animate-digits.md), [AnimatedCircularProgressBar](/design/components/animated-circular-progress-bar.md), [DealCard](/design/components/deal-card.md), [DealColumn](/design/components/deal-column.md), [MovableCardGrid](/design/components/movable-card-grid.md), [SalesWorkspaceMap](/design/components/sales-workspace-map.md), [WorldGlobe](/design/components/world-globe.md), [TimeLens](/design/components/time-lens.md), [CampaignStatusBadge](/design/components/campaign-status-badge.md), [EmailVerificationBadge](/design/components/email-verification-badge.md), and the [**StageColors**](/design/components/stage-colors.md) and [**StatusColors**](/design/components/status-colors.md) pages.
- **Motion and effects**: [MotionScale](/design/components/motion-scale.md), [ShimmerText](/design/components/shimmer-text.md), [StreamingText](/design/components/streaming-text.md), [SkeletonReveal](/design/components/skeleton-reveal.md), [CardResize](/design/components/card-resize.md), [SignatureGradient](/design/components/signature-gradient.md), [UniboxMotion](/design/components/unibox-motion.md), [JoyfulTaskCheckbox](/design/components/joyful-task-checkbox.md), [ActionFocusSession](/design/components/action-focus-session.md), [ChapterScrubber](/design/components/chapter-scrubber.md), [FlickeringGrid](/design/components/flickering-grid.md), [GlowingEffect](/design/components/glowing-effect.md), [Marquee](/design/components/marquee.md), [CpuArchitecture](/design/components/cpu-architecture.md), [CosmicSynapseCanvas](/design/components/cosmic-synapse-canvas.md), [ContainerScroll](/design/components/container-scroll.md), [InfiniteSlider](/design/components/infinite-slider.md), [ProgressiveBlur](/design/components/progressive-blur.md), [OrbitingCircles](/design/components/orbiting-circles.md), [PixelCard](/design/components/pixel-card.md), [HyperText](/design/components/hyper-text.md), [Glitchy404](/design/components/glitchy-404.md), [FeatureSlideshow](/design/components/feature-slideshow.md), [Globe](/design/components/globe.md), [FirstBentoAnimation](/design/components/first-bento-animation.md), [SecondBentoAnimation](/design/components/second-bento-animation.md), [ThirdBentoAnimation](/design/components/third-bento-animation.md), [FourthBentoAnimation](/design/components/fourth-bento-animation.md), [NumberFlowCounter](/design/components/number-flow-counter.md), [Lottie](/design/components/lottie.md), [BackgroundEffect](/design/components/background-effect.md), [SplashCursor](/design/components/splash-cursor.md).
- **Appearance**: AppearanceProvider, [AppearanceControls](/design/components/appearance-controls.md), SettingsSection, [BackgroundEffect](/design/components/background-effect.md) — personal density, button finish, motion and background, saved per user and product.
- **Marketing sections (Crew OS public site)**: [SectionHeader](/design/components/section-header.md), [SocialProofTestimonials](/design/components/social-proof-testimonials.md), [FeaturesGridWithGlowingEffect](/design/components/features-grid-with-glowing-effect.md), [BentoSection](/design/components/bento-section.md), [FAQSection](/design/components/faq-section.md), [CTASection](/design/components/cta-section.md), [SectionSolutions](/design/components/section-solutions.md), [CpuSuperposition](/design/components/cpu-superposition.md), [CrewNetwork](/design/components/crew-network.md), [FeatureSection](/design/components/feature-section.md), [ConnectSection](/design/components/connect-section.md) — with the site's real English copy.
Wrap an app once in `TooltipProvider` and [`ConfirmDialogProvider`](/design/components/confirm-dialog-provider.md), and mount one [`Toaster`](/design/components/toaster.md). Confirm destructive actions through `useConfirm()`, never `window.confirm`. Components that read next-themes (Globe, FeatureSection, WorldGlobe, Toaster) follow the app's `ThemeProvider`; outside the apps, wrap them in `PageThemeProvider`, which follows the page's `data-theme`.
**Where the two apps' copies differ** (the bundle carries Max's): Crew OS's Dialog is 400px wide with a `radius-xl` panel, a darker 80% overlay and z-index 101 (menus 102); its Badge is `rounded-md`; its Tooltip is `primary` on `primary-foreground`; its Select opens as a popper below the trigger; its Switch is 44 × 24px; its Sidebar is the stock two-state shadcn one; its GlowingEffect uses the brand accents (magenta, gold, forest, ocean) where Max's is orange (the bundle carries Crew OS's). The shared `@digitalcrew/ui` Button, Input and Textarea draw the focus halo at full `ring` strength (Max: 50%) and support the Glass finish.
## Foundations
- [AgentAccents](/design/components/agent-accents.md) (showcase page): Each Max agent owns one of 16 Tailwind hues, used as its initials tile, card hover ring, bar and dot.
- [StatusColors](/design/components/status-colors.md) (showcase page): How Max colours state: one tinted-pill template, a mapping per domain, and 17 pipeline stage colours.
## Actions
- [Badge](/design/components/badge.md): A small pill label: count, channel, state or tag (Max's `components/ui/badge.tsx`).
- [Button](/design/components/button.md): The action control for both products: filled with `primary` by default, in six variants and six sizes (Max's `components/ui/button.tsx`).
- [GlassButton](/design/components/glass-button.md): The Crew OS button with a frosted-glass finish: the same variants, sizes and `asChild` as `Button`, plus a backdrop blur and a soft highlight layer.
- [Toggle](/design/components/toggle.md): A two-state button (Radix toggle) that stays pressed until clicked again.
- [ToggleGroup](/design/components/toggle-group.md): A segmented set of toggles (Radix toggle group) where one or several options are on at a time.
## Forms
- [Calendar](/design/components/calendar.md): A month grid (react-day-picker 10) in the app's tokens: today and the selection in `primary`, outside days muted.
- [Checkbox](/design/components/checkbox.md): A 16px square check for independent on/off choices and row selection; the box fills in 150ms, then the tick draws in over 350ms (`.t-check`).
- [DateTimePicker](/design/components/date-time-picker.md): A date-and-time field in the app's own widget, instead of the browser's `datetime-local`; works in ISO strings.
- [Form](/design/components/form.md): Form fields wired to react-hook-form: each field gets a label, a control, an optional hint and an error message, with ids and ARIA linked for you.
- [Input](/design/components/input.md): The single-line text field: 36px tall, `input` border, `radius-md`, transparent over its ground (dark themes fill it with `input` at 30%).
- [Label](/design/components/label.md): The accessible field label (Radix Label): 14px medium, `leading-none`, 8px gap for an inline icon or `HelpTooltip`.
- [PhoneInput](/design/components/phone-input.md): An international phone field: `react-phone-number-input` with Max's `Input` and a searchable country picker that shows flags.
- [RadioGroup](/design/components/radio-group.md): One choice from a short, visible list (Radix RadioGroup): 16px rings in `primary`, 10px dot.
- [SecretInput](/design/components/secret-input.md): A field for API keys and tokens: masked by default with a reveal toggle, monospace, opted out of autofill.
- [Select](/design/components/select.md): A native-feeling single choice from a list (Radix Select): 36px trigger (`size="sm"`: 32px) with a chevron; the list opens in 250ms from 97% (`.t-dropdown`).
- [Slider](/design/components/slider.md): A Radix slider for picking a number, or a range with two thumbs, on a continuous scale.
- [Switch](/design/components/switch.md): The on/off control for settings that apply immediately (Radix Switch): a 32 × 18px pill, `input` track off, `primary` on, 16px thumb with a double-bounce (`.t-toggle`, 350ms thumb, 150ms track).
- [Textarea](/design/components/textarea.md): The multi-line field; it grows with its content (`field-sizing: content`) from a 64px minimum.
- [TimezoneSelector](/design/components/timezone-selector.md): A searchable combobox (a `Popover` holding a `Command` list) over every IANA time zone the browser knows.
- [TypedOptionPicker](/design/components/typed-option-picker.md): A searchable, grouped picker for long option lists (Popover + Command), in single and multi versions.
## Overlays
- [AlertDialog](/design/components/alert-dialog.md): A blocking confirmation for irreversible or costly actions; same motion and surface as **Dialog**, no close ×, no click-outside dismissal.
- [Command](/design/components/command.md): A keyboard-first search-and-act list (cmdk); the ⌘K menu and the core of every searchable picker.
- [ConfirmDialogProvider](/design/components/confirm-dialog-provider.md): App-wide confirmations through one hook: wrap the app in `ConfirmDialogProvider`, then call `useConfirm().confirm({...})` anywhere.
- [Dialog](/design/components/dialog.md): A modal for focused tasks that need an answer before going on; opens in 250ms from 96% scale and closes in 150ms (`.t-modal`).
- [DiscardChangesDialog](/design/components/discard-changes-dialog.md): An alert dialog that asks the user to confirm throwing away unsaved edits.
- [Drawer](/design/components/drawer.md): A panel that slides in from the bottom edge (or any edge), built on vaul, with a drag handle and swipe-to-dismiss.
- [DropdownMenu](/design/components/dropdown-menu.md): A menu of actions for one object, opening from a button; 250ms in from 97%, 150ms out to 99%.
- [Popover](/design/components/popover.md): A light panel anchored to its trigger; opens in 250ms from 97% scale (`.t-dropdown`).
- [Sheet](/design/components/sheet.md): A panel that slides in from an edge; opens in 400ms and closes in 350ms on the smooth-out ease (`--panel-*`).
- [Tooltip](/design/components/tooltip.md): A short ink label on hover or focus: `foreground` fill with `background` text, 12px, 150ms in after an 80ms delay, 50ms out (`.t-tt`).
## Navigation
- [Breadcrumb](/design/components/breadcrumb.md): A page trail that shows where the current page sits in the hierarchy, built from composable parts inside a `