How do I build a mental health app from this template?

Click "Use this template" to open it in Sleek as your own editable project, then shape it by describing the changes you want: restyle the palette, edit any screen, and add the flows your product needs. You start from six complete screens instead of a blank canvas, so you reach a working mental health app design far faster.

What screens are included in this mental health app design template?

Six connected screens: Home with the breathing orb, Mood check-in, Toolkit, Journal, Mood Trends, and Support. Together they cover the core flow of a wellbeing app, from a daily check-in to coping tools, journaling, trends, and reaching a therapist or crisis line.

Can I customize the mental health app UI design?

Yes. Use the template in Sleek and edit any screen by chatting with the AI: restyle the sage and clay palette, change layouts, swap illustrations, and add or remove flows. There's no manual redraw; you describe the change and it's applied.

Is this a good alternative to a Freud UI kit for an AI mental health app?

It works well as a starting point. Haven gives you a calm, full set of mental health app screens you can edit live in Sleek, rather than static UI-kit components. Add your own AI chat, recommendations, or check-in logic and restyle everything to match your brand.

Can I export the design to code or Figma?

Yes. Sleek exports your design as code, copies straight into Figma with no plugin, or hands you a ready-made prompt that an AI agent like Claude Code or Cursor can use to build it into a real, working app.

Is this template free to use?

You can open and explore the design for free, then use it in your own Sleek project to build on it. Editing and exporting follow Sleek's standard plans.

Health & Fitness · Soft Sanctuary

Mental Health App Design Template

Haven is a mental health app design with a Soft Sanctuary look, made for founders and designers building a calm, supportive wellbeing product.

Use this template

Mental health app home screen with breathing orb, check-in streak, and quick tools

Mental health app mood check-in screen with draggable gradient orb and mood words

Mental health app toolkit screen with illustrated coping resource cards

Preview

Explore the screens

Preview the mental health mobile app design, fully editable in Sleek.

JournalScreen 4

Mood TrendsScreen 5

SupportScreen 6

About the Mental Health App

Haven is a mental health app design template built around a "Soft Sanctuary" aesthetic: a warm sage base, deep forest-ink text, and a single grounding clay-terracotta accent reserved for the primary action and progress arcs. Surfaces float on faint oat-versus-sage contrast with generous rounded corners and no hard borders, while a soft humanist serif keeps every prompt gentle rather than clinical. The result feels like a quiet, sunlit room where it's safe to set everything down.

The template ships six connected screens that form a complete wellbeing flow. A Home screen opens with a warm greeting, a check-in streak, and the signature breathing orb at center, with quick tools for Breathe, Journal, Ground, and Support. From there: a full-screen Mood check-in where you drag across the orb to shift its hue and pick a feeling, a Toolkit of illustrated coping resources for anxiety and sleep, a Journal with guided prompts and past entries, a Mood Trends chart with a gentle non-judgmental insight, and a Support screen with therapist cards and an always-visible crisis line.

Use it in Sleek and make it your own: restyle the palette, edit any screen with AI by describing the change, and add the flows your product needs. Then export to code, copy into Figma with no plugin, or hand a prompt to an AI agent to build it into a real app, all far faster than starting from a blank canvas.

What's inside

Screens included

Home

A warm serif greeting ("How are you arriving today, Sam?"), a 7-day check-in streak, the gentle breathing orb that taps to begin, and a row of quick tools for Breathe, Journal, Ground, and Support. The calm entry point that anchors the whole app.

Mood Check-in

A full-screen gradient orb you drag across to set how you feel, shifting hue from sky-blue to clay, with mood words like Calm, Anxious, and Tired below and an optional note field. The emotional core of the daily check-in.

Toolkit

Categorized coping resources for Anxiety and Restful Sleep as soft illustrated cards with durations, plus a recommended "5-min Reset" pinned at the top. Helps users find the right exercise in the moment.

Journal

A guided prompt in soft serif ("What's one thing weighing on you today?") with a clay "Write your response" button, and past entries as tonal cards with mood dots and dates. Encourages gentle, regular reflection.

Mood Trends

A calm weekly bar chart in clay and sky-blue, a gentle observation line ("You've felt calmer on days you slept 7+ hours"), and a mood distribution breakdown. Reflection without judgmental scoring.

Support

Licensed therapist cards with warm portraits, specialties, and availability, alongside an always-visible Emergency Help crisis line button in clay and a link to browse the directory. Makes real help easy to reach.

Design & features

Key features

Soft Sanctuary aesthetic: warm sage, forest ink, one clay accent
Signature breathing orb used as home anchor and mood-logging control
Tonal-stack depth with no borders and generous rounded corners
Soft humanist serif prompts paired with a quiet rounded UI font
Floating oat tab bar with the active icon nested in a sage pebble
Illustrated coping-resource cards with durations
Weekly mood trends chart with non-judgmental insights
Therapist support cards with an always-visible crisis line

Audience

Who it's for

Founders validating a mental health or wellbeing app MVP

Product designers needing a calm health-app starting point

Indie developers building a mood-tracking or journaling app

Wellness teams prototyping a therapy or self-care experience

Use cases

What you can build

Launch an MVP for a mental health or self-care product
Mock up screens for an investor or stakeholder pitch
Hand a consistent, calming UI off to developers
Explore a redesign of an existing wellbeing app

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.