Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Airbase
FintechAirbase employs a sophisticated dark-to-light gradient that creates a sense of emerging from complexity into clarity. The brand balances corporate authority through its dark teal hero section with approachable warmth via the orange Paylocity partnership branding, suggesting enterprise-grade reliability with human-centered design.
Design Identity
Signature Color
Enterprise Teal
#3A5F6F
Financial depth and technological sophistication - communicating trust and stability for complex business operations
Visual Identity
The dramatic dark-to-light vertical transition from moody teal hero to clean white sections, combined with the strategic use of warm orange accent partnerships, creates an unmistakable 'emergence from complexity' narrative.
Component Style
Rounded-corner buttons with substantial padding create approachable touchpoints against the sophisticated backdrop. The green CTA button provides confident contrast while maintaining accessibility. Cards and sections use generous breathing room with subtle transitions between dark and light themes.
Spacing Philosophy
Expansive vertical sections create a sense of premium positioning, with the hero taking approximately 40% of viewport height. Generous padding around text blocks (appears to be 40-60px) and substantial margins between sections emphasize clarity and reduce cognitive load.
Design Principles
- Typography scales dramatically from 41px headlines to 18px body with 500 weight consistency
- Dark hero sections transition to light content areas for visual hierarchy
- Orange partnerships contrast against teal for brand alliance visibility
- Rounded corners on interactive elements (approximately 6-8px radius)
- Generous vertical spacing with sections spanning 300-400px minimum heights
Target Audience
CFOs and finance directors at mid-to-large enterprises who need to consolidate complex spend management while maintaining rigorous financial controls
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 | 500 | 28.8px | |
| h2 | 41px | 500 | 53.3px | |
| h3 | 35px | 500 | 45.5px | |
| p | 18px | 500 | 28.8px | |
| a | 18px | 500 | 28.8px | |
| button | 0px | 400 | 36px | |
| nav | 18px | 500 | 28.8px | |
| header | 18px | 500 | 28.8px | |
| footer | 18px | 500 | 28.8px |
Color Palette
No colors extracted
