Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Loggi
LogisticsLoggi embraces a trust-focused, safety-first aesthetic with its vibrant electric blue creating an authoritative yet approachable delivery service brand. The Montserrat typography reinforces reliability and transparency, while the modal-heavy interface design prioritizes clear communication over flashy visuals.
Design Identity
Signature Color
Loggi Electric Blue
#006aff
Trustworthy logistics precision - conveying speed, reliability, and professional delivery service authority
Visual Identity
The prominent safety warning modals with structured bullet-point content and official channel verification - no other delivery brand leads with such transparent security messaging as their primary brand touchpoint
Component Style
Clean modal dialogs with generous padding, minimal borders, and rounded corners around 8px. Components feel substantial but not heavy, with clear hierarchy through bold headings and structured list formatting rather than visual flourishes.
Spacing Philosophy
Modal-centric layout with comfortable 16-24px internal padding, creating breathing room for security messaging. Background content is intentionally blurred to focus attention on critical communications.
Design Principles
- Security messaging takes visual priority over marketing content
- Typography weight jumps dramatically - 400 to 700/800 for clear hierarchy
- Blue palette spans from #003b99 to #00baff for tonal depth
- Modal overlays blur background content for focused attention
- Bullet points and structured lists over paragraph text for clarity
Target Audience
Security-conscious Brazilian consumers and small business owners who prioritize transparent logistics providers over flashy delivery apps
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 | 48px | 700 | 66px | |
| h2 | 16px | 400 | 24px | |
| h3 | 28px | 800 | 32px | |
| h4 | 16px | 400 | 24px | |
| h5 | 22px | 700 | 30.8px | |
| p | 14px | 400 | 21px | |
| a | 14px | 400 | 21px | |
| button | 14px | 500 | 20px | |
| input | 14px | 400 | 20px |
Color Palette
#006aff#ffffff#0095ff#003b99#00baff#e6f8ff#1b71f7#000000#2e3545#d2ffdf#2e5a1c#f6822a
