Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Expensify
FintechExpensify creates a sophisticated financial interface through rich forest greens and warm creams, evoking trust and organic growth. The dual typography system—mixing custom serif headlines with clean sans-serif UI text—suggests both authority and approachability, perfect for making expense management feel less corporate and more human.
Design Identity
Signature Color
Expensify Green
#03d47c
Financial growth and automated efficiency—vibrant enough to feel energizing yet trustworthy enough for money management
Visual Identity
The dark forest green hero background (#07271f) paired with cream undertones creates an unmistakably premium financial aesthetic that feels more like a luxury service than typical fintech blue
Component Style
Rounded corners with generous padding create approachable, pillow-soft components. Cards have subtle elevation, buttons use full corner rounding (24px+), and the overall treatment feels cushioned rather than sharp—more like a friendly financial advisor than a sterile banking interface
Spacing Philosophy
Luxurious breathing room with 40-60px gaps between major sections, while maintaining intimate 16-24px spacing within component groups. The left-heavy layout gives plenty of whitespace on the right for the UI preview to breathe
Design Principles
- Serif headlines (Expensify-NewKansas) for authority, sans-serif (Expensify-Neue) for UI clarity
- Forest green backgrounds (#07271f) with cream accents (#faf8f5) for warmth
- Button corner radius always 24px+ for friendly approachability
- Line height consistently 1.4x font size for comfortable reading
- Never exceed 3 text weights: 400 (body), 500 (headings), 700 (emphasis)
Target Audience
Small business owners and finance managers who want expense software that feels human and approachable rather than intimidatingly corporate
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 | 15px | 400 | 21px | |
| h1 | 25px | 500 | 28.75px | |
| h2 | 36px | 500 | 50.4px | |
| h3 | 17px | 700 | 23.8px | |
| h4 | 15px | 700 | 18px | |
| p | 16px | 400 | 22.4px | |
| a | 10px | 400 | 14px | |
| button | 13px | 700 | 38px | |
| input | 15px | 400 | 21px |
Color Palette
#ffffff#03d47c#e5fafe#a2a9a3#d9f8fe#ebe6df#07271f#002e22#faf8f5#76847e#fcfbf9#0676de
