introtherapy
Claim your profile

Brand Guidelines

Our visual identity reflects our commitment to calm, trust, and accessibility in mental health care.

Logo

The introtherapy wordmark is a lowercase Playfair Display ligature lockup: italic Medium “intro” beside Bold “therapy” in brand sage (mint on dark). It should always appear with adequate spacing and contrast.

introtherapy
introtherapy

Color Palette

Our Sage & Sand palette evokes calm, nature, and warmth. Sage is our primary brand color; Sand provides soft, warm backgrounds.

Sage (Primary)

sage-50
#f4f7f2
sage-100
#edf1ea
sage-200
#d9e3d6
sage-300
#8fb49f
sage-400
#6e947e
sage-500
#5b8570
sage-600
#4f7a63
sage-700
#3d6350
sage-800
#2e5644
sage-900
#1e3a2f

Sand (Background)

sand-50
#fbf9f4
sand-100
#f8f2e7
sand-200
#f5eddf

Typography

We pair an elegant serif with a clean sans-serif for readability and sophistication.

Headings

Playfair Display

Used for all headings (h1-h4), the logo wordmark, and display text. Available in Regular (400), SemiBold (600), and Bold (700).

Aa Bb Cc Dd
The quick brown fox jumps over the lazy dog.
0123456789 !@#$%&*
Body

Inter

Used for body text, navigation, buttons, labels, and all UI elements. Available in Regular (400), Medium (500), SemiBold (600), and Bold (700).

Aa Bb Cc Dd
The quick brown fox jumps over the lazy dog.
0123456789 !@#$%&*

UI Components

Key patterns used throughout the IntroTherapy interface.

Buttons
Primary Button Secondary Button Pill Button
Badges
Sage Badge Amber Badge Emerald Badge
Card Style

Card Title

Cards use bg-white, rounded-2xl, shadow-sm, and a border-sage-100 border.

Usage Guidelines

Please follow these guidelines when using IntroTherapy brand assets.

Do

  • ✓ Use the logo with adequate clear space around it
  • ✓ Use sage-600 as the primary brand color
  • ✓ Use Playfair Display for headings and Inter for body text
  • ✓ Maintain contrast ratios for accessibility (WCAG AA)
  • ✓ Use sand-50 or white backgrounds for content areas

Don't

  • ✗ Stretch, rotate, or distort the logo
  • ✗ Change the logo font or add effects
  • ✗ Place the logo on busy or low-contrast backgrounds
  • ✗ Use brand colors outside the defined palette
  • ✗ Combine our brand assets with competing services