---
name: "Conductor Design System"
version: "0.20.0"
description: "Dark-first tokens, a layered stylesheet and Radix-based React primitives for operational interfaces."
themes: ["dark", "light"]
defaultTheme: "dark"
colors:
  dark:
    "surface.base": "#080b12"
    "surface.canvas": "#0b101a"
    "surface.subtle": "#101722"
    "surface.2": "#101722"
    "surface.raised": "#141d2a"
    "surface.elevated": "#192535"
    "surface.overlay": "rgba(4, 7, 12, 0.78)"
    "surface.glass": "rgba(16, 23, 34, 0.82)"
    "surface.timeline": "#0d141f"
    "surface.track": "rgba(255, 255, 255, 0.05)"
    "surface.tint.1": "rgba(109, 124, 255, 0.11)"
    "surface.tint.2": "rgba(20, 184, 166, 0.055)"
    "text.primary": "#f4f7fb"
    "text.secondary": "#c5cfdd"
    "text.muted": "#8290a3"
    "text.faint": "#5f6d80"
    "text.placeholder": "#8290a3"
    "text.inverse": "#07111f"
    "text.monoPayload": "#dce6f3"
    "border.subtle": "rgba(148, 163, 184, 0.1)"
    "border.default": "rgba(148, 163, 184, 0.18)"
    "border.strong": "rgba(148, 163, 184, 0.3)"
    "border.control": "rgba(148, 163, 184, 0.6)"
    "border.DEFAULT": "rgba(148, 163, 184, 0.18)"
    "accent.DEFAULT": "#6d7cff"
    "accent.strong": "#5667f5"
    "accent.soft": "rgba(109, 124, 255, 0.14)"
    "accent.glow": "rgba(109, 124, 255, 0.28)"
    "status.queued": "#64748b"
    "status.running": "#6d7cff"
    "status.waiting": "#f59e0b"
    "status.success": "#10b981"
    "status.partial": "#eab308"
    "status.danger": "#ef4444"
    "status.neutralEnd": "#94a3b8"
    "meter.normal": "#34d399"
    "meter.warning": "#fbbf24"
    "meter.exceeded": "#f87171"
    "severity.read": "#15803d"
    "severity.write": "#c2410c"
    "severity.destructive": "#b91c1c"
    "severity.blocked": "#7f1d1d"
    "state.hover": "rgba(255, 255, 255, 0.055)"
    "state.selected": "rgba(109, 124, 255, 0.16)"
    "state.disabled": "#18202c"
    "state.disabledPolicy": "#422006"
    "tone.accent.background": "#172131"
    "tone.accent.border": "#1f2944"
    "tone.accent.backgroundHover": "#1d2840"
    "tone.accent.borderHover": "#394682"
    "tone.danger.background": "#1d202c"
    "tone.danger.border": "#312630"
    "tone.danger.backgroundHover": "#2d252f"
    "tone.danger.borderHover": "#72363a"
    "dataviz.series.1": "#e88171"
    "dataviz.series.2": "#1db198"
    "dataviz.series.3": "#e979ad"
    "dataviz.series.4": "#1eb641"
    "dataviz.series.5": "#e073e8"
    "dataviz.series.6": "#54b21d"
    "dataviz.series.7": "#ad8dec"
    "dataviz.series.8": "#9fa41b"
    "dataviz.series.9": "#7f9bea"
    "dataviz.series.10": "#e18844"
    "dataviz.series.11": "#20adc2"
    "dataviz.series.12": "#ea7d8f"
    "dataviz.series.13": "#1db46e"
    "dataviz.series.14": "#e874cd"
    "dataviz.series.15": "#28b61e"
    "dataviz.series.16": "#c583eb"
    "dataviz.series.17": "#7cac1c"
    "dataviz.series.18": "#9794ee"
    "dataviz.series.19": "#c39720"
    "dataviz.series.20": "#52a4e3"
    "dataviz.sequential.1": "#6960d1"
    "dataviz.sequential.2": "#847dd9"
    "dataviz.sequential.3": "#9e98e1"
    "dataviz.sequential.4": "#b7b3e9"
    "dataviz.sequential.5": "#cecbf0"
  light:
    "surface.base": "#eff1f5"
    "surface.canvas": "#f3f5f8"
    "surface.subtle": "#f8f9fb"
    "surface.2": "#f8f9fb"
    "surface.raised": "#fcfdfe"
    "surface.elevated": "#ffffff"
    "surface.overlay": "rgba(12, 18, 28, 0.45)"
    "surface.glass": "rgba(252, 253, 254, 0.86)"
    "surface.timeline": "#f6f7f9"
    "surface.track": "rgba(12, 18, 28, 0.08)"
    "surface.tint.1": "rgba(79, 91, 213, 0.1)"
    "surface.tint.2": "rgba(4, 120, 87, 0.05)"
    "text.primary": "#0c121c"
    "text.secondary": "#33415a"
    "text.muted": "#4d5a6e"
    "text.faint": "#6b788c"
    "text.placeholder": "#4d5a6e"
    "text.inverse": "#f4f7fb"
    "text.monoPayload": "#1b2537"
    "border.subtle": "rgba(12, 18, 28, 0.07)"
    "border.default": "rgba(12, 18, 28, 0.12)"
    "border.strong": "rgba(12, 18, 28, 0.2)"
    "border.control": "rgba(12, 18, 28, 0.5)"
    "border.DEFAULT": "rgba(12, 18, 28, 0.12)"
    "accent.DEFAULT": "#4f5bd5"
    "accent.strong": "#3f4ac0"
    "accent.soft": "rgba(79, 91, 213, 0.14)"
    "accent.glow": "rgba(79, 91, 213, 0.22)"
    "status.queued": "#52607a"
    "status.running": "#4f5bd5"
    "status.waiting": "#b45309"
    "status.success": "#047857"
    "status.partial": "#a16207"
    "status.danger": "#c81e1e"
    "status.neutralEnd": "#3f4b5f"
    "meter.normal": "#047857"
    "meter.warning": "#b45309"
    "meter.exceeded": "#dc2626"
    "severity.read": "#15803d"
    "severity.write": "#c2410c"
    "severity.destructive": "#b91c1c"
    "severity.blocked": "#7f1d1d"
    "state.hover": "rgba(12, 18, 28, 0.05)"
    "state.selected": "rgba(79, 91, 213, 0.12)"
    "state.disabled": "#e2e8f0"
    "state.disabledPolicy": "#fef3c7"
    "tone.accent.background": "#f4f7fd"
    "tone.accent.border": "#e1e7fa"
    "tone.accent.backgroundHover": "#e5eafb"
    "tone.accent.borderHover": "#a8b6f0"
    "tone.danger.background": "#fcf5f5"
    "tone.danger.border": "#fae1de"
    "tone.danger.backgroundHover": "#fae5e3"
    "tone.danger.borderHover": "#eea49a"
    "dataviz.series.1": "#d45946"
    "dataviz.series.2": "#228f7d"
    "dataviz.series.3": "#d54e8d"
    "dataviz.series.4": "#22933d"
    "dataviz.series.5": "#ca45d3"
    "dataviz.series.6": "#4a9022"
    "dataviz.series.7": "#906adc"
    "dataviz.series.8": "#81851f"
    "dataviz.series.9": "#5a7cd8"
    "dataviz.series.10": "#bd6b2c"
    "dataviz.series.11": "#258c9c"
    "dataviz.series.12": "#d75369"
    "dataviz.series.13": "#22915d"
    "dataviz.series.14": "#d446b2"
    "dataviz.series.15": "#2a9322"
    "dataviz.series.16": "#ab5dd9"
    "dataviz.series.17": "#688b21"
    "dataviz.series.18": "#7773de"
    "dataviz.series.19": "#9b7c24"
    "dataviz.series.20": "#2f85c7"
    "dataviz.sequential.1": "#7d74dc"
    "dataviz.sequential.2": "#6e65d8"
    "dataviz.sequential.3": "#5c52d4"
    "dataviz.sequential.4": "#4539cd"
    "dataviz.sequential.5": "#3329a4"
