Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Klaviyo
MarketingKlaviyo's identity radiates warm sophistication through cinematic photography and elegant typography. The custom Klaviyo Degular typeface creates literary gravitas while maintaining approachability, supported by a palette of warm creams and strategic orange accents that suggest growth and creativity.
Design Identity
Signature Color
Klaviyo Poppy
#ff4b32
Creative energy and marketing vitality - signals innovation in customer engagement
Visual Identity
Dramatic portrait photography with warm, cinematic lighting paired with ultra-minimal layouts and generous negative space creates an editorial luxury aesthetic
Component Style
Ultra-minimal components with 2px border radius - barely rounded corners that feel crisp but not harsh. Clean input fields with subtle shadows and no heavy borders maintain the sophisticated restraint
Spacing Philosophy
Breathtakingly generous whitespace with 80px+ padding creates luxury editorial pacing. Content floats in space rather than being constrained, mimicking high-end magazine layouts
Design Principles
- Border radius never exceeds 2px for surgical precision
- Typography uses dual-font system: Klaviyo Degular for headlines, Instrument Sans for UI
- Headline sizes jump dramatically: 32px to 40px to 80px for editorial hierarchy
- Warm cream backgrounds (#fffcf9) instead of pure white for approachable luxury
- Photography always features intimate human moments in warm lighting
Target Audience
Marketing directors and ecommerce founders who see themselves as creative strategists, not just data analysts
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 | 80px | 400 | 80px | |
| h2 | 40px | 500 | 60px | |
| h3 | 32px | 500 | 48px | |
| p | 16px | 400 | 18.24px | |
| a | 16px | 400 | 24px | |
| button | 14px | 500 | 20px | |
| input | 18px | 400 | 27px | |
| nav | 12px | 400 | 12px | |
| header | 16px | 400 | 24px |
Color Palette
#fffcf9#1d1e20#f9f9fa#f9f6f0#f4ede2#ef4444#888d92#515457#0a95fd#ff4b32#590b2c#deff00
