+```
+
+### Tech Stack Integration
+
+- **React 18** with TypeScript strict mode
+- **Tailwind CSS** for all styling (no CSS-in-JS)
+- **Framer Motion 11** for expand/collapse animations
+- **Lucide React** for document type icons
+- **Geist Mono** font for tree-indented content (add to index.html)
diff --git a/Ralph/refs/ref-medications.md b/Ralph/refs/ref-medications.md
index af79d13..5d7045a 100644
--- a/Ralph/refs/ref-medications.md
+++ b/Ralph/refs/ref-medications.md
@@ -91,3 +91,180 @@ The history entries are styled in Geist Mono, 12px, with year markers as bold an
## Sortable Columns
Table columns are sortable by clicking the header. Clicking "Dose" sorts by proficiency descending. Clicking "Start" sorts chronologically. A small sort indicator arrow appears in the active sort column header. Default sort: by category grouping.
+
+---
+
+## Design Guidance (from /frontend-design)
+
+### Aesthetic Direction
+
+**Clinical-Utilitarian / NHS PMR Fidelity**
+
+This implementation follows the Clinical Record (Design 7) medications-as-skills metaphor with absolute fidelity to the specification. The aesthetic is clinical-utilitarian: light-mode only, border-heavy, table-driven, zero decorative flourish. Every design decision mirrors real NHS PMR systems (EMIS Web, SystmOne). The component is not themed loosely -- it is a faithful reproduction of how medications lists appear in actual GP clinical software, repurposed to present skills as active prescriptions.
+
+**Purpose:** Present 18 professional skills as an active medications list that clinicians will instantly recognize and recruiters will find navigable and information-dense.
+
+**Tone:** Institutional, functional, border-heavy. No shadows, no rounded corners beyond 4px, no gradients. Clinical systems are designed for rapid information retrieval under time pressure -- that same quality makes this an efficient skills display.
+
+**Constraints followed:**
+- Light-mode ONLY (clinical systems are light-mode by design)
+- NHS blue `#005EB8` as the sole accent color
+- Border radius capped at 4px
+- Inter for all text, Geist Mono for prescribing history data
+- All borders `1px solid #E5E7EB`
+- No decorative elements whatsoever
+
+**Differentiation:** The medications-as-skills mapping provides richer data than any traditional "skills list." Dose maps to proficiency, Frequency maps to usage patterns, Start maps to when the skill was acquired, and prescribing history shows the skill's evolution over time. This is not decoration -- it is genuinely useful information architecture.
+
+### Key Design Decisions
+
+#### 1. Three Category Tabs
+- **"Active Medications"** (8 technical skills), **"Clinical Medications"** (6 healthcare domain skills), **"PRN (As Required)"** (4 strategic/leadership skills)
+- Active tab: white background + NHS blue (`#005EB8`) 2px bottom border
+- Inactive tabs: `#F9FAFB` background, gray text, hover brightens
+- Count badges show the number of items per category
+- Full ARIA `role="tablist"`, `role="tab"`, `aria-selected`, `aria-controls` semantics
+
+#### 2. Semantic HTML Table
+- Proper `
`, ``, `
`, `
`, `
`, `
` markup
+- Five columns: Drug Name, Dose, Frequency, Start, Status
+- Headers: Inter 600, 13px, uppercase, 0.03em tracking, `#F9FAFB` background
+- Row height: 40px
+- Alternating `#FFFFFF` / `#F9FAFB` row backgrounds via CSS `:nth-child(even)`
+- Hover state: `#EFF6FF` (subtle blue tint) -- **no transform, no lift, no shadow**
+- Status dots: 6px green circles inline with "Active" text
+- All borders: `1px solid #E5E7EB`
+
+#### 3. Sortable Columns
+- Click any header to sort (ascending/descending toggle)
+- ChevronUp, ChevronDown, or ChevronsUpDown indicator in header
+- Sorting logic handles string, numeric (dose %), and date (year) columns
+- Default: no sort (original order preserved)
+
+#### 4. Expandable Prescribing History
+- Click any row (or arrow at row end) to expand
+- Uses Framer Motion `` for smooth height animation (0.2s)
+- History entries styled in Geist Mono 12px
+- Year markers bold, descriptions regular weight
+- Format: `2017 Started: Self-taught for data analysis automation`
+- Vertical timeline with connecting line on left
+
+#### 5. Mobile: Card Layout
+- Below 640px: Table hidden, cards displayed
+- Each card is a bordered block with stacked key-value pairs
+- No horizontal scroll required
+- Same expandable history behavior
+
+### Implementation Patterns / Code Snippets
+
+#### Types
+```typescript
+interface MedicationEntry {
+ drugName: string
+ dose: string
+ frequency: string
+ start: string
+ status: 'Active'
+ prescribingHistory: PrescribingEvent[]
+}
+
+interface PrescribingEvent {
+ year: string
+ label: string
+ description: string
+}
+
+type MedicationCategory = 'active' | 'clinical' | 'prn'
+```
+
+#### Tab Implementation
+```typescript
+const tabs: { key: MedicationCategory; label: string }[] = [
+ { key: 'active', label: 'Active Medications' },
+ { key: 'clinical', label: 'Clinical Medications' },
+ { key: 'prn', label: 'PRN (As Required)' },
+]
+
+{tabs.map(({ key, label }) => (
+
+))}
+```
+
+#### Table Row with Expand
+```typescript
+
+```
+
+#### Tailwind Classes Summary
+- **Container:** `border border-[#E5E7EB] rounded`
+- **Table headers:** `bg-[#F9FAFB] text-xs font-semibold uppercase tracking-wide text-gray-600`
+- **Row hover:** `hover:bg-[#EFF6FF]`
+- **Alternating rows:** `even:bg-[#F9FAFB] bg-white`
+- **Tab active:** `bg-white text-[#005EB8] border-b-2 border-[#005EB8]`
+- **Tab inactive:** `bg-[#F9FAFB] text-gray-600 hover:bg-white`
+- **Mono text:** `font-mono text-xs`
diff --git a/Ralph/refs/ref-problems.md b/Ralph/refs/ref-problems.md
index 6fc3547..fa195b1 100644
--- a/Ralph/refs/ref-problems.md
+++ b/Ralph/refs/ref-problems.md
@@ -58,3 +58,141 @@ Each problem row can be expanded to show a full narrative: what the problem was,
## Traffic Light Status Indicators
Traffic lights are 8px circles with the status colors (green, amber, red, gray). They appear inline before the code column. This is exactly how clinical systems indicate problem severity/status — it's an immediately scannable visual language.
+
+---
+
+## Design Guidance (from /frontend-design)
+
+### Aesthetic Direction
+
+**Clinical Utilitarian** — This is not a place for flashy gradients or playful animation. The metaphor demands the disciplined, functional aesthetic of an actual NHS clinical system. Think EMIS/SystmOne: white backgrounds, precise table layouts, 1px borders, quiet colour discipline. The visual power comes from the *content structure*, not decoration. The traffic light dots and expandable narratives do all the heavy lifting. Every pixel serves a clinical purpose.
+
+The distinctiveness comes from the *concept itself* — framing career achievements as a Problem List is the creative act. The execution must be restrained to sell the metaphor.
+
+### Key Design Decisions
+
+1. **Traffic Light Status Indicators (WCAG Critical)**
+ - 8px circles: green (`#22C55E`) for resolved, amber (`#F59E0B`) for in-progress
+ - **MUST ALWAYS be paired with text labels** — never dots alone (WCAG 1.4.1 requirement)
+ - Each status shows both the colored dot AND the text label (e.g., "● Resolved", "● In Progress")
+ - Implementation uses flexbox with gap-2 for dot-label pairing
+
+2. **Typography System**
+ - **Inter** for all body text, headers, and UI labels — clean, clinical, readable
+ - **Geist Mono** for codes and dates — SNOMED-style codes like `[EFF001]`, `[MGT001]` must be monospace
+ - Font sizes: 13px for table headers (uppercase, tracking-wider), 14px for body text
+ - Header styling: `font-inter font-semibold text-xs uppercase tracking-wider text-gray-400`
+
+3. **Color Palette (Locked)**
+ - Light-mode ONLY (clinical systems are light-mode by design)
+ - NHS Blue: `#005EB8` (Tailwind `text-pmr-nhsblue`) — used for links and accents
+ - Borders: `1px solid #E5E7EB` (gray-200) — consistent table borders
+ - Row hover: `#EFF6FF` (blue-50) — subtle clinical highlight
+ - Background: White cards on `#F5F7FA` (pmr-content) background
+ - Border radius: 4px max — clinical systems use sharp corners
+
+4. **Table Structure**
+ - Semantic HTML: `
`, ``, `
`, `
`, `
`, `
`
+ - Two separate tables: Active Problems (4 columns) and Resolved Problems (6 columns)
+ - Column widths fixed for Status (w-28), Code (w-28), Since/Resolved (w-28)
+ - Alternating row backgrounds not used — clean white with hover state only
+
+5. **Expandable Rows Pattern**
+ - Chevron icon in rightmost column indicates expandability
+ - Expanded content shows in a full-width sub-row below
+ - Animation: height transition 200ms ease-out (respects prefers-reduced-motion)
+ - Expanded background: `#F9FAFB` (gray-50) with narrative text and linked consultations
+
+6. **Mobile Layout**
+ - Card-based layout below breakpoint (isMobile from useBreakpoint hook)
+ - Each problem becomes a rounded card with stacked information
+ - Status and code on same line, problem description prominent
+ - Expandable via button press, showing narrative and linked consultations
+
+### Implementation Patterns
+
+**TrafficLight Component (WCAG Compliant):**
+```tsx
+function TrafficLight({ status }: { status: ProblemStatus }) {
+ const colorMap: Record = {
+ Active: { bg: 'bg-green-500', label: 'Active' },
+ 'In Progress': { bg: 'bg-amber-500', label: 'In Progress' },
+ Resolved: { bg: 'bg-green-500', label: 'Resolved' },
+ }
+
+ const { bg, label } = colorMap[status]
+
+ return (
+
+```
+
+**Linked Consultations Navigation:**
+```tsx
+
+```
+
+### Mobile Card Layout
+
+On mobile devices (`isMobile` from useBreakpoint hook), the table transforms into cards:
+- White background cards with `border border-gray-200 rounded`
+- Status dot + code on one line
+- Problem description as card title
+- Since/Resolved date below
+- Chevron indicates expandability
+- Expanded state shows narrative and linked consultations below
+
+### Accessibility Requirements
+
+1. **WCAG 1.4.1 Use of Color**: Never rely on color alone — traffic lights MUST have text labels
+2. **Semantic HTML**: Proper `
` structure with `
` for headers
+3. **ARIA**: `aria-expanded` on toggle buttons, `aria-label` on status dots
+4. **Motion**: Respect `prefers-reduced-motion` for expand/collapse animations
+5. **Focus management**: Linked consultation buttons are keyboard navigable
+
diff --git a/Ralph/refs/ref-referrals.md b/Ralph/refs/ref-referrals.md
index a6205f5..e4d6aa6 100644
--- a/Ralph/refs/ref-referrals.md
+++ b/Ralph/refs/ref-referrals.md
@@ -1,72 +1,159 @@
-# Reference: Referrals View (= Contact)
-
-> Extracted from goal.md — Referrals View section. Contact information presented as a clinical referral form.
-
---
-## Overview
+## Design Guidance (from /frontend-design)
-Contact information presented as a clinical referral form — the mechanism for "referring" a patient (Andy) to another service.
+### Aesthetic Direction
-## Referral Form Layout
+**Tone: Clinical Utilitarian** — This is an NHS-styled patient medical record system. The aesthetic is intentionally institutional: clean, functional, bureaucratic-in-a-charming-way. The humor comes from the deadpan application of clinical form conventions to a personal contact form. No flourishes, no gradients, no decorative frills. The beauty is in the precision of the grid, the crispness of the type hierarchy, and the tongue-in-cheek seriousness of it all.
-```
-+--[ New Referral ]-------------------------------------------------------+
-| |
-| Referring to: CHARLWOOD, Andrew (Mr) |
-| NHS Number: 221 181 0 |
-| |
-| Priority: ( ) Urgent (*) Routine ( ) Two-Week Wait |
-| |
-| Referrer Name: [________________________] |
-| Referrer Email: [________________________] |
-| Referrer Org: [________________________] (optional) |
-| |
-| Reason for Referral: |
-| [ ] |
-| [ ] |
-| [ ] |
-| |
-| Contact Method: ( ) Email ( ) Phone ( ) LinkedIn |
-| |
-| [ Cancel ] [ Send Referral ] |
-+-------------------------------------------------------------------------+
+**What makes it memorable**: The collision between NHS clinical form seriousness and the fact that you are "referring" to a person's contact page. The pre-filled "patient" header, the priority radio buttons with their wry tooltips, the reference number generation — all of this is a joke delivered with a completely straight face.
+
+### Key Design Decisions
+
+**Priority Radio Buttons (urgent/routine/2-week-wait)**
+
+| Priority | Color | Tooltip |
+|----------|-------|---------|
+| Urgent | Red (`#EF4444`) | "All enquiries are welcome, urgent or not." |
+| Routine | NHS Blue (`#005EB8`) | (default, no tooltip needed) |
+| Two-Week Wait | Amber (`#F59E0B`) | "NHS cancer referral pathway — this isn't that, but the spirit of promptness applies." |
+
+Each priority option features a colored dot indicator and supports hover tooltips via a tooltip component pattern.
+
+**Form Validation Patterns**
+
+- Real-time validation on blur
+- Error messages appear below invalid fields in red (`text-red-600`)
+- Disabled submit button until required fields are valid
+- Required fields: Referrer Name, Referrer Email
+- Email validation uses standard pattern matching
+- Organization field is optional
+
+**Design System Constraints (Locked)**
+
+| Token | Value | Tailwind Class |
+|-------|-------|----------------|
+| NHS Blue | `#005EB8` | `text-pmr-nhsblue` / `bg-pmr-nhsblue` |
+| Card border | `1px solid #E5E7EB` | `border-pmr-border` |
+| Input border | `1px solid #D1D5DB` | `border-pmr-border-dark` |
+| Border radius | `4px` | `rounded` |
+| Label font | Inter 500, 13px, gray-600 | `font-inter font-medium text-sm text-gray-600` |
+| Mono font | Geist Mono | `font-mono` (reference numbers) |
+| Input padding | `8px 12px` | `py-2 px-3` |
+| Focus state | NHS blue border + glow | `focus:border-pmr-nhsblue focus:ring-2 focus:ring-pmr-nhsblue/15` |
+
+### Implementation Patterns/Code Snippets
+
+**Priority Option Component Pattern**
+
+```tsx
+type Priority = 'urgent' | 'routine' | 'two-week-wait'
+
+const dotColors: Record = {
+ urgent: 'bg-red-500',
+ routine: 'bg-pmr-nhsblue',
+ 'two-week-wait': 'bg-amber-500',
+}
+
+const labelColors: Record = {
+ urgent: 'text-red-600',
+ routine: 'text-pmr-nhsblue',
+ 'two-week-wait': 'text-amber-600',
+}
```
-## Priority Toggle (tongue-in-cheek)
+**Form Input Styling Pattern**
-Three radio options styled like clinical referral priorities:
-- **Urgent**: Red label, red dot. Selectable but the tooltip reads "All enquiries are welcome, urgent or not."
-- **Routine**: Blue label, blue dot. Default selected.
-- **Two-Week Wait**: Amber label. Tooltip: "NHS cancer referral pathway - this isn't that, but the spirit of promptness applies."
+```tsx
+// Standard clinical form input
+
-This is the design's main moment of humor. The priority options are visually authentic to clinical referral forms, and the tongue-in-cheek tooltips reward exploration without undermining the professional tone.
-
-## Form Fields
-
-Standard clinical form inputs: `1px solid #D1D5DB` border, `4px` radius, `8px 12px` padding. Labels in Inter 500, 13px, gray-600, positioned above inputs. Focus state: border changes to NHS blue, subtle blue glow (`box-shadow: 0 0 0 3px rgba(0, 94, 184, 0.15)`).
-
-## Submit Button
-
-"Send Referral" in NHS blue (`#005EB8`), white text, full width of the right half of the form. On hover: darkens to `#004494`. On click: brief loading state (spinner icon), then a success message:
-
-```
-Checkmark Referral sent successfully
- Reference: REF-2026-0210-001
- Expected response time: 24-48 hours
+// Label styling
+
```
-The reference number is generated from the current date. The success state mimics the confirmation screen shown after submitting a clinical referral in EMIS.
+**Reference Number Generation**
-## Alternative Contact Methods (below the form)
-
-```
-+--[ Direct Contact ]-----------------------------------------------------+
-| Email: andy@charlwood.xyz [Send Email ->] |
-| Phone: 07795553088 [Call ->] |
-| LinkedIn: linkedin.com/in/andycharlwood [View Profile ->] |
-| Location: Norwich, UK |
-+-------------------------------------------------------------------------+
+```tsx
+function generateRefNumber(): string {
+ const now = new Date()
+ const year = now.getFullYear()
+ const month = String(now.getMonth() + 1).padStart(2, '0')
+ const day = String(now.getDate()).padStart(2, '0')
+ const seq = String(Math.floor(Math.random() * 999) + 1).padStart(3, '0')
+ return `REF-${year}-${month}${day}-${seq}`
+}
```
-Styled as a simple key-value table, same format as the Patient Demographics card in Summary view.
+**Form State Management Pattern**
+
+```tsx
+interface FormData {
+ priority: Priority
+ referrerName: string
+ referrerEmail: string
+ referrerOrg: string
+ reason: string
+ contactMethod: ContactMethod
+}
+
+interface FormErrors {
+ referrerName?: string
+ referrerEmail?: string
+}
+
+// Validation on submit
+const validate = (): boolean => {
+ const errors: FormErrors = {}
+ if (!formData.referrerName.trim()) {
+ errors.referrerName = 'Referrer name is required'
+ }
+ if (!formData.referrerEmail.trim()) {
+ errors.referrerEmail = 'Email is required'
+ } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.referrerEmail)) {
+ errors.referrerEmail = 'Please enter a valid email'
+ }
+ setErrors(errors)
+ return Object.keys(errors).length === 0
+}
+```
+
+**Success State Pattern**
+
+```tsx
+// After form submission
+
+
+
+ Referral sent successfully
+
+
+ Reference: {refNumber}
+
+
+ Expected response time: 24-48 hours
+
+
+```
+
+**Contact Method Radio Pattern**
+
+```tsx
+type ContactMethod = 'email' | 'phone' | 'linkedin'
+
+// Radio button with icon
+
+
+
+ Email
+
+```
\ No newline at end of file
diff --git a/Ralph/refs/ref-summary-alert.md b/Ralph/refs/ref-summary-alert.md
index 492d1c1..509d476 100644
--- a/Ralph/refs/ref-summary-alert.md
+++ b/Ralph/refs/ref-summary-alert.md
@@ -114,3 +114,196 @@ WARNING NOTE: Patient has developed a Python-based switching algorithm
```
This second alert reinforces the key technical achievement in clinical language. It appears only once (on first navigation to Consultations) and is dismissible with the same "Acknowledge" interaction.
+
+---
+
+## Design Guidance (from /frontend-design)
+
+### Aesthetic Direction
+
+**Clinical Precision Meets Professional Polish**
+
+The NHS clinical record aesthetic draws from real-world electronic patient record systems (EPR), balancing institutional gravitas with polished execution. Key visual principles:
+
+- **Light-mode ONLY** — Consistent with clinical systems that prioritize readability over dark aesthetics
+- **NHS blue (#005EB8)** — Institutional anchor color for headers and accents
+- **Card-based architecture** — All information lives in contained, bordered cards (1px solid #E5E7EB, 4px border-radius)
+- **Monospace for data** — Geist Mono for all coded entries, dates, and numerical values (creates clinical system authenticity)
+- **High information density** — Compact layouts that maximize data visibility (16px card padding, tight line-heights)
+- **Status dots** — Green/amber/red traffic light indicators for at-a-glance status assessment
+
+### Key Design Decisions
+
+**1. Spring Animation for Alert Slide-Down**
+
+The Clinical Alert uses a spring animation (Framer Motion `type: 'spring'`) rather than ease-out. This creates a subtle overshoot effect that feels "alive" — mimicking how real clinical alerts materialize in systems like EMIS or SystmOne.
+
+```
+Initial state: y: -100%, opacity: 0
+Animate to: y: 0, opacity: 1
+type: 'spring', stiffness: 300, damping: 25
+```
+
+**2. Acknowledge → Checkmark → Collapse Sequence**
+
+The dismissal interaction follows a deliberate three-phase sequence:
+
+1. **Acknowledge click** (0ms) — Button triggers dismissal state
+2. **Icon cross-fade** (200ms) — AlertTriangle fades out, CheckCircle fades in (green-600)
+3. **Hold beat** (200ms) — Checkmark holds briefly to confirm action completion
+4. **Height collapse** (200ms ease-out) — Alert height animates to 0, content slides up
+
+This sequence transforms dismissal from a jarring disappearance into a satisfying confirmation action.
+
+**3. Typography Hierarchy**
+
+- **Card headers**: Inter 600, 14px, uppercase, letter-spacing-wide — creates clear section delineation
+- **Labels**: Inter 500, 13px, gray-500, right-aligned — mimics clinical form layout
+- **Values**: Inter 400, 14px, gray-900, left-aligned — primary data focus
+- **Coded values**: Geist Mono, 12px — all dates, IDs, percentages, status codes
+
+### Implementation Patterns
+
+**ClinicalAlert Component**
+
+```typescript
+// State machine for alert lifecycle
+type AlertState = 'visible' | 'acknowledging' | 'dismissing' | 'dismissed'
+
+// Props interface
+interface ClinicalAlertProps {
+ variant: 'warning' | 'note'
+ icon: typeof AlertTriangle | typeof Info
+ message: string
+ onDismiss: () => void
+ storageKey?: string // For session persistence
+}
+
+// Animation variants
+const alertVariants = {
+ hidden: { y: '-100%', opacity: 0 },
+ visible: {
+ y: 0,
+ opacity: 1,
+ transition: { type: 'spring', stiffness: 300, damping: 25 }
+ },
+ exit: {
+ height: 0,
+ opacity: 0,
+ transition: { duration: 0.2, ease: 'easeOut' }
+ }
+}
+
+const iconVariants = {
+ warning: { scale: 1, opacity: 1 },
+ acknowledged: {
+ scale: [1, 1.1, 1],
+ opacity: [1, 0],
+ transition: { duration: 0.2 }
+ }
+}
+```
+
+**SummaryView Component**
+
+```typescript
+// Grid layout structure
+const layoutConfig = {
+ container: 'grid grid-cols-1 md:grid-cols-2 gap-4',
+ demographics: 'col-span-full', // Spans both columns
+ problems: 'col-span-1',
+ medications: 'col-span-1',
+ consultation: 'col-span-full'
+}
+
+// Card header pattern
+const CardHeader = ({ title }: { title: string }) => (
+