typography:
  "font.sans": "Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
  "font.mono": "'JetBrains Mono', ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, monospace"
  "font.size.2xs": "10px"
  "font.size.xs": "11px"
  "font.size.sm": "12px"
  "font.size.base": "13px"
  "font.size.md": "14px"
  "font.size.lg": "16px"
  "font.size.xl": "20px"
  "font.lineHeight.2xs": "14px"
  "font.lineHeight.xs": "16px"
  "font.lineHeight.sm": "18px"
  "font.lineHeight.base": "20px"
  "font.lineHeight.md": "21px"
  "font.lineHeight.lg": "24px"
  "font.lineHeight.xl": "26px"
spacing:
  "space.1": "4px"
  "space.2": "8px"
  "space.3": "12px"
  "space.4": "16px"
  "space.5": "24px"
  "space.6": "32px"
  "space.7": "40px"
  "space.8": "48px"
radius:
  "radius.xs": "6px"
  "radius.sm": "9px"
  "radius.md": "12px"
  "radius.lg": "18px"
  "radius.xl": "24px"
  "radius.pill": "9999px"
motion:
  "motion.fast": "140ms cubic-bezier(0.2, 0, 0, 1)"
  "motion.standard": "240ms cubic-bezier(0.2, 0, 0, 1)"
  "motion.bounce": "300ms cubic-bezier(0.34, 1.56, 0.64, 1)"
  "motion.spin": "1000ms linear"
  "motion.instant": "90ms cubic-bezier(0.2, 0, 0, 1)"
  "motion.exit": "160ms cubic-bezier(0.4, 0, 1, 1)"
  "motion.slow": "420ms cubic-bezier(0.05, 0.7, 0.1, 1)"
  "motion.spring": "520ms linear(0, 0.075 5%, 0.242 10%, 0.435 15%, 0.616 20%, 0.766 25%, 0.878 30%, 0.967 36%, 1.015 42%, 1.037 50%, 1.033 60%, 1.012 75%, 1)"
  "motion.stagger": "45ms"
