Habit Tracker UI

Routine Tracker: Habits Made Visual 🌙​​​​​​​

The core objective behind was to design a habit-tracking dashboard that minimizes cognitive overload and encourages daily consistency through clear visual data hierarchy.

Atmospheric Dark Palette: The layout moves away from clinical, white data sheets to an immersive, dark background. An illustrative night-sky landscape serves as a central graphic anchor, adding a warm, human touch to the interface.

Intuitive Timeline Carousel: A persistent inline calendar header allows users to frictionlessly swipe through their week. The active date ("TU 12") is encapsulated in a soft, low-contrast container to maintain orientation without breaking the visual flow.

Time-of-Day Segmented Filters: Beneath the header, a pill-shaped tab layout ("All Day", "Morning", "Afternoon", "Evening") enables users to isolate tasks by time context, helping them focus strictly on their immediate routine.

Color-Coded Task Taxonomy: Each habit card uses an isolated, thematic icon paired with a dedicated highlight color (Blue for hydration, Orange for physical fitness, Yellow for hygiene, and Pink for intellectual growth). This system allows for instant categorical scanning.

Progress Fractional Metrics: Individual progress metrics are displayed on the right edge of each container (e.g., 0/5 glasses, 30 min, 0/20 pages). This explicitly informs the user of their exact targets and current daily standing.