diff --git a/CLAUDE.md b/CLAUDE.md index 08de8b3..3a41114 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -28,7 +28,7 @@ No test framework is configured. 1. **BootSequence** — Terminal typing animation (~4s), green-on-black aesthetic. Fira Code font, matrix-green palette. **Locked — do not change.** 2. **ECGAnimation** — Canvas-based heartbeat animation with mask-based letter tracing. Background transitions from black to `#1E293B`. **Locked — do not change.** -3. **LoginScreen** — Animated login card on dark background. Auto-types credentials, transitions to PMR. This phase onward is open to design evolution. +3. **LoginScreen** — Animated login card on dark background. Types credentials at a natural pace, then presents an interactive "Log In" button for the user to click. This phase onward is open to design evolution. 4. **PMRInterface** — The main portfolio experience: patient banner + clinical sidebar + scrollable content views. ### Key Patterns @@ -64,7 +64,13 @@ The aesthetic direction is **"Clinical Luxury"** — the precision and informati Typography is the primary vehicle for premium feel. Avoid generic system fonts. -- **UI / Body**: Use a distinctive geometric or humanist sans-serif with character — **not** Inter, Roboto, or system defaults. Choose something with personality that still reads cleanly at small sizes (11-14px range). Candidates: Satoshi, General Sans, Outfit, DM Sans, or similar. The chosen font should feel "designed" rather than "default." +- **UI / Body — two candidates to evaluate (build with both, then choose):** + - **Elvaro Grotesque** (by TabojaStudio) — Modern grotesque sans-serif. 7 weights: Light (300), Regular (400), Medium (500), SemiBold (600), Bold (700), ExtraBold (800), Black (900). Also available as variable font. The "grotesque" classification carries institutional credibility (Helvetica/Akzidenz-Grotesk lineage) while feeling distinctly premium. Slightly condensed proportions suit data-dense UI. + - **Blumir** (by VisualCreativeStd) — Geometric-humanist hybrid, "blends geometric precision." 7 weights: Thin (100), ExtraLight (200), Light (300), Regular (400), Medium (500), SemiBold (600), Bold (700) — plus oblique variants for each. Also available as variable font. More refined/luxurious feel than Elvaro. + - Both fonts are sourced from Envato (licensed), stored locally in `Fonts/`. Web font files (WOFF/WOFF2) are available for both. **Do not use Inter, Roboto, or system defaults** — these read as generic. + - Font files for web: + - Elvaro: `Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-*.woff2` + - Blumir: `Fonts/blumir-font-family/WOFF/Blumir-VF.woff2` (variable font) - **Monospace / Data**: Geist Mono for timestamps, coded entries, registration numbers, and tabular data. This creates the "technical texture" that sells the clinical metaphor. - **Terminal phase**: Fira Code — locked, do not change. - **Type scale**: Keep it tight. Clinical systems use small text. Headings 15-18px, body 13-14px, labels 11-12px. Precision over drama. @@ -96,7 +102,8 @@ Real clinical software is flat and border-heavy. This project should use shadows Motion should feel considered and premium, never flashy: - **Entrance animations**: The PMR interface materializes in sequence — banner slides down → sidebar slides from left → content fades in. Quick (200-300ms) with easing. -- **Login transition**: Card scales slightly and fades. Background carries over to PMR (both are `#1E293B`-derived). +- **Login typing**: 80ms/char for username, 60ms/dot for password. Natural, readable pace. After typing completes, "Log In" button becomes interactive — user clicks to proceed. +- **Login transition**: On button click, card scales slightly and fades. Background carries over to PMR (both are `#1E293B`-derived). - **View switching**: Instant, no transition between views. This preserves the "software application" feel. - **Expandable content**: Height-only animation, 200ms ease-out. Content grows/shrinks — no opacity fade. - **Hover states**: Subtle, immediate. Background color shifts, not transforms. Think: OS-level responsiveness. diff --git a/Fonts/Elvaro Grotesque Sans Family/OTF/TBJElvaro-Black.otf b/Fonts/Elvaro Grotesque Sans Family/OTF/TBJElvaro-Black.otf new file mode 100644 index 0000000..9aa5a02 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/OTF/TBJElvaro-Black.otf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/OTF/TBJElvaro-Bold.otf b/Fonts/Elvaro Grotesque Sans Family/OTF/TBJElvaro-Bold.otf new file mode 100644 index 0000000..d8e9776 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/OTF/TBJElvaro-Bold.otf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/OTF/TBJElvaro-ExtraBold.otf b/Fonts/Elvaro Grotesque Sans Family/OTF/TBJElvaro-ExtraBold.otf new file mode 100644 index 0000000..a4fc816 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/OTF/TBJElvaro-ExtraBold.otf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/OTF/TBJElvaro-Light.otf b/Fonts/Elvaro Grotesque Sans Family/OTF/TBJElvaro-Light.otf new file mode 100644 index 0000000..657300a Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/OTF/TBJElvaro-Light.otf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/OTF/TBJElvaro-Medium.otf b/Fonts/Elvaro Grotesque Sans Family/OTF/TBJElvaro-Medium.otf new file mode 100644 index 0000000..3177d09 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/OTF/TBJElvaro-Medium.otf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/OTF/TBJElvaro-Regular.otf b/Fonts/Elvaro Grotesque Sans Family/OTF/TBJElvaro-Regular.otf new file mode 100644 index 0000000..3004902 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/OTF/TBJElvaro-Regular.otf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/OTF/TBJElvaro-SemiBold.otf b/Fonts/Elvaro Grotesque Sans Family/OTF/TBJElvaro-SemiBold.otf new file mode 100644 index 0000000..f80eb9a Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/OTF/TBJElvaro-SemiBold.otf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/TTF/TBJElvaro-Black.ttf b/Fonts/Elvaro Grotesque Sans Family/TTF/TBJElvaro-Black.ttf new file mode 100644 index 0000000..c9abc35 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/TTF/TBJElvaro-Black.ttf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/TTF/TBJElvaro-Bold.ttf b/Fonts/Elvaro Grotesque Sans Family/TTF/TBJElvaro-Bold.ttf new file mode 100644 index 0000000..2a10266 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/TTF/TBJElvaro-Bold.ttf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/TTF/TBJElvaro-ExtraBold.ttf b/Fonts/Elvaro Grotesque Sans Family/TTF/TBJElvaro-ExtraBold.ttf new file mode 100644 index 0000000..9d34a52 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/TTF/TBJElvaro-ExtraBold.ttf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/TTF/TBJElvaro-Light.ttf b/Fonts/Elvaro Grotesque Sans Family/TTF/TBJElvaro-Light.ttf new file mode 100644 index 0000000..9ceaf88 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/TTF/TBJElvaro-Light.ttf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/TTF/TBJElvaro-Medium.ttf b/Fonts/Elvaro Grotesque Sans Family/TTF/TBJElvaro-Medium.ttf new file mode 100644 index 0000000..1faf6c4 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/TTF/TBJElvaro-Medium.ttf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/TTF/TBJElvaro-Regular.ttf b/Fonts/Elvaro Grotesque Sans Family/TTF/TBJElvaro-Regular.ttf new file mode 100644 index 0000000..104c5f7 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/TTF/TBJElvaro-Regular.ttf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/TTF/TBJElvaro-SemiBold.ttf b/Fonts/Elvaro Grotesque Sans Family/TTF/TBJElvaro-SemiBold.ttf new file mode 100644 index 0000000..a6e3e2a Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/TTF/TBJElvaro-SemiBold.ttf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/Variable-Font/TBJ Elvaro-VF.ttf b/Fonts/Elvaro Grotesque Sans Family/Variable-Font/TBJ Elvaro-VF.ttf new file mode 100644 index 0000000..df0de98 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/Variable-Font/TBJ Elvaro-VF.ttf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Black.woff b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Black.woff new file mode 100644 index 0000000..393bff4 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Black.woff differ diff --git a/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Black.woff2 b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Black.woff2 new file mode 100644 index 0000000..5425b0e Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Black.woff2 differ diff --git a/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Bold.woff b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Bold.woff new file mode 100644 index 0000000..e74596c Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Bold.woff differ diff --git a/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Bold.woff2 b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Bold.woff2 new file mode 100644 index 0000000..f91226b Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Bold.woff2 differ diff --git a/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-ExtraBold.woff b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-ExtraBold.woff new file mode 100644 index 0000000..f2e5ffb Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-ExtraBold.woff differ diff --git a/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-ExtraBold.woff2 b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-ExtraBold.woff2 new file mode 100644 index 0000000..05b2ac9 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-ExtraBold.woff2 differ diff --git a/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Light.woff b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Light.woff new file mode 100644 index 0000000..51ca46e Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Light.woff differ diff --git a/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Light.woff2 b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Light.woff2 new file mode 100644 index 0000000..2e5ffd8 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Light.woff2 differ diff --git a/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Medium.woff b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Medium.woff new file mode 100644 index 0000000..cff95e5 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Medium.woff differ diff --git a/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Medium.woff2 b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Medium.woff2 new file mode 100644 index 0000000..c59b4ae Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Medium.woff2 differ diff --git a/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Regular.woff b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Regular.woff new file mode 100644 index 0000000..461c8da Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Regular.woff differ diff --git a/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Regular.woff2 b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Regular.woff2 new file mode 100644 index 0000000..30af6b3 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-Regular.woff2 differ diff --git a/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-SemiBold.woff b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-SemiBold.woff new file mode 100644 index 0000000..ce0093e Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-SemiBold.woff differ diff --git a/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-SemiBold.woff2 b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-SemiBold.woff2 new file mode 100644 index 0000000..5185b32 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-SemiBold.woff2 differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/._OTF b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/._OTF new file mode 100644 index 0000000..f29258b Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/._OTF differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/._TTF b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/._TTF new file mode 100644 index 0000000..13e60ec Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/._TTF differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/._Variable-Font b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/._Variable-Font new file mode 100644 index 0000000..a2247f4 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/._Variable-Font differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/._WOFF b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/._WOFF new file mode 100644 index 0000000..9852359 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/._WOFF differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/OTF/._TBJElvaro-Black.otf b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/OTF/._TBJElvaro-Black.otf new file mode 100644 index 0000000..59fba6d Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/OTF/._TBJElvaro-Black.otf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/OTF/._TBJElvaro-Bold.otf b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/OTF/._TBJElvaro-Bold.otf new file mode 100644 index 0000000..873bc74 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/OTF/._TBJElvaro-Bold.otf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/OTF/._TBJElvaro-ExtraBold.otf b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/OTF/._TBJElvaro-ExtraBold.otf new file mode 100644 index 0000000..77d16d4 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/OTF/._TBJElvaro-ExtraBold.otf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/OTF/._TBJElvaro-Light.otf b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/OTF/._TBJElvaro-Light.otf new file mode 100644 index 0000000..9c438b7 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/OTF/._TBJElvaro-Light.otf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/OTF/._TBJElvaro-Medium.otf b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/OTF/._TBJElvaro-Medium.otf new file mode 100644 index 0000000..0cf7fd0 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/OTF/._TBJElvaro-Medium.otf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/OTF/._TBJElvaro-Regular.otf b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/OTF/._TBJElvaro-Regular.otf new file mode 100644 index 0000000..13909b4 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/OTF/._TBJElvaro-Regular.otf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/OTF/._TBJElvaro-SemiBold.otf b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/OTF/._TBJElvaro-SemiBold.otf new file mode 100644 index 0000000..c854763 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/OTF/._TBJElvaro-SemiBold.otf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/TTF/._TBJElvaro-Black.ttf b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/TTF/._TBJElvaro-Black.ttf new file mode 100644 index 0000000..f063c5f Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/TTF/._TBJElvaro-Black.ttf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/TTF/._TBJElvaro-Bold.ttf b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/TTF/._TBJElvaro-Bold.ttf new file mode 100644 index 0000000..9f54be6 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/TTF/._TBJElvaro-Bold.ttf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/TTF/._TBJElvaro-ExtraBold.ttf b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/TTF/._TBJElvaro-ExtraBold.ttf new file mode 100644 index 0000000..9851987 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/TTF/._TBJElvaro-ExtraBold.ttf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/TTF/._TBJElvaro-Light.ttf b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/TTF/._TBJElvaro-Light.ttf new file mode 100644 index 0000000..0d6d5c4 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/TTF/._TBJElvaro-Light.ttf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/TTF/._TBJElvaro-Medium.ttf b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/TTF/._TBJElvaro-Medium.ttf new file mode 100644 index 0000000..e6da9a7 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/TTF/._TBJElvaro-Medium.ttf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/TTF/._TBJElvaro-Regular.ttf b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/TTF/._TBJElvaro-Regular.ttf new file mode 100644 index 0000000..218fcc0 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/TTF/._TBJElvaro-Regular.ttf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/TTF/._TBJElvaro-SemiBold.ttf b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/TTF/._TBJElvaro-SemiBold.ttf new file mode 100644 index 0000000..467371d Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/TTF/._TBJElvaro-SemiBold.ttf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/Variable-Font/._TBJ Elvaro-VF.ttf b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/Variable-Font/._TBJ Elvaro-VF.ttf new file mode 100644 index 0000000..facb7d7 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/Variable-Font/._TBJ Elvaro-VF.ttf differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._.DS_Store b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._.DS_Store new file mode 100644 index 0000000..a5b28df Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._.DS_Store differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Black.woff b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Black.woff new file mode 100644 index 0000000..21a92ef Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Black.woff differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Black.woff2 b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Black.woff2 new file mode 100644 index 0000000..dcd5ca6 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Black.woff2 differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Bold.woff b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Bold.woff new file mode 100644 index 0000000..bda115d Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Bold.woff differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Bold.woff2 b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Bold.woff2 new file mode 100644 index 0000000..50f0bd8 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Bold.woff2 differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-ExtraBold.woff b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-ExtraBold.woff new file mode 100644 index 0000000..770e76e Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-ExtraBold.woff differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-ExtraBold.woff2 b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-ExtraBold.woff2 new file mode 100644 index 0000000..92e3b7e Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-ExtraBold.woff2 differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Light.woff b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Light.woff new file mode 100644 index 0000000..3973699 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Light.woff differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Light.woff2 b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Light.woff2 new file mode 100644 index 0000000..3d6f799 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Light.woff2 differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Medium.woff b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Medium.woff new file mode 100644 index 0000000..3474caa Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Medium.woff differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Medium.woff2 b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Medium.woff2 new file mode 100644 index 0000000..04385d7 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Medium.woff2 differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Regular.woff b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Regular.woff new file mode 100644 index 0000000..9a318ea Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Regular.woff differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Regular.woff2 b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Regular.woff2 new file mode 100644 index 0000000..2fbc68b Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-Regular.woff2 differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-SemiBold.woff b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-SemiBold.woff new file mode 100644 index 0000000..81394e6 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-SemiBold.woff differ diff --git a/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-SemiBold.woff2 b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-SemiBold.woff2 new file mode 100644 index 0000000..4f99fe9 Binary files /dev/null and b/Fonts/Elvaro Grotesque Sans Family/__MACOSX/WOFF/._TBJElvaro-SemiBold.woff2 differ diff --git a/Fonts/blumir-font-family/OTF/Blumir-Bold.otf b/Fonts/blumir-font-family/OTF/Blumir-Bold.otf new file mode 100644 index 0000000..79bfe67 Binary files /dev/null and b/Fonts/blumir-font-family/OTF/Blumir-Bold.otf differ diff --git a/Fonts/blumir-font-family/OTF/Blumir-BoldOblique.otf b/Fonts/blumir-font-family/OTF/Blumir-BoldOblique.otf new file mode 100644 index 0000000..1a1281c Binary files /dev/null and b/Fonts/blumir-font-family/OTF/Blumir-BoldOblique.otf differ diff --git a/Fonts/blumir-font-family/OTF/Blumir-ExtraLight.otf b/Fonts/blumir-font-family/OTF/Blumir-ExtraLight.otf new file mode 100644 index 0000000..dfd6bd0 Binary files /dev/null and b/Fonts/blumir-font-family/OTF/Blumir-ExtraLight.otf differ diff --git a/Fonts/blumir-font-family/OTF/Blumir-ExtraLightOblique.otf b/Fonts/blumir-font-family/OTF/Blumir-ExtraLightOblique.otf new file mode 100644 index 0000000..91df8fc Binary files /dev/null and b/Fonts/blumir-font-family/OTF/Blumir-ExtraLightOblique.otf differ diff --git a/Fonts/blumir-font-family/OTF/Blumir-Light.otf b/Fonts/blumir-font-family/OTF/Blumir-Light.otf new file mode 100644 index 0000000..71c2b81 Binary files /dev/null and b/Fonts/blumir-font-family/OTF/Blumir-Light.otf differ diff --git a/Fonts/blumir-font-family/OTF/Blumir-LightOblique.otf b/Fonts/blumir-font-family/OTF/Blumir-LightOblique.otf new file mode 100644 index 0000000..00bddfc Binary files /dev/null and b/Fonts/blumir-font-family/OTF/Blumir-LightOblique.otf differ diff --git a/Fonts/blumir-font-family/OTF/Blumir-Medium.otf b/Fonts/blumir-font-family/OTF/Blumir-Medium.otf new file mode 100644 index 0000000..e038c72 Binary files /dev/null and b/Fonts/blumir-font-family/OTF/Blumir-Medium.otf differ diff --git a/Fonts/blumir-font-family/OTF/Blumir-MediumOblique.otf b/Fonts/blumir-font-family/OTF/Blumir-MediumOblique.otf new file mode 100644 index 0000000..a3397c2 Binary files /dev/null and b/Fonts/blumir-font-family/OTF/Blumir-MediumOblique.otf differ diff --git a/Fonts/blumir-font-family/OTF/Blumir-Regular.otf b/Fonts/blumir-font-family/OTF/Blumir-Regular.otf new file mode 100644 index 0000000..6a98d2a Binary files /dev/null and b/Fonts/blumir-font-family/OTF/Blumir-Regular.otf differ diff --git a/Fonts/blumir-font-family/OTF/Blumir-RegularOblique.otf b/Fonts/blumir-font-family/OTF/Blumir-RegularOblique.otf new file mode 100644 index 0000000..e94b149 Binary files /dev/null and b/Fonts/blumir-font-family/OTF/Blumir-RegularOblique.otf differ diff --git a/Fonts/blumir-font-family/OTF/Blumir-SemiBold.otf b/Fonts/blumir-font-family/OTF/Blumir-SemiBold.otf new file mode 100644 index 0000000..224a93f Binary files /dev/null and b/Fonts/blumir-font-family/OTF/Blumir-SemiBold.otf differ diff --git a/Fonts/blumir-font-family/OTF/Blumir-SemiBoldOblique.otf b/Fonts/blumir-font-family/OTF/Blumir-SemiBoldOblique.otf new file mode 100644 index 0000000..c264b95 Binary files /dev/null and b/Fonts/blumir-font-family/OTF/Blumir-SemiBoldOblique.otf differ diff --git a/Fonts/blumir-font-family/OTF/Blumir-Thin.otf b/Fonts/blumir-font-family/OTF/Blumir-Thin.otf new file mode 100644 index 0000000..e37db4b Binary files /dev/null and b/Fonts/blumir-font-family/OTF/Blumir-Thin.otf differ diff --git a/Fonts/blumir-font-family/OTF/Blumir-ThinOblique.otf b/Fonts/blumir-font-family/OTF/Blumir-ThinOblique.otf new file mode 100644 index 0000000..7447835 Binary files /dev/null and b/Fonts/blumir-font-family/OTF/Blumir-ThinOblique.otf differ diff --git a/Fonts/blumir-font-family/TTF/Blumir-Bold.ttf b/Fonts/blumir-font-family/TTF/Blumir-Bold.ttf new file mode 100644 index 0000000..626f01c Binary files /dev/null and b/Fonts/blumir-font-family/TTF/Blumir-Bold.ttf differ diff --git a/Fonts/blumir-font-family/TTF/Blumir-BoldOblique.ttf b/Fonts/blumir-font-family/TTF/Blumir-BoldOblique.ttf new file mode 100644 index 0000000..cd7b02a Binary files /dev/null and b/Fonts/blumir-font-family/TTF/Blumir-BoldOblique.ttf differ diff --git a/Fonts/blumir-font-family/TTF/Blumir-ExtraLight.ttf b/Fonts/blumir-font-family/TTF/Blumir-ExtraLight.ttf new file mode 100644 index 0000000..beeacca Binary files /dev/null and b/Fonts/blumir-font-family/TTF/Blumir-ExtraLight.ttf differ diff --git a/Fonts/blumir-font-family/TTF/Blumir-ExtraLightOblique.ttf b/Fonts/blumir-font-family/TTF/Blumir-ExtraLightOblique.ttf new file mode 100644 index 0000000..64ff3e8 Binary files /dev/null and b/Fonts/blumir-font-family/TTF/Blumir-ExtraLightOblique.ttf differ diff --git a/Fonts/blumir-font-family/TTF/Blumir-Light.ttf b/Fonts/blumir-font-family/TTF/Blumir-Light.ttf new file mode 100644 index 0000000..529b462 Binary files /dev/null and b/Fonts/blumir-font-family/TTF/Blumir-Light.ttf differ diff --git a/Fonts/blumir-font-family/TTF/Blumir-LightOblique.ttf b/Fonts/blumir-font-family/TTF/Blumir-LightOblique.ttf new file mode 100644 index 0000000..fe837f9 Binary files /dev/null and b/Fonts/blumir-font-family/TTF/Blumir-LightOblique.ttf differ diff --git a/Fonts/blumir-font-family/TTF/Blumir-Medium.ttf b/Fonts/blumir-font-family/TTF/Blumir-Medium.ttf new file mode 100644 index 0000000..ee328ad Binary files /dev/null and b/Fonts/blumir-font-family/TTF/Blumir-Medium.ttf differ diff --git a/Fonts/blumir-font-family/TTF/Blumir-MediumOblique.ttf b/Fonts/blumir-font-family/TTF/Blumir-MediumOblique.ttf new file mode 100644 index 0000000..de59c47 Binary files /dev/null and b/Fonts/blumir-font-family/TTF/Blumir-MediumOblique.ttf differ diff --git a/Fonts/blumir-font-family/TTF/Blumir-Regular.ttf b/Fonts/blumir-font-family/TTF/Blumir-Regular.ttf new file mode 100644 index 0000000..7a6c4e7 Binary files /dev/null and b/Fonts/blumir-font-family/TTF/Blumir-Regular.ttf differ diff --git a/Fonts/blumir-font-family/TTF/Blumir-RegularOblique.ttf b/Fonts/blumir-font-family/TTF/Blumir-RegularOblique.ttf new file mode 100644 index 0000000..f173a3f Binary files /dev/null and b/Fonts/blumir-font-family/TTF/Blumir-RegularOblique.ttf differ diff --git a/Fonts/blumir-font-family/TTF/Blumir-SemiBold.ttf b/Fonts/blumir-font-family/TTF/Blumir-SemiBold.ttf new file mode 100644 index 0000000..cdacb29 Binary files /dev/null and b/Fonts/blumir-font-family/TTF/Blumir-SemiBold.ttf differ diff --git a/Fonts/blumir-font-family/TTF/Blumir-SemiBoldOblique.ttf b/Fonts/blumir-font-family/TTF/Blumir-SemiBoldOblique.ttf new file mode 100644 index 0000000..633b3e3 Binary files /dev/null and b/Fonts/blumir-font-family/TTF/Blumir-SemiBoldOblique.ttf differ diff --git a/Fonts/blumir-font-family/TTF/Blumir-Thin.ttf b/Fonts/blumir-font-family/TTF/Blumir-Thin.ttf new file mode 100644 index 0000000..91976df Binary files /dev/null and b/Fonts/blumir-font-family/TTF/Blumir-Thin.ttf differ diff --git a/Fonts/blumir-font-family/TTF/Blumir-ThinOblique.ttf b/Fonts/blumir-font-family/TTF/Blumir-ThinOblique.ttf new file mode 100644 index 0000000..f57a411 Binary files /dev/null and b/Fonts/blumir-font-family/TTF/Blumir-ThinOblique.ttf differ diff --git a/Fonts/blumir-font-family/Variable/Blumir-VF.ttf b/Fonts/blumir-font-family/Variable/Blumir-VF.ttf new file mode 100644 index 0000000..8a8ccc5 Binary files /dev/null and b/Fonts/blumir-font-family/Variable/Blumir-VF.ttf differ diff --git a/Fonts/blumir-font-family/WOFF/Blumir-VF.woff b/Fonts/blumir-font-family/WOFF/Blumir-VF.woff new file mode 100644 index 0000000..9fb33c2 Binary files /dev/null and b/Fonts/blumir-font-family/WOFF/Blumir-VF.woff differ diff --git a/Fonts/blumir-font-family/WOFF/Blumir-VF.woff2 b/Fonts/blumir-font-family/WOFF/Blumir-VF.woff2 new file mode 100644 index 0000000..e8d40db Binary files /dev/null and b/Fonts/blumir-font-family/WOFF/Blumir-VF.woff2 differ diff --git a/Ralph/IMPLEMENTATION_PLAN.md b/Ralph/IMPLEMENTATION_PLAN.md index c7c96c6..b7c5144 100644 --- a/Ralph/IMPLEMENTATION_PLAN.md +++ b/Ralph/IMPLEMENTATION_PLAN.md @@ -1,55 +1,63 @@ -# Implementation Plan — Design 7: The Clinical Record (v2) +# Implementation Plan — The Clinical Record (v3) ## Project Overview -Redesign of the Clinical Record PMR interface to achieve **absolute thematic fidelity** to real NHS clinical software (EMIS Web, SystmOne). The codebase has existing components from a prior iteration that are functionally complete but lack the visual density, authentic clinical system feel, and design quality described in the specification. This plan rebuilds each visual component to production-showcase quality. +A premium portfolio CV presented as a clinical information system. The *structure* and *layout* come from GP software (EMIS Web, SystmOne) — patient banner, sidebar navigation, consultation journal, medications table, etc. — but the *execution* is **Clinical Luxury**: refined typography, layered shadows, generous spacing, premium fonts, atmospheric depth. -**Core principle:** This is NOT a clinical "theme" loosely applied — it's a **faithful digital clinical information system**. Every element must look like it belongs in actual NHS software. Border-heavy, table-heavy, functional — zero decorative flourish. +**This is NOT a faithful NHS clone.** It's a showcase portfolio that *evokes* clinical software while being distinctly beautiful. -**Data files are correct and complete** (`src/data/*`). The existing type system (`src/types/pmr.ts`) is sound. The phase management in `App.tsx` works. This plan focuses on **rebuilding the visual layer** to match the specification. +**What's already done:** Data files (`src/data/*`), type system (`src/types/pmr.ts`), phase management (`App.tsx`), boot sequence, ECG animation, and design system foundation (Tailwind tokens, fonts, CSS variables). + +**What this plan builds:** The visual layer from login screen through to the full PMR interface — every component rebuilt to Clinical Luxury quality with the new premium font, refined surfaces, and user-interactive login. ## Quality Checks -Run ALL of these after each task. All must pass before committing. +Run after every task. All must pass before committing. -- `npm run typecheck` -- `npm run lint` -- `npm run build` +``` +npm run typecheck +npm run lint +npm run build +``` ## Reference Files -Each task below references a specific file in `Ralph/refs/` — read ONLY that file for the task context. Do NOT read goal.md directly (it's 1100+ lines and will overwhelm your context). +Each task references files in `Ralph/refs/`. Read the referenced file(s) for full design specs, implementation patterns, and code snippets. The ref files ARE the spec — do not duplicate their content here. + +Always also read `Ralph/refs/ref-design-system.md` — it is the single source of truth for colors, typography, spacing, surfaces, and motion. + +Also read `CLAUDE.md` for font setup instructions (Elvaro Grotesque and Blumir candidates in `Fonts/` directory). ## Tasks -- [x] **Task 1: Design system foundation and font setup.** Read `Ralph/refs/ref-design-system.md`. Audit and fix the Tailwind config (`tailwind.config.js`) and global CSS (`src/index.css`) to ensure ALL PMR color tokens, typography, and spacing match the design system spec exactly. Specific fixes needed: (a) Ensure Geist Mono font is loaded via Google Fonts or local import — currently the project uses Fira Code for monospace but the spec requires Geist Mono for coded entries, timestamps, and data values. (b) Verify all PMR color tokens exist in Tailwind config: main content `#F5F7FA`, cards `#FFFFFF`, sidebar `#1E293B`, patient banner `#334155`, NHS blue `#005EB8`, green `#22C55E`, amber `#F59E0B`, red `#EF4444`, text primary `#111827`, text secondary `#6B7280`. (c) Ensure border-radius defaults to 4px for cards/inputs (not 8px or 12px — clinical systems use minimal rounding). (d) Add a `.pmr-theme` class or CSS custom properties layer for PMR-specific tokens if not already present. (e) Verify Inter font is loaded and configured as the primary font family. Do NOT invoke /frontend-design for this task — it's pure configuration. +- [x] **Task 1: Design system foundation.** Tailwind config, CSS variables, font loading. *(Completed — see progress.txt)* -- [x] **Task 1b: Rebuild boot sequence and ECG animation.** Read `Ralph/refs/ref-boot-ecg.md` and `Ralph/refs/ref-design-system.md`. Also read `ECGCombined.tsx` in the project root for the Remotion reference implementation of the mask-based text reveal. This task covers the full pre-login animation flow: (a) **Refactor BootSequence.tsx** — replace hardcoded HTML strings with a clean config-driven structure. Each line type (header, field, separator, module, ready) maps to a React component. Keep the same visual output: green-on-black terminal, Fira Code font, 220ms staggered line reveals, `#00ff41` bright green / `#3a6b45` dim green / `#00e5ff` cyan labels. (b) **Cursor → dot transition** — the blinking green cursor at the end of boot must smoothly morph into the ECG's glowing trace dot. Capture the cursor's screen position and pass it to ECGAnimation as a `startPosition` prop. The cursor stops blinking, transitions from block to circular glow (~300ms), then begins moving rightward as the ECG trace dot. (c) **ECG start sync** — ECGAnimation must start its trace from the cursor position (not the far left edge). The first beat begins after a flat gap from the cursor position. Shift the world-space origin so the trace starts where the cursor was. (d) **Mask-based text reveal** — adopt ECGCombined.tsx's technique where pre-rendered stroke-only text is revealed by a wipe mask following the trace head (instead of the current alpha fade approach). Keep the current character spacing (`LETTER_W`, `LETTER_G`, `SPACE_W`) and heartbeat waveform. Add connector lines between letters at baseline. (e) **Keep**: heartbeat shape, beat timing (0.3→0.55→0.85→1.0 amplitude), canvas rendering, viewport scrolling, flatline draw, scanlines, vignette, background transition to `#1E293B`. (f) Respect `prefers-reduced-motion` — with reduced motion, skip animation and show static final frame or jump to login. +- [x] **Task 1b: Boot sequence and ECG animation.** *(Completed and locked — do not modify)* -- [x] **Task 2: Rebuild LoginScreen component.** Read `Ralph/refs/ref-transition-login.md` and `Ralph/refs/ref-design-system.md`. Rebuild `src/components/LoginScreen.tsx` to match the login sequence specification exactly: (a) Dark blue-gray `#1E293B` background. (b) White card: 320px wide, **12px border-radius** (exception to the 4px rule — login cards can be rounder), subtle shadow. (c) NHS-blue shield icon at top with "CareerRecord PMR" branding text. (d) Username field types `A.CHARLWOOD` at 30ms/char in **Geist Mono** font. (e) Password field fills 8 dots at 20ms/dot. (f) Blinking cursor (530ms interval) in active field. (g) "Log In" button: NHS blue `#005EB8`, full width, pressed state darkens to `#004494`. (h) After submit: card scales to 103% and fades out over 200ms. (i) Respect `prefers-reduced-motion`. The login must feel like actually logging into NHS software at 8am on a Monday. +- [ ] **Task 2: Set up premium font and update Tailwind config.** Read `CLAUDE.md` (Typography section) and `Ralph/refs/ref-design-system.md`. Load both candidate fonts from `Fonts/` directory (Elvaro Grotesque WOFF2 files and Blumir variable font WOFF2). Add `@font-face` declarations in `src/index.css`. Update Tailwind config to add `font-ui` family pointing to the chosen font (start with Elvaro, can be swapped later). Replace `font-inter` references in Tailwind config with `font-ui`. Ensure Geist Mono remains the monospace font. Keep Fira Code for boot/ECG phases only. -- [ ] **Task 3: Rebuild PatientBanner component.** Read `Ralph/refs/ref-banner-sidebar.md` and `Ralph/refs/ref-design-system.md`. Rebuild `src/components/PatientBanner.tsx` to match the specification exactly: (a) Full banner 80px: background `#334155`, bottom border `1px solid #475569`. Name in Inter 600 **20px** (not 18px), details in Inter 400 14px. Layout must match the ASCII art in the ref file — surname-first format "CHARLWOOD, Andrew (Mr)", DOB/NHS No/Address on second row, phone/email/buttons on third row. (b) Status: green dot + "Active" text. Badge: "Open to opportunities" as blue pill. (c) Action buttons: outlined rectangles with NHS blue text and 1px border, 4px radius. Hover fills with NHS blue bg + white text. (d) Condensed banner 48px: single line with name, NHS number, status, action buttons only. Triggers at 100px scroll via IntersectionObserver. Smooth 200ms height transition. (e) Mobile banner: minimal top bar `CHARLWOOD, A (Mr) | 2211810 | dot` with overflow "..." menu. NHS Number tooltip: "GPhC Registration Number". +- [ ] **Task 3: Rebuild LoginScreen.** Read `Ralph/refs/ref-transition-login.md`. Key changes from prior version: (a) Typing speed is now **80ms/char** for username, **60ms/dot** for password — natural pace, not frantic. (b) After typing completes, the "Log In" button becomes **user-interactive** — the user clicks it to proceed. It is NOT auto-triggered. Button should have hover state, full opacity when ready, disabled/dimmed while typing. (c) Card shadow uses multi-layered shadow per design system. (d) Uses [UI font] for labels, Geist Mono for input fields. (e) `prefers-reduced-motion`: typing completes instantly, button is immediately interactive. -- [ ] **Task 4: Rebuild ClinicalSidebar component.** Read `Ralph/refs/ref-banner-sidebar.md` and `Ralph/refs/ref-design-system.md`. Rebuild `src/components/ClinicalSidebar.tsx` to match the specification exactly: (a) 220px fixed width, `#1E293B` background, `1px solid #334155` right border. (b) Header: "CareerRecord PMR / v1.0.0" in Inter 500, 13px, white at 50% opacity. (c) Search input: "Search record..." placeholder, integrated in sidebar below header. (d) **Navigation labels use CV-friendly terms**: Summary, Experience, Skills, Achievements, Projects, Education, Contact (NOT clinical jargon like Consultations, Medications, etc.). Same Lucide icons as before. Items: 44px height, 16px left padding, icons 18px + labels Inter 500 14px. Exact states: default white/70%, hover white/100% + `rgba(255,255,255,0.08)` bg, active white/100% + 3px NHS blue left border + `rgba(255,255,255,0.12)` bg + Inter 600 bold. (e) Separator line between Summary and Experience. (f) Footer: "Session: A.CHARLWOOD / Logged in: [time]" in Inter 400, 11px, `#64748B`. Time updates on mount. (g) Tablet mode: 56px icon-only with tooltips. (h) URL hash routing (`#summary`, `#experience`, `#skills`, `#achievements`, `#projects`, `#education`, `#contact`). (i) Alt+1-7 keyboard shortcuts, arrow key navigation, "/" for search focus. (j) Update the ViewId type in `src/types/pmr.ts` if needed to match the new labels. +- [ ] **Task 4: Rebuild PatientBanner.** Read `Ralph/refs/ref-banner-sidebar.md` (Patient Banner section). Full banner (80px) with surname-first format, demographic details, action buttons. Condensed banner (48px) via IntersectionObserver at 100px scroll. Mobile minimal banner with overflow menu. Uses [UI font] throughout. NHS Number tooltip: "GPhC Registration Number". -- [ ] **Task 5: Rebuild PMRInterface layout and add Breadcrumb.** Read `Ralph/refs/ref-banner-sidebar.md` and `Ralph/refs/ref-design-system.md`. Rebuild `src/components/PMRInterface.tsx` to ensure correct layout composition: (a) Fixed sidebar (220px) + sticky patient banner + scrollable main content area with `#F5F7FA` background. (b) Main content padding: 24px. No max-width — content fills available space. (c) Create `src/components/Breadcrumb.tsx`: displays "Patient Record > [Current View]" at the top of the main content area (using CV-friendly view names: Experience, Skills, Achievements, etc.). When a consultation/skill/achievement is expanded, the breadcrumb deepens to show the item name. Styled in Inter 400, 13px, gray-400, with chevron separators. Clickable links navigate back. (d) Interface materialization animations: patient banner slides down (200ms ease-out), sidebar slides from left (250ms ease-out, 50ms delay), content fades in (300ms, 100ms delay after sidebar). (e) View switching must be INSTANT — no crossfade or slide between views. (f) Ensure mobile layout uses bottom nav bar (56px height with safe area padding). (g) Update the view switching logic to use the new CV-friendly ViewId values (summary, experience, skills, achievements, projects, education, contact). +- [ ] **Task 5: Rebuild ClinicalSidebar.** Read `Ralph/refs/ref-banner-sidebar.md` (Left Sidebar + Navigation sections). CV-friendly labels: Summary, Experience, Skills, Achievements, Projects, Education, Contact. 220px fixed width. Header branding, search input, navigation items with exact states (default/hover/active), separator line, footer with session info. Tablet mode: 56px icon-only. Keyboard shortcuts: Alt+1-7, arrow keys, "/" for search. URL hash routing. -- [ ] **Task 6: Rebuild SummaryView with Clinical Alert.** Read `Ralph/refs/ref-summary-alert.md` and `Ralph/refs/ref-design-system.md`. Rebuild `src/components/views/SummaryView.tsx` and the clinical alert: (a) Clinical Alert: amber `#FEF3C7` background, 4px left border `#F59E0B`, text `#92400E`. Slides down with **spring animation** (not ease-out — use Framer Motion `type: "spring"` with appropriate damping). Acknowledge button: amber outlined. On click: warning icon cross-fades to green checkmark (200ms), holds 200ms, then alert height collapses (200ms ease-out). (b) 2-column card grid on desktop, single column on mobile. Cards have: header bar with title in Inter 600, 14px, uppercase, on `#F9FAFB` background with `1px solid #E5E7EB` bottom border. Card body: 16px padding, `1px solid #E5E7EB` border, 4px radius. (c) Demographics card: two-column key-value layout. Labels right-aligned Inter 500 13px gray-500, values left-aligned Inter 400 14px gray-900. (d) Active Problems card: traffic light dots + problem text + date in Geist Mono 12px. (e) Quick Meds card: 4-column table with top 5 skills. "View Full List ->" link. (f) Last Consultation card: preview with "View Full Record ->" link. All navigation links must actually switch the sidebar view. +- [ ] **Task 6: Rebuild PMRInterface layout + Breadcrumb.** Read `Ralph/refs/ref-banner-sidebar.md` (PMRInterface Layout + Breadcrumb sections). Fixed sidebar + sticky banner + scrollable content on `#F5F7FA`. Create `Breadcrumb.tsx`. Interface materialization animations (banner → sidebar → content stagger). View switching is INSTANT. Mobile: bottom nav bar. Update ViewId type if needed. -- [ ] **Task 7: Rebuild ConsultationsView.** Read `Ralph/refs/ref-consultations.md` and `Ralph/refs/ref-design-system.md`. Rebuild `src/components/views/ConsultationsView.tsx`: (a) Collapsed entries: date in Geist Mono 13px gray-500, organization in Inter 400 13px NHS blue, role in Inter 600 15px gray-900, "Key:" prefix in Inter 500 gray-500 with single-line achievement. Chevron button right-aligned. (b) Status dot: green for current, gray for historical. (c) 3px left border color-coded by employer (NHS blue `#005EB8` or Tesco teal `#00897B`). (d) Expanded state: Duration line, then HISTORY / EXAMINATION / PLAN sections with headers in Inter 600, 12px, uppercase, letter-spacing 0.05em, gray-400. Plan items as bullet lists. (e) CODED ENTRIES section at bottom: Geist Mono 12px, gray-500, bracket codes. (f) Height-only expand animation, 200ms ease-out. NO opacity fade on content — content simply grows/shrinks. (g) Only one expanded at a time. (h) Implement the second clinical alert (Python switching algorithm alert) that appears on first navigation to Consultations view, dismissible with same Acknowledge pattern. +- [ ] **Task 7: Rebuild SummaryView + Clinical Alert.** Read `Ralph/refs/ref-summary-alert.md`. Clinical Alert with spring animation entrance, acknowledge → checkmark → collapse sequence. Summary cards: Demographics (full-width key-value), Active Problems (traffic lights), Current Skills quick table, Last Consultation preview. 2-column grid desktop, single column mobile. Navigation links to other views. -- [ ] **Task 8: Rebuild MedicationsView.** Read `Ralph/refs/ref-medications.md` and `Ralph/refs/ref-design-system.md`. Rebuild `src/components/views/MedicationsView.tsx`: (a) Three category tabs: "Active Medications" (technical), "Clinical Medications" (healthcare domain), "PRN (As Required)" (strategic/leadership). Tab styling: active tab has white bg + NHS blue bottom border. (b) Full table with proper `` markup: Drug Name | Dose | Frequency | Start | Status. Table headers: Inter 600, 13px, uppercase, `#F9FAFB` bg. Row height: 40px. All borders: `1px solid #E5E7EB`. Alternating `#FFFFFF`/`#F9FAFB` row backgrounds. (c) Hover: `#EFF6FF` background only — no transform, no lift. (d) Sortable columns: click header to sort, arrow indicator in active column. (e) Status dots: 6px green circles + "Active" text. (f) Expandable prescribing history: Geist Mono 12px, year markers bold, descriptions regular. (g) Mobile: card layout (stacked fields per card, not table). +- [ ] **Task 8: Rebuild ConsultationsView.** Read `Ralph/refs/ref-consultations.md`. Reverse-chronological journal. Collapsed entries with date, org, role, key achievement. Expanded: H/E/P structure with coded entries. Height-only expand animation (no opacity fade). One expanded at a time. 3px left border color-coded by employer. Second clinical alert on first visit. -- [ ] **Task 9: Rebuild ProblemsView.** Read `Ralph/refs/ref-problems.md` and `Ralph/refs/ref-design-system.md`. Rebuild `src/components/views/ProblemsView.tsx`: (a) Two sections: "ACTIVE PROBLEMS" and "RESOLVED PROBLEMS" with section headers in clinical style. (b) Table columns — Active: Status | Code | Problem | Since. Resolved: Status | Code | Problem | Resolved | Outcome. (c) Traffic light dots: 8px circles (green=resolved, amber=in-progress). Always paired with text labels — never the sole indicator. (d) Code column in Geist Mono. (e) Expandable rows showing full narrative + linked consultation buttons that navigate to Consultations view. (f) Row hover: `#EFF6FF`. (g) Mobile: card layout. +- [ ] **Task 9: Rebuild MedicationsView.** Read `Ralph/refs/ref-medications.md`. Three category tabs (Active/Clinical/PRN). Semantic `
` with sortable columns. Expandable prescribing history in Geist Mono. Status dots with text labels. Mobile: card layout. -- [ ] **Task 10: Rebuild InvestigationsView and DocumentsView.** Read `Ralph/refs/ref-investigations-documents.md` and `Ralph/refs/ref-design-system.md`. Rebuild both views: (a) InvestigationsView: table with Test Name | Requested | Status | Result. Status badges: green "Complete", amber "Ongoing", pulsing green "Live". Expanded view uses tree-indented monospace structure with box-drawing characters (pipe symbols). "View Results" NHS blue button for PharMetrics only. (b) DocumentsView: table with Type icon | Document | Date | Source. Lucide icons per document type (FileText, Award, GraduationCap, FlaskConical). Expanded preview uses same tree-indented structure. (c) Both views share the expandable-row pattern — maintain visual consistency. (d) Mobile: card layouts for both. +- [ ] **Task 10: Rebuild ProblemsView.** Read `Ralph/refs/ref-problems.md`. Two sections: Active Problems and Resolved Problems. Traffic light dots (8px, always with text labels). Code column in Geist Mono. Expandable rows with narrative + linked consultation navigation. Mobile: card layout. -- [ ] **Task 11: Rebuild ReferralsView.** Read `Ralph/refs/ref-referrals.md` and `Ralph/refs/ref-design-system.md`. Rebuild `src/components/views/ReferralsView.tsx`: (a) Form header: "New Referral" with pre-filled patient info (non-editable). (b) Priority radio buttons: Urgent (red), Routine (blue, default), Two-Week Wait (amber). Each with tongue-in-cheek tooltips. (c) Form fields: standard clinical inputs with `1px solid #D1D5DB` border, 4px radius, `8px 12px` padding. Labels in Inter 500, 13px, gray-600 above inputs. Focus: NHS blue border + `box-shadow: 0 0 0 3px rgba(0,94,184,0.15)`. (d) Contact Method radio group. (e) Submit: "Send Referral" NHS blue button. Loading spinner state. Success state with reference number (REF-YYYY-MMDD-NNN format), checkmark, "24-48 hours" response time. (f) Direct Contact table below form: Email, Phone, LinkedIn, Location with action buttons. +- [ ] **Task 11: Rebuild InvestigationsView + DocumentsView.** Read `Ralph/refs/ref-investigations-documents.md`. Both views share the expandable-row pattern with tree-indented monospace content (box-drawing characters). Investigations: status badges (Complete/Ongoing/Live). Documents: type icons per document category. "View Results" button for PharMetrics only. Mobile: card layouts. -- [ ] **Task 12: Implement fuzzy search with fuse.js.** Read `Ralph/refs/ref-interactions.md`. Install fuse.js (`npm install fuse.js`). Rebuild the search functionality in the sidebar: (a) Build a search index on mount from ALL content: consultation titles/descriptions, medication names, problem descriptions, investigation names, document titles. (b) Search options: `{ keys: ['title', 'description', 'name'], threshold: 0.3, includeScore: true }`. (c) Results dropdown grouped by section (Consultations, Medications, Problems, etc.) with section icon, matching text, and relevance indicator. (d) Clicking a result navigates to the section AND expands/highlights the matching item. (e) Dropdown styled: white bg, `1px solid #E5E7EB`, 4px radius, shadow. Items in Inter 400 14px, 36px height. (f) Escape closes dropdown. (g) Mobile: search bar at top of each view instead of sidebar. +- [ ] **Task 12: Rebuild ReferralsView (Contact).** Read `Ralph/refs/ref-referrals.md`. Clinical referral form with priority radio buttons (Urgent/Routine/Two-Week Wait with tongue-in-cheek tooltips). Form validation, reference number generation, success state. Direct contact table below form. -- [ ] **Task 13: Implement context menus.** Read `Ralph/refs/ref-interactions.md`. Add right-click/long-press context menus: (a) On consultation entries: "Expand", "Copy to clipboard", "View coded entries". (b) On medication rows: "View prescribing history", "Copy to clipboard". (c) On problem entries: "View linked consultations", "Copy to clipboard". (d) Styled: white bg, `1px solid #E5E7EB` border, 4px radius, `box-shadow: 0 4px 12px rgba(0,0,0,0.1)`. Items: Inter 400, 14px, 36px row height. (e) Escape closes menu. Focus returns to trigger element on close. (f) Use Headless UI or a custom implementation — accessible with keyboard navigation. +- [ ] **Task 13: Fuzzy search with fuse.js.** Read `Ralph/refs/ref-interactions.md` (Search section). Install fuse.js. Build search index from all content. Results dropdown grouped by section. Clicking a result navigates to section + expands matching item. Mobile: search at top of each view. -- [ ] **Task 14: Responsive design audit and fix.** Read `Ralph/refs/ref-interactions.md`. Systematically test and fix all three breakpoints: (a) Desktop (>1024px): full sidebar 220px, full patient banner 80px condensing to 48px, full tables. (b) Tablet (768-1024px): sidebar collapses to 56px icon-only with tooltips on hover/tap. Patient banner always condensed. Tables may horizontally scroll. Context menus via long-press. (c) Mobile (<768px): bottom nav bar with 7 icon buttons (56px height + safe area). Minimal top bar. ALL tables convert to card layout (stacked fields). Search bar at top of views. Back arrow to Summary. Touch targets minimum 48px. (d) Run `npm run build` and verify no layout breaks. +- [ ] **Task 14: Responsive design audit.** Read `Ralph/refs/ref-interactions.md` (Responsive Strategy section). Test all three breakpoints: Desktop (>1024px), Tablet (768-1024px), Mobile (<768px). Tables → card layouts on mobile. Bottom nav bar. Touch targets ≥48px. -- [ ] **Task 15: Accessibility audit and final polish.** Read `Ralph/refs/ref-interactions.md`. Audit and fix accessibility: (a) Semantic HTML: sidebar `
`, ``, ``, ``, `
`, `
` elements. Column headers must include `scope="col"`. Do NOT use div-based table layouts. -**Why:** Screen readers navigate tables using native table semantics. Div tables are inaccessible. +**Rule:** Use semantic ``, ``, ``, ``, `
`, `
`. No div-based tables. +**Why:** Screen readers require native table semantics. ## Data Guardrails -### When: Displaying CV content (dates, numbers, roles, achievements) -**Rule:** All data must come from `src/data/*.ts` files. Do NOT hardcode CV content directly in components. Do NOT change any numbers or dates — they are sourced from the verified CV. -**Why:** Data accuracy is critical. The data layer has been validated against CV_v4.md. - -### When: Modifying data files -**Rule:** Do NOT modify data files in `src/data/` unless the task explicitly requires it. The data is correct and complete. -**Why:** Data was verified in a prior iteration. Unnecessary changes risk introducing inaccuracies. +### When: Displaying CV content +**Rule:** All data must come from `src/data/*.ts` files. Do NOT hardcode content in components or change any numbers/dates. +**Why:** Data has been validated against CV_v4.md. ## Visual Review Guardrails -### When: Completing any visual component task (Tasks 1b-11) -**Rule:** After quality checks pass, you MUST open the dev server (`http://localhost:5173`) in the browser using Claude in Chrome tools (`tabs_context_mcp`, `navigate`, `computer` with `action: "screenshot"`), take a screenshot of the relevant view, and compare against the reference file spec. Fix any visual discrepancies before committing. If browser tools are unavailable (e.g. Chrome not connected), document this in progress.txt and proceed — do NOT block the iteration. -**Why:** Code review alone cannot catch visual issues. The previous iteration loop produced functionally correct but visually generic output because no one verified the rendered result. +### When: Completing any visual task +**Rule:** After quality checks, open `http://localhost:5173` via Claude in Chrome tools, take a screenshot, and compare against the ref file spec. Fix visual discrepancies. If browser tools are unavailable, note in progress.txt and proceed. +**Why:** Code review alone cannot catch visual issues. -### When: Browser tools fail or Chrome is not connected -**Rule:** If `tabs_context_mcp` or other browser tools fail, skip the visual review step, note it in progress.txt, and continue. Do NOT retry more than twice or spend time debugging browser connectivity. -**Why:** Visual review is valuable but not blocking. The loop must keep making progress. +### When: Browser tools fail +**Rule:** Skip visual review, note it in progress.txt, continue. Do NOT retry more than twice. +**Why:** Visual review is valuable but not blocking. ## Technical Guardrails ### When: Writing TypeScript -**Rule:** No `any` types. All props must have typed interfaces. All data must use the types from `src/types/pmr.ts`. -**Why:** Strict typing prevents runtime errors and maintains code quality. +**Rule:** No `any` types. All props must have typed interfaces. +**Why:** Strict typing prevents runtime errors. ### When: Adding animations -**Rule:** All animations must respect `prefers-reduced-motion`. With reduced motion: login typing completes instantly, alerts appear without slide, expand/collapse is instant, banner condensation is instant. -**Why:** Accessibility requirement. Users who've opted out of motion must still have a functional experience. +**Rule:** All animations must respect `prefers-reduced-motion`. With reduced motion: all animations skip to final state instantly. +**Why:** Accessibility requirement. -### When: Building visual components (Tasks 1b-11) -**Rule:** Each reference file in `Ralph/refs/` contains a "Design Guidance (from /frontend-design)" section with pre-generated design direction and code patterns. Read this section BEFORE writing code. Do NOT invoke the `/frontend-design` skill at runtime — the guidance is already embedded in the ref files. Follow the aesthetic direction and code patterns provided. -**Why:** The design guidance was pre-generated to avoid context overflow. Previous iterations stalled because the skill output consumed the entire context window, leaving no room to write files. +### When: Building visual components +**Rule:** Each ref file in `Ralph/refs/` contains a "Design Guidance" section with design direction and code patterns. Read it BEFORE writing code. Do NOT invoke `/frontend-design` at runtime. +**Why:** Design guidance is pre-baked to avoid context overflow. ### When: Running quality checks **Rule:** Run `npm run typecheck`, `npm run lint`, and `npm run build` after EVERY task. Fix all errors before committing. -**Why:** Build failures compound across iterations. Fix them immediately. +**Why:** Build failures compound across iterations. diff --git a/Ralph/progress.txt b/Ralph/progress.txt index 0d6a17c..1399a79 100644 --- a/Ralph/progress.txt +++ b/Ralph/progress.txt @@ -24,11 +24,12 @@ ### Design System Requirements (from ref-design-system.md) - Light-mode ONLY — no dark mode - NHS blue: #005EB8 (primary interactive) -- Border radius: 4px for cards/inputs (clinical systems use minimal rounding) -- Borders dominate — 1px solid #E5E7EB everywhere -- Table row height: 40px, card padding: 16px, main content padding: 24px -- Fonts: Inter (general text), Geist Mono (coded entries, timestamps, data values) -- Base spacing unit: 4px — clinical density, not marketing site spacing +- Border radius: 4px for cards/inputs +- Borders: 1px solid #E5E7EB on tables and cards, combined with multi-layered shadows for depth +- Card shadows: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03) +- Table row height: 40px, card padding: 16-24px, main content padding: 24px +- Fonts: [UI font] (Elvaro Grotesque or Blumir from Fonts/ dir), Geist Mono (coded entries, timestamps, data values) +- Base spacing unit: 4px — generous but structured, more whitespace than real clinical systems ### Known Dependencies - React 18.3.1, TypeScript, Vite @@ -51,10 +52,13 @@ - If browser tools fail, skip visual review and note in iteration log — don't block progress ### Critical Styling Notes -- Geist Mono font must be loaded (NOT Fira Code) for coded entries and timestamps -- Patient banner name must be 20px Inter 600 (not 18px) -- Clinical alert must use spring animation (Framer Motion type: "spring"), not ease-out -- View switching must be INSTANT — no crossfade, no slide between views +- Design direction is **Clinical Luxury** — clinical structure, premium execution +- Premium UI font loaded from Fonts/ directory (Elvaro Grotesque or Blumir, NOT Inter/Roboto) +- Geist Mono for coded entries and timestamps (NOT Fira Code) +- Multi-layered shadows on cards — NOT flat/borderless +- Clinical alert uses spring animation (Framer Motion type: "spring"), not ease-out +- View switching INSTANT — no crossfade, no slide between views +- Login typing: 80ms/char username, 60ms/dot password. Button is USER-INTERACTIVE (not auto-triggered) - Consultation expand/collapse: height animation ONLY, no opacity fade on content ## Iteration Log @@ -144,5 +148,27 @@ Do NOT invoke the `/frontend-design` skill at runtime — it was pre-run and the - Letter spacing: LETTER_W 72px, LETTER_G 10px, SPACE_W 30px (matches original, tighter than ECGCombined) - Morph animation uses Framer Motion scaleX/width/opacity for smooth cursor-to-dot transition -**Next task:** Task 2 — Rebuild LoginScreen component +**Next task:** Task 2 — Set up premium font + +## Manual Intervention — 2026-02-12 +### Reason: Design direction changed from "Clinical Utilitarian" to "Clinical Luxury" +### Changes made: +- Rewrote IMPLEMENTATION_PLAN.md — leaner format, tasks point to ref files for detail +- Rewrote guardrails.md — updated shadow rules, font rules, login pacing, luxury direction +- Updated all Ralph/refs/*.md files to align with Clinical Luxury direction +- Updated CLAUDE.md with new login typing spec (80ms/char, user-interactive button) +- Updated ref-design-system.md login typing speed +### Tasks reset: Task 2 (LoginScreen — needs new typing speed + interactive button + premium font) +### Tasks added: New Task 2 (font setup) inserted before LoginScreen rebuild (now Task 3) +### Context for next iteration: +- The design direction is "Clinical Luxury" — clinical STRUCTURE, premium EXECUTION +- All ref files now say "Clinical Luxury" not "Clinical Utilitarian" or "faithful reproduction" +- Cards get multi-layered shadows (not flat/borderless) +- Premium font from Fonts/ directory replaces Inter (see CLAUDE.md Typography section) +- Login screen typing is slower (80ms/char, 60ms/dot) and the button is USER-CLICKED +- Sidebar labels are CV-friendly (Experience, Skills, etc.) — clinical metaphor is in the LAYOUT +### New guardrails added: +- Shadow guardrail updated: multi-layered shadows required (was: "no shadows") +- Font guardrail added: use [UI font] from Fonts/, not Inter/Roboto +- Login guardrail added: 80ms/char typing, user-interactive button diff --git a/Ralph/refs/ref-banner-sidebar.md b/Ralph/refs/ref-banner-sidebar.md index 41bd300..013d5e3 100644 --- a/Ralph/refs/ref-banner-sidebar.md +++ b/Ralph/refs/ref-banner-sidebar.md @@ -76,15 +76,15 @@ The sidebar replicates the dark navigation panel found in EMIS Web and similar c ### Styling -- Each item: 44px height, 16px left padding, icon (18px, `lucide-react`) + label in Inter 500, 14px +- Each item: 44px height, 16px left padding, icon (18px, `lucide-react`) + label in [UI font] 500, 14px - Default state: white text at 70% opacity, transparent background - Hover state: white text at 100% opacity, background `rgba(255,255,255,0.08)` -- Active state: white text at 100%, NHS blue left border (3px), background `rgba(255,255,255,0.12)`, label in Inter 600 +- Active state: white text at 100%, NHS blue left border (3px), background `rgba(255,255,255,0.12)`, label in [UI font] 600 - A thin horizontal separator line (`1px solid rgba(255,255,255,0.1)`) appears between "Summary" and "Consultations" (separating the overview from the detail views) ### Sidebar Footer -At the bottom of the sidebar, in small text (Inter 400, 11px, `#64748B`): +At the bottom of the sidebar, in small text ([UI font] 400, 11px, `#64748B`): ``` Session: A.CHARLWOOD Logged in: [current time] @@ -98,7 +98,7 @@ At the top, above the navigation items, a small logo or system name: CareerRecord PMR v1.0.0 ``` -In Inter 500, 13px, white at 50% opacity. Styled like the "EMIS Web" branding that appears in the top-left of the real system. +In [UI font] 500, 13px, white at 50% opacity. Styled like clinical system branding that appears in the top-left of the navigation. --- @@ -132,7 +132,7 @@ A breadcrumb appears at the top of the main content area: Patient Record > Consultations > Interim Head, Population Health ``` -The breadcrumb updates as the user navigates deeper (e.g., expanding a consultation). Clicking "Patient Record" returns to Summary. Clicking "Consultations" collapses any expanded entries and shows the full journal list. The breadcrumb is styled in Inter 400, 13px, gray-400, with chevron separators. +The breadcrumb updates as the user navigates deeper (e.g., expanding a consultation). Clicking "Patient Record" returns to Summary. Clicking "Consultations" collapses any expanded entries and shows the full journal list. The breadcrumb is styled in [UI font] 400, 13px, gray-400, with chevron separators. ### Secondary Navigation: Within-View Interactions @@ -146,18 +146,18 @@ The breadcrumb updates as the user navigates deeper (e.g., expanding a consultat --- -## Design Guidance (from /frontend-design) +## Design Guidance ### Aesthetic Direction -**Clinical Institutional Precision** — The NHS Patient Administration System (PAS) header bar, faithfully reproduced as personal branding. This is not a "medical theme" website. It is a clinical system UI that happens to contain career data instead of patient data. The fidelity to real NHS IT systems (EMIS Web, SystmOne, Lorenzo) is the entire point. +**Clinical Luxury** — The patient banner and sidebar draw their *structure* from NHS clinical systems (PAS headers, EMIS Web navigation), but the *execution* is premium — refined typography, layered shadows, considered spacing. The clinical metaphor lives in the layout and conventions (surname-first, pipe separators, status dots); the luxury lives in the finish. -- **Tone**: Utilitarian, institutional, information-dense. No decoration. No gradients. No shadows. The beauty is in the data density, the pipe separators, the monospaced identifiers, the surname-first convention, the green status dot. +- **Tone**: Precise, information-dense, and refined. Generous whitespace, layered shadows, and premium typography elevate what would otherwise be institutional UI. The clinical conventions (data density, pipe separators, monospaced identifiers, surname-first, green status dot) provide authentic texture. - **Typography Discipline**: - - Inter at 600 weight for the patient name — the anchor element + - [UI font] at 600 weight for the patient name — the anchor element - Geist Mono for structured identifiers (NHS Number, DOB) — monospaced data feels like it came from a database - - Inter at normal weight for demographic text - - The pipe character `|` as a data separator is a deliberate NHS PAS convention + - [UI font] at normal weight for demographic text + - The pipe character `|` as a data separator is a deliberate clinical convention ### Design System Tokens @@ -170,7 +170,7 @@ The breadcrumb updates as the user navigates deeper (e.g., expanding a consultat | Border | `#E5E7EB` | 1px solid borders | | Border Radius | `4px` | All UI elements | | Green Status | `#22C55E` | Active status dot | -| Font Text | `Inter` | All text content | +| Font Text | [UI font] | All text content (Elvaro or Blumir — see CLAUDE.md) | | Font Data | `Geist Mono` | Monospaced identifiers | ### Key Design Decisions @@ -197,7 +197,7 @@ The breadcrumb updates as the user navigates deeper (e.g., expanding a consultat 5. **Navigation Item States**: - Default: white text at 70% opacity, transparent background - Hover: white text at 100%, background `rgba(255,255,255,0.08)` - - Active: white text at 100%, 3px NHS blue left border, background `rgba(255,255,255,0.12)`, Inter 600 weight + - Active: white text at 100%, 3px NHS blue left border, background `rgba(255,255,255,0.12)`, [UI font] 600 weight 6. **Interface Materialization Animations** (PMRInterface): - Patient banner slides down (200ms ease-out) @@ -281,7 +281,7 @@ const navItems: NavItem[] = [