breakpoints:
  "breakpoint.sm": "560px"
  "breakpoint.md": "800px"
  "breakpoint.lg": "1080px"
---

# Conductor Design System

Version 0.20.0. Generated from the token source and component metadata at build time; do not edit by hand.

## Principles

- **Tokens only.** Every colour, length and duration is a `--cdt-*` CSS custom property. Never write a colour, `px` length or `ms` duration literal in component or page styles; read the token instead.
- **Dark is canonical.** The `dark` palette is the reference; other themes supply the same semantic keys with different values.
- **Cascade layers, no `!important`.** The stylesheet declares `@layer cdt.reset, cdt.base, cdt.layout, cdt.component, cdt.utility`. Unlayered consumer rules win by layer order.
- **Accessibility is delegated to Radix UI.** Do not hand-roll focus traps, roles or keyboard navigation for overlays, menus, selects, tabs or switches.
- **Status is never colour alone.** Status and severity always pair colour with an icon and a text label.

## Using the system

```tsx
import "@conductor-by-89soone/css"; // once, in the entry file
import "@conductor-by-89soone/css/agent.css"; // only where the Agent family (Conversation, Message, PromptInput, …) renders
import { Button } from "@conductor-by-89soone/react";
```

Set the theme on the root element: `<html data-cdt-theme="dark">`. Every component reads the current theme from the custom properties; nothing branches on the theme in JavaScript.

## Colour roles

The `colors` front matter lists every semantic colour per theme. Pick by role, never by value:

- `surface.*` for backgrounds, from `surface.base` (page) up through raised and overlay surfaces.
- `text.*` for copy: `text.primary`, `text.secondary`, `text.muted`; `text.faint` is for meta text only.
- `border.*` for edges; `border.control` outlines form controls.
- `accent*` for the brand action colour and focus; `focusRing` is the shared focus indicator.
- `status.*` and `severity.*` for state, always with an icon and a label.

Contrast: 244 of 244 declared pairs pass WCAG 2.1 AA across 2 themes (body 4.5:1, large and non-text 3:1); 0 fail.

## Motion

Motion tokens bind a duration and an easing (`motion.fast`, `motion.standard`, `motion.slow`, `motion.spring`, `motion.exit`, …); `motion.stagger` is a bare delay step. Use them as `transition: opacity var(--cdt-motion-fast)` and never add a second easing. Under `prefers-reduced-motion: reduce` every motion token becomes `0s`.

## Components

