{ "name": "Digital Crew", "version": 1, "color": { "themes": [ { "id": "crew-light", "name": "Crew OS · Light" }, { "id": "crew-dark", "name": "Crew OS · Dark" }, { "id": "max-light", "name": "Max · Light" }, { "id": "max-dark", "name": "Max · Dark" } ], "tokens": [ { "name": "background", "value": { "crew-light": "oklch(0.985 0 0)", "crew-dark": "oklch(0.13 0 0)", "max-light": "oklch(1 0 0)", "max-dark": "oklch(0.13 0.005 60)" }, "usage": "Page ground. Crew OS: near-white / near-black achromatic. Max: white / warm near-black." }, { "name": "foreground", "value": { "crew-light": "oklch(0.16 0 0)", "crew-dark": "oklch(0.97 0 0)", "max-light": "oklch(0.147 0.004 49.25)", "max-dark": "oklch(0.98 0.002 80)" }, "usage": "Body text and icons on `background`, `card` and `popover` (18:1 or better in every theme)." }, { "name": "card", "value": { "crew-light": "oklch(1 0 0)", "crew-dark": "oklch(0.19 0 0)", "max-light": "oklch(1 0 0)", "max-dark": "oklch(0.19 0.005 60)" }, "usage": "Raised surface: cards, panels, dialogs. One step above `background` in dark themes so panels read as elevated." }, { "name": "card-foreground", "value": { "crew-light": "oklch(0.16 0 0)", "crew-dark": "oklch(0.97 0 0)", "max-light": "oklch(0.147 0.004 49.25)", "max-dark": "oklch(0.98 0.002 80)" }, "usage": "Text on `card` (16.9:1 or better in every theme)." }, { "name": "popover", "value": { "crew-light": "oklch(1 0 0)", "crew-dark": "oklch(0.19 0 0)", "max-light": "oklch(1 0 0)", "max-dark": "oklch(0.19 0.005 60)" }, "usage": "Menus, popovers, select lists, tooltips-on-surface." }, { "name": "popover-foreground", "value": { "crew-light": "oklch(0.16 0 0)", "crew-dark": "oklch(0.97 0 0)", "max-light": "oklch(0.147 0.004 49.25)", "max-dark": "oklch(0.98 0.002 80)" }, "usage": "Text on `popover`." }, { "name": "primary", "value": { "crew-light": "oklch(0.2 0 0)", "crew-dark": "oklch(1 0 0)", "max-light": "#c2410c", "max-dark": "#fb923c" }, "usage": "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." }, { "name": "primary-foreground", "value": { "crew-light": "oklch(1 0 0)", "crew-dark": "oklch(0 0 0)", "max-light": "oklch(1 0 0)", "max-dark": "oklch(0.147 0.004 49.25)" }, "usage": "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)." }, { "name": "secondary", "value": { "crew-light": "oklch(0.93 0 0)", "crew-dark": "oklch(0.26 0 0)", "max-light": "oklch(0.97 0.001 106.424)", "max-dark": "oklch(0.26 0.006 60)" }, "usage": "Quiet filled controls (secondary Button), chips, hero ground gradient end." }, { "name": "secondary-foreground", "value": { "crew-light": "oklch(0.2 0 0)", "crew-dark": "oklch(0.97 0 0)", "max-light": "oklch(0.268 0.007 34.298)", "max-dark": "oklch(0.98 0.002 80)" }, "usage": "Text on `secondary` (13.9:1 or better)." }, { "name": "muted", "value": { "crew-light": "oklch(0.96 0 0)", "crew-dark": "oklch(0.26 0 0)", "max-light": "oklch(0.97 0.001 106.424)", "max-dark": "oklch(0.26 0.006 60)" }, "usage": "Subdued fills: code blocks, blockquotes, skeletons, disabled wells." }, { "name": "muted-foreground", "value": { "crew-light": "oklch(0.5 0 0)", "crew-dark": "oklch(0.72 0 0)", "max-light": "oklch(0.444 0.011 73.639)", "max-dark": "oklch(0.709 0.01 56.259)" }, "usage": "Secondary text: descriptions, help text, placeholders, timestamps. Reads on `muted`, `background`, `card` and `sidebar` at 5.3:1 or better in every theme." }, { "name": "accent", "value": { "crew-light": "oklch(0.94 0 0)", "crew-dark": "oklch(0.28 0 0)", "max-light": "oklch(0.97 0.001 106.424)", "max-dark": "oklch(0.26 0.006 60)" }, "usage": "Hover and selected fills for ghost/outline Buttons, menu items, list rows." }, { "name": "accent-foreground", "value": { "crew-light": "oklch(0.2 0 0)", "crew-dark": "oklch(0.97 0 0)", "max-light": "oklch(0.268 0.007 34.298)", "max-dark": "oklch(0.98 0.002 80)" }, "usage": "Text on `accent` (13.3:1 or better)." }, { "name": "destructive", "value": { "crew-light": "oklch(0.577 0.245 27.325)", "crew-dark": "oklch(0.704 0.191 22.216)", "max-light": "oklch(0.577 0.245 27.325)", "max-dark": "oklch(0.704 0.191 22.216)" }, "usage": "Errors and irreversible actions: destructive Button fill, invalid-field border and ring, error text on `background`/`card` (4.5:1 or better)." }, { "name": "destructive-foreground", "value": { "crew-light": "oklch(1 0 0)", "crew-dark": "oklch(0.12 0 0)", "max-light": "oklch(1 0 0)", "max-dark": "oklch(0.12 0 0)" }, "usage": "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)." }, { "name": "border", "value": { "crew-light": "oklch(0.9 0 0)", "crew-dark": "oklch(0.3 0 0)", "max-light": "oklch(0.923 0.003 48.717)", "max-dark": "oklch(1 0 0 / 0.12)" }, "usage": "Default hairline for cards, dividers, tables and outline Buttons (decorative: 1.3–1.5:1 on `background`). Max dark uses white at 12%." }, { "name": "input", "value": { "crew-light": "oklch(0.85 0 0)", "crew-dark": "oklch(0.34 0 0)", "max-light": "oklch(0.869 0.005 56.366)", "max-dark": "oklch(1 0 0 / 0.18)" }, "usage": "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`." }, { "name": "ring", "value": { "crew-light": "oklch(0.556 0 0)", "crew-dark": "oklch(0.708 0 0)", "max-light": "#c2410c", "max-dark": "#fb923c" }, "usage": "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`." }, { "name": "chart-1", "value": { "crew-light": "oklch(0.48 0.08 235)", "crew-dark": "oklch(0.78 0.08 235)", "max-light": "oklch(0.646 0.222 41.116)", "max-dark": "oklch(0.646 0.222 41.116)" }, "usage": "First data series. Crew OS: slate blue; Max: brand orange (both themes)." }, { "name": "chart-2", "value": { "crew-light": "oklch(0.6 0.118 184.704)", "crew-dark": "oklch(0.696 0.17 162.48)", "max-light": "oklch(0.6 0.118 184.704)", "max-dark": "oklch(0.696 0.17 162.48)" }, "usage": "Second data series (teal / green)." }, { "name": "chart-3", "value": { "crew-light": "oklch(0.646 0.222 41.116)", "crew-dark": "oklch(0.769 0.188 70.08)", "max-light": "oklch(0.398 0.07 227.392)", "max-dark": "oklch(0.769 0.188 70.08)" }, "usage": "Third data series." }, { "name": "chart-4", "value": { "crew-light": "oklch(0.828 0.189 84.429)", "crew-dark": "oklch(0.627 0.265 303.9)", "max-light": "oklch(0.828 0.189 84.429)", "max-dark": "oklch(0.627 0.265 303.9)" }, "usage": "Fourth data series." }, { "name": "chart-5", "value": { "crew-light": "oklch(0.769 0.188 70.08)", "crew-dark": "oklch(0.645 0.246 16.439)", "max-light": "oklch(0.769 0.188 70.08)", "max-dark": "oklch(0.645 0.246 16.439)" }, "usage": "Fifth data series." }, { "name": "sidebar", "value": { "crew-light": "oklch(0.97 0 0)", "crew-dark": "oklch(0.16 0 0)", "max-light": "oklch(0.985 0.001 106.423)", "max-dark": "oklch(0.16 0.005 60)" }, "usage": "App sidebar ground, one step off `background`." }, { "name": "sidebar-foreground", "value": { "crew-light": "oklch(0.16 0 0)", "crew-dark": "oklch(0.97 0 0)", "max-light": "oklch(0.147 0.004 49.25)", "max-dark": "oklch(0.98 0.002 80)" }, "usage": "Nav text on `sidebar` (17.8:1 or better)." }, { "name": "sidebar-primary", "value": { "crew-light": "oklch(0.2 0 0)", "crew-dark": "oklch(1 0 0)", "max-light": "#c2410c", "max-dark": "#fb923c" }, "usage": "Active nav item fill; tracks `primary` (Max: re-applied at runtime by the primary-colour picker)." }, { "name": "sidebar-primary-foreground", "value": { "crew-light": "oklch(1 0 0)", "crew-dark": "oklch(0 0 0)", "max-light": "oklch(1 0 0)", "max-dark": "oklch(0.147 0.004 49.25)" }, "usage": "Text on `sidebar-primary`." }, { "name": "sidebar-accent", "value": { "crew-light": "oklch(0.93 0 0)", "crew-dark": "oklch(0.26 0 0)", "max-light": "oklch(0.97 0.001 106.424)", "max-dark": "oklch(0.23 0.006 60)" }, "usage": "Hovered nav item fill." }, { "name": "sidebar-accent-foreground", "value": { "crew-light": "oklch(0.2 0 0)", "crew-dark": "oklch(0.97 0 0)", "max-light": "oklch(0.268 0.007 34.298)", "max-dark": "oklch(0.98 0.002 80)" }, "usage": "Text on `sidebar-accent`." }, { "name": "sidebar-border", "value": { "crew-light": "oklch(0.9 0 0)", "crew-dark": "oklch(0.3 0 0)", "max-light": "oklch(0.923 0.003 48.717)", "max-dark": "oklch(1 0 0 / 0.1)" }, "usage": "Sidebar edge and section dividers." }, { "name": "sidebar-ring", "value": { "crew-light": "oklch(0.556 0 0)", "crew-dark": "oklch(0.708 0 0)", "max-light": "#c2410c", "max-dark": "#fb923c" }, "usage": "Focus ring inside the sidebar; tracks `ring`." }, { "name": "bento-accent", "value": { "crew-light": "oklch(0.85 0 0)", "crew-dark": "oklch(0.4 0 0)", "max-light": "oklch(0.85 0 0)", "max-dark": "oklch(0.4 0 0)" }, "usage": "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." }, { "name": "ds-blue-100", "value": { "crew-light": "oklch(97.32% 0.0141 251.56)", "crew-dark": "oklch(22.17% 0.069 259.89)", "max-light": "oklch(97.32% 0.0141 251.56)", "max-dark": "oklch(22.17% 0.069 259.89)" }, "usage": "Max status scale — info tint ground (callouts, info badges). Crew OS columns repeat Max's values." }, { "name": "ds-blue-900", "value": { "crew-light": "oklch(53.18% 0.2399 256.99)", "crew-dark": "oklch(71.7% 0.1648 250.79)", "max-light": "oklch(53.18% 0.2399 256.99)", "max-dark": "oklch(71.7% 0.1648 250.79)" }, "usage": "Info text and icons on `ds-blue-100` (4.9:1 / 6.8:1) or on `background`." }, { "name": "ds-red-100", "value": { "crew-light": "oklch(96.5% 0.0223 13.09)", "crew-dark": "oklch(22.1% 0.0657 15.11)", "max-light": "oklch(96.5% 0.0223 13.09)", "max-dark": "oklch(22.1% 0.0657 15.11)" }, "usage": "Max status scale — error tint ground." }, { "name": "ds-red-900", "value": { "crew-light": "oklch(54.99% 0.232 25.29)", "crew-dark": "oklch(69.96% 0.2136 22.03)", "max-light": "oklch(54.99% 0.232 25.29)", "max-dark": "oklch(69.96% 0.2136 22.03)" }, "usage": "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." }, { "name": "ds-amber-100", "value": { "crew-light": "oklch(97.48% 0.0331 85.79)", "crew-dark": "oklch(22.46% 0.0538 76.04)", "max-light": "oklch(97.48% 0.0331 85.79)", "max-dark": "oklch(22.46% 0.0538 76.04)" }, "usage": "Max status scale — warning tint ground." }, { "name": "ds-amber-900", "value": { "crew-light": "oklch(52.79% 0.1496 54.65)", "crew-dark": "oklch(77.21% 0.1991 64.28)", "max-light": "oklch(52.79% 0.1496 54.65)", "max-dark": "oklch(77.21% 0.1991 64.28)" }, "usage": "Warning text on `ds-amber-100` (5.2:1 / 7.7:1)." }, { "name": "ds-gray-100", "value": { "crew-light": "hsla(0, 0%, 95%, 1)", "crew-dark": "hsla(0, 0%, 10%, 1)", "max-light": "hsla(0, 0%, 95%, 1)", "max-dark": "hsla(0, 0%, 10%, 1)" }, "usage": "Max neutral scale — quiet tint ground (code snippets, keycaps)." }, { "name": "ds-gray-1000", "value": { "crew-light": "hsla(0, 0%, 9%, 1)", "crew-dark": "hsla(0, 0%, 93%, 1)", "max-light": "hsla(0, 0%, 9%, 1)", "max-dark": "hsla(0, 0%, 93%, 1)" }, "usage": "Strongest neutral text on `ds-gray-100` (16:1 / 15:1)." }, { "name": "ds-gray-alpha-400", "value": { "crew-light": "hsla(0, 0%, 0%, 0.08)", "crew-dark": "hsla(0, 0%, 100%, 0.14)", "max-light": "hsla(0, 0%, 0%, 0.08)", "max-dark": "hsla(0, 0%, 100%, 0.14)" }, "usage": "Translucent neutral wash and hairlines over any ground." }, { "name": "ds-background-100", "value": { "crew-light": "hsla(0, 0%, 100%, 1)", "crew-dark": "hsla(0, 0%, 4%, 1)", "max-light": "hsla(0, 0%, 100%, 1)", "max-dark": "hsla(0, 0%, 4%, 1)" }, "usage": "Snippet and panel ground in the Max ds-* scale." }, { "name": "dc-magenta", "value": "#dd7bbb", "usage": "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." }, { "name": "dc-ocean", "value": "#4c7894", "usage": "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." }, { "name": "dc-forest", "value": "#5a922c", "usage": "Brand accent. Active stat cards; the forest gradient. Mark only on light grounds (3.6:1)." }, { "name": "dc-gold", "value": "#d79f1e", "usage": "Brand accent. Premium and ember gradients. Fill or mark on dark grounds only (2.3:1 on light)." }, { "name": "dc-amber", "value": "#f59e0b", "usage": "Brand accent; same value as `dc-max`. Fill with near-black text (9.8:1), never white text (2.2:1)." }, { "name": "dc-sophie", "value": "#0ea5e9", "usage": "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." }, { "name": "dc-sophie-secondary", "value": "#38bdf8", "usage": "Second stop of Sophie (HR)'s palette: lighter fills, hover tints, the middle of the agent gradient." }, { "name": "dc-sophie-accent", "value": "#7dd3fc", "usage": "Lightest stop of Sophie (HR)'s palette: soft tints and the end of the agent gradient (135°, primary → secondary → accent)." }, { "name": "dc-sophie-glass", "value": "#0284c7", "usage": "Deep shade of Sophie (HR)'s palette for glass surfaces and marks; 4.1:1 on white (not for text on white)." }, { "name": "dc-sophie-glass-2", "value": "#0369a1", "usage": "Deepest shade of Sophie (HR)'s palette for glass borders and pressed states; 5.9:1 on white (text-safe on white)." }, { "name": "dc-claire", "value": "#8b5cf6", "usage": "Agent colour — Claire, Market Mastermind (market and account research). Marks at 4.1:1 on light and 4.8:1 on dark grounds." }, { "name": "dc-claire-secondary", "value": "#a78bfa", "usage": "Second stop of Claire (market research)'s palette: lighter fills, hover tints, the middle of the agent gradient." }, { "name": "dc-claire-accent", "value": "#c4b5fd", "usage": "Lightest stop of Claire (market research)'s palette: soft tints and the end of the agent gradient (135°, primary → secondary → accent)." }, { "name": "dc-claire-glass", "value": "#7c3aed", "usage": "Deep shade of Claire (market research)'s palette for glass surfaces and marks; 5.7:1 on white (text-safe on white)." }, { "name": "dc-claire-glass-2", "value": "#6d28d9", "usage": "Deepest shade of Claire (market research)'s palette for glass borders and pressed states; 7.1:1 on white (text-safe on white)." }, { "name": "dc-max", "value": "#f59e0b", "usage": "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." }, { "name": "dc-max-secondary", "value": "#fbbf24", "usage": "Second stop of Max (outbound sales)'s palette: lighter fills, hover tints, the middle of the agent gradient." }, { "name": "dc-max-accent", "value": "#fcd34d", "usage": "Lightest stop of Max (outbound sales)'s palette: soft tints and the end of the agent gradient (135°, primary → secondary → accent)." }, { "name": "dc-max-glass", "value": "#d97706", "usage": "Deep shade of Max (outbound sales)'s palette for glass surfaces and marks; 3.2:1 on white (not for text on white)." }, { "name": "dc-max-glass-2", "value": "#b45309", "usage": "Deepest shade of Max (outbound sales)'s palette for glass borders and pressed states; 5.0:1 on white (text-safe on white)." }, { "name": "dc-camille", "value": "#ec4899", "usage": "Agent colour — Camille, Customer Support Champion (tier-1 support, churn risk; coming soon). Pink stop of the signature gradient." }, { "name": "dc-camille-secondary", "value": "#f472b6", "usage": "Second stop of Camille (customer support)'s palette: lighter fills, hover tints, the middle of the agent gradient." }, { "name": "dc-camille-accent", "value": "#f9a8d4", "usage": "Lightest stop of Camille (customer support)'s palette: soft tints and the end of the agent gradient (135°, primary → secondary → accent)." }, { "name": "dc-camille-glass", "value": "#db2777", "usage": "Deep shade of Camille (customer support)'s palette for glass surfaces and marks; 4.6:1 on white (text-safe on white)." }, { "name": "dc-camille-glass-2", "value": "#be185d", "usage": "Deepest shade of Camille (customer support)'s palette for glass borders and pressed states; 6.0:1 on white (text-safe on white)." }, { "name": "dc-kate", "value": "#10b981", "usage": "Agent colour — Kate, Marketing Maestro (campaigns, copy, content). Fills take near-black text (8.3:1)." }, { "name": "dc-kate-secondary", "value": "#34d399", "usage": "Second stop of Kate (marketing)'s palette: lighter fills, hover tints, the middle of the agent gradient." }, { "name": "dc-kate-accent", "value": "#6ee7b7", "usage": "Lightest stop of Kate (marketing)'s palette: soft tints and the end of the agent gradient (135°, primary → secondary → accent)." }, { "name": "dc-kate-glass", "value": "#14b8a6", "usage": "Deep shade of Kate (marketing)'s palette for glass surfaces and marks; 2.5:1 on white (not for text on white)." }, { "name": "dc-kate-glass-2", "value": "#0d9488", "usage": "Deepest shade of Kate (marketing)'s palette for glass borders and pressed states; 3.7:1 on white (not for text on white)." }, { "name": "dc-andre", "value": "#6366f1", "usage": "Agent colour — André, Finance & Admin (invoicing, reporting; coming soon). Indigo stop of the signature gradient." }, { "name": "dc-andre-secondary", "value": "#818cf8", "usage": "Second stop of André (finance & admin)'s palette: lighter fills, hover tints, the middle of the agent gradient." }, { "name": "dc-andre-accent", "value": "#a5b4fc", "usage": "Lightest stop of André (finance & admin)'s palette: soft tints and the end of the agent gradient (135°, primary → secondary → accent)." }, { "name": "dc-andre-glass", "value": "#4f46e5", "usage": "Deep shade of André (finance & admin)'s palette for glass surfaces and marks; 6.3:1 on white (text-safe on white)." }, { "name": "dc-andre-glass-2", "value": "#4338ca", "usage": "Deepest shade of André (finance & admin)'s palette for glass borders and pressed states; 7.9:1 on white (text-safe on white)." }, { "name": "dc-jeanne", "value": "#f97316", "usage": "Agent colour — Jeanne, Project Manager. From lib/brand.ts (no CSS variable in the source; not on the public site)." }, { "name": "dc-jeanne-secondary", "value": "#fb923c", "usage": "Second stop of Jeanne (project delivery)'s palette: lighter fills, hover tints, the middle of the agent gradient." }, { "name": "dc-jeanne-accent", "value": "#fdba74", "usage": "Lightest stop of Jeanne (project delivery)'s palette: soft tints and the end of the agent gradient (135°, primary → secondary → accent)." }, { "name": "dc-jeanne-glass", "value": "#ea580c", "usage": "Deep shade of Jeanne (project delivery)'s palette for glass surfaces and marks; 3.6:1 on white (not for text on white)." }, { "name": "dc-jeanne-glass-2", "value": "#c2410c", "usage": "Deepest shade of Jeanne (project delivery)'s palette for glass borders and pressed states; 5.2:1 on white (text-safe on white)." }, { "name": "dc-boss", "value": "#dc2626", "usage": "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." }, { "name": "dc-boss-secondary", "value": "#ef4444", "usage": "Second stop of the Boss (operations lead)'s palette: lighter fills, hover tints, the middle of the agent gradient." }, { "name": "dc-boss-accent", "value": "#fca5a5", "usage": "Lightest stop of the Boss (operations lead)'s palette: soft tints and the end of the agent gradient (135°, primary → secondary → accent)." }, { "name": "dc-boss-glass", "value": "#b91c1c", "usage": "Deep shade of the Boss (operations lead)'s palette for glass surfaces and marks; 6.5:1 on white (text-safe on white)." }, { "name": "dc-boss-glass-2", "value": "#991b1b", "usage": "Deepest shade of the Boss (operations lead)'s palette for glass borders and pressed states; 8.3:1 on white (text-safe on white)." }, { "name": "accent-ai", "value": "oklch(68% 0.20 295)", "usage": "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)." }, { "name": "accent-ai-2", "value": "oklch(60% 0.22 295)", "usage": "Deeper AI purple for pressed/hover states of `accent-ai` fills." }, { "name": "accent-new", "value": "oklch(74% 0.18 148)", "usage": "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)." }, { "name": "accent-new-2", "value": "oklch(68% 0.18 148)", "usage": "Deeper NEW green for hover/pressed states of `accent-new` fills." }, { "name": "mx-bg", "value": { "crew-light": "oklch(98% 0.002 260)", "crew-dark": "oklch(13% 0.003 260)", "max-light": "oklch(98% 0.002 260)", "max-dark": "oklch(13% 0.003 260)" }, "usage": "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." }, { "name": "mx-surface", "value": { "crew-light": "oklch(100% 0 0)", "crew-dark": "oklch(15% 0.003 260)", "max-light": "oklch(100% 0 0)", "max-dark": "oklch(15% 0.003 260)" }, "usage": "Raised cards on `mx-bg`: confirm cards, the composer." }, { "name": "mx-surface-2", "value": { "crew-light": "oklch(97% 0.002 260)", "crew-dark": "oklch(18% 0.004 260)", "max-light": "oklch(97% 0.002 260)", "max-dark": "oklch(18% 0.004 260)" }, "usage": "Quiet fills on agent surfaces: history rows, chips at rest." }, { "name": "mx-surface-hi", "value": { "crew-light": "oklch(94% 0.003 260)", "crew-dark": "oklch(22% 0.004 260)", "max-light": "oklch(94% 0.003 260)", "max-dark": "oklch(22% 0.004 260)" }, "usage": "Hover and pressed fills on agent surfaces; the active header icon." }, { "name": "mx-ink", "value": { "crew-light": "oklch(18% 0.006 260)", "crew-dark": "oklch(98% 0 0)", "max-light": "oklch(18% 0.006 260)", "max-dark": "oklch(98% 0 0)" }, "usage": "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." }, { "name": "mx-ink-2", "value": { "crew-light": "oklch(32% 0.006 260)", "crew-dark": "oklch(82% 0.003 260)", "max-light": "oklch(32% 0.006 260)", "max-dark": "oklch(82% 0.003 260)" }, "usage": "Secondary text on agent surfaces; the user's own messages (italic)." }, { "name": "mx-ink-3", "value": { "crew-light": "oklch(48% 0.006 260)", "crew-dark": "oklch(62% 0.004 260)", "max-light": "oklch(48% 0.006 260)", "max-dark": "oklch(62% 0.004 260)" }, "usage": "Meta and help text on agent surfaces (6.2:1 light, 5.5:1 dark on `mx-bg`)." }, { "name": "mx-ink-4", "value": { "crew-light": "oklch(62% 0.005 260)", "crew-dark": "oklch(44% 0.005 260)", "max-light": "oklch(62% 0.005 260)", "max-dark": "oklch(44% 0.005 260)" }, "usage": "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)." }, { "name": "mx-line", "value": { "crew-light": "oklch(18% 0.006 260 / 0.08)", "crew-dark": "oklch(100% 0 0 / 0.08)", "max-light": "oklch(18% 0.006 260 / 0.08)", "max-dark": "oklch(100% 0 0 / 0.08)" }, "usage": "Hairlines on agent surfaces: ink or white at 8%." }, { "name": "mx-line-strong", "value": { "crew-light": "oklch(18% 0.006 260 / 0.18)", "crew-dark": "oklch(100% 0 0 / 0.16)", "max-light": "oklch(18% 0.006 260 / 0.18)", "max-dark": "oklch(100% 0 0 / 0.16)" }, "usage": "Composer and card borders on agent surfaces (decorative, about 1.5:1)." } ] }, "type": { "fonts": [ { "family": "Cabinet Grotesk", "file": "fonts/CabinetGrotesk-Thin.woff", "weight": "100", "style": "normal" }, { "family": "Cabinet Grotesk", "file": "fonts/CabinetGrotesk-Extralight.woff", "weight": "200", "style": "normal" }, { "family": "Cabinet Grotesk", "file": "fonts/CabinetGrotesk-Light.woff", "weight": "300", "style": "normal" }, { "family": "Cabinet Grotesk", "file": "fonts/CabinetGrotesk-Regular.woff", "weight": "400", "style": "normal" }, { "family": "Cabinet Grotesk", "file": "fonts/CabinetGrotesk-Medium.woff", "weight": "500", "style": "normal" }, { "family": "Cabinet Grotesk", "file": "fonts/CabinetGrotesk-Bold.woff", "weight": "700", "style": "normal" }, { "family": "Cabinet Grotesk", "file": "fonts/CabinetGrotesk-Extrabold.woff", "weight": "800", "style": "normal" }, { "family": "Cabinet Grotesk", "file": "fonts/CabinetGrotesk-Black.woff", "weight": "900", "style": "normal" } ], "families": { "cabinet": "\"Cabinet Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif", "inter": "Inter, -apple-system, \"Helvetica Neue\", Arial, sans-serif", "mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace", "serif": "\"Instrument Serif\", \"Iowan Old Style\", Georgia, serif" }, "groups": [ { "name": "Display", "family": "cabinet", "styles": [ { "name": "display-hero", "fontSize": "60px", "lineHeight": 1, "fontWeight": 500, "letterSpacing": "-0.05em", "sample": "Build your Digital Worker.", "usage": "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`." }, { "name": "display-page", "fontSize": "48px", "lineHeight": 1, "fontWeight": 600, "letterSpacing": "-0.025em", "sample": "Liberty. Diversity. Reciprocity.", "usage": "Public page h1 (integrations, manifesto, blog index) at md; 60px at lg." }, { "name": "display-section", "fontSize": "30px", "lineHeight": "36px", "fontWeight": 700, "sample": "Empower Your Team with Digital Workers", "usage": "Marketing section headings (text-3xl font-bold)." } ] }, { "name": "Crew OS interface", "family": "cabinet", "styles": [ { "name": "crew-title", "fontSize": "24px", "lineHeight": "32px", "fontWeight": 600, "letterSpacing": "-0.025em", "sample": "Digital Workers", "usage": "Crew OS page titles (text-2xl font-semibold tracking-tight)." }, { "name": "crew-heading", "fontSize": "18px", "lineHeight": "28px", "fontWeight": 600, "sample": "Connected tools", "usage": "Section and dialog titles (text-lg font-semibold)." }, { "name": "crew-body-lg", "fontSize": "16px", "lineHeight": "24px", "fontWeight": 400, "sample": "Shape an AI teammate that fits your workflow.", "usage": "Lead paragraphs and text fields below md (inputs render text-base on phones so iOS does not zoom)." }, { "name": "crew-body", "fontSize": "14px", "lineHeight": "20px", "fontWeight": 400, "sample": "Pick the role, connect your tools, and watch it ship work alongside your crew.", "usage": "Default interface text: table cells, descriptions, buttons (text-sm)." }, { "name": "crew-label", "fontSize": "14px", "lineHeight": 1, "fontWeight": 500, "sample": "LinkedIn or social profile", "usage": "Form labels and Button text (text-sm leading-none font-medium)." }, { "name": "crew-caption", "fontSize": "12px", "lineHeight": "16px", "fontWeight": 400, "sample": "Free to start · No credit card · Ready in 2 min", "usage": "Meta lines, badges, table footers (text-xs)." }, { "name": "crew-overline", "fontSize": "12px", "lineHeight": 1.5, "fontWeight": 600, "letterSpacing": "0.08em", "sample": "YOUR DIGITAL WORKERS", "usage": "Eyebrows above section titles and settings group titles; always set uppercase, in `muted-foreground`." } ] }, { "name": "Max interface", "family": "inter", "styles": [ { "name": "max-title", "fontSize": "24px", "lineHeight": "32px", "fontWeight": 700, "letterSpacing": "-0.025em", "sample": "Campaigns", "usage": "Max page titles (text-2xl font-bold tracking-tight)." }, { "name": "max-heading", "fontSize": "18px", "lineHeight": "28px", "fontWeight": 600, "sample": "Sender rotation", "usage": "Card, sheet and dialog titles (text-lg font-semibold)." }, { "name": "max-body-lg", "fontSize": "16px", "lineHeight": "24px", "fontWeight": 400, "sample": "Max drafts the follow-up; you approve it.", "usage": "Chat messages and long-form reading; text fields below md." }, { "name": "max-body", "fontSize": "14px", "lineHeight": "20px", "fontWeight": 400, "sample": "No campaigns match. Create a campaign or try another name.", "usage": "Default Max interface text (text-sm)." }, { "name": "max-label", "fontSize": "14px", "lineHeight": 1, "fontWeight": 500, "sample": "Daily sending limit", "usage": "Form labels and Button text." }, { "name": "max-caption", "fontSize": "12px", "lineHeight": "16px", "fontWeight": 400, "sample": "Synced 2 min ago", "usage": "The most used size in Max (text-xs): table meta, badges, timestamps, helper lines." }, { "name": "max-overline", "fontSize": "12px", "lineHeight": 1.5, "fontWeight": 600, "letterSpacing": "0.08em", "sample": "APPEARANCE", "usage": "Settings group titles; uppercase, in `muted-foreground`." } ] }, { "name": "Max agent surfaces", "family": "inter", "styles": [ { "name": "packet-title", "family": "serif", "fontSize": "72px", "lineHeight": 0.96, "fontWeight": 400, "letterSpacing": "-0.025em", "sample": "Meet your crew", "usage": "Onboarding packet page titles (Instrument Serif, `.page__title`); 44px on phones." }, { "name": "chat-empty-title", "family": "serif", "fontSize": "46px", "lineHeight": 1.02, "fontWeight": 400, "letterSpacing": "-0.02em", "sample": "What should we work on?", "usage": "The Max chat empty state (`.mx-empty__title`), with a muted italic `em`; clamp(36px, 11vw, 46px) on phones." }, { "name": "chat-message", "fontSize": "14.5px", "lineHeight": 1.68, "fontWeight": 400, "letterSpacing": "-0.005em", "sample": "I found 12 accounts that match your ICP and drafted an opener for each.", "usage": "Max's messages (`.mx-bubble`), the composer text and onboarding bubbles: prose, no box." }, { "name": "chat-meta", "fontSize": "11px", "lineHeight": 1.3, "fontWeight": 500, "sample": "Used 3 tools · 4s", "usage": "Row meta, tool-call states and badges on agent surfaces, in `mx-ink-3`." }, { "name": "mono-eyebrow", "family": "mono", "fontSize": "10.5px", "lineHeight": 1, "fontWeight": 500, "letterSpacing": "0.14em", "sample": "STEP 2 OF 5", "usage": "Onboarding packet eyebrows and field labels (`.eyebrow`, `.field-label`); uppercase, in the dimmest readable ink." } ] }, { "name": "Code", "family": "mono", "styles": [ { "name": "code-inline", "fontSize": "13.6px", "fontWeight": 400, "sample": "workspace_id", "usage": "Inline code in editors and docs (0.85rem) on a `muted` chip, radius 0.4rem." }, { "name": "code-block", "fontSize": "12.8px", "fontWeight": 400, "sample": "npm --prefix packages/ui run build", "usage": "Code blocks (0.8rem) on `muted` with a `border` hairline, radius 0.5rem." } ] } ] }, "spacing": { "note": "Both apps use Tailwind v4's 4px step (--spacing: 0.25rem); these are the steps the shared components use.", "tokens": [ { "name": "space-1", "value": "4px", "usage": "Tightest gap: icon-to-text in badges, stacked helper lines." }, { "name": "space-1.5", "value": "6px", "usage": "Small Button icon gap (gap-1.5); description offset under settings titles." }, { "name": "space-2", "value": "8px", "usage": "Button icon gap, CardHeader row gap, Textarea vertical padding, label-to-field gap." }, { "name": "space-3", "value": "12px", "usage": "Input/Textarea horizontal padding; small Button padding; gap between inline controls." }, { "name": "space-4", "value": "16px", "usage": "Default Button horizontal padding; compact settings gap; settings header gap." }, { "name": "space-5", "value": "20px", "usage": "Appearance toggle row inline padding." }, { "name": "space-6", "value": "24px", "usage": "Card padding and inner gap (px-6 py-6 gap-6); large Button padding." }, { "name": "crew-settings-gap", "value": "24px", "usage": "Settings section padding and field gap, comfortable density (16px when data-density is compact)." }, { "name": "space-8", "value": "32px", "usage": "Small Button and icon-button height (h-8); appearance preview padding." }, { "name": "space-9", "value": "36px", "usage": "Default Button and Input height (h-9)." }, { "name": "space-10", "value": "40px", "usage": "Large Button height (h-10)." } ] }, "radius": { "note": "Both apps set --radius: 0.625rem and derive sm/md/xl from it; values below are those calc() results.", "tokens": [ { "name": "radius", "value": "10px", "usage": "The base radius both apps set; `radius-lg` equals it." }, { "name": "radius-sm", "value": "6px", "usage": "calc(radius - 4px): small chips, inner elements." }, { "name": "radius-md", "value": "8px", "usage": "calc(radius - 2px): Button, Input, Textarea (rounded-md)." }, { "name": "radius-lg", "value": "10px", "usage": "Popovers, menus, sheets." }, { "name": "r-lg", "value": "12px", "usage": "Settings sections, appearance toggles and previews (0.75rem)." }, { "name": "radius-xl", "value": "14px", "usage": "calc(radius + 4px): Card (rounded-xl)." }, { "name": "r-full", "value": "9999px", "usage": "Pills: Switch track and thumb, hero CTAs, the hero badge, avatars." } ] }, "shadow": { "tokens": [ { "name": "shadow-xs", "value": "0 1px 2px 0 rgba(0, 0, 0, 0.05)", "usage": "Outline Button, Input, Textarea." }, { "name": "shadow-sm", "value": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)", "usage": "Card." }, { "name": "shadow-glass-panel", "value": { "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)" }, "usage": "`.glass-panel`: floating panels over imagery or gradient grounds, with `backdrop-glass-panel`." }, { "name": "shadow-glass-card", "value": { "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)" }, "usage": "`.glass-card`: cards on gradient or image grounds, with `backdrop-glass`." } ] }, "backdrop": { "note": "backdrop-filter values of the glass utilities in both apps' globals.css.", "tokens": [ { "name": "backdrop-glass", "value": "blur(16px) saturate(180%)", "usage": "`.glass` and `.glass-card`." }, { "name": "backdrop-glass-subtle", "value": "blur(12px) saturate(160%)", "usage": "`.glass-subtle`: light frosting behind small chips and bars." }, { "name": "backdrop-glass-panel", "value": "blur(20px) saturate(180%)", "usage": "`.glass-panel`." }, { "name": "backdrop-glass-strong", "value": "blur(24px) saturate(200%)", "usage": "`.glass-strong`: dialogs and menus over busy grounds." }, { "name": "backdrop-glass-button", "value": "blur(12px) saturate(140%)", "usage": "`.glass-button` and the Glass button finish: surface-only, keeps the CTA's own colour." }, { "name": "backdrop-glass-input", "value": "blur(8px)", "usage": "`.glass-input`." } ] }, "meta": { "source": "github", "repo": "Digital-Crew-Technologies/digitalcrew-orchestrator", "ref": "claude/design-system-extraction-1r9nzy@44290dd", "package": "max-agent src/components/ui + packages/ui", "repos": [ { "repo": "Digital-Crew-Technologies/digitalcrew-orchestrator", "ref": "claude/design-system-extraction-1r9nzy@44290dd", "themes": [ "crew-light", "crew-dark" ] }, { "repo": "Digital-Crew-Technologies/max-agent", "ref": "claude/design-system-extraction-1r9nzy@80c1dd9", "themes": [ "max-light", "max-dark" ] } ], "paths": { "tokens": [ "digitalcrew-orchestrator:app/globals.css", "digitalcrew-orchestrator:lib/brand.ts", "max-agent:src/app/globals.css", "max-agent:src/app/onboarding/packet.css", "max-agent:src/features/agent/ui/max-chat.css", "digitalcrew-orchestrator:packages/ui/src/styles.css", "max-agent:src/app/transitions.css" ], "fonts": [ "digitalcrew-orchestrator:app/assets/fonts/cabinet-grotesk-webfont/", "digitalcrew-orchestrator:app/font.ts", "max-agent:src/app/layout.tsx" ], "assets": [ "max-agent:public/images/logo/", "digitalcrew-orchestrator:public/", "digitalcrew-orchestrator:public/images/logo/", "digitalcrew-orchestrator:public/icons/integrations/", "digitalcrew-orchestrator:public/partners/", "max-agent:public/images/agents/", "max-agent:public/workflow-templates/" ], "docs": [ "digitalcrew-orchestrator:packages/ui/README.md", "digitalcrew-orchestrator:messages/en.json" ] }, "components": { "library": "max-agent:src/components/ui/*.tsx", "composites": "max-agent:src/features/**/ui (KpiCard, HeroMetric, MetricTile, ChannelBadge, CampaignStatusBadge, EmailVerificationBadge, ProspectAvatar, AgentFace) and src/components (TypedOptionPicker, ConfirmDialogProvider, HelpTooltip)", "shared": "digitalcrew-orchestrator:packages/ui/src" }, "synced": "2026-09-26" } }