Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Personio
HR TechPersonio creates an atmosphere of sophisticated minimalism through its custom 'regolaNeue' typeface that balances approachability with authority. The dramatic gradient background and centered hero layout suggest premium enterprise software that prioritizes clarity over visual noise.
Design Identity
Signature Color
Personio Charcoal
#2b2d42
enterprise reliability with human warmth - serious HR technology that doesn't feel corporate
Visual Identity
Massive typographic hierarchy with ultra-generous spacing and atmospheric gradient backgrounds that create depth without clutter - recognizable by the distinctive regolaNeue font at heroic scales
Component Style
Clean geometric buttons with moderate 6-8px corner radius, minimal borders, and solid fills. Components feel substantial but not heavy, with crisp edges that suggest precision without being sterile.
Spacing Philosophy
Luxurious vertical rhythm with 80-120px section breaks and centered layouts that breathe. Tight internal component spacing (8-16px) contrasts with expansive macro-level whitespace to create focus.
Design Principles
- Typography scales dramatically: 72px headlines down to 14px body with strict weight hierarchy (600/500)
- Corner radius consistently 6-8px across all interactive elements
- Vertical spacing follows 8px grid with generous section gaps
- Color palette stays neutral with strategic accent usage
- Center-aligned hero layouts with left-aligned content sections
Target Audience
HR directors and People Operations leaders at mid-to-large companies who need sophisticated tools but value intuitive experiences over feature complexity
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 | 500 | 24px | |
| h1 | 72px | 600 | 76px | |
| h2 | 48px | 600 | 52px | |
| h3 | 28px | 600 | 32px | |
| h4 | 24px | 500 | 28px | |
| h5 | 24px | 500 | 28px | |
| p | 14px | 600 | 22px | |
| a | 16px | 600 | 24px | |
| button | 16px | 500 | 24px | |
| input | 16px | 500 | 24px |
Color Palette
#3b82f6#ffffff
