Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Payfit
HR TechPayFit embodies approachable sophistication through its strategic use of vibrant blue accents against clean whites and soft grays. The SF Pro typography system creates a professional yet friendly hierarchy, while the generous whitespace and subtle shadows suggest premium functionality without intimidation.
Design Identity
Signature Color
PayFit Blue
#3B82F6
trustworthy fintech accessibility - sophisticated enough for HR professionals, approachable enough for small business owners
Visual Identity
Generous whitespace with bright blue accent elements creating clear visual pathways, combined with soft card shadows and rounded corners that feel inviting rather than corporate
Component Style
Soft rounded corners (6-8px) with subtle raising shadows, buttons have moderate padding with gentle curves. Cards float with minimal shadows, creating depth without heaviness. Everything feels touchable and human-scaled.
Spacing Philosophy
Breathing room philosophy - large 80px+ vertical gaps between major sections create hierarchy, while consistent 16-24px internal spacing maintains readability without cramping
Design Principles
- Border radius stays between 6-16px for human-friendly curves
- Typography hierarchy: 52px headlines, 18px body, 13px buttons
- Blue accent color used sparingly for CTAs and key highlights only
- Shadows never exceed 4px blur for subtle depth
- SF Pro for content, Rubik for interactive elements
Target Audience
HR managers and small business owners who want powerful payroll features without the complexity of enterprise software
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 | 18px | 400 | 27px | |
| h1 | 14px | 500 | 21px | |
| h2 | 52px | 600 | 59.8px | |
| h3 | 30px | 600 | 36px | |
| p | 14px | 400 | 21px | |
| a | 12px | 400 | 18px | |
| button | 13px | 400 | 19.5px | |
| input | 18px | 400 | 27px | |
| nav | 18px | 400 | 27px | |
| header | 18px | 400 | 27px |
Color Palette
#ffffff
