Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Xero
FintechXero presents a confident, approachable fintech aesthetic anchored by vibrant electric blue that radiates trustworthy energy. The National2 typeface creates warm professionalism while the hero's 3D visualization communicates sophisticated data mastery without intimidation.
Design Identity
Signature Color
Xero Electric Blue
#1366D6
Trustworthy financial intelligence - energetic enough to inspire confidence, deep enough to convey expertise
Visual Identity
The distinctive 3D data visualization sphere paired with gradient blue backgrounds - it's immediately recognizable as a platform that makes complex financial data beautiful and accessible.
Component Style
Softly rounded corners (6-8px) with clean edges, no heavy shadows. Buttons feel substantial with generous padding, while the overall treatment emphasizes clarity over decoration. Everything has breathing room without feeling sparse.
Spacing Philosophy
Generous hero sections with dramatic 80px+ vertical spacing create impact, while navigation and UI elements use tighter 16-24px rhythms. The layout prioritizes readability with comfortable line-heights that never feel cramped.
Design Principles
- Typography scales dramatically - 72px headlines down to 12px body text for clear hierarchy
- Border radius stays consistent at 6-8px across all interactive elements
- National2 font family used exclusively except for form inputs which fall back to Arial
- Bold 700 weight reserved only for headlines and button text
- Gradients flow from deep blue to lighter blue, never harsh transitions
Target Audience
Small business owners and accountants who need powerful financial tools but value intuitive design over complexity - professionals who want sophistication without intimidation.
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 | 72px | 700 | 64.8px | |
| h2 | 42px | 700 | 48.3px | |
| h3 | 32.04px | 700 | 36.846px | |
| p | 15.6px | 400 | 19.5px | |
| a | 15px | 400 | 18px | |
| button | 15px | 700 | 18px | |
| input | 13.3333px | 400 | normal | |
| nav | 12px | 400 | normal | |
| header | 12px | 400 | normal |
Color Palette
No colors extracted
