Design Document v1.0
Thryve.AI
Design System
Calm, minimal, and warm. A mental health companion that feels like a safe space — not a clinical tool.
Foundation
Design Tokens
Every color, type style, and spacing value used across both the mobile app and web dashboard.
Color Palette
Sage
#7C9E8F
Primary actions, progress, icons
Sage Light
#EDF4F1
Card backgrounds, tags
Sage Mid
#C2D8CF
Borders, empty states, dividers
Lavender
#A89CC8
AI insights, interventions, accents
Lavender Light
#F2EFFA
Insight card backgrounds
Warm White
#F7F3EE
App background, page background
Text Dark
#1E2A24
Headings, primary text
Text Mid
#4A5E55
Body text, descriptions
Status Green
#7CC49C
Consistent / on-track clients
Status Yellow
#F0D080
Inconsistent clients
Status Red
#E8A09A
At-risk clients
Type Scale
You've completed 3 of 5 habits today. Keep going!
Last check-in: Today at 8:42 AM
Screen Inventory
All Screens
Every screen in the product, categorized by platform and user role.
Mobile App — Client
First-run experience. Brand intro, value prop, CTA to register or log in.
- Logo + tagline animation
- 3-step value carousel
- "Get Started" CTA button
- "Already have an account" link
Account creation. Email, password, name. Optional therapist invite code.
- Full name input
- Email input
- Password input (strength indicator)
- Invite code input (optional, collapsible)
- Role toggle (Client / Therapist)
- Register CTA
Returning user sign in. Email + password with forgot password link.
- Email input
- Password input
- Login CTA
- Forgot password link
- Register link
First-run goal setup. User defines 1–3 long-term and 2–4 ninety-day goals.
- Progress stepper (Step 1 of 3)
- Long-term goal inputs (up to 3)
- 90-day goal inputs (up to 4)
- Add goal + button
- Continue CTA
Define 3–5 daily habits to track. Suggested templates shown.
- Progress stepper (Step 2 of 3)
- Suggested habit chips (tappable)
- Custom habit text input
- Selected habits list
- Continue CTA
Main daily view. Greeting, check-in CTA, habit checklist, progress bar, AI insight card.
- Personalized greeting
- Check-in streak indicator
- Daily habit checklist
- Goal completion progress bar
- AI insight card (lavender)
- Bottom tab bar
Daily mood entry (1–10 scale) + optional journal. Triggers AI evaluation on submit.
- Mood scale 1–10 (color gradient)
- Selected mood display + emoji
- Journal textarea (optional)
- Character count
- Submit check-in CTA
Bottom sheet overlay triggered by AI engine. Supportive message + 3 action options.
- Blurred background overlay
- Supportive headline
- Empathetic message text
- 3 action buttons (breathing, grounding, reflection)
- Dismiss / "I'm okay" link
All goals in one view. Segmented by type (long-term / 90-day / daily). Edit and add.
- Segmented control (Long-term / 90-day / Habits)
- Goal cards with completion %
- Progress bars per goal
- + Add goal FAB
User profile, notification settings, linked therapist info, account management.
- Avatar + name + email
- Linked therapist info
- Notification toggle
- Daily reminder time picker
- Log out
Web Dashboard — Therapist
Therapist sign-in. Centered card layout, professional tone.
- Logo + "Therapist Portal" label
- Email + password inputs
- Login CTA
- Forgot password link
Overview of all linked clients. Status indicators, last check-in, mood average, goal rate.
- Summary stat cards (total / at-risk / checked in today)
- Client table with status dots
- Search + filter bar
- Last check-in timestamp
- Quick status: Green / Yellow / Red
Deep view of a single client. Mood trend chart, goal progress, journal entries, therapist notes.
- Client header (name, status, last seen)
- 30-day mood trend line chart
- Goal completion % ring chart
- Recent journal entries (read-only)
- Therapist notes editor
- Intervention history
Therapist account settings. Profile info, invite code management, notification preferences.
- Profile info (name, email)
- Invite code display + regenerate
- Email notification toggles
- Change password
Mobile App — Client
Screen Mockups
High-fidelity wireframes for the key mobile screens.
9:41●●●
Today's Progress
3/5
habits completed
Daily Habits
No screens 1hr before bed
✦ AI Insight
You've had a strong streak this week. Consistency is building momentum.
Home — Daily Dashboard
9:41●●●
How are you
feeling today?
Mood Score
7
Pretty good 🙂
Journal (optional)
Feeling more focused today. The morning walk really helped clear my head...
64 / 500
Submit Check-in
Daily Check-In
9:41●●●
How are you
feeling today?
Hey, we see you 💙
Today sounds heavy. You don't have to figure everything out right now.
I'm okay, skip for now
AI Intervention Modal
9:41●●●
Long-term
Run a half-marathon
30% complete
Long-term
Build consistent sleep routine
65% complete
Goals Screen
9:41●●●
A
Alex Johnson
alex@email.com
Linked to Dr. Sarah M.
Share data with therapist
Log out
Profile / Settings
9:41●●●
🌱
Thryve.AI
Your daily companion for mental wellness and consistent growth.
Get Started
Already have an account? Sign in
Splash / Welcome
9:41●●●
Full Name
Alex Johnson
Email
alex@email.com
Password
••••••••
Strong password
Have a therapist invite code? (optional)
THR-XXXX
Create Account
Already have an account? Sign in
Register
9:41●●●
Email
alex@email.com
Password
••••••••
Forgot password?
Sign In
Don't have an account? Sign up
Login
9:41●●●
Step 1 of 3
Set your goals
What are you working towards?
Long-term goals
Run a half-marathon 🏃
Build a consistent routine
+ Add another goal
90-day goals
Run 3x per week
Sleep by 10:30pm daily
Continue →
Onboarding — Goals
9:41●●●
Step 2 of 3
Daily habits
Pick 3–5 habits to track every day.
✓ 10 min meditation
✓ Morning journal
30 min walk
Read 20 pages
Drink 8 glasses water
✓ No screens 1hr before bed
Exercise 30 min
+ Add custom habit
Continue →
Onboarding — Habits
Web Dashboard — Therapist
Web Mockups
Desktop-first dashboard for therapists to monitor client progress.
Client List View
Clients
12 active clients — 2 need attention
At Risk
3.4
42%
2 days ago
Inconsistent
5.8
58%
Yesterday
Client Detail View
app.thryve.ai/clients/jane-doe
JD
Jane Doe
Last check-in: 2 days ago · Joined Mar 2026
At Risk
Mood Trend — 30 days
Apr 6Apr 16Apr 26May 6
Recent Journals
May 4
Feeling really overwhelmed, can't seem to focus on anything...
May 2
Had a hard conversation with my family today. Tired.
Therapist Notes
Add a note about this session...
Save Note
UX Flows
User Journeys
How users move through the product — from first open to daily engagement loop.
1. Client Onboarding Flow
App Open
→
Splash Screen
→
Register
→
Invite Code?
→
Has Code?
Goal Setup
→
Habit Setup
→
Home Dashboard
2. Daily Check-In Loop
Push Notification
→
Open App
→
Check-In Screen
→
Rate Mood (1–10)
→
Optional Journal
→
Submit
AI Engine Evaluates
→
Trigger?
→ Yes
Intervention Modal
→
Action / Dismiss
3. AI Intervention Flow
Check-in Submitted
→
Rules Engine
→
Mood ≤ 4?
→ Yes
Trigger: low_mood
Missed ≥2 habits?
→ Yes
Trigger: missed_goals
Keywords found?
→ Yes
Trigger: keyword_match
Pick Primary Trigger
→
Select Message + Actions
→
Show Intervention UI
4. Therapist — Client Review Flow
Therapist Login
→
Client List
→
Spot Red Status
→
Client Detail
Review Mood Chart
→
Read Journals
→
Add Note
→
Return to List
5. Therapist Invite Flow
Therapist → Settings
→
View Invite Code
→
Share with Client
Client → Register
→
Enter Invite Code
→
Account Linked
→
Appears in Therapist List
Component Library
Reusable Components
Shared building blocks used across mobile and web. Each maps to a React Native and React component.
MoodSlider
10-point color-gradient mood selector. Selected state highlighted with border.
valuenumber (1–10)
onChange(n: number) => void
90-day
Run 3x per week
60% complete
GoalCard
Displays a single goal with type label, title, and progress bar.
goalGoal object
completionnumber (0–1)
onPress() => void
Consistent
Inconsistent
At Risk
StatusBadge
Three-state client status indicator. Used in therapist client list and detail header.
status'green' | 'yellow' | 'red'
✦ AI Insight
You've had a strong streak this week. Consistency is building real momentum.
InsightCard
Lavender-tinted card for AI-generated nudges. Shown on home screen daily.
messagestring
type'insight' | 'warning'
Button
Primary (sage filled) and ghost (outlined) variants. Full-width on mobile.
variant'primary' | 'ghost'
labelstring
onPress() => void
disabledboolean
ProgressBar
Sage-to-lavender gradient bar for habit and goal completion display.
valuenumber (0–1)
labelstring (optional)
showPercentboolean
MoodChart
30-day mood trend bar chart. Used in therapist client detail view. Built with Recharts.
dataCheckIn[]
days7 | 14 | 30
HabitRow
Tappable habit item with completion toggle. Strikethrough on complete.
habitGoal object
completedboolean
onToggle() => void
Thryve.AI Design Document — v1.0 — May 2026