Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Trulia
ProptechTrulia embodies aspirational homeownership through warm, approachable design that balances professional real estate expertise with emotional comfort. The turquoise-teal signature color evokes both trust and the refreshing possibility of finding your perfect home, while bold Figtree typography creates confident hierarchy that guides users through their home discovery journey.
Design Identity
Signature Color
Trulia Teal
#00adbb
Fresh possibility and trustworthy guidance - the color of clear waters leading to new beginnings in homeownership
Visual Identity
The distinctive full-width hero imagery showing real families in beautiful neighborhoods, combined with centered white overlay text and the characteristic teal accent system that appears in buttons and interactive elements.
Component Style
Softly rounded corners (8-12px) with clean borders and subtle shadows create approachable yet professional components. Buttons feel substantial with generous padding, while the teal primary actions stand out against warm, neutral backgrounds. Everything feels touchable and human-scaled.
Spacing Philosophy
Generous breathing room in hero sections creates aspirational luxury, while tighter component spacing maintains scannable efficiency. Large-scale photography gets maximum real estate, with text overlays using ample padding to ensure readability against diverse backgrounds.
Design Principles
- Primary CTA buttons always use Trulia Teal (#00adbb) for instant recognition
- Hero imagery dominates above-the-fold with full viewport width
- Typography hierarchy uses 900 weight for headlines, 400 for body, creating strong contrast
- Border radius stays between 6-12px for friendly accessibility
- White text overlays on photography always include subtle backgrounds for legibility
Target Audience
Aspiring homeowners and renters aged 25-45 who value both emotional connection and data-driven insights when making major housing decisions
Mood
Design descriptions are AI-generated based on visual analysis and may not fully reflect the brand's official design guidelines.
Design System
Typography Scale
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| body | 16px | 400 | 24px | |
| h1 | 28px | 900 | 31.92px | |
| h2 | 38px | 900 | 39.9px | |
| h3 | 24px | 900 | 31.92px | |
| h4 | 16px | 700 | 17.6px | |
| p | 16px | 400 | 24px | |
| a | 15px | 400 | 22.5px | |
| button | 16px | 700 | 24px | |
| input | 20px | 400 | 24px | |
| header | 16px | 400 | 24px |
Color Palette
#6b7780#00565d#7f2e1f#ff5e3f#f2c430#4dc5cf#ffead8#007882#008545#740631#00adbb#869099
