From 587115ef157ba7d35a29588f5ae3e0b08e87211b Mon Sep 17 00:00:00 2001 From: BigSimmo <87357024+BigSimmo@users.noreply.github.com> Date: Fri, 3 Jul 2026 14:11:05 +0800 Subject: [PATCH 1/2] docs: rewrite chat-UI plan + component map onto Aegean Graphite tokens Rewrites the colour language in clinical-chat-ui-implementation-plan.md and clinical-chat-ui-component-map.md in-body onto the Clinical White / Aegean Graphite role tokens (--command graphite for primary command, --clinical-accent Aegean for clinical identity, --success/--warning/--danger for status/safety, neutral --surface-* for panels), replacing the pre-split deep-teal/pale-teal/clinical-sand/blue-grey palette. The prior 'superseded' banners become dated 'revised' notes. Layout, interaction, iteration, and component/file mapping content is unchanged. Co-Authored-By: Claude Opus 4.8 --- docs/clinical-chat-ui-component-map.md | 24 ++++--- docs/clinical-chat-ui-implementation-plan.md | 66 +++++++++++--------- 2 files changed, 46 insertions(+), 44 deletions(-) diff --git a/docs/clinical-chat-ui-component-map.md b/docs/clinical-chat-ui-component-map.md index c95e81a16..d8016580d 100644 --- a/docs/clinical-chat-ui-component-map.md +++ b/docs/clinical-chat-ui-component-map.md @@ -2,7 +2,7 @@ Date: 2026-06-24 -> **Colour direction superseded (July 2026).** This Phase-2 mapping artifact is retained as history. Its colour aliases ("deep teal", "pale teal", "clinical sand", "document blue-grey") predate the **Clinical White / Aegean Graphite** role tokens now in `globals.css`; see [`redesign/02-design-direction.md`](redesign/02-design-direction.md) and [`redesign/permanent-colour-direction.md`](redesign/permanent-colour-direction.md). Read colour references as the role tokens `--command` (graphite), `--clinical-accent` (Aegean), and `--success` (green, success-only). +> **Revised 2026-07-03 — colour aligned to Clinical White / Aegean Graphite.** The colour aliases in this Phase-2 map have been rewritten in-body onto the role tokens now in `globals.css`: `--command` (graphite) for primary command, `--clinical-accent` (Aegean) for clinical identity, and `--success` (green) for status only. See [`redesign/02-design-direction.md`](redesign/02-design-direction.md) and [`redesign/permanent-colour-direction.md`](redesign/permanent-colour-direction.md). The component/file mapping and preservation rules are unchanged from the original 2026-06-24 draft. ## Purpose @@ -138,7 +138,7 @@ Expected changes: - Add visual variants for: - default evidence row - - clinical notes sand row + - clinical notes row (neutral `--surface-subtle`, no sand tint) - compact daily drawer - Ensure right-aligned chevrons are consistent. - Keep accessible labels and state. @@ -222,7 +222,7 @@ Expected additions: Expected refinements: -- Make active teal/pale teal/sand/blue-grey use consistent tokens. +- Route active/selected, source-backed, and evidence states through the `--clinical-accent` role tokens; keep primary command on `--command`; use neutral `--surface-subtle` for quiet panels. - Reduce dependency on heavy dashboard cards for answer surfaces. - Keep focus styles visible. @@ -255,14 +255,12 @@ Final role: Expected changes: -- Add clinical chat colour aliases if needed: - - deep teal - - pale teal - - clinical sand - - document blue-grey - - table blue-grey - - amber dot - - green ready dot +- Use the Clinical White / Aegean Graphite role tokens already defined here; do not reintroduce ad-hoc chat aliases: + - `--command` / `--command-hover` (graphite command) + - `--clinical-accent` / `--clinical-accent-soft` / `--clinical-accent-border` (Aegean evidence/selected/send/focus) + - `--info` (document/search signal) + - `--success` / `--warning` / `--danger` (status dots and safety states) + - neutral `--surface` / `--surface-subtle` / `--surface-inset` for canvas, quiet panels, and table headers - Ensure reduced-motion behavior covers new sheet/popover/accordion animation. - Ensure mobile form controls stay at 16px minimum. @@ -278,7 +276,7 @@ High-risk areas: Implementation note: -Prefer adding new aliases over changing global brand tokens until visual comparison is complete. +Prefer composing the existing role tokens over introducing new global colour tokens; only change the root palette when the design direction itself changes. ## Component behavior map @@ -342,7 +340,7 @@ Current source: Final behavior: - Show collapsed row only when useful. -- Pale sand row. +- Neutral quiet row (`--surface-subtle`), no sand tint. - Open detail compactly. Needed adaptation: diff --git a/docs/clinical-chat-ui-implementation-plan.md b/docs/clinical-chat-ui-implementation-plan.md index d0f045fce..5c4c2b17d 100644 --- a/docs/clinical-chat-ui-implementation-plan.md +++ b/docs/clinical-chat-ui-implementation-plan.md @@ -2,7 +2,7 @@ Date: 2026-06-23 -> **Colour direction superseded (July 2026).** The layout, interaction, and answer-first plan below still stands, but its colour language predates the **Clinical White / Aegean Graphite** role-split; see [`redesign/02-design-direction.md`](redesign/02-design-direction.md) and [`redesign/permanent-colour-direction.md`](redesign/permanent-colour-direction.md). Where this doc says "teal", read the role tokens: `--command` (graphite) for primary actions and `--clinical-accent` (Aegean blue-teal) for evidence/selected/send/focus; green is success-only. +> **Revised 2026-07-03 — colour aligned to Clinical White / Aegean Graphite.** The functional-colour and colour-specification sections below have been rewritten in-body onto the role-split token system: `--command` (graphite) for primary command, `--clinical-accent` (Aegean blue-teal) for clinical identity (evidence/selected/send/focus), and `--success` (green) for status only. See [`redesign/02-design-direction.md`](redesign/02-design-direction.md) and [`redesign/permanent-colour-direction.md`](redesign/permanent-colour-direction.md). The layout, interaction, and iteration plan are unchanged from the original 2026-06-23 draft. ## Purpose @@ -97,17 +97,18 @@ Admin/setup/indexing/readiness controls should remain in Settings, Guide, upload ### 4. Functional colour only -Colour should communicate state or meaning: +Colour communicates state or meaning through role tokens, never decoration. The accent is role-split: graphite carries command, Aegean carries clinical identity. -- Deep teal: primary action, active Answer tab, source-backed state, send button. -- Pale teal: active/source-backed wash. -- Clinical sand: clinical notes only. -- Muted blue-grey: document/search surfaces. -- Amber dot: review due/older source status only. -- Green dot: ready/current/profile status only. -- Grey dot: low-confidence/OCR uncertainty only. +- `--command` (graphite): primary action, New chat, primary CTAs. Command is never teal or green. +- `--clinical-accent` (Aegean): active Answer tab, source-backed/evidence state, send button, focus. +- `--clinical-accent-soft`: the quiet active/source-backed wash and small evidence chips. +- Clinical notes: a neutral quiet surface (`--surface-subtle`); safety/caution content inside uses `--warning`/`--danger`, not a warm tint. +- `--info` (blue): document/search surfaces where clinical confidence is not implied. +- `--warning` dot: review due/older source status only. +- `--success` dot: ready/current/profile status only. +- Muted/neutral dot: low-confidence/OCR uncertainty only. -Avoid decorative colour and avoid colouring every chip. +Avoid decorative colour, avoid colouring every chip, and do not map both command and clinical identity to a single accent. ### 5. Mobile is stricter @@ -135,7 +136,7 @@ Recommended scale: | Bullets | 14-15px | 450-550 | 1.55-1.65 | No bullet icons | | Sidebar labels | 13px | 500-600 | 1.3 | Icons secondary | | Metadata/chips | 12-13px | 500-600 | 1.25 | Avoid tiny unreadable text | -| Table header | 12-13px | 600 | 1.25 | Blue-grey header | +| Table header | 12-13px | 600 | 1.25 | Neutral surface header | | Table cells | 12-13px | 450-500 | 1.35 | Accessible expanded view required | | Mobile composer | 15-16px | 400-500 | 1.3 | Prevent mobile zoom | @@ -147,25 +148,28 @@ Reading constraints: ## Colour specification -Target tokens: - -| Token | Value | Use | -| ------------------ | ----------------------------------- | -------------------------------------------- | -| Deep teal | `#006C67` | active tab, send, source capsule text/border | -| Pale teal | `#E7F4F2` | active tab/source capsule background | -| Clinical sand | `#F7F1E6` | Clinical notes row only | -| Document blue-grey | `#EEF3F6` | Documents mode/search surfaces | -| Table blue-grey | `#F4F7F8` | Table header | -| Amber dot | `#C88719` | older/review-due source dot only | -| Ready green dot | `#1A8F5A` | profile/current/high-confidence dot only | -| Ink navy | existing app ink token or `#13232B` | primary text | +Use the Clinical White / Aegean Graphite role tokens defined in `src/app/globals.css` (full palette and dark-mode values in [`redesign/permanent-colour-direction.md`](redesign/permanent-colour-direction.md)). Reference the tokens, not raw hex; the light values below are for orientation only. + +| Role token | Light value | Use | +| -------------------------------- | --------------------- | ------------------------------------------------------------------------------- | +| `--command` | `#111827` | primary action, New chat, primary CTAs | +| `--command-hover` | `#0B1220` | command hover/pressed | +| `--clinical-accent` | `#0B6F86` | active Answer tab, send, source capsule text/border, focus | +| `--clinical-accent-soft` | `#E7F6F8` | active tab / source capsule / small evidence chip wash | +| `--clinical-accent-border` | `#B9E4EA` | selected/evidence borders | +| `--info` | `#2563EB` | document/search signal (no clinical confidence implied) | +| `--success` | `#0F7A49` | ready/current/high-confidence dot only | +| `--warning` | `#A15C07` | review-due/older source dot; caution states | +| `--danger` | `#B42318` | critical/safety states only | +| `--surface` / `--surface-subtle` | `#FFFFFF` / `#F7F8FA` | canvas and quiet nested surfaces (documents mode, table header, clinical notes) | +| `--text` / `--text-heading` | `#101418` / `#080B0F` | primary text and headings | Rules: -- Teal is the only strong brand/action colour. -- Sand must not become a generic panel colour. -- Amber must not appear as large warning backgrounds unless there is a serious warning. -- Green checks should be minimized; source-backed should use teal. +- The accent is role-split: `--command` (graphite) carries primary command; `--clinical-accent` (Aegean) carries clinical identity (evidence/selected/send/focus). Do not collapse both into one accent. +- The canvas is true white — no warm sand/cream tint. Clinical notes and other nested areas use neutral `--surface-subtle`, not a coloured panel. +- Amber (`--warning`) must not appear as a large background unless there is a serious warning. +- Green (`--success`) is success/ready only; source-backed state uses `--clinical-accent`, never green. ## Icon specification @@ -210,9 +214,9 @@ Mapping: Status: - Use dots instead of warning icons in normal source metadata. -- Green dot: current/high confidence. -- Amber dot: review due/older source. -- Grey dot: low confidence/OCR uncertainty. +- `--success` dot: current/high confidence. +- `--warning` dot: review due/older source. +- Muted/neutral dot: low confidence/OCR uncertainty. ## Component mapping @@ -330,7 +334,7 @@ Clinical notes 2 Style: -- Pale sand background only. +- Neutral quiet surface (`--surface-subtle`) only — no warm sand tint. - Right chevron. - Compact collapsed default. From d89e8505eb038f140870107e9726b79afce1fb91 Mon Sep 17 00:00:00 2001 From: BigSimmo <87357024+BigSimmo@users.noreply.github.com> Date: Fri, 3 Jul 2026 14:21:48 +0800 Subject: [PATCH 2/2] docs: format chat UI implementation plan --- docs/clinical-chat-ui-implementation-plan.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/clinical-chat-ui-implementation-plan.md b/docs/clinical-chat-ui-implementation-plan.md index 5c4c2b17d..223660684 100644 --- a/docs/clinical-chat-ui-implementation-plan.md +++ b/docs/clinical-chat-ui-implementation-plan.md @@ -153,7 +153,7 @@ Use the Clinical White / Aegean Graphite role tokens defined in `src/app/globals | Role token | Light value | Use | | -------------------------------- | --------------------- | ------------------------------------------------------------------------------- | | `--command` | `#111827` | primary action, New chat, primary CTAs | -| `--command-hover` | `#0B1220` | command hover/pressed | +| `--command-hover` | `#0B1220` | command hover/pressed | | `--clinical-accent` | `#0B6F86` | active Answer tab, send, source capsule text/border, focus | | `--clinical-accent-soft` | `#E7F6F8` | active tab / source capsule / small evidence chip wash | | `--clinical-accent-border` | `#B9E4EA` | selected/evidence borders |