Health & Fitness · Liquid Glass Hydration
Water Reminder App UI Template
Dewdrop is a hydration-tracking app design with a frosted liquid-glass look, built for founders and designers shipping a water reminder product.
Preview
Explore the screens
Preview the water reminder mobile app design, fully editable in Sleek.
About the Water Reminder App
Dewdrop is a water reminder app UI built around a "Liquid Glass Hydration" aesthetic: a soft mist-white base, deep-aqua ink, and a cyan-to-teal gradient reserved for water fills and primary actions. Surfaces read as frosted-glass panels floating over a faint water wash, with wide tonal capsule buttons and a floating pill dock at the bottom. The signature is a tall living-glass vessel on the home screen that fills with cyan water as intake is logged, with a percentage floating inside.
The template ships six connected screens that form a complete hydration flow: a Today home with the living glass at 58% and a "Log Water" button, a Log a Drink sheet for choosing water, coffee, herbal tea, or sparkling with portion steppers, a Smart Nudges schedule for reminder intervals and sip pace, an Insights view with a goal ring and hydration-by-hour bars, a History screen with weekly bars and a 12-day streak, and a Profile with weight goal, daily goal, units, and Apple Health sync.
Use it in Sleek and make it yours: restyle the palette, edit any screen with AI by describing the change, and add the flows your product needs. Then export it to code, copy it into Figma, or hand a prompt to an AI agent to build it for real, a far faster start than a blank canvas.
What's inside
Screens included
Today
A home screen with the oversized "1,450 / 2,500 ml" intake number above a living-glass vessel filled to 58%, plus a cyan-to-teal "Log Water" capsule. The at-a-glance daily progress that keeps users sipping.
Log a Drink
A sheet asking "What are you sipping on?" with drink cards for Water, Coffee, Herbal Tea, and Sparkling, each tagged with a hydration multiplier, plus a portion stepper and a "Confirm Log" button. Makes logging any drink quick and accurate.
Smart Nudges
A reminder schedule with an Active Hours toggle, interval (every 90 min) and time window controls, a Sip Pace selector (Chilled, Steady, Intense), and a timeline of upcoming nudges. The heart of the water reminder experience.
Insights
A "Your Insights" view with a hydration goal ring at 58%, logged and remaining figures, and a hydration-by-hour bar chart. Surfaces patterns like drinking most before noon.
History
A trends screen with a 12-day streak badge, a 2,180 ml daily average, weekly bars for the last 7 days, and a monthly report link. Shows long-term hydration habits at a glance.
Profile
A profile with the user's name and Premium tier, a health profile for weight goal, daily goal, and units, plus Apple Health sync and reminder sound settings. Where users tune their hydration targets.
Design & features
Key features
- Liquid Glass Hydration aesthetic: mist white, deep aqua, cyan-to-teal fills
- Signature living-glass vessel that fills as intake is logged
- Frosted-glass panels with soft 28px corners and no hard shadows
- Floating pill navigation dock with a glowing active icon
- Drink logger with hydration multipliers and portion steppers
- Smart reminder scheduling with interval, window, and sip-pace controls
- Insights goal ring and hydration-by-hour bar chart
- History view with weekly bars, daily average, and streak badge
Audience
Who it's for
Use cases
What you can build
- Launch an MVP for a water reminder or hydration app
- Mock up screens for an investor or stakeholder pitch
- Hand a consistent hydration UI off to developers
- Explore a redesign of an existing wellness tracker
How to use this template
- 1
Open the template
Browse the screens and preview the full design to see if it fits your idea.
- 2
Use this template
Open your own fully editable copy in Sleek with one click.
- 3
Edit with AI
Restyle the palette, change layouts, and add or remove screens just by describing what you want.
- 4
Export and ship
Export your design or hand it to developers, and keep building toward launch.
Frequently asked questions
Related mobile app templates
Start designing your water reminder app
Use it in Sleek and make it yours: restyle the palette, edit any screen with AI, and export to code or Figma.
Use this template