diff --git a/.agent/.agent/skills/bencium-innovative-ux-designer/ACCESSIBILITY.md b/.agent/.agent/skills/bencium-innovative-ux-designer/ACCESSIBILITY.md new file mode 100644 index 0000000..d514f4e --- /dev/null +++ b/.agent/.agent/skills/bencium-innovative-ux-designer/ACCESSIBILITY.md @@ -0,0 +1,111 @@ +# Accessibility Essentials + +Accessibility enables creativity - it's a foundation, not a limitation. WCAG 2.1 AA compliance. + +## Core Principles (POUR) + +- **Perceivable**: Content must be perceivable (alt text, contrast, captions) +- **Operable**: UI must be keyboard/touch accessible +- **Understandable**: Clear, predictable behavior +- **Robust**: Works with assistive technologies + +## Contrast Requirements + +| Element | Minimum Ratio | +|---------|---------------| +| Normal text | 4.5:1 | +| Large text (18pt+) | 3:1 | +| UI components | 3:1 | + +**Tools**: Chrome DevTools Accessibility tab, WebAIM Contrast Checker + +## Keyboard Navigation + +```tsx +// All interactive elements need focus states + + +// Custom elements need tabindex and key handlers +
(e.key === 'Enter' || e.key === ' ') && handleClick()} +> + Custom Button +
+``` + +**Essentials:** +- Tab through entire interface +- Enter/Space activates elements +- Escape closes modals +- Visible focus indicators always + +## Essential ARIA + +```tsx +// Buttons without text + + +// Expandable elements + + +// Live regions for dynamic content +
{statusMessage}
+
{errorMessage}
+ +// Form errors + +{hasError && } +``` + +## Semantic HTML + +```tsx +// Use semantic elements, not divs +
+

...

+ + +// Heading hierarchy (never skip levels) +

Page Title

+

Section

+

Subsection

