---
alwaysApply: true
---
# Physician App - Theme & UI Design Rules

## 🎨 Color Palette - "Modern Healthcare Blue"

### 1. Primary Color Scheme
```typescript
// Primary Colors
Primary: '#2196F3'        // Material Blue - Main brand color
Secondary: '#1976D2'      // Darker Blue - Secondary actions
Tertiary: '#E3F2FD'       // Very Light Blue - Backgrounds
Quaternary: '#0D47A1'     // Deep Blue - Accents

// Text Colors
TextPrimary: '#212121'    // Dark Gray - Main text
TextSecondary: '#757575'  // Medium Gray - Secondary text
TextMuted: '#9E9E9E'      // Light Gray - Muted text

// Background Colors
Background: '#FFFFFF'     // White - Primary background
BackgroundAlt: '#FAFAFA'  // Light Gray - Alternative background
BackgroundAccent: '#F5F5F5' // Soft Gray - Accent backgrounds
```

### 2. Status & Feedback Colors
```typescript
// Status Colors
Success: '#4CAF50'        // Material Green - Success states
Warning: '#FF9800'        // Material Orange - Warning states
Error: '#F44336'          // Material Red - Error states
Info: '#2196F3'           // Material Blue - Information states

// UI Elements
Border: '#E0E0E0'         // Light Gray Border
CardBackground: '#FFFFFF' // White - Card backgrounds
Shadow: 'rgba(0, 0, 0, 0.1)' // Subtle Gray Shadow
```

## 🏗️ Typography System

### 3. Font Hierarchy
```typescript
// Font Families
PrimaryFont: 'Roboto'     // Main font family
SecondaryFont: 'Medical-Icons' // Icon font

// Font Weights
Light: 300
Regular: 400
Medium: 500
Bold: 700

// Font Sizes
DisplayLarge: 32px        // Main headings
DisplayMedium: 24px       // Section headings
DisplaySmall: 20px        // Subsection headings
BodyLarge: 16px           // Body text
BodyMedium: 14px          // Secondary text
BodySmall: 12px           // Captions
Caption: 10px             // Small labels
```

### 4. Line Heights & Spacing
```typescript
// Line Heights
Tight: 1.2               // Headings
Normal: 1.4               // Body text
Relaxed: 1.6              // Long text

// Letter Spacing
Tight: -0.5px            // Headings
Normal: 0px               // Body text
Wide: 0.5px               // Labels
```

## 📐 Spacing & Layout

### 5. Spacing Scale
```typescript
// Base Spacing Unit: 4px
Spacing: {
  xs: 4,      // 4px
  sm: 8,      // 8px
  md: 16,     // 16px
  lg: 24,     // 24px
  xl: 32,     // 32px
  xxl: 48,    // 48px
  xxxl: 64    // 64px
}
```

### 6. Layout Rules
```typescript
// Container Max Widths
Mobile: 375
Tablet: 768
Desktop: 1024

// Border Radius
Small: 4
Medium: 8
Large: 12
XLarge: 16
Round: 50

// Shadows (React Native StyleSheet)
Small: {
  shadowColor: '#000000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.1,
  shadowRadius: 4,
  elevation: 2
}

Medium: {
  shadowColor: '#000000',
  shadowOffset: { width: 0, height: 4 },
  shadowOpacity: 0.15,
  shadowRadius: 8,
  elevation: 4
}

Large: {
  shadowColor: '#000000',
  shadowOffset: { width: 0, height: 8 },
  shadowOpacity: 0.2,
  shadowRadius: 16,
  elevation: 8
}
```

## 🎯 Component Design Rules

### 7. Button Design System
```typescript
// Button Variants
Primary: {
  backgroundColor: '#2196F3',
  borderColor: '#2196F3',
  borderRadius: 8,
  shadowColor: '#2196F3',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.3,
  shadowRadius: 4,
  elevation: 3
}

Secondary: {
  backgroundColor: 'transparent',
  borderColor: '#2196F3',
  borderRadius: 8
}

Success: {
  backgroundColor: '#4CAF50',
  borderColor: '#4CAF50',
  borderRadius: 8,
  shadowColor: '#4CAF50',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.3,
  shadowRadius: 4,
  elevation: 3
}

Critical: {
  backgroundColor: '#F44336',
  borderColor: '#F44336',
  borderRadius: 8,
  shadowColor: '#F44336',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.3,
  shadowRadius: 4,
  elevation: 3
}

// Button Sizes
Small: { paddingHorizontal: 16, paddingVertical: 8, fontSize: 14, borderRadius: 6 }
Medium: { paddingHorizontal: 24, paddingVertical: 12, fontSize: 16, borderRadius: 8 }
Large: { paddingHorizontal: 32, paddingVertical: 16, fontSize: 18, borderRadius: 10 }
```

