Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Factorial
HR TechFactorial employs a striking gradient that transitions from deep navy at the top to warm coral at the bottom, creating an atmospheric backdrop that feels both professional and approachable. The brand leverages dramatic contrast between this vibrant gradient background and clean white content areas, while DM Sans typography maintains readability without competing for attention.
Design Identity
Signature Color
Factorial Coral
#FF6B6B
human-centered warmth that balances corporate professionalism with approachable innovation
Visual Identity
The distinctive navy-to-coral vertical gradient background creates an unmistakable atmospheric foundation that no other HR platform uses - it's simultaneously corporate enough for enterprise sales yet warm enough for employee-facing applications.
Component Style
Components appear to float cleanly against the gradient with subtle elevation, featuring rounded corners around 8px radius, minimal borders, and generous whitespace that creates breathing room against the rich background.
Spacing Philosophy
Expansive vertical spacing leverages the full gradient canvas, with large sections of whitespace that allow the background to become part of the experience rather than just decoration.
Design Principles
- Background gradients span full viewport height for maximum atmospheric impact
- White content areas maintain high contrast against any gradient position
- DM Sans at 16px base with 24px line height for optimal readability
- Component corners use consistent 8px border radius
- Navigation elements stay minimal to not compete with gradient drama
Target Audience
HR directors and people operations leaders at mid-to-large companies who want software that feels as sophisticated as their strategic role
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 | 16px | 400 | 24px | |
| h2 | 16px | 400 | 24px | |
| h3 | 32px | 700 | 40px | |
| p | 16px | 400 | 24px | |
| a | 16px | 400 | 24px | |
| button | 16px | 400 | 24px | |
| input | 16px | 400 | 24px | |
| nav | 16px | 400 | 24px | |
| header | 16px | 400 | 24px |
Color Palette
#ffffff
