Preview image. Unlock full-res
Mobile app interface for a sleep tracking application featuring moon phase cycles and sleep duration metrics with a dark brown background and gold accent colors.
Summary
Mobile app UI for a sleep tracking application called "Hoag Compass," featuring a dark brown background with moon phase visualization and sleep duration metrics displayed in gold and light text.
Visual description
A phone mockup displays a sleep tracking dashboard. The screen background is dark brown. At the top, "Jan 15, SATURDAY" and sleep duration "5hrs 30mins" are prominently displayed with a moon icon. A row of seven golden moon phase circles illustrates the sleep cycle progression. Below are metric cards showing "Average hour: 5hrs 30mins," "Sleep goal: 7hr 30mins," and a "Sleep quality" option. A partial view of a circular progress indicator appears at the bottom in gold tones. The interface uses clean, minimal typography and maintains a warm, calm aesthetic.
Key takeaway
The moon phase visualization is an elegant metaphorical design choice that makes sleep tracking feel connected to natural rhythms. The warm gold accents against the dark background create visual hierarchy while maintaining a soothing mood.
Reuse notes
Excellent reference for health and wellness app design. The moon phase concept can be adapted for other sleep, meditation, or cycle-tracking applications. The dark theme with warm accent colors works well for evening-use applications.
