# Digital Crew Design System

> The shared design system of Digital Crew's two products: Crew OS (the platform and public site at digitalcrew.tech) and Max (the go-to-market workspace). Four themes (crew-light, crew-dark, max-light, max-dark) over one set of semantic tokens, 131 documented components and 15 showcase pages with live previews, the eight Digital Crew agents, downloads and the brand story: Crew OS is ink, Max is orange.

Every page has a Markdown twin at the same path plus `.md` (the overview is /design/index.md). Read the overview and the story first; read a component's page before using it; use token names, never raw values. Components are available at runtime as `window.DigitalCrew` (see Build with it).

## Get started

- [Overview](/design/index.md): 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.
- [For designers](/design/start/designers.md): Colours, type and components that stay on-brand in both products.
- [For developers](/design/start/developers.md): Tokens as CSS or Tailwind, the component bundle, types and APIs.
- [For marketers](/design/start/marketers.md): The story, the voice, logos and agent media for every campaign.
- [For freelancers & agencies](/design/start/freelancers.md): Everything to deliver a page or an asset for Digital Crew today.
- [For AI agents](/design/start/ai-agents.md): Machine-readable docs: llms.txt, Markdown twins, tokens and types.

## Brand

- [The story](/design/story.md): 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.
- [Voice & copy](/design/content.md): Who speaks, how it sounds, and the copy rules both products follow.
- [Agents](/design/brand/agents.md): Eight Digital Crew agents, each one colour, and Max's 24 Digital Workers.
- [Logos](/design/brand/logos.md): The mark stays black or white: it is where every agent's colour meets.
- [Iconography](/design/brand/iconography.md): Lucide everywhere; in-house marks only where Lucide has nothing.
- [Assets](/design/brand/assets.md): Every file the system ships: agent media, illustrations, animations and map data.

## Foundations

- [Colour](/design/foundations/colour.md): 102 colour tokens, one vocabulary across four themes. A neutral shell, and colour that always means something.
- [Typography](/design/foundations/typography.md): Cabinet Grotesk for Crew OS, Inter for Max, Instrument Serif for Max's agent surfaces.
- [Spacing, radii & surfaces](/design/foundations/layout.md): The 4px step, the radius scale, borders, shadows, glass and focus states.
- [Motion](/design/foundations/motion.md): Durations, easings and the springs of the Unibox. Every demo on this page is live.
- [Imagery & backgrounds](/design/foundations/imagery.md): Grounds, gradients and the ambient effects behind the work.
- [Agent surfaces](/design/foundations/agent-surfaces.md): The .maxchat language: where Max's agents speak.
- [Accessibility](/design/foundations/accessibility.md): Contrast, focus, motion and language rules every screen meets.

## Resources

- [Downloads & tokens](/design/resources.md): Logo packs, brand kit, agent media, design tokens in four formats, fonts and the component bundle.
- [Build with it](/design/develop.md): Load the system in a page, pick a theme, and use the components. Everything here is also machine-readable.
- [Known gaps](/design/known-gaps.md): What is not in the system yet, what is stubbed, and the inconsistencies kept from the source.

## Components

