Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Vipps
FintechVipps radiates Nordic minimalism with a vibrant orange-to-violet gradient that feels both trustworthy and energetic. The custom VippsHeader typography creates a distinctive personality that balances financial authority with approachable warmth, while the deep purple accents suggest premium digital craftsmanship.
Design Identity
Signature Color
Vipps Orange
#FF5722
Nordic energy and financial optimism - warm accessibility that breaks traditional banking coldness
Visual Identity
The signature orange-to-purple gradient header creates an unmistakable Nordic fintech warmth, paired with distinctive purple interactive elements and generous whitespace that feels distinctly Scandinavian.
Component Style
Soft rounded corners (approximately 8-12px radius) with generous padding create a friendly, approachable feel. Toggle switches and buttons have a pillowy quality with subtle shadows on focus states using purple (#5a78ff). Everything feels touchable and human-centered rather than corporate.
Spacing Philosophy
Generous breathing room with large sections separated by significant whitespace. The cookie consent modal demonstrates balanced density - enough space to feel uncluttered but efficient use of screen real estate. Internal component padding is substantial, creating a sense of premium comfort.
Design Principles
- Orange-to-purple gradient backgrounds create warmth and energy
- Purple (#5a78ff) focus states on all interactive elements
- VippsHeader font at 500 weight for all headings maintains brand consistency
- Rounded corners never exceed 12px, creating soft but not childish feel
- Deep purple (#161225) for primary text creates strong hierarchy
Target Audience
Progressive Scandinavian consumers who value simplicity and trust in digital payments - tech-comfortable but not necessarily tech-obsessed individuals seeking frictionless financial 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 | normal | |
| h1 | 32px | 500 | 40px | |
| h2 | 32px | 500 | 40px | |
| h3 | 24px | 500 | 32px | |
| h4 | 20px | 500 | 24px | |
| h6 | 18px | 500 | 24px | |
| p | 15px | 600 | 24px | |
| a | 15px | 400 | 24px | |
| button | 15px | 700 | 22.5px | |
| input | 15px | 400 | normal |
Color Palette
#ff985f#ff5b24#db460f#9b3716#f1ebff#ffffff#f5f5f2#fdfdfc#fbfbfa#f9f9f7#f7f7f5#c4c4c1
