Colors

A warm, nurturing palette built around deep teal-green and soft teal accents.

Brand Colors

Primary

#1B3B36

Primary Light

#5BA89D

Primary Lighter

#7BC4B8

Primary Dark

#142B28

Background & Surface

Background

#FFF8F0

Surface

#FFFBF7

Border

#E8E0D8

AI Bubble

#E8F4F1

Semantic Colors

Success

#2E7D32

Warning

#ED6C02

Error

#D32F2F

Info

#0288D1

Typography

Fraunces for warm, inviting headings. Plus Jakarta Sans for friendly, readable body text.

Headings (Fraunces)

text-5xl / 48px

You're not alone

text-4xl / 36px

How are you feeling today?

text-3xl / 30px

Let's explore that together

text-2xl / 24px

Your progress this week

Body Text (Plus Jakarta Sans)

text-lg / 18px

Taking care of your mental health is just as important as taking care of your physical health.

text-base / 16px (default)

I'm here to listen and support you through whatever you're experiencing. There's no judgment here.

text-sm / 14px

Your conversations are private and secure. I'm here whenever you need me.

Spacing

8px base grid for consistent rhythm and breathing room.

space-1 (4px)

space-2 (8px)

space-3 (12px)

space-4 (16px)

space-6 (24px)

space-8 (32px)

space-12 (48px)

space-16 (64px)

Buttons

48px minimum touch targets for accessibility. Soft hover states for warmth.

Primary Buttons

Secondary Buttons

Ghost & Icon Buttons

Buttons with Icons

Form Inputs

Clear focus states with soft teal rings. 48px height for easy touch.

Text Input

Input with Icon

Textarea

Cards

Soft shadows and generous padding for a comforting feel.

Daily Check-in

Take a moment to reflect on your day and how you're feeling right now.

Your Progress

You've completed 5 sessions this month. Keep up the great work!

View Details

Homework

Practice the breathing exercise we discussed for 5 minutes before bed.

Completed

Chat Bubbles

Asymmetric corners distinguish AI from user. Max 85% width for readability.

Hello! How are you feeling today?

I've been feeling a bit anxious lately, especially at work.

I hear you. Anxiety at work can be really challenging. Can you tell me more about what triggers these feelings?

Emotion Picker

Quick emotion selection for check-ins and mood tracking.

Alerts & Feedback

Semantic colors for clear communication without alarm.

Session saved

Your progress has been recorded.

Reminder

Your next session is tomorrow at 3pm.

Connection issue

Some features may be limited offline.

Session ended

Please reconnect to continue.

Bottom Navigation

PWA-style navigation with safe area padding for notched devices.

Icons (Phosphor)

Warm, rounded icons that match the nurturing personality.

house

chat-circle

user

calendar

heart

gear

check

x

arrow-left

plus

microphone

paper-plane

sun

moon

warning

smiley

Mobile Preview

How the chat interface looks on a mobile device.

The Therapist AI

Welcome back! How has your week been?

Better than last week. I tried the breathing exercises.

That's wonderful to hear! How did the breathing exercises feel for you?