Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Productboard
ProductProductboard creates a sophisticated AI-first aesthetic that balances enterprise credibility with approachable innovation. The gradient purple-to-blue wordplay in 'product managers' signals creative intelligence, while the clean sans-serif hierarchy and conversational AI interface preview establishes trust through transparency.
Design Identity
Signature Color
Productboard Blue
#0079f2
enterprise-grade AI reliability with approachable product intelligence
Visual Identity
The distinctive gradient text treatment that transforms 'product managers' from blue to purple, combined with the conversational AI chat interface that feels like a personal assistant rather than a robotic tool.
Component Style
Softly rounded 12px corners with clean button styles that prioritize hierarchy over decoration. Primary actions use solid fills while secondary actions use transparent backgrounds with subtle borders. Everything feels substantial but not heavy - designed for daily product workflow rather than flashy demos.
Spacing Philosophy
Generous vertical rhythm with large hero sections that give ideas room to breathe, while maintaining tight component spacing for efficient scanning. The layout creates a sense of premium software without feeling sparse or overwhelming.
Design Principles
- Border radius consistently uses 12px for warm professionalism
- Blue-to-purple gradient reserved exclusively for key value propositions
- Typography hierarchy jumps from 16px body to 60px headlines with no intermediate sizes
- All transitions use easing curves between 100-700ms for organic feel
- Primary CTAs always use solid backgrounds, secondary actions stay transparent
Target Audience
Senior product managers and CPOs at B2B SaaS companies who need AI-powered insights but value human judgment and contextual understanding over raw automation
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 | 600 | 72px | |
| h2 | 36px | 600 | 44px | |
| h3 | 36px | 600 | 44px | |
| h4 | 24px | 600 | 32px | |
| p | 14px | 400 | 21px | |
| a | 14px | 400 | 21px | |
| button | 14px | 600 | 14px | |
| input | 14px | 400 | 20px | |
| nav | 16px | 400 | 24px |
Color Palette
#0079f2#0565c6#f1f8fe#fafafb#fef0f0#f0fde8#ffffff
