718 lines
14 KiB
Plaintext
718 lines
14 KiB
Plaintext
---
|
|
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. |