| Component | Family | Root class | Purpose |
| --- | --- | --- | --- |
| [Button](components/Button.md) | Actions | `cdt-btn` | A native button that triggers an action, with primary, secondary and ghost variants, tones, sizes, loading and policy-blocked states. |
| [IconButton](components/IconButton.md) | Actions | `cdt-btn cdt-btn--icon` | A compact square button that shows only an icon, for familiar actions where space is tight. |
| [Card](components/Card.md) | Surfaces | `cdt-card` | A bordered surface that groups related content, either static or as a single clickable target. |
| [CardGrid](components/CardGrid.md) | Surfaces | `cdt-card-grid` | A layout wrapper that arranges Cards into a responsive grid. |
| [Panel](components/Panel.md) | Surfaces | `cdt-panel` | A bordered container for a region of a page, rendered as a div, section or aside. |
| [Stack](components/Stack.md) | Layout | `cdt-stack` | Lays out children along one axis with a gap from the space scale. |
| [Grid](components/Grid.md) | Layout | `cdt-grid` | Arranges children in columns: as many as fit, or a fixed number that collapses to one on narrow screens. |
| [Separator](components/Separator.md) | Layout | `cdt-separator` | A thin rule that divides content, horizontally or vertically. |
| [Heading](components/Heading.md) | Typography | `cdt-heading` | A section heading whose level sets the document outline and whose size can be set apart from it. |
| [Text](components/Text.md) | Typography | `cdt-text` | Body and supporting text on the type scale, with a text tone and an optional monospaced face. |
| [Badge](components/Badge.md) | Status | `cdt-badge` | A small inline label for categories, counts or metadata, with tone styling and an optional icon. |
| [StatusBadge](components/StatusBadge.md) | Status | `cdt-badge cdt-status-badge` | Shows one of seven run or task statuses through colour, icon and text together. |
| [SeverityTag](components/SeverityTag.md) | Status | `cdt-badge cdt-severity-tag` | Marks the risk level of an operation as read, write, destructive or blocked, using colour, icon and text. |
| [Avatar](components/Avatar.md) | Status | `cdt-avatar` | A person or team shown by picture, falling back to initials when there is no picture or it fails to load. |
| [Table](components/Table.md) | Data | `cdt-table` | A styled native table with its own horizontal scroll container, for presenting rows of structured data. |
| [Timeline](components/Timeline.md) | Data | `cdt-timeline` | An ordered list of steps showing a sequence of events, with optionally selectable steps. |
| [CodeBlock](components/CodeBlock.md) | Data | `cdt-code-block` | Displays a preformatted block of code or JSON in a monospace font with horizontal scrolling. |
| [Kbd](components/Kbd.md) | Data | `cdt-kbd` | Renders a native kbd element to show a keyboard key or shortcut inline in text. |
| [Dialog](components/Dialog.md) | Overlays | `cdt-dialog` | A modal window, built on Radix Dialog, for a focused confirmation or short task that blocks the page. |
| [AlertDialog](components/AlertDialog.md) | Overlays | `cdt-alert-dialog` | A confirmation that interrupts the page and must be answered before anything else, for actions that are destructive or cannot be undone. |
| [Drawer](components/Drawer.md) | Overlays | `cdt-drawer` | A side panel on the left or right, built on Radix Dialog, for contextual detail that keeps the page visible beside it. |
| [Tooltip](components/Tooltip.md) | Overlays | `cdt-tooltip` | A short text label, built on Radix Tooltip, that appears on hover or keyboard focus of its trigger. |
| [DropdownMenu](components/DropdownMenu.md) | Overlays | `cdt-menu` | A menu of actions opened from a trigger, built on Radix Dropdown Menu, with optional icons and a danger tone. |
| [ContextMenu](components/ContextMenu.md) | Overlays | `cdt-menu cdt-context-menu` | A menu of actions on an area, opened by right-click, long press, Shift+F10 or the context-menu key, built on Radix Context Menu. |
| [Popover](components/Popover.md) | Overlays | `cdt-popover` | Non-modal floating content anchored to a trigger, built on Radix Popover, for small interactive panels. |
| [Field](components/Field.md) | Forms | `cdt-field` | Wraps a single form control with a label, optional description and error message, and wires them to the control. |
| [TextField](components/TextField.md) | Forms | `cdt-input` | A single-line native text input with solid or glass variants, sizes, an optional leading icon and invalid styling. |
| [TextArea](components/TextArea.md) | Forms | `cdt-textarea` | A multi-line native text area with solid or glass variants and invalid styling, defaulting to three rows. |
| [Select](components/Select.md) | Forms | `cdt-select__trigger` | A single-choice dropdown for form values, built on Radix Select, with a styled trigger and option list. |
| [Switch](components/Switch.md) | Forms | `cdt-switch` | An on or off toggle, built on Radix Switch, for settings that take effect immediately. |
| [Checkbox](components/Checkbox.md) | Forms | `cdt-checkbox` | A checkbox, built on Radix Checkbox, for selecting an option or agreeing to a statement. |
| [RadioGroup](components/RadioGroup.md) | Forms | `cdt-radio-group` | One choice from a short list of options that are all visible at once, such as a retention period or a deployment strategy. |
| [NumberInput](components/NumberInput.md) | Forms | `cdt-number-input` | Entry of a bounded number, such as a step limit, a retry count or a budget, with an optional unit and stepper buttons. |
| [Slider](components/Slider.md) | Forms | `cdt-slider` | Picks a number, or a range of two, on a track with draggable thumbs, built on Radix Slider. |
| [DatePicker](components/DatePicker.md) | Forms | `cdt-date-picker` | A single-date field whose trigger opens a calendar from react-day-picker inside a Radix popover. |
| [Banner](components/Banner.md) | Feedback | `cdt-banner` | Shows an inline page-level message in an info, warning or danger tone, with an optional title, icon and action. |
| [Toast](components/Toast.md) | Feedback | `cdt-toast` | A transient notification, built on Radix Toast, that confirms an action or reports a background result without interrupting the page. |
| [EmptyState](components/EmptyState.md) | Feedback | `cdt-empty-state` | Explains that an area has no content yet and offers an optional next step. |
| [Meter](components/Meter.md) | Feedback | `cdt-meter` | Shows a measured value within a known range, such as quota or usage, with optional warning and exceeded thresholds. |
| [ProgressRing](components/ProgressRing.md) | Feedback | `cdt-progress-ring` | Shows determinate progress toward a maximum as a compact ring with a visible text value. |
| [Spinner](components/Spinner.md) | Feedback | `cdt-spinner` | Indicates indeterminate, in-progress work with an animated ring and a required text label. |
| [Skeleton](components/Skeleton.md) | Feedback | `cdt-skeleton` | Holds the place of content that is loading, with a required text label. |
| [AppShell](components/AppShell.md) | Shell | `cdt-app-shell` | Provides the page frame with side navigation, an optional top bar, a skip link and a focusable main region. |
| [AppShellNavTrigger](components/AppShellNavTrigger.md) | Shell | `cdt-btn cdt-btn--ghost` | The button that opens and closes the AppShell navigation drawer on narrow screens. |
| [NavList](components/NavList.md) | Shell | `cdt-nav-list` | Renders the primary navigation links with optional section labels, delegating link rendering to the consumer's router. |
| [TopBar](components/TopBar.md) | Shell | `cdt-topbar` | Shows the page header with an eyebrow, a title, action slots and an optional menu button slot. |
| [Tabs](components/Tabs.md) | Interaction | `cdt-tabs` | Switches between related panels of content in the same place, built on Radix Tabs. |
| [ToggleGroup](components/ToggleGroup.md) | Interaction | `cdt-toggle-group` | A segmented control that switches a view or mode in place, such as list, board or timeline layouts of the same results. |
| [Collapsible](components/Collapsible.md) | Interaction | `cdt-collapsible` | Shows and hides one section of content behind a trigger, built on Radix Collapsible. |
| [Accordion](components/Accordion.md) | Interaction | `cdt-accordion` | A stack of sections that open and close in place, one or several at a time, built on Radix Accordion. |
| [Tree](components/Tree.md) | Interaction | `cdt-tree` | A hierarchy of items, such as files or folders, that expands and selects, built on Headless Tree. |
| [CommandPalette](components/CommandPalette.md) | Interaction | `cdt-command` | A modal search over a list of commands, built on Radix Dialog with a downshift combobox, for keyboard-first navigation and actions. |
| [Pagination](components/Pagination.md) | Interaction | `cdt-pagination` | Navigation between numbered pages of a long, server-paged list, with previous and next buttons and an ellipsis for skipped ranges. |
| [Combobox](components/Combobox.md) | Search workbench | `cdt-combobox` | Lets the user type a query and pick one option from a filtered list, built on Downshift. |
| [MultiSelect](components/MultiSelect.md) | Search workbench | `cdt-multi-select` | Lets the user choose several options from a searchable checkbox group and shows the choices as removable chips. |
| [FilterChip](components/FilterChip.md) | Search workbench | `cdt-filter-chip` | Shows one applied filter value with a button to remove it. |
| [FilterToolbar](components/FilterToolbar.md) | Search workbench | `cdt-filter-toolbar` | Lays out filter controls and chips in a single wrapping row. |
| [DataTable](components/DataTable.md) | Search workbench | `cdt-data-table` | Displays loaded search results with externally controlled sorting, ID-based row selection, column visibility and load-more paging. |
| [WorkbenchLayout](components/WorkbenchLayout.md) | Search workbench | `cdt-workbench` | Splits a results area from an optional inspector pane, with a slider to resize the inspector share. |
| [DetailInspector](components/DetailInspector.md) | Search workbench | `cdt-detail-inspector` | Shows details of the selected item in a labelled region with a close button that returns focus to the selecting control. |
| [PathList](components/PathList.md) | Search workbench | `cdt-path-list` | Shows a nested path tree where folders expand and leaf items can be selected. |
| [Breadcrumb](components/Breadcrumb.md) | Search workbench | `cdt-breadcrumb` | Wraps a trail of links showing where the current location sits in a hierarchy. |
| [CopyButton](components/CopyButton.md) | Search workbench | `cdt-copy-feedback` | Copies a value to the clipboard and announces whether the copy succeeded or failed. |
| [RelationGraph](components/RelationGraph.md) | Relations | `cdt-relation` | Shows a read-only graph of nodes and directed edges with an equivalent keyboard list and table of direction, state and evidence. |
| [ProcessingStatus](components/ProcessingStatus.md) | Operations | `cdt-processing-status` | Lists each processing stage with its own status, detail and an optional consumer-provided action. |
| [Conversation](components/Conversation.md) | Agent | `cdt-conversation` | A scrolling transcript of agent and user messages that stays pinned to the newest message while the reader is at the bottom. |
| [Message](components/Message.md) | Agent | `cdt-message` | One turn in a conversation, from the reader, another participant, the assistant or the system, with an optional avatar, actions, streaming caret and error state. |
| [PromptInput](components/PromptInput.md) | Agent | `cdt-prompt-input` | The composer for an agent chat: an auto-growing text area with a send button that becomes Stop while the agent responds. |
| [Reasoning](components/Reasoning.md) | Agent | `cdt-reasoning` | A collapsible block for the model's reasoning that opens while the model thinks and closes when it finishes. |
| [Tool](components/Tool.md) | Agent | `cdt-tool` | A collapsible record of one tool call: its name, status, JSON parameters, result and error. |
| [Confirmation](components/Confirmation.md) | Agent | `cdt-confirmation` | An approval card for an agent action that waits for the user to approve or reject, then shows the decision. |
| [Sources](components/Sources.md) | Agent | `cdt-sources` | A collapsed list of the sources an answer used, summarised as Used N sources. |
| [InlineCitation](components/InlineCitation.md) | Agent | `cdt-inline-citation` | A numbered citation inside answer text that opens a popover with the source title, description and link. |
| [Suggestions](components/Suggestions.md) | Agent | `cdt-suggestions` | A row of suggested prompts the user can send with one click. |
| [Suggestion](components/Suggestion.md) | Agent | `cdt-suggestion` | One suggested prompt button inside Suggestions; selecting it passes its full text to onSelect. |
| [Shimmer](components/Shimmer.md) | Agent | `cdt-shimmer` | A text shimmer that marks an in-progress status line such as Thinking. |

Every component page lists its props, keyboard interactions and accessibility notes. `tokens.md` lists every token with both theme values.