Sample System UI

Mobile app screens showing brand application in product interfaces

Dashboard — Dark Theme
09:41
Good morning, Fatou
Friday 7 March 2026
Reports
2,847
+12% this month
Compliance
94.2%
On target
Facilities
714
All regions
Pending
23
Awaiting review
Recent Activity See all
  • Brikama DH submitted monthly report
    2 min ago
  • Bansang Hospital flagged data discrepancy
    18 min ago
  • CRR Region achieved 100% compliance
    1 hr ago
Home
Reports
Facilities
Profile

Dark theme dashboard. Circle mark (28px) in header with app name. Magenta dot on "Health MIS." follows the brand wordmark convention. Bottom nav uses magenta for active state, #958D89 for inactive.

09:41
Good morning, Fatou
Friday 7 March 2026
Reports
2,847
+12% this month
Compliance
94.2%
On target
Facilities
714
All regions
Pending
23
Awaiting review
Recent Activity See all
  • Brikama DH submitted monthly report
    2 min ago
  • Bansang Hospital flagged data discrepancy
    18 min ago
  • CRR Region achieved 100% compliance
    1 hr ago
Home
Reports
Facilities
Profile

Same dashboard in light theme. White (#FFFFFF) card surfaces on #F5F0ED background. Text hierarchy shifts to #221E1E headings, #6B6362 body. Magenta accents remain unchanged between themes.

Data Entry Form — Light Theme
09:43
New Report
Monthly Facility Report
Brikama District Hospital · March 2026

Form inputs use #E8E0DC borders, #E91E8C focus ring. Submit button uses #DE1C86 (accessible magenta) with white text. Labels in #221E1E, placeholders in #ACA4A0.

09:41
All Facilities Filter
  • Brikama DH
    WCR · Up to date
  • Bansang Hospital
    CRR · Up to date
  • Farafenni Hospital
    NBR · Report overdue
  • Soma Health Centre
    LRR · Up to date
  • Bwiam Health Centre
    WCR · Up to date
Home
Reports
Facilities
Profile

List view with status indicators. FAB (floating action button) uses #DE1C86 with magenta shadow. Magenta dot indicates attention-needed items; green for up-to-date. Circle mark at 28px, above the 16px minimum.