Design direction changed from Clinical Utilitarian to Clinical Luxury, updated all plans etc

Ralph/refs/ref-design-system.md

@@ -1,12 +1,12 @@
 # Reference: Visual Design System
 
-> The SINGLE SOURCE OF TRUTH for colors, typography, spacing, surfaces, and motion throughout the Clinical Record PMR. Aligned with the **Clinical Luxury** direction defined in CLAUDE.md.
+> The SINGLE SOURCE OF TRUTH for colors, typography, spacing, surfaces, and motion throughout the Clinical Record PMR. Follows the **Clinical Luxury** direction in CLAUDE.md.
 
 ---
 
 ## Design Philosophy
 
-This is a **premium portfolio** that uses the structure and metaphor of a GP clinical system — not a faithful NHS software clone. Real clinical systems (EMIS Web, SystmOne) are dense, border-heavy, and purely functional. We keep their *structure* (patient banner, sidebar navigation, record sections, tables, status indicators) but elevate the *execution* with refined typography, atmospheric depth, and considered whitespace.
+A **premium portfolio** that uses the structure and metaphor of a GP clinical system — not a faithful NHS software clone. Real clinical systems (EMIS Web, SystmOne) are dense, border-heavy, and purely functional. We keep their *structure* (patient banner, sidebar navigation, record sections, tables, status indicators) but elevate the *execution* with refined typography, atmospheric depth, and considered whitespace.
 
 The goal is contrast: clinical precision married to luxury refinement. The "wow" comes from recognizing the clinical metaphor while being surprised by how good it looks.
 
@@ -17,9 +17,9 @@ The goal is contrast: clinical precision married to luxury refinement. The "wow"
 **Light-mode only.** The metaphor demands it — clinical systems operate under bright consulting room lights. No dark mode.
 
 **Backgrounds:**
-- Main content area: `#F5F7FA` — cool light gray base. Add atmospheric depth: a very faint noise/grain texture overlay, or a subtle warm tint, so it feels like quality paper rather than a flat spreadsheet. The content surface should have *presence*.
+- Main content area: `#F5F7FA` — cool light gray base. Add atmospheric depth — a faint noise/grain texture overlay or a subtle warm tint — so the surface feels like quality paper, not a flat spreadsheet.
 - Card/panel surfaces: `#FFFFFF` — clean white. Cards float above the content surface via layered shadows (see Surfaces section).
-- Sidebar: `#1E293B` — dark blue-gray. The gravitas anchor. This dark chrome is what makes it feel like "serious software."
+- Sidebar: `#1E293B` — dark blue-gray. The gravitas anchor — dark chrome that reads as serious software.
 - Patient banner: `#334155` — lighter blue-gray with white text. Subtle drop shadow below to separate from content.
 - Login screen background: `#1E293B` — same as sidebar. Carries through to PMR entrance seamlessly.
 
@@ -30,7 +30,7 @@ The goal is contrast: clinical precision married to luxury refinement. The "wow"
 - On dark surfaces: `#FFFFFF` (white primary), `#94A3B8` (slate-400 secondary)
 
 **Accent and status colors:**
-- **NHS Blue `#005EB8`** — THE accent color. Buttons, active nav states, links, interactive elements. This is the actual NHS brand blue — it will be instantly recognized and is the strongest signal of the clinical metaphor. Use it confidently but not everywhere.
+- **NHS Blue `#005EB8`** — THE accent color. Buttons, active nav states, links, interactive elements. The actual NHS brand blue — instantly recognizable, the strongest signal of the clinical metaphor. Use it confidently but not everywhere.
 - Green `#22C55E` — active/resolved/current states. Status dots, current role indicators.
 - Amber `#F59E0B` — alerts, in-progress items. The clinical alert banner background.
 - Red `#EF4444` — urgent/critical. Used very sparingly — only genuinely important items.
@@ -47,12 +47,7 @@ The goal is contrast: clinical precision married to luxury refinement. The "wow"
 
 ## Typography
 
-Typography is the primary vehicle for the premium feel. The font choice must feel *designed* — intentional and distinctive — while still reading cleanly at small clinical-system sizes (11-14px).
-
-**Font selection:**
-- **UI / Body font**: Choose a distinctive geometric or humanist sans-serif with character. **Do not use** Inter, Roboto, Arial, or system-ui defaults — these read as generic/AI-generated. Candidates: **Satoshi**, **General Sans**, **Outfit**, **DM Sans**, or similar. The chosen font should have personality at 13px. Whichever is selected, configure it as the primary `font-family` across all UI elements.
-- **Monospace / Data font**: **Geist Mono** — for timestamps, coded entries, registration numbers, NHS numbers, tabular data values. This monospace texture is what sells the "clinical software" feel. Falls back to Fira Code.
-- **Terminal phase**: **Fira Code** — locked, do not change.
+See Claude.md for info on font choice. Typography carries the premium feel. The font choice must feel *designed* — intentional and distinctive — while reading cleanly at small clinical-system sizes (11-14px).
 
 **Type scale (tight, clinical):**
 - Patient banner name: [UI font] 600, 20px
@@ -69,7 +64,7 @@ Typography is the primary vehicle for the premium feel. The font choice must fee
 - Timestamps: Geist Mono 400, 11-12px
 - Alert banner text: [UI font] 500, 14px
 
