Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Olist
E-commerceOlist creates a nocturnal, tech-forward aesthetic with deep midnight blues that suggest serious business automation. The Plus Jakarta Sans typography reinforces a modern Brazilian fintech identity, while the gradient hero background creates an immersive, almost cinematic quality that positions the brand as sophisticated yet approachable.
Design Identity
Signature Color
Olist Electric Blue
#0a4ee4
Brazilian fintech innovation - trustworthy automation with entrepreneurial energy
Visual Identity
The immersive dark gradient background with warm lighting creates a workspace atmosphere - you'd recognize this brand by its nocturnal business environment feel combined with electric blue accents that pierce through the darkness.
Component Style
Rounded corners with medium border radius (approximately 8px), solid fills without heavy shadows. Buttons feel substantial with bold typography, creating a confident, click-worthy presence. The overall approach favors filled states over outlined components.
Spacing Philosophy
Generous breathing room around hero content with wide margins, creating focus on the central message. Navigation elements have comfortable spacing that suggests ease of use rather than density.
Design Principles
- Headings use 700 weight for maximum impact and authority
- Button text is always 700 weight at 14px for consistency
- Dark gradient backgrounds create depth and focus
- Electric blue (#0a4ee4) is the primary interaction color
- Plus Jakarta Sans across all elements for Brazilian tech identity
Target Audience
Brazilian small business owners and entrepreneurs who want sophisticated automation tools but need approachable, trust-building interfaces
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 | 44px | 700 | normal | |
| h2 | 24px | 600 | normal | |
| h4 | 20px | 400 | 30px | |
| p | 16px | 400 | normal | |
| a | 12.8px | 400 | normal | |
| button | 14px | 700 | 14px | |
| input | 13.3333px | 400 | normal | |
| nav | 16px | 400 | normal | |
| header | 16px | 400 | normal |
Color Palette
#ffffff#0a4ee4#0a1f9c#121212#3498db#07bc0c#f1c40f#e74c3c#757575#616161#e0e0e0#bb86fc