+``` + +## Touch Targets + +- Minimum **44x44px** for all interactive elements +- Adequate spacing between targets +- `touch-manipulation` CSS for responsive touch + +## Screen Reader Content + +```tsx +// Hidden but announced +Additional context + +// Skip link + + Skip to main content + +``` + +## Quick Checklist + +- [ ] Keyboard: Can tab through everything +- [ ] Focus: Visible focus indicators +- [ ] Contrast: 4.5:1 for text +- [ ] Alt text: All images have appropriate alt +- [ ] Headings: Logical h1-h6 hierarchy +- [ ] Forms: Labels associated with inputs +- [ ] Errors: Announced to screen readers +- [ ] Touch: 44px minimum targets + +## Resources + +- [WCAG 2.1 Quick Reference](https://www.w3.org/WAI/WCAG21/quickref/) +- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) +- [ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/) diff --git a/.agent/.agent/skills/bencium-innovative-ux-designer/DESIGN-SYSTEM-TEMPLATE.md b/.agent/.agent/skills/bencium-innovative-ux-designer/DESIGN-SYSTEM-TEMPLATE.md new file mode 100644 index 0000000..e968748 --- /dev/null +++ b/.agent/.agent/skills/bencium-innovative-ux-designer/DESIGN-SYSTEM-TEMPLATE.md @@ -0,0 +1,577 @@ +# Design System Template + +Meta-framework for understanding what's fixed, project-specific, and adaptable in your design system. + +## Purpose + +This template helps you distinguish between: +- **Fixed Elements**: Universal rules that never change +- **Project-Specific Elements**: Filled in for each project based on brand +- **Adaptable Elements**: Context-dependent implementations + +--- + +## I. FIXED ELEMENTS + +These foundations remain consistent across all projects, regardless of brand or context. + +### 1. Spacing Scale + +**Fixed System:** +``` +4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px +``` + +**Usage:** +- Margins, padding, gaps between elements +- Mathematical relationships ensure visual harmony +- Use multipliers of base unit (4px) + +**Why Fixed:** +Consistent spacing creates visual rhythm regardless of brand personality. + +### 2. Grid System + +**Fixed Structure:** +- **12-column grid** for most layouts (divisible by 2, 3, 4, 6) +- **16-column grid** for data-heavy interfaces +- **Gutters**: 16px (mobile), 24px (tablet), 32px (desktop) + +**Why Fixed:** +Grid provides structural order. Brand personality shows through color, typography, content—not grid structure. + +### 3. Accessibility Standards + +**Fixed Requirements:** +- **WCAG 2.1 AA** compliance minimum +- **Contrast**: 4.5:1 for normal text, 3:1 for large text +- **Touch targets**: Minimum 44×44px +- **Keyboard navigation**: All interactive elements accessible +- **Screen reader**: Semantic HTML, ARIA labels where needed + +**Why Fixed:** +Accessibility is not negotiable. It's a baseline requirement for ethical, legal, and usable products. + +### 4. Typography Hierarchy Logic + +**Fixed Structure:** +- **Mathematical scaling**: 1.25x (major third) or 1.333x (perfect fourth) +- **Hierarchy levels**: Display → H1 → H2 → H3 → Body → Small → Caption +- **Line height**: 1.5x for body text, 1.2-1.3x for headlines +- **Line length**: 45-75 characters optimal + +**Why Fixed:** +Mathematical relationships create predictable, harmonious hierarchy. Specific fonts change, but the logic doesn't. + +### 5. Component Architecture + +**Fixed Patterns:** +- **Button states**: Default, Hover, Active, Focus, Disabled +- **Form structure**: Label above input, error below, helper text optional +- **Modal pattern**: Overlay + centered content + close mechanism +- **Card structure**: Container → Header → Body → Footer (optional) + +**Why Fixed:** +Users expect consistent component behavior. Architecture is fixed; appearance is project-specific. + +### 6. Animation Timing Framework + +**Fixed Physics Profiles:** +- **Lightweight** (icons, chips): 150ms +- **Standard** (cards, panels): 300ms +- **Weighty** (modals, pages): 500ms + +**Fixed Easing:** +- **Ease-out**: Entrances (fast start, slow end) +- **Ease-in**: Exits (slow start, fast end) +- **Ease-in-out**: Transitions (smooth both ends) + +**Why Fixed:** +Natural physics feel consistent across brands. Duration and easing create that feeling. + +--- + +## II. PROJECT-SPECIFIC ELEMENTS + +Fill in these for each project based on brand personality and purpose. + +### 1. Brand Color System + +**Template Structure:** + +``` +NEUTRALS (4-5 colors): +- Background lightest: _______ (e.g., slate-50 or warm-white) +- Surface: _______ (e.g., slate-100) +- Border/divider: _______ (e.g., slate-300) +- Text secondary: _______ (e.g., slate-600) +- Text primary: _______ (e.g., slate-900) + +ACCENTS (1-3 colors): +- Primary (main CTA): _______ (e.g., teal-500) +- Secondary (alternative action): _______ (optional) +- Status colors: + - Success: _______ (green-ish) + - Warning: _______ (amber-ish) + - Error: _______ (red-ish) + - Info: _______ (blue-ish) +``` + +**Questions to Answer:** +- What emotion should the brand evoke? (Trust, excitement, calm, urgency) +- Warm or cool neutrals? +- Conservative or bold accents? + +**Examples:** + +**Project A: Fintech App** +``` +Neutrals: Cool greys (slate-50 → slate-900) +Primary: Deep blue (#0A2463) – trust, professionalism +Success: Muted green (#10B981) +Why: Financial products need trust, not playfulness +``` + +**Project B: Creative Community** +``` +Neutrals: Warm greys with beige undertones +Primary: Coral (#FF6B6B) – energy, creativity +Success: Teal (#06D6A0) – fresh, unexpected +Why: Creative spaces should feel inviting, not corporate +``` + +**Project C: Healthcare Platform** +``` +Neutrals: Pure greys (minimal color temperature) +Primary: Soft blue (#4A90E2) – calm, clinical +Success: Medical green (#38A169) +Why: Healthcare needs clarity and calm, not distraction +``` + +### 2. Typography Pairing + +**Template:** + +``` +HEADLINE FONT: _______ +- Weight: _______ (e.g., Bold 700) +- Use case: H1, H2, display text +- Personality: _______ (geometric/humanist/serif/etc.) + +BODY FONT: _______ +- Weight: _______ (e.g., Regular 400, Medium 500) +- Use case: Paragraphs, UI text +- Personality: _______ (neutral/readable/efficient) + +OPTIONAL ACCENT FONT: _______ +- Weight: _______ +- Use case: _______ (special headlines, callouts) +``` + +**Pairing Logic:** +- Serif + Sans-serif (classic, editorial) +- Geometric + Humanist (modern + warm) +- Display + System (distinctive + efficient) + +**Examples:** + +**Project A: Editorial Platform** +``` +Headline: Playfair Display (Serif, Bold 700) +Body: Inter (Sans-serif, Regular 400) +Why: Serif headlines = trustworthy, editorial feel +``` + +**Project B: Tech Startup** +``` +Headline: DM Sans (Sans-serif, Bold 700) +Body: DM Sans (Regular 400, Medium 500) +Why: Single-font system = modern, efficient, cohesive +``` + +**Project C: Luxury Brand** +``` +Headline: Cormorant Garamond (Serif, Light 300) +Body: Lato (Sans-serif, Regular 400) +Why: Elegant serif + readable sans = sophisticated +``` + +### 3. Tone of Voice + +**Template:** + +``` +BRAND PERSONALITY: +- Formal ↔ Casual: _______ (1-10 scale) +- Professional ↔ Friendly: _______ (1-10 scale) +- Serious ↔ Playful: _______ (1-10 scale) +- Authoritative ↔ Conversational: _______ (1-10 scale) + +MICROCOPY EXAMPLES: +- Button label (submit form): _______ +- Error message (invalid email): _______ +- Success message (saved): _______ +- Empty state: _______ + +ANIMATION PERSONALITY: +- Speed: _______ (quick/moderate/slow) +- Feel: _______ (precise/smooth/bouncy) +``` + +**Examples:** + +**Project A: Banking App** +``` +Personality: Formal (8), Professional (9), Serious (8) +Button: "Submit Application" +Error: "Email address format is invalid" +Success: "Application submitted successfully" +Animation: Quick (precise, efficient, no-nonsense) +``` + +**Project B: Social App** +``` +Personality: Casual (8), Friendly (9), Playful (7) +Button: "Let's go!" +Error: "Hmm, that email doesn't look right" +Success: "Nice! You're all set 🎉" +Animation: Moderate (smooth, friendly bounce) +``` + +### 4. Animation Speed & Feel + +**Template:** + +``` +SPEED PREFERENCE: +- UI interactions: _______ (100-150ms / 150-200ms / 200-300ms) +- State changes: _______ (200ms / 300ms / 400ms) +- Page transitions: _______ (300ms / 500ms / 700ms) + +ANIMATION STYLE: +- Easing preference: _______ (sharp / standard / bouncy) +- Movement type: _______ (minimal / smooth / expressive) +``` + +**Examples:** + +**Project A: Trading Platform** +``` +Speed: Fast (100ms UI, 200ms states, 300ms pages) +Style: Sharp easing, minimal movement +Why: Traders need speed, not distraction +``` + +**Project B: Wellness App** +``` +Speed: Slow (200ms UI, 400ms states, 500ms pages) +Style: Smooth easing, gentle movement +Why: Calm, relaxing experience matches brand +``` + +--- + +## III. ADAPTABLE ELEMENTS + +Context-dependent implementations that vary based on use case. + +### 1. Component Variations + +**Button Variants:** +- **Primary**: Full background color (high emphasis) +- **Secondary**: Outline only (medium emphasis) +- **Tertiary**: Text only (low emphasis) +- **Destructive**: Red-ish (danger actions) +- **Ghost**: Minimal (navigation, toolbars) + +**Adaptation Rules:** +- Primary: Main CTA, one per screen section +- Secondary: Alternative actions +- Tertiary: Less important actions, multiple allowed +- Use brand colors, but hierarchy logic is fixed + +### 2. Responsive Breakpoints + +**Fixed Ranges:** +- XS: 0-479px (small phones) +- SM: 480-767px (large phones) +- MD: 768-1023px (tablets) +- LG: 1024-1439px (laptops) +- XL: 1440px+ (desktop) + +**Adaptable Implementations:** + +**Simple Content Site:** +``` +XS-SM: Single column +MD: 2 columns +LG-XL: 3 columns max +Why: Content-focused, don't overwhelm +``` + +**Dashboard/Data App:** +``` +XS: Collapsed, cards stack +SM: Simplified sidebar +MD: Full sidebar + main content +LG-XL: Sidebar + main + right panel +Why: Data apps need more screen real estate +``` + +### 3. Dark Mode Palette + +**Adaptation Strategy:** + +Not a simple inversion. Dark mode needs adjusted contrast: + +**Light Mode:** +``` +Background: #FFFFFF (white) +Text: #0F172A (slate-900) → 21:1 contrast +``` + +**Dark Mode (Adapted):** +``` +Background: #0F172A (slate-900) +Text: #E2E8F0 (slate-200) → 15.8:1 contrast (still AA, but softer) +``` + +**Why Adapt:** +Pure white on pure black is too harsh. Dark mode needs slightly lower contrast for eye comfort. + +### 4. Loading States + +**Context-Dependent:** + +**Fast operations (<500ms):** +- No loading indicator (feels instant) + +**Medium operations (500ms-2s):** +- Spinner or skeleton screen + +**Long operations (>2s):** +- Progress bar with percentage +- Or: Skeleton + estimated time + +**Interactive Operations:** +- Button shows spinner inside (don't disable, show state) + +### 5. Error Handling Strategy + +**Context-Dependent:** + +**Form Errors:** +``` +Validate: On blur (after user leaves field) +Display: Inline below field +Recovery: Clear error on fix +``` + +**API Errors:** +``` +Transient (network): Show retry button +Permanent (404): Show helpful message + next steps +Critical (500): Contact support option +``` + +**Data Errors:** +``` +Missing: Show empty state with action +Corrupt: Show error boundary with reload +Invalid: Highlight + explain what's wrong +``` + +--- + +## DECISION TREE + +When implementing a feature, ask: + +### Is this... + +**FIXED?** +- Does it affect structure, accessibility, or universal UX? +- Examples: Spacing scale, grid, contrast ratios, component architecture +- **Action**: Use the fixed system, no variation + +**PROJECT-SPECIFIC?** +- Does it express brand personality or purpose? +- Examples: Colors, typography, tone of voice, animation feel +- **Action**: Fill in the template for this project + +**ADAPTABLE?** +- Does it depend on context, content, or use case? +- Examples: Component variants, responsive behavior, error handling +- **Action**: Choose appropriate variation based on context + +--- + +## EXAMPLE: Implementing a "Submit" Button + +### Fixed Elements (Always the same): +- Touch target: 44px minimum height +- Padding: 16px horizontal (from spacing scale) +- States: Default, Hover, Active, Focus, Disabled +- Animation: 150ms ease-out (lightweight profile) + +### Project-Specific (Filled per project): +- **Project A (Bank)**: Dark blue background, white text, "Submit Application" +- **Project B (Social)**: Coral background, white text, "Let's Go!" +- **Project C (Healthcare)**: Soft blue background, white text, "Continue" + +### Adaptable (Context-dependent): +- **Form context**: Primary button (full color) +- **Toolbar context**: Ghost button (text only) +- **Danger context**: Destructive variant (red-ish) + +--- + +## VALIDATION CHECKLIST + +Before finalizing a design, check: + +### Fixed Elements +- [ ] Uses spacing scale (4/8/12/16/24/32/48/64/96px) +- [ ] Follows grid system (12 or 16 columns) +- [ ] Meets WCAG AA contrast (4.5:1 normal, 3:1 large) +- [ ] Touch targets ≥ 44px +- [ ] Typography follows mathematical scale +- [ ] Components follow standard architecture + +### Project-Specific Elements +- [ ] Brand colors filled in and intentional +- [ ] Typography pairing chosen and justified +- [ ] Tone of voice defined and consistent +- [ ] Animation speed matches brand personality + +### Adaptable Elements +- [ ] Component variants appropriate for context +- [ ] Responsive behavior fits content type +- [ ] Loading states match operation duration +- [ ] Error handling fits error type + +--- + +## PROJECT KICKOFF TEMPLATE + +Use this to start a new project: + +``` +PROJECT NAME: _______________________ +PURPOSE: ____________________________ + +BRAND PERSONALITY: +- Primary emotion: _______ +- Warm or cool: _______ +- Formal or casual: _______ +- Conservative or bold: _______ + +COLORS (fill the template): +- Neutral base: _______ +- Primary accent: _______ +- Status colors: _______ / _______ / _______ + +TYPOGRAPHY (fill the template): +- Headline font: _______ +- Body font: _______ +- Pairing rationale: _______ + +TONE: +- Button labels style: _______ +- Error message style: _______ +- Success message style: _______ + +ANIMATION: +- Speed preference: _______ (fast/moderate/slow) +- Feel preference: _______ (sharp/smooth/bouncy) + +TARGET DEVICES: +- Primary: _______ (mobile/desktop/both) +- Secondary: _______ +``` + +--- + +## MAINTAINING CONSISTENCY + +### Documentation +- Keep this template updated as system evolves +- Document WHY choices were made, not just WHAT + +### Communication +- Share with designers: "Here's what varies vs. what's fixed" +- Share with developers: "Here are the design tokens" + +### Tooling +- Use CSS variables for project-specific values +- Use Tailwind config for spacing scale +- Use design tokens in Figma/Storybook + +### Reviews +- Audit: Does new work follow fixed elements? +- Validate: Are project-specific elements intentional? +- Question: Are adaptations justified by context? + +--- + +## EXAMPLES OF COMPLETE SYSTEMS + +### System A: B2B SaaS (Conservative) + +**Fixed**: Standard spacing, 12-col grid, WCAG AA, major third type scale +**Project-Specific**: +- Colors: Cool greys + corporate blue +- Typography: DM Sans (headlines + body) +- Tone: Professional, formal +- Animation: Quick, precise (150ms) +**Adaptable**: +- Dashboard gets multi-panel layout +- Forms are extensive (use progressive disclosure) +- Errors show detailed technical info + +### System B: Consumer Social App (Playful) + +**Fixed**: Same spacing/grid/accessibility/type logic +**Project-Specific**: +- Colors: Warm greys + vibrant coral +- Typography: Poppins (headlines) + Inter (body) +- Tone: Casual, friendly, playful +- Animation: Moderate, bouncy (200ms) +**Adaptable**: +- Mobile-first (most users on phones) +- Forms are minimal (progressive profiling) +- Errors are friendly, not technical + +### System C: Healthcare Platform (Clinical) + +**Fixed**: Same foundational structure +**Project-Specific**: +- Colors: Pure greys + medical blue +- Typography: System fonts (SF Pro / Segoe) +- Tone: Clear, authoritative, calm +- Animation: Slow, smooth (300ms) +**Adaptable**: +- Desktop-first (clinical use at workstations) +- Forms are complex (HIPAA compliance) +- Errors are precise with next steps + +--- + +## KEY TAKEAWAY + +**The system flexibility framework lets you:** +- Maintain consistency (fixed elements) +- Express brand personality (project-specific) +- Adapt to context (adaptable elements) + +**Without this framework:** +- Designers reinvent spacing every project +- Components feel inconsistent across products +- Brand personality overrides accessibility +- Context-blind implementations feel wrong + +**With this framework:** +- Speed: Start from proven foundations +- Consistency: Fixed elements guarantee it +- Flexibility: Express unique brand identity +- Context: Adapt without breaking system diff --git a/.agent/.agent/skills/bencium-innovative-ux-designer/MOTION-SPEC.md b/.agent/.agent/skills/bencium-innovative-ux-designer/MOTION-SPEC.md new file mode 100644 index 0000000..e37e363 --- /dev/null +++ b/.agent/.agent/skills/bencium-innovative-ux-designer/MOTION-SPEC.md @@ -0,0 +1,72 @@ +# Motion Specification + +Motion should surprise and delight while serving function. Animation is a creative tool. + +## Easing Curves + +| Easing | CSS | Use For | +|--------|-----|---------| +| **Ease-out** | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Entrances, appearing | +| **Ease-in** | `cubic-bezier(0.4, 0.0, 1, 1)` | Exits, disappearing | +| **Ease-in-out** | `cubic-bezier(0.4, 0.0, 0.2, 1)` | State changes, transforms | +| **Spring** | `cubic-bezier(0.68, -0.55, 0.265, 1.55)` | Playful, attention-grabbing | +| **Linear** | `linear` | Spinners, continuous loops | + +## Duration by Element Weight + +| Weight | Duration | Examples | +|--------|----------|----------| +| **Lightweight** | 150ms | Icons, badges, chips | +| **Standard** | 300ms | Cards, panels, list items | +| **Weighty** | 500ms | Modals, page transitions | + +## Duration by Interaction + +| Interaction | Duration | +|-------------|----------| +| Button press | 100ms | +| Hover state | 150ms | +| Tooltip appear | 200ms | +| Tab switch | 250ms | +| Modal open | 300ms | +| Page transition | 400ms | + +## Common Patterns + +```tsx +// Hover transition (CSS) + +``` + +### Example 2: Typography Hierarchy + +**Question First:** +``` +For this content hierarchy, I'm thinking: +- Headline: Large, bold, attention-grabbing +- Subheading: Medium, regular weight +- Body: Smaller, optimized for reading + +Should we go bold and contemporary, or subtle and refined? +``` + +**Implementation After Approval:** +```tsx +
+

