Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Kuda
NeobankKuda presents a vibrant, gaming-inspired fintech aesthetic that balances professional banking credibility with youthful energy. The deep royal purple creates premium gravitas while playful geometric shapes and dynamic phone mockups suggest innovation and accessibility for digital-native users.
Design Identity
Signature Color
Kuda Royal Purple
#40196d
premium digital banking authority with creative confidence
Visual Identity
Floating geometric shapes in gradient colors combined with tilted mobile device mockups create a dynamic, three-dimensional playground aesthetic that's instantly recognizable.
Component Style
Soft, approachable rounded corners (6px radius) with gentle shadows that feel pillowy rather than sharp. Buttons have substantial padding creating touch-friendly targets with a welcoming, tactile quality.
Spacing Philosophy
Generous asymmetrical layout with abundant white space on the left for text breathing room, while the right side densely packs visual elements to create energy and movement.
Design Principles
- Border radius stays consistent at 6px for cohesive softness
- Typography uses extreme weight contrast: 900 weight headlines vs 400 body
- Shadows are always subtle with 7% opacity maintaining lightness
- Color gradients flow from purple to blue suggesting financial growth
- Mobile-first visual hierarchy with device mockups as hero elements
Target Audience
Nigerian millennials and Gen-Z users seeking modern banking that feels more like a lifestyle app than traditional finance
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 | 16px | |
| h1 | 48px | 900 | 55.2px | |
| h2 | 36px | 900 | 49.68px | |
| h3 | 36px | 900 | 49.68px | |
| p | 14px | 700 | 21px | |
| a | 16px | 400 | 16px | |
| header | 16px | 400 | 16px | |
| footer | 16px | 400 | 16px |
Color Palette
#40196d#1dcbef#000000#18864b#f7685b#636369#ffffff#f4f4f4#dcffec#121212#3498db#07bc0c