-**Hierarchy through weight, not size.** Use 400/500/600/700 weight variations within a narrow size range. Bold section headers, medium labels, regular body. This keeps the clinical density while creating clear scannable hierarchy.
+**Hierarchy through weight, not size.** Use 400/500/600/700 weight variations within a narrow size range. Bold section headers, medium labels, regular body. This keeps the clinical density while creating clear, scannable hierarchy.
 
 ---
 
@@ -85,27 +80,27 @@ More generous than real clinical software. The clinical metaphor provides struct
 - **Border radius:** 4px default for cards, inputs, buttons (clinical precision). 12px exception for the login card only.
 - **Table row height:** 40px
 - **Section spacing:** 24px between content blocks
-- **Base unit:** 4px grid — but use it with more generosity than a real clinical system would
+- **Base unit:** 4px grid — applied more generously than in real clinical systems
 
 ---
 
 ## Surfaces & Depth
 
-This is where we diverge most from real clinical software. Real systems are flat and border-heavy. This project uses **shadows and layering** to create premium depth — while keeping borders where they're authentically clinical (tables, input fields).
+Our biggest departure from real clinical software. Real systems are flat and border-heavy; we use **shadows and layering** for depth — while keeping borders where they're authentically clinical (tables, input fields).
 
 **Cards:**
 - Border: `1px solid #E5E7EB` (keep the clinical border — it's authentic)
 - Shadow: Multi-layered — `0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03)`. Gentle float, not Material Design dramatic.
 - Border-radius: `4px`
 - Hover: Cards may lift very slightly — 1-2px translateY + shadow deepens to `0 2px 4px rgba(0,0,0,0.06), 0 8px 16px rgba(0,0,0,0.04)`. Restrained, not bouncy.
-- Card headers: Light gray `#F9FAFB` background with `1px solid #E5E7EB` bottom border. Uppercase title in [UI font] 600, 12-13px. This is the most "clinical" element — keep it precise.
+- Card headers: Light gray `#F9FAFB` background with `1px solid #E5E7EB` bottom border. Uppercase title in [UI font] 600, 12-13px. The most "clinical" element — keep it precise.
 
 **Tables:**
-- Full `<table>` markup with styled headers — this is where clinical authenticity lives.
+- Full `<table>` markup with styled headers — where clinical authenticity lives.
 - Table headers: `#F9FAFB` background, `1px solid #E5E7EB` borders.
 - Alternating rows: `#FFFFFF` / `#F9FAFB` — subtle but scannable.
 - Row hover: `#EFF6FF` background (blue tint).
-- Cell borders: `1px solid #E5E7EB` — keep full borders on tables. This is authentic.
+- Cell borders: `1px solid #E5E7EB` — keep full borders on tables. Authentic.
 
 **Sidebar:**
 - Background: `#1E293B`
@@ -131,21 +126,21 @@ Motion should feel **considered and premium** — never flashy, never gratuitous
 - Patient banner slides down: 200ms, ease-out
 - Sidebar slides from left: 250ms, ease-out, 50ms delay
 - Content fades in: 300ms, 100ms delay after sidebar
-- This staggered materialization is the single most impactful animation moment.
+- The staggered materialization — the most impactful animation.
 
 **Navigation switches:** Instant content swap. No crossfade, no slide. This preserves the "software application" feel — clinical systems switch tabs instantly.
 
 **Expandable content:** Height-only animation, 200ms, `ease-out`. Content grows/shrinks — no opacity fade.
 
-**Clinical alert entrance:** Spring animation (Framer Motion `type: "spring"`, moderate damping). This is the one element that *demands attention* — the spring overshoot is earned here.
+**Clinical alert entrance:** Spring animation (Framer Motion `type: "spring"`, moderate damping). The one element that *demands attention* — the spring overshoot is earned here.
 
 **Alert acknowledge:** Warning icon cross-fades to green checkmark (200ms) → hold 200ms → alert height collapses (200ms ease-out).
 
 **Hover states:** Subtle and immediate. Background-color transitions at 100ms. Card lifts are 1-2px max with shadow deepening. Think: OS-level responsiveness, not playful bouncing.
 
-**Login typing:** Character-by-character reveal: 30ms/char for username, 20ms/dot for password. Cursor blink at 530ms.
+**Login typing:** Character-by-character reveal at a natural pace: 80ms/char for username, 60ms/dot for password. Cursor blink at 530ms. After typing completes, "Log In" button becomes interactive — user clicks to proceed (not auto-triggered).
 
-**Patient banner condensation:** Smooth height transition (200ms) from 80px → 48px as user scrolls past 100px. Buttery smooth, no jank.
+**Patient banner condensation:** Height transition (200ms) from 80px → 48px as user scrolls past 100px. Buttery smooth, no jank.
 
 **`prefers-reduced-motion`:** All animations skip to final state instantly. Typing completes immediately. Alert appears without slide. Expand/collapse is instant. No exceptions.
 
@@ -153,7 +148,7 @@ Motion should feel **considered and premium** — never flashy, never gratuitous
 
 ## What Makes This Design Distinctive
 
-The memorability comes from **contrasts**:
+The design stands on **contrasts**:
 - Dark, serious sidebar next to warm, airy content
 - Small, precise monospace data in generous whitespace fields
 - NHS blue punching through an otherwise muted, restrained palette