Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Bitso
CryptoBitso creates a warm, human-centered fintech aesthetic through rich peach-to-cream gradients and earthy tones that feel approachable yet sophisticated. The ppBitsoSans custom typography combined with generous rounded corners (12px+ inputs, 100px pill buttons) communicates accessibility and trust rather than sterile corporate precision.
Design Identity
Signature Color
Bitso Electric Blue
#4F46E5
Approachable crypto confidence - trustworthy enough for your grandmother, sophisticated enough for traders
Visual Identity
The warm gradient backgrounds combined with highly rounded UI elements (100px border radius buttons, 12px input fields) create an unmistakably soft, human-centered fintech aesthetic that stands apart from sharp, corporate competitors.
Component Style
Supremely rounded components with 100px pill buttons and 12px input borders create a soft, approachable feel. Elements float with generous padding and subtle shadows, avoiding harsh edges entirely - everything feels touchable and friendly.
Spacing Philosophy
Generous breathing room with 32-40px section padding creates luxury, while the phone-centric layout uses asymmetrical positioning to feel dynamic rather than grid-locked. Whitespace is used strategically to let the warm gradient backgrounds shine through.
Design Principles
- Border radius scales dramatically: inputs at 12px, standard elements 6-8px, CTAs at 100px for full pills
- Typography mixing: ppBitsoSans custom font for headings (80px/500 weight), Geist for body text (18px/400)
- Gradient backgrounds always warm-toned (peach/cream) never cool blues or grays
- Button font weight always bold (700) while body text stays light (400)
- Spacing follows 8px grid: 16px base, 24px, 32px, 40px for larger gaps
Target Audience
Crypto-curious millennials and Gen Z in Latin America who want financial empowerment without intimidating interfaces - people who value warmth and accessibility over trading terminal complexity
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 | 80px | 500 | 80px | |
| h2 | 20px | 500 | 24px | |
| p | 18px | 400 | 24px | |
| a | 16px | 400 | 24px | |
| button | 16px | 700 | 24px | |
| nav | 16px | 400 | 24px | |
| header | 16px | 400 | 24px | |
| footer | 16px | 400 | 24px | |
| main | 16px | 400 | 24px |
Color Palette
#3b82f6#ffffff
