Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Swvl
MobilitySwvl employs a minimalist, tech-forward aesthetic anchored by the distinctive Arbeit typeface, creating an understated yet confident transportation technology brand. The extensive use of ethereal lavender background creates a dreamlike, futuristic atmosphere that feels both accessible and premium. Typography hierarchy is dramatically scaled from intimate 14px navigation to commanding 72px headlines, suggesting both human-scale usability and ambitious vision.
Design Identity
Signature Color
Swvl Lavender Mist
#E8E1F5
forward-thinking mobility with a gentle, approachable tech sophistication
Visual Identity
The expansive lavender-tinted background combined with Arbeit's geometric letterforms creates an immediately recognizable floating-in-space aesthetic that feels like premium mobility tech rather than traditional transportation.
Component Style
Clean, borderless components with subtle contrast against the lavender backdrop. Navigation elements appear weightless with generous letter spacing, while the primary CTA uses rounded corners (approximately 8px) with a dark contrasting background for clear hierarchy.
Spacing Philosophy
Generous horizontal navigation spacing creates breathing room across the top bar, while the centered layout provides ample whitespace that reinforces the floating, uncluttered mobility experience.
Design Principles
- Typography scales dramatically: 14px body to 72px headlines with consistent Arbeit family
- Lavender-tinted backgrounds create consistent atmospheric depth
- Font weights stay minimal: 300-500 range for refined hierarchy
- Line heights maintain 1.4-1.8x ratios for optimal readability
- Navigation uses consistent 14px sizing across all interactive elements
Target Audience
Urban professionals and tech-savvy commuters who value seamless, premium transportation experiences over traditional transit options
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 | 20px | |
| h1 | 72px | 400 | 86.4px | |
| h2 | 18px | 400 | 25.2px | |
| h3 | 48px | 500 | 48px | |
| h4 | 48px | 500 | 48px | |
| p | 18px | 300 | 28.8px | |
| a | 14px | 400 | 20px | |
| nav | 14px | 400 | 20px | |
| header | 14px | 400 | 20px | |
| footer | 14px | 400 | 20px |
Color Palette
No colors extracted
