Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Yotpo
MarketingYotpo projects sophisticated e-commerce authority through a distinctive dual-font system - mixing serif headlines with sans-serif body text. The palette balances warm cream backgrounds with confident blue accents, creating an approachable yet professional commerce platform aesthetic that feels both data-driven and human.
Design Identity
Signature Color
Yotpo Brand Blue
#0042e4
Commerce platform confidence and data-driven insights
Visual Identity
The distinctive pairing of serif display typography (ivypresto-headline) for headlines with clean Inter sans-serif for UI elements creates an immediately recognizable editorial-meets-tech aesthetic that stands out in the SaaS space.
Component Style
Buttons feature generous rounded corners (24px+) with solid fills and no visible borders. Cards use subtle shadows and clean edges. The overall feeling is approachable and friendly rather than sharp or aggressive - components feel soft and inviting.
Spacing Philosophy
Generous whitespace creates breathing room between major sections, while the interface maintains comfortable density. The layout uses asymmetrical balance with the dashboard mockup taking prominent right-side real estate, creating visual interest.
Design Principles
- Headlines always use serif (ivypresto-headline) while UI text uses Inter
- Primary buttons use full rounded corners approaching pill shape
- Blue accent color (#0042e4) reserved for primary actions and key metrics
- Cream backgrounds (#fffcf5) provide warmth against pure white
- Typography scale jumps significantly between body (14px) and headlines (26px+)
Target Audience
E-commerce managers and marketing directors who need sophisticated analytics but appreciate approachable, non-intimidating interfaces
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 | 14px | 400 | 20px | |
| h1 | 18px | 400 | 24px | |
| h2 | 32px | 400 | 36.8px | |
| h3 | 47px | 400 | 55px | |
| h4 | 26px | 400 | 32px | |
| h6 | 26px | 400 | 32px | |
| p | 10px | 400 | 18px | |
| a | 16px | 400 | 23px | |
| button | 16px | 500 | 16px | |
| input | 14px | 400 | 15.96px |
Color Palette
#000000#abb8c3#ffffff#f78da7#cf2e2e#ff6900#fcb900#7bdcb5#00d084#8ed1fc#0693e3#9b51e0
