EGH Research

# EGW Writings Website - UI/UX Design System ## Overview This document outlines the comprehensive UI/UX design system for the EGW Writings website, focusing on creating a clean, academic research-oriented design that feels trustworthy and professional while being user-friendly for both casual readers and serious researchers. ## Design Philosophy ### Core Principles - **Academic Excellence**: Clean, scholarly appearance that instills confidence - **Accessibility First**: Inclusive design for all users and abilities - **Research-Focused**: Tools and interfaces optimized for deep study - **Progressive Enhancement**: Mobile-first, responsive design - **Trust & Authority**: Professional presentation of religious content ## Color Scheme ### Primary Colors ```css primary: { 50: '#f0f9ff', /* Very light blue - backgrounds */ 100: '#e0f2fe', /* Light blue - subtle highlights */ 200: '#bae6fd', /* Soft blue - hover states */ 300: '#7dd3fc', /* Medium blue - secondary elements */ 400: '#38bdf8', /* Bright blue - interactive elements */ 500: '#0ea5e9', /* Main blue - primary actions */ 600: '#0284c7', /* Deep blue - primary buttons */ 700: '#0369a1', /* Darker blue - emphasis */ 800: '#075985', /* Very dark blue - headers */ 900: '#0c4a6e' /* Darkest blue - text */ } ``` ### Secondary Colors (Warm Earth Tones) ```css secondary: { 50: '#fdf8f6', /* Warm white - backgrounds */ 100: '#f2e8e5', /* Light cream - cards */ 200: '#eaddd7', /* Soft cream - dividers */ 300: '#e0cec7', /* Medium cream - borders */ 400: '#d2bab0', /* Warm tan - inactive elements */ 500: '#bfa094', /* Medium brown - secondary text */ 600: '#a18072', /* Deep tan - muted elements */ 700: '#977669', /* Brown - footnotes */ 800: '#846358', /* Dark brown - strong emphasis */ 900: '#43302b' /* Darkest brown - headers */ } ``` ### Semantic Colors - **Success**: Green (`#059669` / `#10b981`) - **Warning**: Amber (`#d97706` / `#f59e0b`) - **Error**: Red (`#dc2626` / `#ef4444`) - **Info**: Blue (Primary 500) ## Typography ### Font Families ```css font-serif: ['Crimson Text', 'Georgia', 'serif'] /* Headers, emphasis */ font-sans: ['Inter', 'system-ui', 'sans-serif'] /* Body text, UI */ ``` ### Typography Scale - **Display**: 3.5rem (56px) - Hero headings - **H1**: 2.5rem (40px) - Page titles - **H2**: 2rem (32px) - Section headers - **H3**: 1.5rem (24px) - Subsection headers - **H4**: 1.25rem (20px) - Component headers - **Body Large**: 1.125rem (18px) - Lead paragraphs - **Body**: 1rem (16px) - Regular text - **Small**: 0.875rem (14px) - Captions, metadata - **Tiny**: 0.75rem (12px) - Labels, footnotes ### Typography Usage - **Headers**: Crimson Text (serif) for authority and readability - **Body Text**: Inter (sans-serif) for clarity and modern feel - **Line Height**: 1.7 for body text, 1.3 for headings - **Letter Spacing**: Slight tracking on headings (-0.025em) ## Component Library ### Navigation Components #### Enhanced Header (`/src/components/layout/enhanced-header.tsx`) - **Sticky navigation** with scroll-aware styling - **Dropdown menus** for Books and Research sections - **Integrated search bar** with real-time functionality - **User menu** with profile, favorites, settings - **Mobile-responsive** with hamburger menu - **Accessibility**: ARIA labels, keyboard navigation #### Navigation Structure ``` Home Books ├── All Books ├── Popular Books ├── Recent Additions └── By Category Research ├── Start Research ├── Topic Compiler ├── Advanced Search └── Research Tools About Contact ``` ### Search Components #### Advanced Search (`/src/components/search/advanced-search.tsx`) - **Multi-level filtering**: Books, content types, date ranges - **Real-time suggestions** for topics and search terms - **Faceted search** with visual filter chips - **Smart defaults** and query building - **Responsive design** with collapsible filters #### Search Features - Text search with autocomplete - Book selection (multi-select) - Content type filtering - Date range picker - Language selection - Topic suggestions - Active filter display with removal - Export search results ### Research Components #### Compilation Page (`/src/components/research/compilation-page.tsx`) - **Topic input** with smart suggestions - **Source selection** with granular controls - **PDF settings** (citation style, formatting, layout) - **Progress tracking** with real-time updates - **Download interface** with preview options #### Compilation Features - Smart topic suggestions - Content source selection - Advanced formatting options - Progress visualization - Error handling and validation - Download management - Settings persistence ### Library Components #### Books Library (`/src/components/books/library-page.tsx`) - **Grid/List view toggle** for different browsing preferences - **Advanced filtering** by category, language, year - **Sorting options** (title, year, rating, popularity) - **Favorites system** with persistent storage - **Reading interface** integration #### Library Features - View mode switching (grid/list) - Multi-dimensional filtering - Advanced sorting - Favorite books tracking - Reading progress - Book recommendations - Social features (ratings, reviews) ### Layout Components #### Responsive Layout (`/src/components/layout/responsive-layout.tsx`) - **Container system** with multiple size options - **Sidebar support** with mobile overlay - **Responsive utilities** and helper classes - **Mobile-first approach** with progressive enhancement ## User Flows ### Primary User Journeys #### 1. Research Compilation Flow ``` Homepage → Research Section → Topic Input → Source Selection → Settings Configuration → Generation Progress → Download PDF ``` **Key UX Considerations:** - Clear progress indication - Settings validation - Error recovery - Download options - Sharing capabilities #### 2. Book Discovery Flow ``` Homepage → Books Library → Filtering/Search → Book Detail → Reading Interface → Bookmarking/Notes ``` **Key UX Considerations:** - Fast search results - Preview capabilities - Reading progress tracking - Cross-references - Citation tools #### 3. Advanced Search Flow ``` Search Bar → Advanced Filters → Results Refinement → Content Discovery → Action (Read/Compile/Share) ``` **Key UX Considerations:** - Filter persistence - Result relevance - Quick actions - Export options - Search history ## Responsive Design ### Breakpoints ```css sm: '640px' /* Small tablets */ md: '768px' /* Large tablets */ lg: '1024px' /* Small desktops */ xl: '1280px' /* Large desktops */ 2xl: '1536px' /* Extra large screens */ ``` ### Responsive Strategy - **Mobile First**: Design for smallest screen, enhance upward - **Content Priority**: Most important content visible on mobile - **Touch Targets**: Minimum 44px for interactive elements - **Progressive Disclosure**: Show more features on larger screens - **Flexible Grids**: CSS Grid and Flexbox for adaptive layouts ### Component Responsiveness - **Navigation**: Hamburger menu on mobile, full nav on desktop - **Search**: Simplified mobile interface, advanced features on desktop - **Cards**: Single column on mobile, multi-column on desktop - **Filters**: Drawer/modal on mobile, sidebar on desktop ## Accessibility Standards ### WCAG 2.1 AA Compliance #### Color & Contrast - **Text contrast**: Minimum 4.5:1 for normal text - **Large text**: Minimum 3:1 for 18px+ or bold 14px+ - **Interactive elements**: 3:1 contrast minimum - **Color independence**: Never rely solely on color for meaning #### Keyboard Navigation - **Tab order**: Logical, predictable flow - **Focus indicators**: Visible, high-contrast outlines - **Skip links**: Bypass navigation for screen readers - **Keyboard shortcuts**: For power users and accessibility #### Screen Reader Support - **Semantic HTML**: Proper heading hierarchy, landmarks - **ARIA labels**: Descriptive labels for complex interactions - **Alt text**: Meaningful descriptions for images - **Live regions**: Announce dynamic content changes #### Motor Accessibility - **Large touch targets**: 44px minimum for mobile - **Hover independence**: No hover-only functionality - **Timeout extensions**: For slow interactions - **Error recovery**: Clear error messages and correction paths ## Interactive Specifications ### Animation & Transitions ```css /* Subtle, purpose-driven animations */ transition-timing: cubic-bezier(0.4, 0, 0.2, 1) transition-duration: 200ms (fast), 300ms (medium), 500ms (slow) ``` #### Animation Principles - **Reduced motion**: Respect `prefers-reduced-motion` - **Performance**: Use transform and opacity for animations - **Purpose-driven**: Only animate to improve UX - **Feedback**: Visual confirmation of user actions ### Micro-interactions - **Button states**: Hover, active, disabled, loading - **Form validation**: Real-time, contextual feedback - **Search suggestions**: Smooth appearance/disappearance - **Progress indicators**: Smooth progress updates - **Notification toasts**: Slide-in animations ### Loading States - **Skeleton screens**: For content loading - **Progress bars**: For long operations - **Spinners**: For quick operations - **Optimistic updates**: Immediate feedback ## Content Organization Strategy ### Information Architecture ``` Homepage (Overview & Quick Access) ├── Search (Global, Prominent) ├── Featured Content (Curated) ├── Quick Actions (Research, Browse) └── Statistics (Trust Indicators) Books Section (Library Management) ├── All Books (Complete Collection) ├── Categories (Topical Organization) ├── Favorites (Personal Collection) └── Reading History (Progress Tracking) Research Section (Study Tools) ├── Advanced Search (Deep Discovery) ├── Topic Compilation (Custom PDFs) ├── Research Tools (Analysis Features) └── Saved Research (Project Management) ``` ### Content Hierarchy 1. **Primary Actions**: Search, Research, Browse 2. **Secondary Features**: Favorites, History, Settings 3. **Tertiary Information**: Stats, About, Contact 4. **Utility**: User account, preferences, help ### Navigation Patterns - **Breadcrumbs**: For deep navigation paths - **Related content**: Contextual suggestions - **Quick filters**: Common search refinements - **Recently viewed**: Easy return to previous content ## Performance Considerations ### Core Web Vitals - **LCP (Largest Contentful Paint)**: < 2.5s - **FID (First Input Delay)**: < 100ms - **CLS (Cumulative Layout Shift)**: < 0.1 ### Optimization Strategies - **Image optimization**: WebP format, responsive images - **Code splitting**: Route-based and component-based - **Caching**: Aggressive caching for static content - **CDN**: Global content delivery - **Lazy loading**: Below-the-fold content ## Implementation Guidelines ### File Structure ``` /src/components/ ├── layout/ # Navigation, headers, containers ├── search/ # Search interfaces and filters ├── research/ # Research and compilation tools ├── books/ # Library and reading interfaces ├── common/ # Shared UI components └── forms/ # Form components and validation ``` ### Naming Conventions - **Components**: PascalCase (`BookCard`, `SearchBar`) - **Files**: kebab-case (`book-card.tsx`, `search-bar.tsx`) - **CSS Classes**: Tailwind utilities + custom BEM - **Props**: camelCase with descriptive names ### Code Organization - **Component composition**: Small, focused components - **Custom hooks**: Reusable logic extraction - **Context providers**: Global state management - **Type safety**: TypeScript for all components - **Testing**: Unit tests for critical components This design system provides a comprehensive foundation for building a professional, accessible, and user-friendly research platform for Ellen G. White writings.