Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Razorpay
FintechRazorpay projects fintech sophistication through its signature electric blue (#4A90FF) paired with curved geometric abstractions and distinctive TASA Orbiter Display typography. The brand balances India-focused warmth with global enterprise credibility through generous whitespace and floating UI cards that create a sense of seamless digital mobility.
Design Identity
Signature Color
Razorpay Electric Blue
#4A90FF
Cross-border fintech innovation - trustworthy yet dynamic, bridging traditional banking with modern digital payments
Visual Identity
Floating white cards with subtle shadows over gradient blue backgrounds, combined with organic curved shapes and dotted world map patterns that suggest global connectivity without being corporate-sterile
Component Style
Soft-cornered components with 8px border radius, elevated with subtle drop shadows. Cards feel weightless and float above backgrounds. Buttons are pill-shaped with medium padding, avoiding both sharp enterprise edges and overly playful rounded corners
Spacing Philosophy
Generous vertical rhythm with 48-64px section breaks creates breathing room, while compact 16-24px internal spacing keeps interface elements intimate. Wide left-right margins center content in a comfortable reading column
Design Principles
- Border radius consistently 8px for cards, 24px for buttons
- Typography scales from 14px body to 56px headlines using TASA Orbiter Display
- Blue gradients always flow from light to saturated, never reversed
- White cards maintain 16px internal padding minimum
- Navigation elements use Inter, content uses TASA Orbiter Display
Target Audience
Global businesses and Indian entrepreneurs who need cross-border payment solutions but want approachable, non-intimidating fintech tools
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 | 12px | 400 | normal | |
| h1 | 56px | 600 | 64px | |
| h2 | 48px | 400 | 56px | |
| h3 | 40px | 400 | 46px | |
| h4 | 24px | 600 | 32px | |
| h5 | 20px | 400 | 26px | |
| h6 | 18px | 400 | 24px | |
| p | 14px | 400 | 16.8px | |
| a | 12px | 400 | normal | |
| button | 12px | 400 | normal |
Color Palette
No colors extracted
