Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Truecaller
CommunicationsTruecaller embraces a bold, accessibility-first design with vibrant blue as the primary action color and heavy Poppins typography that commands attention. The design feels trustworthy yet approachable, balancing corporate reliability with consumer-friendly warmth through generous whitespace and prominent visual hierarchy.
Design Identity
Signature Color
Truecaller Blue
#3b82f6
Digital trust and security - communicating reliability in caller identification and spam protection
Visual Identity
Massive, bold Poppins headlines with extreme weight contrast - thin body text paired with ultra-heavy 700-weight headings creates an unmistakable typographic voice that screams confidence and authority.
Component Style
Rounded, friendly buttons with generous padding and medium border radius (approximately 8-12px). Components feel substantial and touchable with clear focus states using the signature blue ring system. No harsh shadows - everything relies on color and typography weight for hierarchy.
Spacing Philosophy
Dramatic vertical rhythm with large gaps between sections to let the heavy typography breathe. Tight 4px micro-spacing for pagination elements contrasts with generous padding around primary actions, creating clear interaction zones.
Design Principles
- Typography weight jumps dramatically - 400 to 700 with no middle ground
- Border radius stays consistent at 8-12px across all interactive elements
- Blue (#3b82f6) is the only accent color - everything else is grayscale
- Headlines use identical 48px size across h1-h3 for consistent impact
- 4px base unit for micro-spacing and pagination margins
Target Audience
Privacy-conscious smartphone users who need reliable caller identification - spanning from tech-savvy millennials to security-minded professionals dealing with spam calls
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 | 28px | |
| h1 | 48px | 700 | 52.8px | |
| h2 | 48px | 700 | 48px | |
| h3 | 48px | 700 | 52.8px | |
| h4 | 16px | 600 | 28px | |
| h5 | 24px | 700 | 27px | |
| p | 12px | 400 | 15px | |
| a | 14px | 600 | 24px | |
| button | 24px | 400 | 27px | |
| input | 14px | 400 | 24px |
Color Palette
#000000#090f20#ffffff#3b82f6
