✓ DESIGN SYSTEM READY FOR APPROVAL
Comprehensive Brand Identity
This design system ensures consistent, accessible, and professional UI/UX across all platforms
Color Palette - Primary
These colors establish trust, clarity, and professionalism for the medical AI application.
Primary 600
Primary 600
#085B7D
Status & Feedback Colors
Clear color coding for diagnosis results and system feedback.
✓ Success
Success
#22C55E
⚠ Warning
Warning
#F59E0B
✗ Danger
Danger / Malignant
#E63946
Neutral & Surface Colors
Supporting colors for backgrounds, borders, and text hierarchy.
Surface
Surface / Card
#FFFFFF
Border
Border / Line
#E6EEF3
Heatmap Palette - Model Confidence
Used for CAM/Grad-CAM overlays to show model attention areas on medical images.
Very Low
Low-Mid
Medium
High
Very High
Typography System
Primary: DM Sans (fallback: System UI). Ensures readability and medical professionalism.
H1 - Heading 1
Main Headlines & Page Titles
32px Bold — For primary page titles
H2 - Heading 2
Section Headings
24px Bold — For major section breaks
H3 - Heading 3
Subsection Labels & Card Titles
18px SemiBold — For component titles
Body - Standard Text
This is standard body text used for descriptions, labels, and general content across the application.
16px Regular — For main content
Small - Captions
Helper text, captions, and minor labels appear in this size for hierarchy.
13px Regular — For helper text & captions
Key UI Components
Pre-defined components for consistent application across the interface.
Primary Button
Use for main CTAs and critical actions
Secondary Button
Use for alternate or less critical actions
Status Pills
Benign (0.88)
Malignant (0.92)
Review (0.65)
For diagnosis results with confidence scores
Usage Guidelines & Best Practices
🔐 Critical: Never Use Color Alone
Always pair diagnostic colors with numerical confidence scores. Example: "Malignant (0.92)" instead of just showing red.
📊 Heatmap Visualization
Use the heatmap palette for CAM/Grad-CAM overlays on medical images. Render with ~0.6 alpha for transparency to maintain image visibility.
♿ Accessibility Standard
All text meets WCAG AA compliance with 4.5:1 contrast ratio. Primary (#0B6E99) on white = 5.8:1 ratio.
🎨 Consistency Across Platforms
Maintain this palette across web (React/Tailwind), mobile (Android/iOS), and data visualization dashboards.
📱 Responsive Design
Typography scales on mobile. H1 → 24px, Body → 14px on screens < 600px width.
🌙 Dark Mode Support (Optional)
Invert backgrounds and adjust alpha values. Primary remains #0B6E99, but surface → #1A2332.
Real-World Use Cases
🩺 Diagnosis Result Page
Primary color for "View Details" CTA. Danger/Success pills for results. Heatmap overlay on original medical image.
📤 Image Upload
Primary button "Run Analysis". Surface for card. Border color for dropzone. Accent for loading state.
📊 Dashboard / Analytics
Primary for charts and graphs. Success/Danger/Warn for status indicators. Heatmap for trend visualization.
📱 Mobile App
Same palette maintained on iOS/Android. Buttons adjusted for touch targets (min 44px). Typography responsive.