Three smartphone mockups arranged in a cluster showing different states of The Breathing App interface. Left device displays a dark setup screen with "Set the pace" headline, three tab options (partially visible: "Balancing", "Focusing", "En..."), numbered controls showing "4 4 4" above smaller "6 6 6", and instruction text "Inhale and hold, exhale and hold in..." with "Save" and "Cancel" buttons below. Center device features a large gradient background transitioning from dark navy at top through lighter blue-gray to warm orange-sunset at bottom, with a prominent white circle rendered in the center. Right device shows the same gradient background with a blue-tinted overlay and a white circular outline with the text "Inhale" and a timer display showing "02:07" at the bottom. All mockups use clean sans-serif typography in white against dark backgrounds with high contrast.

Key takeaway

The vertical gradient composition using sky-to-sunset color progression to suggest calm and progression. The large geometric shapes (circles) as visual focus points against gradient backgrounds. The dark mode interface that makes centered white shapes appear luminous and meditative.

Reuse notes

Essential reference for wellness, meditation, and health app design. The gradient background approach works well for any mindfulness or guided-experience interface. Can be adapted for other health, fitness, or breathing-related applications. The large circular focal point is particularly effective for progress indication or rhythm-based activities.