Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
MetLife
InsurtechMetLife presents a trustworthy financial dashboard aesthetic with deep corporate blue (#0061a0) dominating the interface, complemented by strategic bright accents like emerald green (#37cd8f) for engagement elements. The typography hierarchy uses their custom MetLifeCircular font at substantial sizes (44px headlines) to project authority and reliability, while the dashboard displays complex retirement data through clean visualizations that feel approachable rather than overwhelming.
Design Identity
Signature Color
MetLife Corporate Blue
#0061a0
established financial trust and institutional reliability
Visual Identity
Distinctive dashboard-first layout with prominent circular charts and data visualizations that transform complex retirement planning into digestible visual stories, always maintaining a balance between professional authority and user accessibility.
Component Style
Rounded corners with subtle depth - buttons appear soft and approachable rather than sharp or aggressive. Cards have gentle shadows and breathing room, with data visualizations using friendly circular progress indicators rather than harsh bar charts. Everything feels substantial but not intimidating.
Spacing Philosophy
Generous whitespace creates breathing room around complex financial data, with large 44px+ headlines given plenty of vertical space to establish clear information hierarchy. Dense data sections are balanced with airy margins to prevent cognitive overload.
Design Principles
- Headlines use MetLifeCircular at 44px minimum to establish authority
- Corporate blue (#0061a0) anchors trust while green accents (#37cd8f) drive action
- Circular data visualizations over rectangular charts for approachability
- Substantial line heights (66px for h2) create readable information density
- Mixed typography stack balances custom brand font with web-safe fallbacks
Target Audience
Working adults aged 35-65 planning for retirement who need to understand complex financial data but aren't financial experts themselves
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 | 14px | 400 | 20px | |
| h1 | 44px | 500 | 55px | |
| h2 | 44px | 500 | 66px | |
| h3 | 12px | 700 | 18px | |
| h4 | 32px | 500 | 48px | |
| h6 | 18px | 600 | 27px | |
| p | 16px | 400 | 16px | |
| a | 16px | 700 | 20px | |
| button | 16px | 700 | 16px | |
| input | 13px | 400 | 14.95px |
Color Palette
#ffffff#333333#f2f2f2#000000#0061a0#6e6e6e#528320#37cd8f#29246a#474747#37cd84#058a5e
