Design System
This design system was created to support a clear, accessible, and scalable healthcare experience. It ensures visual consistency, improves usability for all age groups, and streamlines collaboration with developers.
Color Tokens
The color system was designed to build trust, improve readability, and guide user actions across the healthcare experience while meeting accessibility standards.
Colors/Primary/Primary500 #4889B7
Colors/secondary /secondary 500 #F4B13D
Colors/Neutral/Neutral500 #303A3A
Designed with accessibility contrast for healthcare readability
Blue tones build trust and clarity
Orange used for alerts and important actions
Neutral palette reduces cognitive overload
Typography System
Typography was designed using Albert Sans to ensure clarity, consistency, and accessibility across the product. A clear hierarchy of sizes and weights improves readability for all users, including elderly patients, and supports quick scanning of medical information.
Token / Font/ Size weight
Headline/ H1 / 32 M
.png)
Component System & UI Patterns
All components were designed to ensure consistency, scalability, and accessibility across the product. A reusable system of inputs, navigation, cards, and interactive elements supports faster development and a cohesive user experience.
Bottom navigation
Top Tab Navigation
Icons
A consistent icon system was designed to improve navigation clarity and reduce cognitive load across the healthcare platform. Simple and recognizable visuals help users quickly understand actions, especially older and low-tech users.
Buttons
Buttons were designed with clear hierarchy and multiple states to guide primary and secondary actions. Consistent styles improve usability, accessibility, and confidence when completing healthcare tasks.
Accessibility Considerations
Accessibility was a key priority to ensure the product is usable for patients of all ages and digital skill levels.
Simple navigation patterns
Clear and predictable navigation patterns
Large touch targets for accessibility
Large touch targets for elderly and low-vision users
Clear iconography for low-tech users
Recognizable iconography for low-tech and first-time users
High color contrast for readability
High contrast colors for readability and WCAG accessibility
Grid
A structured grid system was created to maintain consistency and clarity across mobile and desktop screens. The grid supports scalable layouts, clear alignment, and accessible spacing for complex healthcare information.
Logo
The logo combines a medical cross with soft gradients to represent care, trust, and innovation.
Blue conveys reliability and calmness, while warm tones add a human-centered and supportive feeling.
.png)
Why This Design System Matters
This design system creates a consistent and accessible healthcare experience across MediPath.
It helps streamline design decisions, supports collaboration with developers, and enables scalable growth as new features and family profiles are added.