Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Mixpanel
SaaSMixpanel employs a dreamy gradient aesthetic that transitions from cool blues to warm purples, creating an ethereal, almost otherworldly feeling. The custom Garnett typography adds sophisticated editorial weight while maintaining technical precision. This is analytics for the aesthetically conscious - where data visualization meets artistic expression.
Design Identity
Signature Color
Analytics Violet
#8B5CF6
Creative intelligence and data sophistication - bridging the gap between technical precision and visual artistry
Visual Identity
The signature purple-to-blue gradient background that creates an immersive, almost cosmic atmosphere - instantly recognizable even without the logo through its distinctive color bleeding effect
Component Style
Soft rounded cards with 8px corners sit elegantly on gradient backgrounds, featuring subtle shadows and clean white surfaces. Buttons are pill-shaped with generous padding, creating a friendly yet professional touch that contrasts beautifully against the ethereal backdrop
Spacing Philosophy
Generous breathing room with large section gaps creating a premium, uncluttered experience. Feature cards are evenly distributed with ample whitespace, allowing each element to float gracefully in the gradient space
Design Principles
- Border radius consistently uses 8px for cards and components
- Garnett typography exclusively for all text hierarchy
- Gradient backgrounds transition from blue to purple
- White cards create contrast islands against colorful backgrounds
- Generous padding ratios maintain premium feel
Target Audience
Product managers and growth teams at design-conscious startups who appreciate beautiful interfaces as much as powerful analytics capabilities
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 | 12px | 400 | normal | |
| h1 | 60px | 400 | 72px | |
| h2 | 48px | 400 | 57.6px | |
| h3 | 36px | 400 | 43.2px | |
| h4 | 28px | 400 | 33.6px | |
| h5 | 22px | 400 | 26.4px | |
| h6 | 18px | 400 | 25.2px | |
| p | 14px | 400 | 21px | |
| a | 12px | 400 | normal | |
| button | 12px | 600 | normal |
Color Palette
No colors extracted
