The visual language of LifeGraph
These guidelines are designed to help partners, developers, and creators use our brand assets consistently and effectively. Our visual identity reflects our mission: making personal growth visible and achievable.
Our mark represents growth in motion
The LifeGraph logo features a graph-node icon — two connected nodes with a flowing curve — set within a green-to-blue gradient rounded rectangle. It represents the transformation of goals into visible, interconnected progress. The logo should always be used with care to maintain brand consistency.
Primary Logo
Logo on Dark
Icon Only
Wordmark Only
Monogram
How to use our brand correctly
Do
- Use the official logo files provided
- Maintain minimum clear space around the logo
- Use on contrasting backgrounds for visibility
- Scale proportionally when resizing
Don't
- Alter the logo colors outside brand palette
- Stretch or distort the logo proportions
- Add effects like shadows, gradients, or outlines
- Place on busy or low-contrast backgrounds
Minimum Clear Space
The clear space around the logo should equal the height of the icon (X).
Colors that inspire growth
Our color system is built on a vibrant violet primary, supported by semantic colors for feedback, status indicators, and life area categorization. Click any swatch to copy the color value.
Primary
Primary Teal
#2dd4bf
Primary Foreground
#ffffff
Semantic
Success
#4ade80
Warning
#fbbf24
Destructive
#f87171
Info
#38bdf8
Neutrals
Background
#0f0d14
Surface 1
#1a1721
Surface 2
#211e29
Surface 3
#2a2633
Text Primary
#f0eff4
Text Secondary
#9a96a6
Text Tertiary
#7a7686
Border
#302c3a
Task Status
Completed
#3ecf8e
In Progress
#818cf8
Blocked
#f87171
Skipped
#9ca3af
Goal Status
Active
#818cf8
Completed
#3ecf8e
Cancelled
#f87171
Difficulty
Easy
#3ecf8e
Medium
#facc15
Hard
#fb923c
Expert
#f87171
Life Areas
Personal
#e879f9
Finance
#facc15
Health
#3ecf8e
Relationships
#f472b6
Skills
#a78bfa
Career
#60a5fa
Achievement Rarity
Common
#9ca3af
Rare
#60a5fa
Epic
#a78bfa
Legendary
#fbbf24
Type that's both clear and expressive
We use Geist Sans for interface text — modern, geometric, and highly readable. DM Serif Display adds warmth and elegance to headlines, creating a balance between precision and personality.
Primary Font
Geist Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Usage: UI text, body copy, buttons, labels
Display Font
DM Serif Display
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Usage: Headlines, hero text, accents
Type Scale
See LifeGraph in motion
Our brand intro animation showcases the LifeGraph identity — the gradient mark, the graph-node icon, and the wordmark coming together. Use this video in presentations, social media, and partner materials.
MP4 · 2.9 MB · Brand intro animation
DownloadGet the brand assets
Download our official brand assets for use in your projects, presentations, and marketing materials. All assets are provided in multiple formats for maximum flexibility.
Questions about brand usage?
For logo usage requests, partnership inquiries, or questions about these guidelines, reach out to our brand team.
Company Information
LIFEGRAPH LTD
Company No. SC876325 | Registered in Scotland
2/R 31 St. Nicholas Place, Dundee, Scotland, DD3 9NF