# CATALYST Command Center Design System

## Product Direction

CATALYST is now an enterprise command center, not a research splash page. The interface should feel precise, governed, and operational: dense enough for repeat use, quiet enough for serious technical buyers, and explicit about evidence and approvals.

## Tokens

| Token | Value | Use |
| --- | --- | --- |
| `--bg` | `#0b0d0e` | app background |
| `--surface` | `#111516` | panels and cards |
| `--surface-2` | `#171c1d` | controls and nested tool surfaces |
| `--line` | `#2c3533` | default borders |
| `--text` | `#f3f1ea` | primary text |
| `--muted` | `#a8ada6` | secondary text |
| `--cyan` | `#55d6c2` | primary action and active state |
| `--green` | `#93d977` | pass/success |
| `--amber` | `#e8b24a` | metadata and watch states |
| `--red` | `#ee6f7b` | fail/destructive warning |
| `--radius` | `8px` | panels, images, primary surfaces |
| `--radius-sm` | `6px` | controls and compact elements |

## Components

- Shell: left module navigation, sticky command bar, central workspace.
- Command bar: global intent input plus direct actions.
- KPI tile: one metric, one sublabel, no decorative nesting.
- Module card: product launcher with one primary action.
- Run ledger: compact table with module, run id, and status.
- Evidence drawer: selected run evidence plus raw API payload.
- Agent panel: transcript, benchmark button, and approval list.
- Approval gate: connector label, reason, and `Read` or `Approval` pill.
- Chart frame: stable aspect ratio, dark chart surface, nonblank canvas.
- Product workspace: controls, result table, protocol/governance panels.
- Empty state: compact SVG plus one operational sentence.

## Accessibility

- All controls require visible labels.
- Primary actions use `button` elements, not links.
- Tables keep real `thead` and `tbody` structure.
- Canvas charts include `aria-label`.
- Mobile layout must collapse to one column without horizontal scrolling.
- Text must not overlap, truncate critical labels, or sit inside unstable containers.

## Product Voice

Use disciplined decision-support language:

- Say `ranked candidate`, `validation gate`, `evidence`, `confounder`, `approval required`.
- Avoid theorem-proof claims in product UI.
- Keep scientific outputs framed as simulations, analogues, or decision support unless externally validated.

## Figma Status

Created file: `CATALYST Command Center — Product Redesign`

URL: https://www.figma.com/design/upAeRMfoiOX8UmcEKqvtJL

The file exists, but the Figma MCP Starter plan write limit prevented publishing the full token/component/screen system into the canvas during this build. The implemented CSS and this document are the current source of truth.