Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Hims & Hers
HealthcareHims uses warm, gradient-rich earth tones and SofiaProWeb typography to create an approachable yet premium wellness aesthetic. The design balances medical authority with lifestyle aspiration through golden browns and confident messaging.
Design Identity
Signature Color
Wellness Gold
#D4A574
Premium health optimization and masculine confidence
Visual Identity
Distinctive use of warm gradient overlays on hero sections combined with pill-shaped UI elements that mirror the pharmaceutical product form factor
Component Style
Fully rounded pill buttons and cards with subtle gradients, no harsh borders or shadows - everything feels organic and approachable like wellness supplements rather than sterile medical devices
Spacing Philosophy
Generous vertical spacing between sections creates breathing room, while compact horizontal layouts maximize content density. Hero sections use full-bleed gradients for immersive experiences
Design Principles
- All interactive elements use full border-radius pills
- Gradients always flow diagonally from top-left to bottom-right
- Typography uses only 400 and 500 weights for consistent hierarchy
- Earth tone palette never includes pure whites or blacks
- Hero sections always feature lifestyle photography with gradient overlays
Target Audience
Health-conscious millennial and Gen Z men seeking convenient, stigma-free access to wellness and performance optimization
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 | 16px | 400 | 22.4px | |
| h1 | 57px | 400 | 57px | |
| h2 | 62px | 400 | 69.75px | |
| h3 | 20px | 500 | 18.2px | |
| h4 | 29px | 500 | 32.625px | |
| p | 16px | 400 | 20.8px | |
| a | 16px | 400 | 22.4px | |
| button | 12px | 500 | 12px | |
| input | 20px | 400 | 23px | |
| nav | 16px | 400 | 22.4px |
Color Palette
No colors extracted
