Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
JUMO
FintechJUMO embodies a nocturnal fintech aesthetic with a deep space gradient that transitions from midnight navy to cosmic purple, punctuated by translucent 3D orbital elements that suggest data flow and financial connectivity. The typography uses General Sans with generous spacing, creating an enterprise-grade sophistication that feels both approachable and technically advanced.
Design Identity
Signature Color
Cosmic Purple
#9b51e0
Advanced fintech innovation - bridging the gap between traditional banking infrastructure and next-generation data-driven financial products
Visual Identity
Floating translucent 3D rings and spheres in purple gradients against deep space backgrounds - these orbital elements create a unique 'data constellation' visual language that suggests interconnected financial infrastructure.
Component Style
Minimalist components with subtle transparency effects and soft shadows. Elements feel weightless and dimensional rather than flat, with gentle corner radii around 4-8px and ethereal glowing effects rather than sharp borders.
Spacing Philosophy
Expansive breathing room with generous 24px base gaps that create a sense of premium space. The layout uses asymmetric composition with large areas of negative space to let the 3D elements float naturally.
Design Principles
- Gradient backgrounds always transition from deep navy to purple
- 3D elements use translucent purple materials with inner glow
- Typography maintains 1.5x line-height for enterprise readability
- Shadows are soft and ethereal, never sharp or crisp
- Corner radius stays minimal at 4px maximum
Target Audience
Banking infrastructure engineers and fintech product leaders who need enterprise-grade APIs but value modern developer experience and visual sophistication
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 | 20.4px | 400 | 30.6px | |
| h1 | 68px | 400 | 81.6px | |
| h2 | 52.992px | 400 | 63.5904px | |
| h3 | 27.68px | 400 | 35.984px | |
| h4 | 36px | 500 | 43.2px | |
| h5 | 36px | 400 | 43.2px | |
| h6 | 16px | 400 | 24px | |
| p | 21.76px | 400 | 35.904px | |
| a | 20.4px | 400 | 30.6px | |
| button | 16px | 400 | 24px |
Color Palette
#000000#abb8c3#ffffff#f78da7#cf2e2e#ff6900#fcb900#7bdcb5#00d084#8ed1fc#0693e3#9b51e0
