1. Color Palette — Grounded Warmth

Primary (Forest Green)

Primary buttons, links, accents, brand elements.

Base

Hex #6B8F71

RGB 107, 143, 113

HSL 133°, 14%, 49%

Lighter (hover)

Hex #8BA888

Light

Hex #7FA084

Info

Dark

Hex #5A7A5F

Darker

Hex #3D5340

Secondary (Warm Terracotta)

Secondary buttons, highlights, call-to-action elements.

Base

Hex #D4845C

RGB 212, 132, 92

HSL 20°, 58%, 60%

Lighter

Hex #E8926F

Dark

Hex #B86F4A

Darker

Hex #8F5438

Accent (Honey Gold)

Success states, positive feedback, special highlights.

Base

Hex #E8B563

RGB 232, 181, 99

HSL 37°, 74%, 65%

Background & Text

Warm Cream

Background #F5F1E8

RGB 245, 241, 232 · HSL 42°, 38%, 94%

Page backgrounds, cards, light surfaces

Deep Forest

Text/Dark #2C3E2C

RGB 44, 62, 44 · HSL 120°, 17%, 21%

Body text, headings, dark UI

Semantic Colors

Success

#6B8F71 (primary)

Warning

#E8B563 (accent)

Error

#D46854

Info

#7FA084

2. Typography — Thoughtful Elegance

Heading font: Literata (serif)

Sophisticated, calm, trustworthy. Weights: 400, 500, 600, 700.

H1 — 48–72px, weight 600–700

You care for others. We care for you.

H2 — 36–48px, weight 600

Built by therapists, for therapists

H3 — 28–36px, weight 600

Supporting your practice, ethically

H4 — 24–28px, weight 500–600

Documentation that respects your time

H5 — 20–24px, weight 500

Session notes & case conceptualization

H6 — 18–20px, weight 500

Labels and small headings

Body font: Inter (sans-serif)

Highly legible, modern, accessible. Weights: 300, 400, 500, 600, 700.

Body — 16–18px, weight 400

ManoBuddy helps therapists deliver better care by handling documentation, case conceptualization, and clinical support—all while maintaining the highest standards of ethics and privacy.

Small text — 14px

Labels: 12–14px weight 500. Buttons: 14–16px weight 600. Links: 16px weight 500.

Typography scale (CSS variables)

Token	Size	Line heights	Weights
--text-xs	12px	--leading-tight: 1.2	--font-light: 300
--text-sm	14px	--leading-normal: 1.5	--font-normal: 400
--text-base	16px	--leading-relaxed: 1.8	--font-medium: 500
--text-lg	18px		--font-semibold: 600
--text-xl	20px		--font-bold: 700
--text-2xl	24px
--text-3xl	28px
--text-4xl	36px
--text-5xl	48px
--text-6xl	60px

3. Visual Style — Soft Gradient Layers

Gentle color transitions, ambient backgrounds, organic depth. Warm and approachable.

Gradients

Primary (main CTAs)

135deg, #6B8F71 → #7FA084

Secondary (accent areas)

135deg, #D4845C → #E8926F

Background (page)

Subtle green–terracotta tint

Card (elevated)

145deg white gradient + blur(20px) + border

Shadow system

Token	Usage	Value
--shadow-sm	Cards, inputs	0 2px 8px rgba(44, 62, 44, 0.08)
--shadow-md	Buttons, elevated cards	0 4px 12px rgba(107, 143, 113, 0.2)
--shadow-lg	Modals, popovers	0 8px 24px rgba(44, 62, 44, 0.15)
--shadow-glow	Focus, primary elements	0 4px 16px rgba(107, 143, 113, 0.3)

Border radius

Token	Value	Usage
--radius-sm	6px	Small elements
--radius-md	10px	Buttons, inputs
--radius-lg	16px	Cards
--radius-xl	24px	Modals, large containers
--radius-full	9999px	Pills, avatars

Spacing

Token	Value
--space-xs	4px
--space-sm	8px
--space-md	16px
--space-lg	24px
--space-xl	32px
--space-2xl	48px
--space-3xl	64px

Blur (glassmorphism)

Light: blur(10px) · Medium: blur(20px) · Strong: blur(30px)

4. Components

Buttons

