Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Affirm
FintechAffirm projects premium fintech sophistication through its deep navy backdrop and luminous violet accents, creating a nocturnal atmosphere that suggests financial empowerment under cover of darkness. The custom Axiforma typography, paired with generous whitespace, communicates trustworthy authority while maintaining approachable accessibility.
Design Identity
Signature Color
Affirm Electric Violet
#4a4af4
Financial innovation and accessible premium lending - vibrant enough to inspire confidence, sophisticated enough to convey legitimacy
Visual Identity
The dark navy background with floating phone mockup creates a signature 'financial app showcase' layout that immediately signals fintech innovation and mobile-first thinking.
Component Style
Generously rounded buttons with 24px+ border radius create pill-like forms that feel approachable and modern. Cards use substantial 20px corners with subtle elevation, avoiding harsh shadows in favor of gentle backdrop blur effects. Everything feels soft yet substantial.
Spacing Philosophy
Luxurious vertical rhythm with massive gaps between hero sections, while maintaining intimate 8-12px padding within components. The mobile mockup floats in generous negative space, creating premium breathing room.
Design Principles
- Border radius scales from 4px for small elements to 96px for major components
- Typography hierarchy jumps dramatically from 14px utility text to 80px hero headlines
- Primary violet (#4a4af4) is reserved for key actions and brand moments only
- Dark backgrounds (#2e3440 range) dominate to create premium fintech atmosphere
- 200ms transitions maintain consistent interaction timing across all elements
Target Audience
Millennial and Gen-Z consumers who are financially aspirational but currently underserved by traditional credit, seeking transparent and flexible payment solutions
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 | 18px | 400 | 26px | |
| h1 | 80px | 300 | 88px | |
| h2 | 14px | 600 | 14px | |
| h3 | 15px | 500 | 15px | |
| p | 38px | 300 | 49.4px | |
| a | 14px | 400 | 14px | |
| button | 18px | 400 | normal | |
| input | 18px | 400 | 21.06px | |
| nav | 18px | 400 | 26px | |
| header | 18px | 400 | 26px |
Color Palette
#f0f5f7#f7f7f8#212189#4a4af4#f3f4f6#3a3c3d#105432#ede9e6#383838#ffffff#d4d6d7#f7f9fa
