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.
Önizle
Ekranları keşfedin
Sleek'te tamamen düzenlenebilen mental health mobil uygulama tasarımını önizleyin.
Mental Health App hakkında
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.
İçindekiler
Dahil olan ekranlar
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.
Tasarım ve özellikler
Öne çıkan özellikler
- 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
Hedef kitle
Kimler için
Kullanım alanları
Neler oluşturabilirsiniz
- 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
Bu şablon nasıl kullanılır
- 1
Şablonu aç
Ekranlara göz atın ve fikrinize uyup uymadığını görmek için tüm tasarımı önizleyin.
- 2
Bu şablonu kullan
Tek tıkla Sleek'te tamamen düzenlenebilir kendi kopyanızı açın.
- 3
Yapay zekâ ile düzenle
Ne istediğinizi anlatarak paleti yeniden tasarlayın, düzenleri değiştirin, ekran ekleyin veya kaldırın.
- 4
Dışa aktar ve yayınla
Tasarımınızı dışa aktarın ya da geliştiricilere teslim edin, lansmana kadar geliştirmeye devam edin.
Sıkça sorulan sorular
İlgili mobil uygulama şablonları
mental health uygulamanızı tasarlamaya başlayın
Sleek'te kullanın ve kendinize göre uyarlayın: paleti yeniden tasarlayın, herhangi bir ekranı yapay zekâ ile düzenleyin, ardından koda veya Figma'ya dışa aktarın.
Bu şablonu kullan