### 8. Card Design Rules
```typescript
// Card Variants
Default: {
  backgroundColor: '#FFFFFF',
  borderColor: '#E0E0E0',
  borderRadius: 12,
  padding: 16,
  shadowColor: '#000000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.1,
  shadowRadius: 4,
  elevation: 2
}

Elevated: {
  backgroundColor: '#FFFFFF',
  borderColor: '#E0E0E0',
  borderRadius: 12,
  padding: 16,
  shadowColor: '#000000',
  shadowOffset: { width: 0, height: 4 },
  shadowOpacity: 0.15,
  shadowRadius: 8,
  elevation: 4
}

Critical: {
  backgroundColor: '#FFEBEE',
  borderColor: '#F44336',
  borderRadius: 12,
  padding: 16,
  shadowColor: '#F44336',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.1,
  shadowRadius: 4,
  elevation: 2
}

PatientCard: {
  backgroundColor: '#FFFFFF',
  borderColor: '#E0E0E0',
  borderRadius: 16,
  padding: 20,
  shadowColor: '#000000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.08,
  shadowRadius: 4,
  elevation: 2
}
```

### 9. Input Field Design
```typescript
// Input States
Default: {
  borderColor: '#E0E0E0',
  backgroundColor: '#FFFFFF',
  borderRadius: 8,
  paddingHorizontal: 12,
  paddingVertical: 12
}

Focused: {
  borderColor: '#2196F3',
  backgroundColor: '#FFFFFF',
  borderRadius: 8,
  paddingHorizontal: 12,
  paddingVertical: 12
}

Error: {
  borderColor: '#F44336',
  backgroundColor: '#FFEBEE',
  borderRadius: 8,
  paddingHorizontal: 12,
  paddingVertical: 12
}

Disabled: {
  borderColor: '#E0E0E0',
  backgroundColor: '#F5F5F5',
  borderRadius: 8,
  paddingHorizontal: 12,
  paddingVertical: 12
}
```

## 🚨 Alert & Status Design (Following Screenshot UI)

### 10. Alert Priority System
```typescript
// Critical Alerts
Critical: {
  backgroundColor: '#FFEBEE',
  borderColor: '#F44336',
  borderRadius: 8,
  padding: 16
}

// Warning Alerts
Warning: {
  backgroundColor: '#FFF3E0',
  borderColor: '#FF9800',
  borderRadius: 8,
  padding: 16
}

// Success Alerts
Success: {
  backgroundColor: '#E8F5E8',
  borderColor: '#4CAF50',
  borderRadius: 8,
  padding: 16
}

// Info Alerts
Info: {
  backgroundColor: '#E3F2FD',
  borderColor: '#2196F3',
  borderRadius: 8,
  padding: 16
}

// Patient Status
Active: {
  backgroundColor: '#E3F2FD',
  borderColor: '#2196F3',
  borderRadius: 12,
  paddingHorizontal: 8,
  paddingVertical: 4
}

Pending: {
  backgroundColor: '#FFF3E0',
  borderColor: '#FF9800',
  borderRadius: 12,
  paddingHorizontal: 8,
  paddingVertical: 4
}

Completed: {
  backgroundColor: '#E8F5E8',
  borderColor: '#4CAF50',
  borderRadius: 12,
  paddingHorizontal: 8,
  paddingVertical: 4
}
```

### 11. Badge & Tag Design (Following Screenshot UI)
```typescript
// Status Badges
StatusBadge: {
  paddingHorizontal: 8,
  paddingVertical: 4,
  borderRadius: 12,
  fontSize: 12,
  fontWeight: '500'
}

// Priority Badges
PriorityBadge: {
  paddingHorizontal: 12,
  paddingVertical: 6,
  borderRadius: 16,
  fontSize: 12,
  fontWeight: '600'
}

// Medical Badges
MedicalBadge: {
  paddingHorizontal: 10,
  paddingVertical: 5,
  borderRadius: 14,
  fontSize: 11,
  fontWeight: '500'
}
```

