Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
HubSpot
SaaSHubSpot embraces a warm, approachable professionalism through its signature orange palette and sophisticated serif-sans typography pairing. The brand balances human warmth with enterprise credibility, using generous whitespace and soft rounded corners to create an inviting yet authoritative presence.
Design Identity
Signature Color
HubSpot Orange
#ff4800
energetic growth and approachable expertise in business automation
Visual Identity
The distinctive pairing of large serif headlines with clean sans-serif body text, combined with warm orange accents against neutral backgrounds, creates an instantly recognizable blend of human warmth and business sophistication.
Component Style
Softly rounded components with 4px border radius that feel approachable yet professional. Buttons have subtle weight with medium padding, avoiding sharp edges in favor of friendly, accessible forms. No harsh shadows - everything feels warm and inviting.
Spacing Philosophy
Modest but breathable spacing with 16px mobile and 24px desktop section padding. The brand favors comfort over luxury, using 8px micro-spacing for intimate component relationships while maintaining professional breathing room.
Design Principles
- Border radius consistently at 4px for friendly approachability
- Typography hierarchy uses serif for headlines (80px/500) and sans-serif for body (16px/300)
- Orange (#ff4800) reserved for primary actions and key brand moments
- Light body font weight (300) creates openness and readability
- Modest spacing increments (8px, 16px, 24px) maintain human scale
Target Audience
Marketing directors and sales managers at growing companies who need powerful tools but value human-centered design over intimidating enterprise 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 | 300 | 28px | |
| h1 | 80px | 500 | 95px | |
| h2 | 18px | 500 | 28px | |
| h3 | 16px | 500 | 28px | |
| p | 12.8px | 300 | 19.2px | |
| a | 12.8px | 300 | 19.2px | |
| button | 14.4px | 400 | 25.2px | |
| input | 16px | 300 | 28px | |
| nav | 16px | 300 | 28px | |
| header | 16px | 300 | 28px |
Color Palette
#1f1f1f#ffffff#fcfcfa#f1f1f1#ff4800#000000#eeb117#2f7579#9b9897#ffa766#fcc5be#c93700
