Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Apartments.com
ProptechApartments.com employs a forest-green signature color (#367b01) that communicates natural growth and housing stability, paired with custom CostarBrown typography that feels warm and residential rather than corporate. The hero layout creates an immersive neighborhood feeling with autumn-toned brick buildings that make apartment hunting feel like discovering a home community.
Design Identity
Signature Color
Forest Growth Green
#367b01
Natural stability, home growth, and trust in real estate decisions
Visual Identity
The distinctive forest-green color palette combined with warm residential photography and neighborhood-focused messaging - it feels like a local real estate expert rather than a cold property database
Component Style
Clean, accessible components with subtle rounded corners and the signature forest green for primary actions. The search bar is prominently pill-shaped with generous padding, while buttons feel substantial without being heavy - everything prioritizes usability over flashiness
Spacing Philosophy
Generous vertical breathing room between major sections creates a relaxed browsing experience, while the hero search area gets premium real estate with ample whitespace to reduce decision anxiety
Design Principles
- Forest green (#367b01) dominates all primary call-to-action elements
- CostarBrown typography family exclusively - no mixing with system fonts
- Hero headlines use 64px bold weight for maximum impact
- Button text stays at 14px with 17.5px line-height for readability
- 0.2s transitions on all interactive elements for smooth feel
Target Audience
Everyday renters and families looking for their next home who want a trustworthy, neighborhood-focused experience rather than a cold property search engine
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 | normal | |
| h1 | 64px | 400 | 64px | |
| h2 | 36px | 400 | 36px | |
| h3 | 28px | 400 | 28px | |
| p | 16px | 400 | 32px | |
| a | 16px | 400 | 16px | |
| button | 14px | 400 | 17.5px | |
| nav | 14px | 400 | normal | |
| header | 14px | 400 | normal | |
| footer | 16px | 400 | normal |
Color Palette
#fff3f1#ad1100#4c4c4c#ffffff#f2f9e9#bfbfbf#f5fbfc#fafafa#367b01#284a01#fffcf3#77b800