- [All components](/design/components.md): the catalogue by family, with the Crew OS / Max differences
- [AgentAccents](/design/components/agent-accents.md): Foundations showcase page, Max. 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): Foundations showcase page, Max. How Max colours state: one tinted-pill template, a mapping per domain, and 17 pipeline stage colours.
- [Badge](/design/components/badge.md): Actions, Max. A small pill label: count, channel, state or tag (Max's `components/ui/badge.tsx`).
- [Button](/design/components/button.md): Actions, Max. 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): Actions, Crew OS. 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): Actions, Crew OS. A two-state button (Radix toggle) that stays pressed until clicked again.
- [ToggleGroup](/design/components/toggle-group.md): Actions, Crew OS. A segmented set of toggles (Radix toggle group) where one or several options are on at a time.
- [Calendar](/design/components/calendar.md): Forms, Max. 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): Forms, Max. 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): Forms, Max. 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): Forms, Crew OS. 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): Forms, Max. 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): Forms, Max. The accessible field label (Radix Label): 14px medium, `leading-none`, 8px gap for an inline icon or `HelpTooltip`.
- [PhoneInput](/design/components/phone-input.md): Forms, Max. 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): Forms, Max. One choice from a short, visible list (Radix RadioGroup): 16px rings in `primary`, 10px dot.
- [SecretInput](/design/components/secret-input.md): Forms, Max. A field for API keys and tokens: masked by default with a reveal toggle, monospace, opted out of autofill.
- [Select](/design/components/select.md): Forms, Max. 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): Forms, Crew OS. A Radix slider for picking a number, or a range with two thumbs, on a continuous scale.
- [Switch](/design/components/switch.md): Forms, Max. 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): Forms, Max. The multi-line field; it grows with its content (`field-sizing: content`) from a 64px minimum.
- [TimezoneSelector](/design/components/timezone-selector.md): Forms, Max. A searchable combobox (a `Popover` holding a `Command` list) over every IANA time zone the browser knows.
- [TypedOptionPicker](/design/components/typed-option-picker.md): Forms, Max. A searchable, grouped picker for long option lists (Popover + Command), in single and multi versions.
- [AlertDialog](/design/components/alert-dialog.md): Overlays, Max. 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): Overlays, Max. 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): Overlays, Max. App-wide confirmations through one hook: wrap the app in `ConfirmDialogProvider`, then call `useConfirm().confirm({...})` anywhere.
- [Dialog](/design/components/dialog.md): Overlays, Max. 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): Overlays, Max. An alert dialog that asks the user to confirm throwing away unsaved edits.
- [Drawer](/design/components/drawer.md): Overlays, Crew OS. 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): Overlays, Max. A menu of actions for one object, opening from a button; 250ms in from 97%, 150ms out to 99%.
- [Popover](/design/components/popover.md): Overlays, Max. A light panel anchored to its trigger; opens in 250ms from 97% scale (`.t-dropdown`).
- [Sheet](/design/components/sheet.md): Overlays, Max. 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): Overlays, Max. A short ink label on hover or focus: `foreground` fill with `background` text, 12px, 150ms in after an 80ms delay, 50ms out (`.t-tt`).
- [Breadcrumb](/design/components/breadcrumb.md): Navigation, Crew OS. A page trail that shows where the current page sits in the hierarchy, built from composable parts inside a `<nav aria-label="breadcrumb">`.
- [Header](/design/components/header.md): Navigation, Max. The app's top bar: a sidebar toggle and a divider, followed by whatever you pass in.
- [ListMapToggle](/design/components/list-map-toggle.md): Navigation, Max. A two-button segmented switch between a List view and a Map view.
- [Pagination](/design/components/pagination.md): Navigation, Max. Numbered page links with previous/next and an ellipsis.
- [Sidebar](/design/components/sidebar.md): Navigation, Max. The app shell: a collapsible left sidebar beside an inset content panel (`SidebarProvider` › `Sidebar` + `SidebarInset`).
- [Tabs](/design/components/tabs.md): Navigation, Max. A segmented list that switches panels in place: a 36px `muted` track with 3px padding; the active tab lifts onto `background`.
- [ThemeSwitcher](/design/components/theme-switcher.md): Navigation, Max. A round icon button with a Light, Dark and System menu that sets the next-themes theme.
- [Accordion](/design/components/accordion.md): Layout, Max. Stacked sections that expand one at a time (or several); height animates in 250ms on the smooth-out ease (`--acc-*`).
- [Card](/design/components/card.md): Layout, Max. The raised surface for grouped content: `card` fill, `border`, `radius-xl` (14px), `shadow-sm`, 24px padding and gap.
- [Collapsible](/design/components/collapsible.md): Layout, Max. Shows and hides one region under its trigger (Radix Collapsible); animates with the accordion tokens.
- [ContentSection](/design/components/content-section.md): Layout, Max. The settings-page section: a title, a one-line description, a separator, then a scrolling body.
- [DataTableToolbar](/design/components/data-table-toolbar.md): Layout, Max. The toolbar of Max's data-table kit (search, faceted filters, Reset and the View columns menu) and how the kit's pieces fit around a `Table`.
- [Main](/design/components/main.md): Layout, Max. The page body of Max's app shell: a `<main>` with the standard page padding and, by default, a centred 7xl width.
- [PanelSplitter](/design/components/panel-splitter.md): Layout, Max. The draggable seam between two side-by-side panels; every split view in Max uses it, so one gesture works everywhere.
- [ScrollArea](/design/components/scroll-area.md): Layout, Max. A scroll container with thin themed scrollbars (10px track, `border`-coloured thumb) that appear on hover.
- [Separator](/design/components/separator.md): Layout, Max. A 1px `border` hairline, horizontal or vertical (Radix Separator, decorative by default).
- [Table](/design/components/table.md): Layout, Max. The data table primitive: 14px rows with `border` dividers, 40px header cells in medium weight, `muted` at 50% on hover and selection.
- [Alert](/design/components/alert.md): Feedback, Crew OS. An inline, non-dismissable notice (`role="alert"`) with an optional icon, a one-line title and a description.
- [AnimatedCircularProgressBar](/design/components/animated-circular-progress-bar.md): Feedback, Max. A circular gauge for a value against a quota, with the number in the middle.
- [HelpTooltip](/design/components/help-tooltip.md): Feedback, Max. A 16px `HelpCircle` in `muted-foreground` that shows an explanation on hover or focus.
- [Progress](/design/components/progress.md): Feedback, Max. A determinate bar: `primary` fill on `primary` at 20%, 8px tall, `r-full`.
- [Skeleton](/design/components/skeleton.md): Feedback, Max. A placeholder block that pulses (`t-skel-pulse`, 1s) in `accent` while content loads.
- [Toaster](/design/components/toaster.md): Feedback, Max. Toast notifications (Sonner) on the `popover` surface with a `border` and `radius-lg`; mount one `Toaster` at the root and call `toast()` from anywhere.
- [AgentFace](/design/components/agent-face.md): Data display, Max. A Digital Worker's face: its approved portrait, or its initials on its accent tile.
- [AnimateDigits](/design/components/animate-digits.md): Data display, Max. A number whose digits spring in and out as it changes (motion), direction following the change.
- [Avatar](/design/components/avatar.md): Data display, Max. A round image with an initials fallback (Radix Avatar), 32px by default.
- [CampaignStatusBadge](/design/components/campaign-status-badge.md): Data display, Max. The campaign lifecycle pill: Draft, Active, Paused, Stopped, Completed, Archived.
- [ChannelBadge](/design/components/channel-badge.md): Data display, Max. Marks which channel a conversation or step runs on: email (amber), LinkedIn (sky), WhatsApp (emerald).
- [EmailVerificationBadge](/design/components/email-verification-badge.md): Data display, Max. The deliverability verdict for an email address, with an icon and an optional score.
- [HeroMetric](/design/components/hero-metric.md): Data display, Max. One big number with its previous-period comparison, a trend pill and a pacing bar.
- [KpiCard](/design/components/kpi-card.md): Data display, Max. A KPI tile — label, value, trend — and `KpiSection`, the glass panel that groups them.
- [MaxIconSet](/design/components/max-icon-set.md): Data display showcase page, Max. Max's own SVG icons, exported as `DC.MaxIcons`: integration and channel logos, message delivery states, and the appearance-picker tiles.
- [MetricTile](/design/components/metric-tile.md): Data display, Max. A compact glass tile for a scored metric: label, value toned by score band, hint.
- [ProspectAvatar](/design/components/prospect-avatar.md): Data display, Max. A prospect's photo, or a gradient disc hashed from their name, with an optional unread halo.
- [Snippet](/design/components/snippet.md): Data display, Max. A monospace command block with a copy button whose icon turns into a check after copying.
- [TimeLens](/design/components/time-lens.md): Data display, Max. Max's agenda: hour marks, ticks and tasks in one scrolling column, read through a fixed lens that shows the time under it.
- [WorldGlobe](/design/components/world-globe.md): Data display, Max. An interactive d3-geo globe on canvas with avatar markers that merge into heat-coloured count bubbles.
- [AgentAvatar](/design/components/agent-avatar.md): Agents, Crew OS. A Digital Worker's face as a muted, looping video in a rounded square, framed and glowing in the agent's brand colour, with an optional live dot.
- [AgentSkillTag](/design/components/agent-skill-tag.md): Agents, Crew OS. A tiny chip naming one of a Digital Worker's skills, tinted with that worker's colour.
- [AskMaxAction](/design/components/ask-max-action.md): Agents, Max. A contextual "Ask Max" button.
- [CrewAgents](/design/components/crew-agents.md): Agents showcase page, Crew OS. The Digital Crew's eight agents, each one colour broken out of the ink: the palette ramp, the gradient, the role and the skills the public site gives them.
- [EquipmentBadge](/design/components/equipment-badge.md): Agents, Crew OS. A small chip showing one piece of a Digital Worker's desk equipment as an emoji, with or without its label.
- [MaxRoster](/design/components/max-roster.md): Agents showcase page, Max. Max's 24 Digital Workers in their seven teams, each with its face (**AgentFace**) and accent dot.
- [OAuthRequestCard](/design/components/oauth-request-card.md): Agents, Max. A "Connect HubSpot" or "Connect Notion" card that an agent drops into the chat.
- [ThinkingBox](/design/components/thinking-box.md): Agents, Max. Max's thinking box: the running account of what he thought, which tools he called, what he sent and what came back.
- [ToolStatusIndicator](/design/components/tool-status-indicator.md): Agents, Max. Compact dot, label and state rows that report tool activity in the onboarding and meetings chats.
- [MaxChat](/design/components/max-chat.md): Agent surfaces showcase page, Max. A static rendition of `.maxchat`, the surface every Max agent speaks through: the Max chat, the Ask Max panel, the meetings assistant and the onboarding chat.
- [Markdown](/design/components/markdown.md): AI, Crew OS. Renders a markdown string (GitHub-flavoured: tables, task lists, strikethrough) and stays cheap while an AI reply streams in.
- [Reasoning](/design/components/reasoning.md): AI, Crew OS. A collapsible block that shows how an agent reached its answer, with the reasoning streamed in as markdown.
- [ResponseStream](/design/components/response-stream.md): AI, Crew OS. Reveals text progressively, either typed out character by character or faded in word by word, from a string or an async stream of chunks.
- [ChannelSegments](/design/components/channel-segments.md): Unibox, Max. The Unibox channel filter: a rail of icons where one shared pill glides to the selected channel, and only that segment spells out its name.
- [ChatListItem](/design/components/chat-list-item.md): Unibox, Max. One conversation in the Unibox list: a motion row that staggers in, glides when a new reply reorders the inbox, and pops its unread badge.
- [MessageBubble](/design/components/message-bubble.md): Unibox, Max. One message in a Unibox thread: your side in the brand gradient, theirs in muted glass, each rising in from its own side of the conversation.
- [MessageComposer](/design/components/message-composer.md): Unibox, Max. The Unibox reply box: text, emoji and staged images in one rounded field, with a send button that springs awake when there is something to send.
- [ReplySuggestions](/design/components/reply-suggestions.md): Unibox, Max. The band between a Unibox thread and its composer: ask for a few replies, watch them arrive, pick one.
- [SyncProgressPanel](/design/components/sync-progress-panel.md): Unibox, Max. The dialog behind the Unibox sync button.
- [UniboxIdlePanel](/design/components/unibox-idle-panel.md): Unibox, Max. The Unibox's empty conversation pane: a breathing glass orb with the three channels in slow orbit and a quiet "Listening for new replies" line.
- [ActivityChart](/design/components/activity-chart.md): Analytics, Max. A day-bucketed Recharts chart in Max's glass panel: each series is drawn as an area, a line or a bar, with a dot legend and a popover tooltip.
- [ChartContainer](/design/components/chart-container.md): Analytics, Crew OS. The shell every Crew OS chart sits in: it wraps a Recharts 2 chart in a `ResponsiveContainer`, turns a config object into per-series colour variables and styles axes, grid, tooltip and legend with the theme tokens.
- [FunnelChart](/design/components/funnel-chart.md): Analytics, Max. A vertical column funnel with a summary panel.
- [InsightsCard](/design/components/insights-card.md): Analytics, Max. A meeting's numbers (sentiment, stat tiles, per-speaker talk share, an over-talk hint), all derived on the client from the transcript.
- [QualificationContent](/design/components/qualification-content.md): Analytics, Max. The body of a BANT qualification snapshot: a score, a verdict, a confirmed count, and one tile per criterion with its status, rationale and first piece of transcript evidence.
- [DealCard](/design/components/deal-card.md): Pipeline, Max. One draggable deal on the deals board, plus `DealCardPreview`, the tilted copy shown under the cursor while dragging.
- [DealColumn](/design/components/deal-column.md): Pipeline, Max. One column of the deals board: a droppable, infinitely scrolling list of `DealCard`s under a header with the stage dot, a count badge and money totals.
- [MovableCardGrid](/design/components/movable-card-grid.md): Pipeline, Max. A card grid the reader can rearrange.
- [SalesWorkspaceMap](/design/components/sales-workspace-map.md): Pipeline, Max. A read-only React Flow map of how a workspace's lists, signals, campaigns, rules and pipelines connect.
- [StageColors](/design/components/stage-colors.md): Pipeline showcase page, Max. The 17-colour palette for pipeline and deal stage accents, with helpers that return static Tailwind classes and a hex value for each colour.
- [ActionFocusSession](/design/components/action-focus-session.md): Motion, Max. 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): Motion showcase page, Crew OS and Max. A container that tweens its width and height when its content changes (`.t-resize`).
- [ChapterScrubber](/design/components/chapter-scrubber.md): Motion, Max. 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): Motion, Crew OS. 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): Motion, Crew OS. 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): Motion, Crew OS. 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): Motion, Crew OS. 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): Motion, Crew OS. A monospaced, uppercase text effect: letters scramble through random characters, then lock in from left to right.
- [InfiniteSlider](/design/components/infinite-slider.md): Motion, Crew OS. 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): Motion, Max. A task checkbox with a small, restrained completion moment: one soft bloom, two sparks, then stillness.
- [Lottie](/design/components/lottie.md): Motion, Crew OS. The lottie-react player, exported as-is, for the Lottie animations that ship with Crew OS (`animations/*.json`).
- [Marquee](/design/components/marquee.md): Motion, Crew OS. An endless CSS scroll of repeated content, horizontal or vertical, speed set with two CSS variables.
- [MotionScale](/design/components/motion-scale.md): Motion showcase page, Crew OS and Max. 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): Motion, Crew OS. 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): Motion, Crew OS. 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): Motion showcase page, Crew OS and Max. 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): Motion showcase page, Crew OS. The signature Digital Crew gradient — indigo → pink → amber (`dc-andre`, `dc-camille`, `dc-amber`) — in its four forms.
- [SkeletonReveal](/design/components/skeleton-reveal.md): Motion showcase page, Crew OS and Max. A skeleton that cross-blurs into the loaded content, so the swap reads as one motion (`.t-skel`).
- [StreamingText](/design/components/streaming-text.md): Motion showcase page, Crew OS and Max. Streamed words resolving through a soft cross-blur, one after another (`.t-stream-w` → `.is-in`).
- [ThirdBentoAnimation](/design/components/third-bento-animation.md): Motion, Crew OS. 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): Motion showcase page, Max. The Unibox's shared motion vocabulary: every surface moves on the same few springs, so the whole inbox feels like one physical material.
- [CosmicSynapseCanvas](/design/components/cosmic-synapse-canvas.md): Effects, Crew OS. A canvas animation of a slowly rotating sphere of neurons that fire and send pulses along their links, like a brain lighting up.
- [CpuArchitecture](/design/components/cpu-architecture.md): Effects, Crew OS. An SVG circuit diagram: eight traces run into a central chip labelled "DIGITAL CREW", with coloured light pulses travelling along them.
- [FlickeringGrid](/design/components/flickering-grid.md): Effects, Crew OS. A canvas of small squares whose opacity flickers at random, with optional text knocked into the grid as brighter squares.
- [Glitchy404](/design/components/glitchy-404.md): Effects, Crew OS. A "404" made of shaking fragments, rasterised to a canvas where every pixel row is jittered sideways each frame, like a bad signal.
- [Globe](/design/components/globe.md): Effects, Crew OS. An auto-rotating 3D dot-matrix globe (cobe, WebGL) with orange city markers, which the visitor can drag to spin.
- [GlowingEffect](/design/components/glowing-effect.md): Effects, Crew OS. A multicolour glow that runs along a card's border and follows the pointer around it.
- [PixelCard](/design/components/pixel-card.md): Effects, Crew OS. A card whose surface fills with shimmering pixels, spreading out from the centre, while it is hovered or focused.
- [ProgressiveBlur](/design/components/progressive-blur.md): Effects, Crew OS. A stack of backdrop-blur layers, each masked to a band, so content behind it blurs progressively toward one edge.
- [SecondBentoAnimation](/design/components/second-bento-animation.md): Effects, Crew OS. A security emblem for the bento grid: a solid shield sits on a flickering dot grid, and the whole tile is clipped to a shield silhouette until hovered.
- [SplashCursor](/design/components/splash-cursor.md): Effects, Max. A WebGL fluid simulation that trails the pointer in coloured dye behind the page content.
- [AppearanceControls](/design/components/appearance-controls.md): Appearance, Crew OS. The "Appearance" settings panel from `@digitalcrew/ui`: density, button finish, motion, background effect and intensity, the splash cursor, and a live preview of the result.
- [BackgroundEffect](/design/components/background-effect.md): Appearance, Crew OS. A decorative canvas that fills a positioned region with one of seven pointer-reactive background effects, drawn in the current `--primary` colour.
- [BentoSection](/design/components/bento-section.md): Marketing, Crew OS. The landing-page bento: a `SectionHeader` over a two-by-two grid of animated tiles (collaboration, security, insights, automation), each with a title and description.
- [BrandBadge](/design/components/brand-badge.md): Marketing, Crew OS. A rounded pill in any brand colour, in three weights: solid, outline and subtle.
- [BrandIconSet](/design/components/brand-icon-set.md): Marketing showcase page, Crew OS. The Crew OS brand icon set, `Icons` in the app and `DC.BrandIcons` here: the Digital Crew mark, compliance seals, and partner and integration marks as inline SVG components.
- [BrandStatCard](/design/components/brand-stat-card.md): Marketing, Crew OS. A frosted summary card for a headline number, tinted with one brand colour: icon tile, badge, uppercase label, big value and a subtitle.
- [ConnectSection](/design/components/connect-section.md): Marketing, Crew OS. The "Connect your context" section: one rounded panel with a heading, a tools row (integration logos orbiting the Digital Crew mark) and a knowledge row (the `CosmicSynapseCanvas` neuron sphere).
- [CpuSuperposition](/design/components/cpu-superposition.md): Marketing, Crew OS. The features block of the Crew OS landing page: the `CpuArchitecture` circuit on top, overlapping the five glowing value cards of `FeaturesGridWithGlowingEffect` below it.
- [CrewNetwork](/design/components/crew-network.md): Marketing, Crew OS. The "How work moves through the network" section: a live mission card and a four-step timeline (ask, match, work, paid) that plays through six real-looking missions, showing a Digital Worker handing a brief to a human operator.
- [CTASection](/design/components/cta-section.md): Marketing, Crew OS. The closing call to action: a dark gradient panel with Camille's looping portrait video, a heading, a short line and one glass button to contact the team.
- [FAQSection](/design/components/faq-section.md): Marketing, Crew OS. The landing-page FAQ: a `SectionHeader` and seventeen questions in a single-open, collapsible accordion.
- [FeatureSection](/design/components/feature-section.md): Marketing, Crew OS. The Crew Network hero: a giant three-line headline ("Discover / the internet / of actions") over a slowly turning WebGL globe laced with glowing connection arcs, then a description and three stats.
- [FeaturesGridWithGlowingEffect](/design/components/features-grid-with-glowing-effect.md): Marketing, Crew OS. The five value cards of the Crew OS landing page (cut waste, run lean, always on, reliable by default, shared knowledge), each wrapped in a pointer-following `GlowingEffect`.
- [SectionHeader](/design/components/section-header.md): Marketing, Crew OS. The centred intro block that opens every Crew OS marketing section: generous padding, a bottom rule, and whatever eyebrow, heading and lede you pass in.
- [SectionSolutions](/design/components/section-solutions.md): Marketing, Crew OS. The "Hire your Crew" section: a numbered roster of six Digital Workers beside a dossier card for the selected one, advancing on its own until the visitor picks someone.
- [SocialProofTestimonials](/design/components/social-proof-testimonials.md): Marketing, Crew OS. A wall of customer quotes: `TestimonialCard`s stacked in columns that scroll vertically at different speeds, fading out at the top and bottom.

## Data

- [tokens.css](/design/lib/tokens.css): Every token per theme on [data-theme], plus the Cabinet Grotesk faces. The source of truth for the web.
- [tokens.tailwind.css](/design/tokens/tokens.tailwind.css): An @theme block mapping every token to utilities: bg-primary, text-muted-foreground, rounded-lg.
- [tokens.dtcg.json](/design/tokens/tokens.dtcg.json): W3C design-token JSON, one set per theme, with type styles. Import into Tokens Studio or Style Dictionary.
- [tokens.json](/design/tokens.json): The system's own token file: values per theme and a usage note for every token.
- [index.d.ts](/design/lib/index.d.ts): TypeScript declarations of window.DigitalCrew, per source module
- [manifest.json](/design/manifest.json): catalogue of pages, guides, components, themes, agents and files

## Optional

- [llms-full.txt](/design/llms-full.txt): the whole site as one Markdown document