Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
TomTom
MapsTomTom's visual identity centers on aspirational navigation metaphors with bold, geometric typography that suggests precision and movement. The signature bright red creates urgency and energy, while the stark layout with generous whitespace positions technology as an invisible enabler of human mobility.
Design Identity
Signature Color
TomTom Signal Red
#FF0000
Navigation urgency and movement energy - the color of go-signals and automotive action
Visual Identity
Dramatic split-screen layouts with oversized typography that treats words like map waypoints, creating visual journeys across the interface
Component Style
Minimal geometric cards with subtle borders and no shadows - everything feels like clean dashboard interfaces with precise edge-to-edge layouts that mirror GPS screen aesthetics
Spacing Philosophy
Stadium-scale spacing with massive section breaks creating breathing room, while content clusters tightly within cards to mimic the focused information density of navigation displays
Design Principles
- Headlines use 60px Gilroy Bold for maximum wayfinding impact
- Red accent color only appears for primary actions and key terms
- Split-column layouts mirror left-nav/right-content GPS interfaces
- Typography scales from 14px buttons to 60px headlines in clean intervals
- Content cards use stark white backgrounds with minimal borders
Target Audience
Fleet managers, logistics coordinators, and automotive developers who need enterprise-grade location intelligence, not consumer GPS users
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 | 60px | 400 | 68px | |
| h2 | 16px | 400 | 24px | |
| h3 | 20px | 400 | 26px | |
| p | 36px | 400 | 44px | |
| a | 16px | 400 | 24px | |
| button | 14px | 400 | 16px | |
| nav | 16px | 400 | 24px | |
| header | 16px | 400 | 24px | |
| footer | 16px | 400 | 24px |
Color Palette
#3b82f6#ffffff