## 📱 Screen-Specific Design Rules

### 12. ER Dashboard Screen Design (Following Screenshot UI)
```typescript
// Header Section
Header: {
  backgroundColor: '#FFFFFF',
  paddingHorizontal: 16,
  paddingVertical: 12,
  borderBottomColor: '#E0E0E0',
  borderBottomWidth: 1
}

// Critical Alerts Section (Like promotional banner but for emergencies)
CriticalAlerts: {
  backgroundColor: '#FFEBEE',
  borderColor: '#F44336',
  borderRadius: 16,
  padding: 20,
  marginHorizontal: 16,
  marginVertical: 12,
  shadowColor: '#F44336',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.15,
  shadowRadius: 8,
  elevation: 4
}

// Patient List Section (Like specialist filter)
PatientList: {
  paddingHorizontal: 16,
  paddingVertical: 8,
  backgroundColor: '#FFFFFF'
}

// Quick Actions (Like service icons but for emergency actions)
QuickActions: {
  width: 60,
  height: 60,
  borderRadius: 30,
  backgroundColor: '#F5F5F5',
  justifyContent: 'center',
  alignItems: 'center',
  marginHorizontal: 8
}

// Patient Cards (Like doctor cards but for patients)
PatientCard: {
  backgroundColor: '#FFFFFF',
  borderRadius: 16,
  padding: 16,
  marginHorizontal: 8,
  marginVertical: 4,
  shadowColor: '#000000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.08,
  shadowRadius: 4,
  elevation: 2,
  minWidth: 200
}
```

### 13. Patient Details Screen Design (Following Screenshot UI)
```typescript
// Patient Header
PatientHeader: {
  backgroundColor: '#FFFFFF',
  padding: 20,
  borderBottomColor: '#E0E0E0',
  borderBottomWidth: 1
}

// Patient Info Card
PatientInfoCard: {
  backgroundColor: '#FFFFFF',
  borderRadius: 16,
  padding: 20,
  margin: 16,
  shadowColor: '#000000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.1,
  shadowRadius: 8,
  elevation: 4
}

// Vital Signs Section (Like contact options but for medical data)
VitalSigns: {
  flexDirection: 'row',
  justifyContent: 'space-around',
  paddingVertical: 16,
  borderBottomColor: '#E0E0E0',
  borderBottomWidth: 1
}

// Medical History Section (Like calendar section but for medical records)
MedicalHistory: {
  backgroundColor: '#FFFFFF',
  borderRadius: 12,
  padding: 16,
  margin: 16,
  shadowColor: '#000000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.08,
  shadowRadius: 4,
  elevation: 2
}

// Action Buttons (Like booking button but for medical actions)
ActionButton: {
  backgroundColor: '#2196F3',
  borderRadius: 12,
  padding: 16,
  margin: 16,
  alignItems: 'center',
  shadowColor: '#2196F3',
  shadowOffset: { width: 0, height: 4 },
  shadowOpacity: 0.3,
  shadowRadius: 8,
  elevation: 6
}
```

### 14. Login Screen Design (Following Screenshot UI)
```typescript
// Login Container
LoginContainer: {
  backgroundColor: '#F1FDFF',
  padding: 24,
  borderRadius: 12,
  shadowColor: '#2196F3',
  shadowOffset: { width: 0, height: 4 },
  shadowOpacity: 0.15,
  shadowRadius: 8,
  elevation: 4
}

// Hospital Logo
Logo: {
  width: 120,
  height: 120,
  marginBottom: 32
}

// Form Fields
FormField: {
  marginBottom: 16,
  backgroundColor: '#FFFFFF',
  borderColor: '#E0E0E0',
  borderRadius: 8
}

// Login Button
LoginButton: {
  backgroundColor: '#2196F3',
  borderRadius: 8,
  padding: 16,
  fontSize: 16,
  fontWeight: '600'
}
```

## 🎨 Icon Design System

