Brand Guidelines

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

Logo

The IntroTherapy wordmark uses Playfair Display in bold weight. It should always appear with adequate spacing and contrast.

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

#f4f7f5

sage-100

#e6ede8

sage-200

#cddbd2

sage-300

#a8c0af

sage-400

#7d9e88

sage-500

#5c826a

sage-600

#476854

sage-700

#3a5444

sage-800

#314538

sage-900

#263930

Sand (Background)

sand-50

#fdfbf7

sand-100

#fbf7ef

sand-200

#f5ebd7

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