Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Blissfully
SaaS ManagementVendr embodies corporate sophistication through its distinctive purple-dominated palette and refined typography hierarchy. The design exudes enterprise-grade trustworthiness while maintaining approachability through generous whitespace and elegant component styling.
Design Identity
Signature Color
Vendr Purple
#6B4C93
Enterprise sophistication and procurement intelligence
Visual Identity
Generous vertical spacing with hero sections that breathe, combined with a distinctive purple gradient header treatment and refined logo lockups that immediately signal premium B2B software.
Component Style
Rounded corners at 24px for primary buttons, subtle shadows for elevation, clean typography hierarchy with medium font weights. Components feel substantial but not heavy - professional depth without visual clutter.
Spacing Philosophy
Luxurious 80px+ section spacing creates executive-level breathing room, while maintaining tight 16px component internal padding for efficiency. The rhythm suggests confidence and premium positioning.
Design Principles
- Purple gradient headers establish brand hierarchy
- 32px minimum button heights for enterprise usability
- Söhne typography exclusively for sophisticated consistency
- 24px border radius for friendly professionalism
- Subtle shadows never exceed 0.12 opacity for refinement
Target Audience
Enterprise procurement teams and IT decision-makers who need sophisticated vendor management tools
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 | normal | |
| h1 | 56px | 500 | 60.48px | |
| h2 | 24px | 600 | 27.6px | |
| h3 | 28px | 400 | 37.8px | |
| h4 | 12px | 600 | 18px | |
| h5 | 28px | 400 | 37.8px | |
| p | 12px | 400 | 12px | |
| a | 16px | 400 | 24px | |
| button | 15px | 500 | 13.5px | |
| nav | 16px | 400 | 24px |
Color Palette
#ffffff#121212#3498db#07bc0c#f1c40f#e74c3c#757575#616161#e0e0e0#bb86fc#6a6a6a#fff0e8
