Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Workhuman
HR TechWorkhuman employs a vibrant, gradient-based aesthetic that balances corporate professionalism with human warmth. The signature coral-to-orange gradient backgrounds create an optimistic, energizing atmosphere, while the dual typography system pairs the modern Geologica headings with reliable Roboto body text to establish trust through approachable innovation.
Design Identity
Signature Color
Workhuman Coral
#c1386a
Human connection and workplace positivity - the color bridges professional authority with emotional warmth
Visual Identity
The distinctive warm gradient backgrounds that flow from coral pink to golden orange, creating an uplifting atmospheric envelope around clean white content cards with subtle shadows.
Component Style
Rounded, approachable components with moderate 8-12px border radius. Buttons use bold coral backgrounds with clean white text, while cards float on subtle drop shadows against gradient backgrounds. Everything feels tactile and welcoming rather than sharp or clinical.
Spacing Philosophy
Generous breathing room with large gradient background sections creating atmospheric depth, while content areas maintain comfortable 24px line-height for readability. The layout prioritizes visual comfort over density.
Design Principles
- Gradient backgrounds always transition warm tones (coral to orange/yellow)
- Primary buttons use coral (#c1386a) with 700 font-weight for prominence
- Typography mixing: Geologica for headlines (light 300 weight), Roboto for UI consistency
- Border radius stays moderate at 8-12px - friendly but not overly playful
- White content areas with subtle shadows float above gradient backgrounds
Target Audience
HR leaders and people operations professionals who want to humanize workplace technology while maintaining corporate credibility
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 | 24px | |
| h1 | 56px | 300 | 56px | |
| h2 | 36px | 500 | 45px | |
| p | 15px | 400 | 24px | |
| a | 15px | 400 | 24px | |
| button | 15px | 700 | 22.5px | |
| input | 15px | 400 | 24px | |
| nav | 16px | 400 | 24px | |
| footer | 16px | 400 | 24px | |
| main | 16px | 400 | 24px |
Color Palette
#007aff#c0f7d9#ffa857#5b63e4#ffffff#711335#fcdde8#ee86ac#4c0c0c#ffe8c3#c1386a#5f3a00
