Brand Guidelines
Visual identity for HeartCentered AI. Download logos, reference colors, and understand our design language.
Logos
Icon / Favicon
Simplified heart-in-circle mark for favicons, app icons, and small spaces.
Color Palette
Accent
Primary brand color
#5D7B6F
Accent Dark
Hover states, emphasis
#4A6B5D
Accent Light
Secondary elements
#7A9A8C
Secondary
Warm accent
#D4B896
Text
Primary text color
#2A3A2A
Muted
Secondary text
#7A8B7D
Background
Page background
#F4F7F4
Surface
Cards, elevated elements
#FFFFFF
Typography
Display Font
Fraunces
Used for headlines, titles, and emphasis. A variable serif with a warm, contemplative character.
Light 300
Regular 400
Medium 500
Semibold 600
Bold 700
Body Font
DM Sans
Used for body text, navigation, and UI elements. A clean, modern sans-serif with excellent readability.
Light 300
Regular 400
Medium 500
Semibold 600
Bold 700
Social Media Preview
OG Image (1200 x 630)
Used for link previews on Twitter, LinkedIn, Facebook, Slack, and other platforms.
Design Principles
Organic Flow
Soft edges, flowing animations, and breathing elements. Nothing rigid or mechanical.
Warm & Grounded
Sage greens and warm neutrals. Nature-inspired, contemplative, approachable.
Unity in Form
The logo represents consciousness recognizing itself. Heart and neural pathways as one.
Usage Guidelines
Do
- ✓ Use logo on light backgrounds (#F4F7F4 or white)
- ✓ Maintain clear space around the logo (minimum 20% of logo width)
- ✓ Use the social version for small sizes and avatars
- ✓ Pair Fraunces headlines with DM Sans body text
Don't
- ✗ Stretch, rotate, or distort the logo
- ✗ Change the logo colors
- ✗ Place logo on busy backgrounds or images
- ✗ Use the primary logo below 64px (use icon instead)