Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Konfio
FintechKonfio employs a sophisticated purple-centered palette that communicates financial empowerment with approachable warmth. The Gilroy typography creates a distinctive humanized tech aesthetic, while the organic layout breaks traditional fintech rigidity with asymmetric text placement and atmospheric imagery.
Design Identity
Signature Color
Konfio Violet
#ad88fd
accessible financial innovation - sophisticated yet approachable fintech empowerment
Visual Identity
Asymmetric hero text layout with large white typography floating over atmospheric business imagery, creating an editorial magazine-like quality that breaks traditional fintech grid systems
Component Style
Generously rounded buttons with substantial padding and translucent backgrounds. Cards and inputs use soft, pill-shaped corners around 24px radius with subtle transparency effects rather than hard shadows or borders
Spacing Philosophy
Dramatic negative space around hero elements with text positioned in unexpected asymmetric layouts. Large gaps between sections create breathing room while components maintain intimate 16-24px internal padding
Design Principles
- Border radius consistently 24px+ for pill-shaped softness
- Typography uses only Gilroy at 14px, 16px, and 30px sizes
- White text floats over imagery without containing backgrounds
- Purple gradients from #ad88fd to #521a98 define interactive elements
- Atmospheric photography trumps geometric illustrations
Target Audience
Small business owners and entrepreneurs in Latin America who need accessible financial tools but expect premium digital experiences
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 | 14px | 600 | 28px | |
| h2 | 16px | 400 | 24px | |
| h3 | 30px | 600 | 36px | |
| p | 16px | 500 | 24px | |
| a | 16px | 400 | 24px | |
| button | 16px | 400 | 24px | |
| input | 16px | 400 | 24px | |
| nav | 16px | 400 | 24px | |
| header | 16px | 400 | 24px |
Color Palette
#e9d6ff#efa175#fdf7ec#d6fffa#652001#d6e6ff#f4f0f9#5c9aff#f1f1f9#5d79ac#8d8aca#2d9d78
