Scope
HealthPulse is a mobile-first platform designed for patients managing hypertension and type 2 diabetes, structured around five interlinked capabilities. The core DashboardMonitor aggregates daily patient requirements, upcoming appointments, and recent readings via a single API fetch structure. A server-persisted Notification & Alert System utilizes 60-second background polling to trigger real-time medication reminders and appointment alerts.
The Medication Management module features interactive pill visualization, one-tap dose logging, and adherence tracking based on color-coded status thresholds. For biometrics, the Vitals & Observation Tracking system captures glucose levels and blood pressure, transforming raw metrics into plain-language contextual guidance accompanied by 30-day trend sparklines. Finally, the Appointments & Tasks module handles prioritized care lists and preparation checklists. All clinical data is securely managed via a biometrically-gated, PIN-protected Lab Vault alongside a resilient JWT session architecture.
Negative scope
The current scope of HealthPulse strictly excludes external Electronic Medical Record (EMR/EHR) data syndication, provider-facing clinical portals, and direct patient-to-clinician messaging systems. The platform does not support active clinical prescribing, diagnostic decision-making, live video telehealth hosting, or automated insurance billing workflows. Direct hardware-level integrations with external medical devices—such as continuous glucose monitors (CGMs) or automated insulin pumps—are also out of scope.
However, these exclusions serve as foundational concepts for our future product roadmap. As the platform matures past Sprint 8, we anticipate evolving these boundaries into upcoming development cycles. Future iterations intend to explore secure provider data sharing, advanced predictive health analytics, and IoT medical device synchronization to further close the feedback loop between patients and their care teams.
Design System
The HealthPulse and MediFlow ecosystems operate on a dual design system architecture engineered to meet rigorous accessibility standards while serving patients managing chronic conditions. The following sections outline the specific token structures, responsive behaviors, typographic frameworks, and accessibility guardrails implemented across both platforms.
Dual Design System Architecture
A critical architectural decision was to run two completely isolated design systems side-by-side within the same codebase. This isolation ensures no token or style contamination between environments, mirroring enterprise-level product development workflows.
- System 1 — HealthPulse Core: Governs the mobile-first patient dashboard using a max-430px canvas layout. It implements the Muted Healing Palette utilizing a dark outer shell (
#111820) paired with calming frosted glass card components. - System 2 — MediFlow: Governs extended patient modules (Health Profile Builder, Secure Lab Vault, Smart Dose Reminder) utilizing a full desktop-supported fluid layout engine up to 1440px+. It implements the MediFlow Validated Palette over a soft alabaster background.
🔒 Strict Isolation Rule: Neither system imports tokens from the other. CSS custom properties are stringently namespaced (--hp-* vs. --fl-*) within the code architecture to prevent any accidental cross-bleed or style overrides.
HealthPulse Token Framework
The primary HealthPulse application relies on static spacing arrays based on an 8px grid system alongside specialized surface treatments.
- Spacing System:
--hp-space-1(8px, tight icon gaps),--hp-space-2(16px, inner card padding),--hp-space-3(24px, section gaps), and--hp-space-4(32px, page padding). - Frosted Glass Layer: Applied via
.hp-frostedusing a 60% white opacity background (rgba(255, 255, 255, 0.60)) and a 20px Gaussian blur (backdrop-filter: blur(20px)).
| Level | Size | Weight | Usage |
|---|---|---|---|
| H1 | 26px | Bold (700) | Page titles |
| H2 | 22px | Bold (700) | Section headings |
| H3 | 19px | SemiBold (600) | Card headings |
| H4 | 18px | SemiBold (600) | Sub-sections |
| Body | 18px | Regular (400) | All patient-facing content |
| Caption | 14px | Medium (500) | Timestamps, labels |
MediFlow Responsive Layout & Fluid Systems
The MediFlow architecture scales continuously from a 320px compact mobile screen to 1440px+ wide desktop monitors to accommodate the varied devices used in home-care settings.
6-Point Breakpoint Scale
The MediFlow architecture scales continuously from a 320px compact mobile screen to 1440px+ wide desktop monitors to accommodate the varied devices used in home-care settings.
Layout Transitions:
[320px - 479px] --> Mobile View: Bottom Nav Shell (56px touch targets, single column)
[480px - 767px] --> Tablet Portrait: Side Nav Entry (240px left rail, 2-column grid)
[768px - 1440px+] --> Desktop Fluid: Full Max Width (1280px content area, 3-column grid)Fluid Typography Specification
To prevent sudden layout shifts (“jumps”) during viewport scaling, MediFlow replaces static text sizes with continuous CSS clamp() functions anchored between the 320px and 1440px viewports.
- H1 — Titles:
clamp(24px, 5vw, 42px)(Bold 700, 1.2 Line Height) - Body L — Primary:
clamp(18px, 2.5vw, 22px)(Regular 400, 1.6 Line Height) - Body S — Metadata:
clamp(16px, 2vw, 18px)(Medium 500, 1.6 Line Height)
Cognitive Fatigue Rule: Line-height is locked at 1.6 for all body copy, and paragraph spacing is fixed at 1.5em (--fl-para-spacing). This prevents the “wall-of-text” effect and reduces visual tracking errors for patients experiencing chronic care brain fog or diabetic neuropathy. Body S is strictly capped at a 16px minimum floor to comply with accessibility legislation.
4. Accessibility Standards & Color Token Audit
WCAG 2.1 AA Color Verification
Every color token utilized within the MediFlow environment is pre-audited against the #FBFBFB soft alabaster background to verify visual compliance.