Preview image. Unlock full-res
A health-tracking mobile interface showing sleep data via time-based tabs, duration counter, and segmented bar charts in black, white, and red.
Summary
A mobile health app screen displaying nightly sleep stages (Deep, Light, REM, Awake) as a segmented horizontal bar chart, with duration in large dot-matrix text and date navigation arrows.
Visual description
A light mobile screen on a dark background. Top shows "SLEEP" heading with Day/Week/Month/Year toggle (Day selected). Center displays "8 12 Min / DURATION" in chunky dot-matrix numerals. Below, the date "Jun 05, 2023" with left/right arrow buttons. A light grey card shows legend dots (red for Deep, black for Light, grey for REM, light for Awake) and a segmented bar chart stacked horizontally, with thick coloured blocks representing sleep phases across the night (Deep and full sleep shown in red and dark tones, gaps in light grey). Bottom shows "00:00 Full Sleep" and "24:00 Wake".
Key takeaway
Dot-matrix typography for time data reads distinctly. Segmented horizontal bar chart is dense yet readable. Compact legend and full-night duration at a glance. Four-button time-range selector is a clean alternative to tabs.
Reuse notes
Excellent for health tracking, sleep analytics, or biometric dashboards. The large dot-matrix counter draws immediate focus. Works on light backgrounds with high-contrast text. Red accent for the most important sleep phase (Deep) anchors the visual hierarchy.
