Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Tokopedia
E-commerceTokopedia embodies Indonesian marketplace vibrancy through a bold magenta-to-purple gradient hero that radiates energy and accessibility. The playful mascot characters and whimsical illustrations create a friendly, approachable atmosphere that makes e-commerce feel like a delightful game rather than a transaction.
Design Identity
Signature Color
Tokopedia Magenta
#DA5AE8
Energetic marketplace accessibility that breaks down barriers between buyers and sellers in Southeast Asia
Visual Identity
The vibrant gradient hero banners with cute mascot characters (owl and bunny) paired with playful 3D-style illustrations - it's immediately recognizable as a fun, approachable Indonesian marketplace
Component Style
Clean, rounded components with generous padding and subtle shadows. Buttons use moderate border radius (6-8px) with solid fills, while the overall layout feels spacious and breathable with card-based organization.
Spacing Philosophy
Generous whitespace creates breathing room between content sections, with the hero banner taking up significant vertical real estate to establish mood before transitioning to clean, grid-based product layouts.
Design Principles
- Hero banners always use vibrant gradients to capture attention
- Mascot characters appear in marketing contexts to humanize the brand
- Button text uses 800 font-weight for maximum readability
- Typography stays consistently at 12-14px sizes across components
- Open Sauce One font family maintains Indonesian market accessibility
Target Audience
Indonesian consumers and small business owners who value community, trust, and accessibility in online marketplace experiences
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 | 14px | 400 | 16.1px | |
| a | 12px | 400 | 31px | |
| button | 12px | 800 | 13.8px | |
| input | 14px | 400 | 20px | |
| main | 14px | 400 | 16.1px |
Color Palette
No colors extracted