Font: Inter 16px, weight 600. Padding: 14px 32px. Border-radius: 10px. Transition: 0.3s ease.

Primary — gradient #6B8F71 → #7FA084, shadow 0 4px 12px rgba(107, 143, 113, 0.3), hover: translateY(-2px), shadow 0 6px 16px rgba(107, 143, 113, 0.4)

Secondary — transparent, color #6B8F71, border 2px solid rgba(107, 143, 113, 0.5), hover: background rgba(107, 143, 113, 0.1)

Accent (terracotta gradient)

Sizes: small (8px 16px), default (14px 32px), large (24px 48px)

Card

Background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85)). backdrop-filter: blur(20px). Border: 1px solid rgba(107, 143, 113, 0.15). Border-radius: 16px. Padding: 32px. Shadow: 0 2px 8px rgba(44, 62, 44, 0.08).

Glass card

Default elevated surface with soft gradient and blur.

Flat card

Plain white for simple blocks.

Gradient card

Ambient background for special sections.

Input

Font: Inter 16px. Padding: 14px 16px. Border: 2px solid rgba(107, 143, 113, 0.2). Border-radius: 10px. Focus: border #6B8F71, box-shadow 0 0 0 3px rgba(107, 143, 113, 0.15).

Client name Session notes

Badges

Active In Progress Completed Pending Review Overdue

5. CSS Variables (complete system)

/* Colors */
--color-primary: #6B8F71;
--color-primary-light: #7FA084;
--color-primary-dark: #5A7A5F;
--color-secondary: #D4845C;
--color-secondary-light: #E8926F;
--color-secondary-dark: #B86F4A;
--color-accent: #E8B563;
--color-bg: #F5F1E8;
--color-text: #2C3E2C;

/* Typography */
--font-heading: 'Literata', serif;
--font-body: 'Inter', sans-serif;
--text-xs … --text-5xl;  /* 12px–48px */
--font-light … --font-bold;  /* 300–700 */

/* Spacing */
--space-xs: 4px; --space-sm: 8px; --space-md: 16px;
--space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px;

/* Radius */
--radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px;

/* Shadows */
--shadow-sm: 0 2px 8px rgba(44, 62, 44, 0.08);
--shadow-md: 0 4px 12px rgba(107, 143, 113, 0.2);
--shadow-lg: 0 8px 24px rgba(44, 62, 44, 0.15);
--shadow-glow: 0 4px 16px rgba(107, 143, 113, 0.3);

/* Gradients */
--gradient-primary: linear-gradient(135deg, #6B8F71 0%, #7FA084 100%);
--gradient-secondary: linear-gradient(135deg, #D4845C 0%, #E8926F 100%);
--gradient-bg: linear-gradient(135deg, rgba(107,143,113,0.08) 0%, rgba(212,132,92,0.05) 100%);

6. Brand Character

This combination creates an identity that is:

Warm, caring, human-first (not cold tech) Calm, sophisticated, trustworthy Modern, trend-forward (gradient layers) Professional yet approachable Organic, natural feel Empathetic and supportive

Perfect for

Therapist-focused product
Ethical, privacy-first messaging
“By therapists, for therapists” narrative
Premium but accessible positioning

7. Figma / Design Handoff

Color styles

Primary/Base, Primary/Light, Primary/Dark · Secondary/Base, Light, Dark · Accent · Background · Text/Primary · Text/Secondary (60% opacity of Text/Primary).

Text styles

Heading/H1: Literata 600, 48px · H2: 36px · H3: 28px · H4: 500, 24px · Body/Large: Inter 400, 18px · Body/Base: 16px · Body/Small: 14px · Label: Inter 500, 14px · Button: Inter 600, 16px.

Effect styles

Shadow/Subtle · Shadow/Medium · Shadow/Strong · Shadow/Glow · Blur/Light (10px) · Blur/Medium (20px).

Example: Dashboard slice

Welcome back, Dr. Nahar

Monday, February 10 · 5 sessions today

Active Clients

28

+3 this month

Pending Notes

5

Due today

Hours Saved

12.5

This week

Today's Schedule

Client A
10:00 AM · Session 8 · CBT

Upcoming

Client B
2:00 PM · Session 3 · EMDR

Note Ready

Client C
4:30 PM · Session 12 · Process-Based

Supervision