+ Headline Here +

+

+ Supporting subheading +

+

+ Body text optimized for readability with proper line height. +

+
+``` + +### Example 3: Unique Color Palette Suggestion + +**Presenting Options:** +``` +I'd like to suggest three color directions that break from typical SaaS patterns: + +1. **Warm Earth Tones** + - Base: Warm grey (#E8E2DC) + - Accent: Terracotta (#C86E4B) + - For: Organic, trustworthy feel + +2. **Cool Midnight** + - Base: Deep navy (#1A2332) + - Accent: Cyan (#4ECDC4) + - For: Modern, tech-forward feel + +3. **Soft Pastels** + - Base: Soft pink (#FFE5E5) + - Accent: Sage green (#9DB5A4) + - For: Calm, approachable feel + +Which direction feels right for your brand? +``` + +## Common Patterns to Avoid + +❌ **NEVER:** +- Use Inter, Roboto, Arial, Space Grotesk as primary fonts +- Use generic SaaS blue (#3B82F6) or purple gradients on white +- Copy Apple's design language or use glass morphism +- Create cookie-cutter layouts that look AI-generated +- Skip asking about context before designing +- Converge on common choices across generations (vary everything!) +- Use animations that delay user actions +- Create cluttered interfaces where elements compete + +✅ **ALWAYS:** +- Ask about purpose, tone, constraints, differentiation FIRST +- Then commit BOLDLY to a distinctive aesthetic direction +- Use unexpected, characterful typography choices +- Create atmosphere: shadows, gradients, textures, grain (when intentional) +- Dominant colors with sharp accents (not timid, evenly-distributed palettes) +- Provide immediate feedback for interactions +- Test with real devices +- Validate accessibility (it enables creativity, not limits it) +- Remember: Claude is capable of extraordinary creative work - don't hold back! + +## Version History + +- v2.0.0 (2025-11-22): Creative liberation update - bold aesthetics, shadows/gradients allowed, Design Thinking protocol +- v1.0.0 (2025-10-18): Initial release with comprehensive UI/UX design guidance + +## References + +For additional context, see: +- **Anthropic Frontend Aesthetics Cookbook**: https://github.com/anthropics/claude-cookbooks/blob/main/coding/prompting_for_frontend_aesthetics.ipynb +- WCAG 2.1 Guidelines: https://www.w3.org/WAI/WCAG21/quickref/ +- Google Fonts: https://fonts.google.com/ +- Tailwind CSS Docs: https://tailwindcss.com/docs +- Shadcn UI Components: https://ui.shadcn.com/ + +**Progressive Disclosure Files:** +- ACCESSIBILITY.md - Accessibility essentials (WCAG AA baseline) +- MOTION-SPEC.md - Animation timing and easing +- RESPONSIVE-DESIGN.md - Mobile-first breakpoints and patterns diff --git a/CLAUDE.md b/CLAUDE.md deleted file mode 100644 index efddce0..0000000 --- a/CLAUDE.md +++ /dev/null @@ -1,218 +0,0 @@ -# CLAUDE.md - -This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. - -## Project Overview - -Interactive CV/portfolio for Andy Charlwood, presented as a GP clinical record system. The concept: *what if a GP surgery's patient record system were redesigned by a luxury product studio?* The structure and metaphor of a real clinical system (tiles as record sections, status indicators, medication-style skill entries, alerts) — but elevated with refined typography, considered motion, and a modern light aesthetic. - -**This is NOT a faithful NHS system clone.** It's a showcase portfolio that *evokes* the feel of clinical software while being distinctly beautiful. The clinical metaphor is the creative conceit; the execution should feel premium and contemporary. - -Built as a React SPA with TypeScript and Vite. - -**Reference design:** `References/GPSystemconcept.html` — the visual and structural target for the dashboard. - -## Commands - -- `npm run dev` — Start dev server (localhost:5173) -- `npm run build` — TypeScript compile + Vite production build -- `npm run typecheck` — TypeScript type checking only (`tsc --noEmit`) -- `npm run lint` — ESLint -- `npm run preview` — Preview production build - -No test framework is configured. - -## Architecture - -### Four-Phase UI Flow - -`App.tsx` manages a `Phase` state (`'boot'` → `'ecg'` → `'login'` → `'pmr'`). Each phase renders exclusively: - -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. Types credentials at a natural pace, then presents an interactive "Log In" button for the user to click. Login transitions to the dashboard. -4. **DashboardLayout** — The main portfolio experience: TopBar + Sidebar + scrollable tile-based dashboard. - -### Dashboard Layout (Post-Login) - -The dashboard uses a three-zone layout: - -``` -┌─────────────────────────────────────────────────────┐ -│ TopBar (fixed, 48px) — brand, search, session │ -├──────────┬──────────────────────────────────────────┤ -│ │ │ -│ Sidebar │ Card Grid (scrollable) │ -│ (272px) │ ┌─────────────────────────────────┐ │ -│ │ │ Patient Summary (full width) │ │ -│ Person │ ├────────────────┬────────────────┤ │ -│ Header │ │ Latest Results │ Repeat Meds │ │ -│ │ │ (KPIs) │ (Core Skills) │ │ -│ Tags │ ├────────────────┴────────────────┤ │ -│ │ │ Last Consultation (full width) │ │ -│ Alerts │ ├─────────────────────────────────┤ │ -│ │ │ Career Activity (full width) │ │ -│ │ ├─────────────────────────────────┤ │ -│ │ │ Education (full width) │ │ -│ │ ├─────────────────────────────────┤ │ -│ │ │ Projects (full width) │ │ -│ │ └─────────────────────────────────┘ │ -└──────────┴──────────────────────────────────────────┘ -``` - -**No view switching.** The dashboard is a single scrollable page of tiles. Users scroll to see all sections. Detail drill-down happens by expanding tiles in-place (accordion pattern). - -### Key Patterns - -- **Canvas ECG**: `ECGAnimation.tsx` does imperative canvas drawing with requestAnimationFrame — flatline → 3 heartbeats (40px→60px→100px) → mask-based letter tracing → exit. **Locked — do not change.** -- **TopBar**: `TopBar.tsx` — fixed at top, brand + search trigger + session info. Search bar triggers Command Palette on click/Ctrl+K. -- **Sidebar**: `Sidebar.tsx` — light background, contains PersonHeader (avatar, name, title, status, details), Tags, and Alerts only. Skills, Projects, Education are in the main content tiles. -- **Card Grid**: CSS Grid, 2 columns on desktop (gap 16px), 1 column on mobile. Tiles use a reusable `Card` component with consistent styling. -- **Tile Expansion**: Career Activity items, Project items, and Skill items expand in-place with height-only animation (200ms, ease-out). Single-expand accordion — only one item open at a time. -- **KPI Flip Cards**: Latest Results metrics flip on click to show explanation text. CSS perspective transform, 400ms. -- **Command Palette**: Ctrl+K opens a Spotlight-style search overlay. Fuzzy search via fuse.js. Keyboard navigation (arrow keys, Enter, Escape). -- **Staggered entrance**: TopBar slides down → Sidebar slides from left → Content fades in. Quick (200-300ms). -- **Expandable content**: Height-only animation, 200ms ease-out. Content grows/shrinks — no opacity fade. -- **Responsive breakpoints**: Desktop (full sidebar + 2-col grid), Tablet (collapsed/hidden sidebar + 1-col), Mobile (no sidebar, stacked tiles). - -### Path Aliases - -`@/` maps to `./src/` (configured in both `vite.config.ts` and `tsconfig.json`). - -### Type System - -All data types live in `src/types/index.ts` and `src/types/pmr.ts`. Strict TypeScript — no `any` types. One component per file with typed props interfaces. - -## Design Direction: GP System Dashboard - -The aesthetic direction is a **modern GP system dashboard** — the precision and information density of a medical records system, but with a light, contemporary, premium feel. Think: a healthcare SaaS product redesigned by a Swiss product studio. - -### Tone - -- **Precise, not cold.** Every element has a reason. Spacing is generous but intentional. -- **Light, not washed out.** Warm sage background, clean white surfaces, deliberate color accents. -- **Technical, not sterile.** Monospace data, status indicators, and coded entries create authentic texture. -- **Elegant, not decorative.** No gratuitous ornament. Beauty comes from proportion, contrast, and type. - -### Typography - -Typography is the primary vehicle for premium feel. Avoid generic system fonts. - -- **UI / Body:** - - **Elvaro Grotesque** (primary, `font-ui`) — Modern grotesque sans-serif. 7 weights (300-900). Institutional credibility with premium feel. Slightly condensed proportions suit data-dense UI. - - **Blumir** (alternative, `font-ui-alt`) — Geometric-humanist hybrid. Variable font (100-700). More refined/luxurious feel. - - Both fonts sourced from Envato (licensed), stored in `Fonts/`. **Do not use Inter, Roboto, DM Sans, or system defaults.** - - Font files: Elvaro `Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-*.woff2`, Blumir `Fonts/blumir-font-family/WOFF/Blumir-VF.woff2` -- **Monospace / Data**: Geist Mono for timestamps, session info, GPhC number, dates, coded entries. Creates "technical texture." -- **Terminal phase**: Fira Code — locked, do not change. -- **Type scale**: Tight. Headings 15-18px, body 12.5-14px, labels 10-12px. Precision over drama. -- **Weight hierarchy**: Use weight (400/500/600/700) rather than size to establish hierarchy. - -### Color Palette - -The palette anchors on teal as the primary accent, with a light sidebar + warm content background. - -- **Teal `#0D6E6E`** — Primary accent. Active states, links, avatar gradient, interactive elements. Hover: `#0A8080`. Light: `rgba(10,128,128,0.08)`. -- **Background `#F0F5F4`** — Warm sage. The content area feels organic, not flat gray. -- **Sidebar `#F7FAFA`** — Very light. Right border `#D4E0DE` separates from content. -- **TopBar `#FFFFFF`** — White surface. Bottom border `#D4E0DE`. -- **Cards `#FFFFFF`** — White with shadow-sm and border-light. Hover deepens to shadow-md. -- **Status colors**: Success `#059669`, Amber `#D97706`, Alert `#DC2626`, Purple `#7C3AED` — each with light bg and border variants. Always paired with text labels. -- **Text**: Primary `#1A2B2A`, Secondary `#5B7A78`, Tertiary `#8DA8A5`. Use full range for hierarchy. -- **Borders**: Structural `#D4E0DE`, Cards/inner `#E4EDEB`. - -### Shadows & Depth - -Three-tier shadow system for layered depth: - -- **Cards (resting)**: `0 1px 2px rgba(26,43,42,0.05)` — gentle, always present. -- **Cards (hover/interactive)**: `0 2px 8px rgba(26,43,42,0.08)` — slightly lifted. -- **Overlays (command palette, modals)**: `0 8px 32px rgba(26,43,42,0.12)` — clearly elevated. -- **Hover states**: Shadow deepens + border color strengthens. Subtle, not dramatic. - -### Motion - -Motion should feel considered and premium, never flashy: - -- **Entrance animations**: Dashboard materializes in sequence — TopBar slides down → Sidebar slides from left → Content fades in. Quick (200-300ms) with easing. -- **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. Transition to dashboard layout. -- **Tile expansion**: Height-only animation, 200ms ease-out. Content grows/shrinks — no opacity fade. -- **KPI flip**: CSS perspective rotateY, 400ms ease-in-out. Click to flip, click to flip back. -- **Command palette**: Scale 0.97→1.0 + translateY entrance, 200ms. Backdrop fade. -- **Hover states**: Subtle, immediate. Border color shifts, shadow deepens. Think: OS-level responsiveness. -- **`prefers-reduced-motion`**: All animations skip to final state. No exceptions. - -### Spatial Composition - -- **Generous but structured.** Cards have 20px padding. Tile grid has 16px gap. Sections breathe. -- **Clear visual hierarchy.** Card headers: uppercase, small (12px), tracked-out, secondary color with colored dot indicator. -- **Two-column grid** on desktop, single column on mobile. Full-width tiles span both columns. -- **Sidebar sections** separated by thin divider titles (10px, uppercase, tertiary, with line extending right). - -### What Makes It Memorable - -The distinctiveness comes from the *clinical metaphor applied to a modern interface*: -- A light, professional sidebar with clinical-style person header and alert flags -- Skills presented as "Repeat Medications" with frequency dosing (twice daily, when required) -- KPI metrics that flip to reveal explanations, like interactive test results -- Career history as a clinical timeline with color-coded entry types -- The boot sequence → ECG → login flow is theatrical in a way that real clinical software never is -- Command palette (Ctrl+K) for searching records, like a clinical search tool - -## Styling - -Tailwind CSS with custom design tokens in `tailwind.config.js`: -- **Color tokens**: PMR-prefixed tokens (`pmr-accent`, `pmr-bg`, `pmr-surface`, `pmr-sidebar`, `pmr-text-primary`, etc.) -- **Fonts**: `font-ui` (Elvaro Grotesque), `font-ui-alt` (Blumir), `font-geist` (Geist Mono), `font-mono` (Fira Code for terminal) -- **Breakpoints**: xs 480px, sm 640px, md 768px, lg 1024px, xl 1280px -- **Border radius**: 8px default for cards/tiles (`var(--radius)`). 6px for inner elements (`var(--radius-sm)`). 12px exception for login card and command palette. -- **Shadows**: `shadow-sm`, `shadow-md`, `shadow-lg` tokens matching three-tier system. -- CSS custom properties in `index.css` for both boot/ECG phase tokens and dashboard phase tokens. -- Inline styles only for dynamic values that Tailwind can't express. - -## Guardrails - -- **Boot sequence**: Text, colors, and timing must match `References/concept.html` exactly. **Do not modify.** -- **ECG animation**: Timing, amplitudes, color transitions, and mask-based text reveal must match the concept reference. **Do not modify.** -- **Reference design**: `References/GPSystemconcept.html` is the visual and structural target for the dashboard. -- **CV content**: Sourced from `References/CV_v4.md` — roles, dates, and achievement numbers must be accurate. -- **Icons**: Via `lucide-react`, not unicode symbols. -- **Accessibility**: WCAG 2.1 AA compliance. Semantic HTML, ARIA attributes, keyboard navigation, `prefers-reduced-motion` support throughout. Status indicators always paired with text labels. -- **No generic aesthetics**: Every design decision should feel intentional. If a component could appear in any random SaaS template, it needs more character. -- **Fonts**: Elvaro Grotesque (primary) or Blumir (alt). Never Inter, Roboto, DM Sans, or system defaults. DM Sans appears in the concept HTML as a placeholder only. - -## Project Structure - -``` -src/ -├── components/ # One component per file (PascalCase) -│ ├── tiles/ # Dashboard tile components (PatientSummaryTile, LatestResultsTile, etc.) -│ ├── views/ # Legacy PMR views (being replaced by tiles — may be referenced during transition) -│ ├── TopBar.tsx # Fixed top bar (brand, search trigger, session) -│ ├── Sidebar.tsx # Light sidebar (person header, tags, alerts) -│ ├── DashboardLayout.tsx # Main layout (topbar + sidebar + card grid) -│ ├── Card.tsx # Reusable card component with header -│ ├── CommandPalette.tsx # Ctrl+K search overlay -│ └── ... # Boot, ECG, Login (unchanged) -├── contexts/ # React contexts (AccessibilityContext) -├── data/ # Static data files -│ ├── patient.ts # Person details -│ ├── consultations.ts # Career roles (used in Last Consultation + Career Activity) -│ ├── medications.ts # Legacy skill data -│ ├── problems.ts # Achievements -│ ├── investigations.ts # Projects -│ ├── documents.ts # Education entries -│ ├── profile.ts # Personal statement -│ ├── tags.ts # Sidebar tags -│ ├── alerts.ts # Sidebar alert flags -│ ├── kpis.ts # KPI metrics for Latest Results -│ └── skills.ts # Skills with frequency/years (medication metaphor) -├── hooks/ # Custom hooks (camelCase, use* prefix) -├── lib/ # Utility functions (search.ts for fuse.js) -├── types/ # TypeScript interfaces (index.ts, pmr.ts) -├── App.tsx # Phase manager (root component) -└── index.css # Global styles + Tailwind directives -Ralph/ # Implementation plan, guardrails, progress tracking -References/ # Source content (concept.html, GPSystemconcept.html, CV_v4.md) -``` diff --git a/current_login.jpg b/current_login.jpg deleted file mode 100644 index 2d08840..0000000 Binary files a/current_login.jpg and /dev/null differ