Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Betterfly
InsuranceBetterfly creates a wellness-forward brand atmosphere through vibrant jade green highlighting against soft cream backgrounds, paired with bold condensed headlines that command attention while maintaining approachability. The design feels like a modern health app that's both trustworthy and energizing, using playful geometric shapes and a prominent mobile-first presentation.
Design Identity
Signature Color
Betterfly Jade
#00d084
vibrant wellness energy and positive health transformation
Visual Identity
The floating smartphone with glowing green interface surrounded by colorful abstract shapes creates an unmistakable app-centric wellness brand that prioritizes mobile engagement and gamified health experiences.
Component Style
Buttons use generous rounded corners with pill-like shapes, emphasizing accessibility and friendliness. The primary CTA has a bright green background with strong contrast, while secondary buttons maintain clean outlined styles with ample padding for touch-friendly interaction.
Spacing Philosophy
Generous whitespace creates breathing room around the hero content, with the mobile device given prominent real estate on the right side. The layout feels airy and uncluttered, allowing the colorful accent elements to pop without overwhelming the core message.
Design Principles
- Headlines use Obviously Narw at 500 weight for impact without heaviness
- Body text maintains 15.9px Roboto for optimal readability
- Green accent color (#00d084) dominates interactive elements
- Rounded corners on all interactive components for approachability
- Mobile-first visual hierarchy with device prominence
Target Audience
HR leaders and benefits managers at progressive companies who want to offer engaging wellness programs that employees actually use and value.
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 | 15.9317px | 400 | 15.9317px | |
| h1 | 75.6865px | 500 | 75.6865px | |
| h2 | 59.7548px | 500 | 59.7548px | |
| h3 | 39.8365px | 500 | 43.8202px | |
| p | 15.9317px | 400 | 23.101px | |
| a | 15.9317px | 400 | 15.9317px | |
| button | 15.9317px | 400 | 15.9317px | |
| input | 15.9317px | 400 | 39.8365px | |
| header | 15.9317px | 400 | 15.9317px | |
| footer | 15.9317px | 400 | 15.9317px |
Color Palette
#faf9f2#000000#abb8c3#ffffff#f78da7#cf2e2e#ff6900#fcb900#7bdcb5#00d084#8ed1fc#0693e3
