Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Deel
HR TechDeel embraces a cosmic-professional duality with its midnight purple depth (#201547) creating an otherworldly backdrop that suggests 24/7 global operations. The condensed BagossCondensedFont headlines feel urgent and space-efficient, perfect for international business velocity, while the overall composition balances enterprise credibility with startup agility.
Design Identity
Signature Color
Deel Midnight Purple
#201547
Global business that never sleeps - sophisticated, international, and operating across time zones
Visual Identity
The dramatic dark purple background that consumes most of the screen real estate, creating an immersive environment rather than traditional white-background SaaS design - it feels like a command center for global operations.
Component Style
Rounded-corner buttons with 8-12px radius and subtle gradients, avoiding harsh shadows in favor of smooth color transitions. Components feel substantial but not heavy, with Inter's clean geometry providing technical precision against the dramatic backdrop.
Spacing Philosophy
Generous whitespace within the purple zone creates breathing room for complex international concepts, while maintaining tight hierarchy with the condensed headlines - space is used to suggest global scale rather than minimalist aesthetics.
Design Principles
- Border radius stays within 4-24px range for approachable professionalism
- Headlines use BagossCondensedFont at 24-60px for urgent efficiency
- Body text stays at 15-16px Inter for international readability
- Purple dominates at least 60% of viewport for brand immersion
- Buttons use 700 weight Inter for confident actions
Target Audience
International business leaders and HR professionals managing distributed teams across multiple countries who need enterprise-grade reliability with startup-speed execution
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 | 60px | 500 | 60px | |
| h2 | 44px | 500 | 46.2px | |
| h3 | 24px | 500 | 27.6px | |
| p | 15px | 400 | 23.8px | |
| a | 16px | 400 | 24px | |
| button | 15px | 700 | 22.5px | |
| input | 15px | 400 | normal | |
| nav | 16px | 400 | 24px | |
| header | 16px | 400 | 24px |
Color Palette
#a98df6#b1d8fc#ffe27c#ede5ff#ffeba6#cccccc#e6e6e6#e7a288#201547#d8ebff#fffbf4#faf4ee