### 15. Icon Specifications
```typescript
// Icon Sizes
IconSizes: {
  xs: 12,     // Extra small
  sm: 16,     // Small
  md: 24,     // Medium (default)
  lg: 32,     // Large
  xl: 48      // Extra large
}

// Icon Colors
IconColors: {
  Primary: '#2196F3',
  Secondary: '#1976D2',
  Success: '#4CAF50',
  Warning: '#FF9800',
  Error: '#F44336',
  Info: '#2196F3',
  Muted: '#9E9E9E'
}

// Medical Icons
MedicalIcons: {
  Stethoscope: 'medical-stethoscope',
  Heart: 'medical-heart',
  Brain: 'medical-brain',
  Emergency: 'medical-emergency',
  Patient: 'medical-patient',
  Bed: 'medical-bed',
  Alert: 'medical-alert',
  VitalSigns: 'medical-vital-signs',
  Medication: 'medical-medication',
  Lab: 'medical-lab',
  Imaging: 'medical-imaging',
  Surgery: 'medical-surgery'
}
```

## 📊 Data Visualization

### 16. Chart Colors
```typescript
// Chart Color Palette
ChartColors: {
  Primary: '#2196F3',
  Secondary: '#1976D2',
  Tertiary: '#E3F2FD',
  Quaternary: '#0D47A1',
  Success: '#4CAF50',
  Warning: '#FF9800',
  Error: '#F44336'
}

// Vital Signs Charts
VitalSignsChart: {
  backgroundColor: '#FFFFFF',
  gridColor: '#E0E0E0',
  lineColor: '#2196F3',
  pointColor: '#1976D2'
}

// Patient Status Charts
PatientStatusChart: {
  backgroundColor: '#FFFFFF',
  gridColor: '#E0E0E0',
  lineColor: '#4CAF50',
  pointColor: '#2E7D32'
}
```

## 🌙 Dark Mode Support

### 17. Dark Mode Colors
```typescript
// Dark Mode Palette
DarkMode: {
  Background: '#121212',
  BackgroundAlt: '#1E1E1E',
  BackgroundAccent: '#2D2D2D',
  TextPrimary: '#FFFFFF',
  TextSecondary: '#B0B0B0',
  TextMuted: '#808080',
  Border: '#404040',
  CardBackground: '#1E1E1E',
  Primary: '#2196F3',
  Secondary: '#1976D2'
}
```

## 📱 Responsive Design

### 18. Breakpoint System
```typescript
// Breakpoints
Breakpoints: {
  Mobile: 375,
  Tablet: 768,
  Desktop: 1024,
  LargeDesktop: 1440
}

// Responsive Spacing
ResponsiveSpacing: {
  Mobile: { padding: 16, margin: 8 },
  Tablet: { padding: 24, margin: 16 },
  Desktop: { padding: 32, margin: 24 }
}
```

## 🎯 Accessibility Rules

### 19. Accessibility Standards
```typescript
// Color Contrast
ContrastRatios: {
  Normal: 4.5,    // Minimum for normal text
  Large: 3.0,     // Minimum for large text
  UI: 3.0         // Minimum for UI elements
}

// Touch Targets
TouchTargets: {
  Minimum: 44,    // Minimum touch target size
  Preferred: 48   // Preferred touch target size
}

// Focus Indicators
FocusIndicator: {
  Color: '#2196F3',
  Width: 2,
  Style: 'solid'
}
```

## 🔄 Animation & Transitions

### 20. Animation Rules
```typescript
// Animation Durations
Durations: {
  Fast: 150,      // Quick interactions
  Normal: 300,    // Standard transitions
  Slow: 500       // Complex animations
}

// Easing Functions
Easing: {
  Standard: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
  Deceleration: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
  Acceleration: 'cubic-bezier(0.4, 0.0, 1, 1)'
}

// Transition Types
Transitions: {
  Fade: { opacity: [0, 1], duration: 300 },
  Slide: { transform: [{ translateY: [20, 0] }], duration: 300 },
  Scale: { transform: [{ scale: [0.95, 1] }], duration: 200 }
}
```

## 🎨 Design Tokens

### 21. Design Token Structure
```typescript
// Theme Object Structure
Theme: {
  colors: ColorPalette,
  typography: TypographySystem,
  spacing: SpacingScale,
  borderRadius: BorderRadiusScale,
  shadows: ShadowSystem,
  breakpoints: BreakpointSystem,
  animations: AnimationSystem
}

// Usage Example
const styles = StyleSheet.create({
  container: {
    backgroundColor: theme.colors.background,
    padding: theme.spacing.md,
    borderRadius: theme.borderRadius.medium,
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2
  }
});
```

This comprehensive theme system ensures consistency, accessibility, and modern healthcare aesthetics across the Physician App, following the clean and professional design patterns shown in the reference screenshots while maintaining the ER workflow functionality.