Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Tabby
FintechTabby embodies playful financial empowerment through warm, curved aesthetics and lifestyle-focused imagery. The emerald-to-teal gradient backdrop creates an optimistic, growth-oriented atmosphere while the custom Radial typeface adds personality to the serious fintech space.
Design Identity
Signature Color
Tabby Emerald
#3FAB8B
financial growth and accessible prosperity - positioning BNPL as empowering rather than debt-focused
Visual Identity
Organic gradient backgrounds with lifestyle photography featuring confident, diverse individuals in colorful, contemporary settings - making financial services feel human and aspirational
Component Style
Soft-cornered elements with subtle shadows and clean borders. The QR code container uses generous rounded corners (~16px) with white backgrounds, while maintaining accessibility through high contrast ratios
Spacing Philosophy
Asymmetrical left-weighted layout with generous right-side breathing room for lifestyle imagery. Large 40-60px gaps between content sections create a premium, uncluttered feeling
Design Principles
- Headers use Radial typeface exclusively at 60px/44px/28px for brand consistency
- Body text switches to Inter for maximum readability
- Border radius consistently 12-16px for friendly approachability
- Gradient backgrounds always flow from emerald to teal
- White space ratios favor 60/40 content-to-image splits
Target Audience
Style-conscious millennials and Gen Z consumers who view flexible payments as lifestyle enablement rather than financial necessity
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 | 60px | 700 | 64px | |
| h2 | 44px | 700 | 48px | |
| h3 | 28px | 700 | 32px | |
| h5 | 20px | 700 | 24px | |
| h6 | 18px | 700 | 22px | |
| p | 16px | 400 | 24px | |
| a | 16px | 700 | 24px | |
| button | 24px | 700 | 28px | |
| nav | 16px | 400 | 24px |
Color Palette
#007aff#00337a#ffffff#131c26#3b82f6
