# CDSS — Design & UI Document

*(Note: The CDSS is primarily a headless backend microservice architecture. However, it includes a React frontend for Agent 1 and future-proofing UI rules).*

## 1. Visual Identity & Theme
* **Primary Color (Medical Trust):** Slate Blue (`#3b82f6` to `#1e40af`)
* **Secondary Color (Alerts):** Coral/Crimson (`#ef4444`) for critical clinical alerts or low confidence.
* **Success/Validation:** Emerald Green (`#10b981`) for high confidence (≥0.70) reasoning outputs.
* **Background:** Soft Gray (`#f8fafc`) for reduced eye strain during clinical data entry.
* **Text:** Dark Charcoal (`#0f172a`) for maximum readability.

## 2. Typography
* **Primary Font:** `Inter` or `Roboto` (Clean, legible, sans-serif, widely adopted in healthcare IT).
* **Headings:** Bold, high contrast.
* **Data points/Tables:** Monospace font (`JetBrains Mono` or `Fira Code`) for SNOMED CT codes and JSON structured outputs to ensure easy scanning.

## 3. UI/UX Principles
* **High Information Density:** Medical professionals need to see symptoms, conflicting evidence, and confidence scores simultaneously without excessive scrolling.
* **Traceability:** Every decision or finding presented to the user MUST have a clickable or visible attribution (e.g., `Source: PubMed 38192011`).
* **Clear State Representation:** 
  * "Gathering Evidence" (Spinner)
  * "Reasoning & Fusing" (Progress Bar)
  * "Refining (Feedback Loop Activated)" (Amber warning state indicating multi-pass evaluation).

## 4. Frontend Assets (Agent 1)
* Styled with Tailwind CSS.
* Core components: `PatientProfile.jsx`, `ChatInput.jsx`, `MessageBubble.jsx`.
* Uses standard accessible contrast ratios (WCAG AA compliant).