Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Pave
HR TechPave embodies sophisticated fintech elegance through its confident use of pure white space and distinctive royal blue (#235cf3) as the commanding accent. The Aeonik typography creates an authoritative yet approachable voice that speaks to compensation leaders who demand both precision and humanity in their tools.
Design Identity
Signature Color
Compensation Blue
#235cf3
Executive-level trust and data-driven precision in HR technology
Visual Identity
Generous white space architecture with surgical blue interventions - the design breathes with corporate confidence while avoiding sterile coldness through warm undertones and human-scaled typography.
Component Style
Soft-cornered components with 20-40px radius create approachable sophistication. Buttons feel substantial with rich blue fills and clean white text, while the overall treatment favors gentle elevation over harsh shadows or stark borders.
Spacing Philosophy
Expansive breathing room with generous section padding creates executive boardroom calm, while tight component spacing maintains operational efficiency. The rhythm alternates between wide vista moments and focused interaction zones.
Design Principles
- Blue (#235cf3) is reserved exclusively for primary actions and key navigation states
- Border radius scales from 8px (inputs) to 40px (hero elements) for hierarchical softness
- Typography uses only Aeonik for headings and DM Sans for body to maintain dual personality of authority and accessibility
- White space dominates with 90%+ background coverage to project premium positioning
- Interactive elements use 16px baseline with 700 weight for clear action indication
Target Audience
VP-level compensation and HR leaders at mid-market to enterprise companies who need sophisticated analytics but value intuitive user experience 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 | 400 | 24px | |
| h1 | 32px | 400 | 41.6px | |
| h2 | 32px | 400 | 41.6px | |
| h3 | 32px | 400 | 41.6px | |
| p | 16px | 400 | 16px | |
| a | 16px | 700 | 20px | |
| button | 16px | 700 | 16px | |
| input | 18px | 500 | 21.6px | |
| nav | 16px | 400 | 24px | |
| header | 16px | 400 | 24px |
Color Palette
#ffffff#101014#4a4a56#bebec2#e4e4e4#949499#eeeeee#74747d#235cf3#f3f8ff
