📱 Mid-Fi Wireframes
v1.0 · March 2026
Design Documentation
Screen
Wireframes
Mid-fidelity wireframes for the PepRally mobile app. Built to spec — pure black design system, 4-accent color palette, Merriweather/Outfit typography.
React Native · Expo 4 Screens For Research Purposes Only
01 / DASHBOARD
Home Dashboard
Active cycle summary with progress bar, today's dose queue with take/skip states, low stock and expiry alerts, quick action grid.
Cycle Widget Dose Queue Alerts Quick Actions
Open Screen → 1 screen
02 / INVENTORY
Vial Inventory
Searchable vial list grouped by status. Filter chips, lot number tracking, concentration data, color-coded status badges.
Search Filter Chips Vial Cards Status Groups
Open Screen → 1 screen
03 / CYCLES
Cycle Detail
Progress hero with adherence stats, per-peptide mini adherence bars, full month dose calendar with taken/skipped/missed states, recent dose log.
Progress Hero Dose Calendar Adherence Dose Log
Open Screen → 1 screen
04 / ONBOARDING
Disclaimer & Age Gate
Side-by-side: "For Research Purposes Only" disclaimer with checklist and accept checkbox, plus age verification screen with DOB input and step indicators.
Disclaimer Gate Age Verification Step Indicator Compliance
Open Screens → 2 screens
Design System — Accent Colors
--color-accent-info
Info / Primary
#4FC3F7
--color-accent-success
Success
#81C784
--color-accent-warning
Warning
#FFB74D
--color-accent-danger
Danger
#EF9A9A
Typography
Merriweather Black
Headings · Screen Titles · Hero Numbers
Outfit SemiBold — Body & UI
Navigation · Labels · Buttons · Body Copy
JetBrains Mono — Data
Lot Numbers · Concentrations · Doses · Stats