# Conductor Design System

> Dark-first design tokens, a framework-agnostic layered stylesheet and Radix-based React primitives for operational interfaces. Three npm packages: @conductor-by-89soone/tokens, @conductor-by-89soone/css and @conductor-by-89soone/react.

Version 0.20.0. Import the stylesheet once, set `data-cdt-theme` on the root element, and style only through `--cdt-*` custom properties. Every page below is generated from the same sources as the human docs.

## Start here

- [DESIGN.md](/design-system/DESIGN.md): token values per theme, principles and the component index
- [Tokens](/design-system/tokens.md): every token with its tier, both theme values and usage

## Components

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

## Optional

- [Docs site](/design-system/): live previews, foundations and usage guidelines for people