Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Sendinblue Landing Page
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** Sendinblue
- **Category:** Landing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62eca44a9147fe5175379105_1659675136278-62ec9cac8ef1082de40f3da9_screenshot-device-3ad08512deb56bd432978a1d0f040629-1659618885285.webp
Analyze the screenshot first. If inaccessible, request it rather than guessing.
## Content
{{content.instructions}}
{{content.data}}
Preserve essential messaging and factual accuracy. Adapt structure and copy length for visual balance; never invent product claims.
## Visual Design
### Overall aesthetic
- **Character:** Editorial marketing homepage with bold navy serif headings, bright-blue pills, warm neutral bands and soft 3D artwork.
### Page composition
- **Canvas:** 1440 ร 6328 screenshot px.
- **Sequence:** Split takeoff hero; overlapping three-benefit navy bar; ratings/award block; grouped feature matrix; wooden security shield; navy statistics; customer quote; peach CTA; footer.
### Information hierarchy
- **Priority:** Large serif hero and blue action lead; category statements organize the extensive feature list. Evidence and security follow before final signup.
### Typography
- **Family:** Heavy editorial serif headings paired with clean sans serif body/navigation; exact families unverified.
- **Scale:** Estimated screenshot hero 72โ80 px, section headings 44โ48 px, feature labels 18โ20 px and body 16โ18 px.
### Colors & surfaces
- **Sampled palette:** White #FFFFFF, warm gray #EEECEA, navy #044B75 and peach #FFDAD4.
- **Accents:** Bright cyan-blue actions/icons, yellow rating stars and small geometric symbols; wood-toned 3D security/abstract objects.
### Components
- **Features:** Three-column rows with serif category statement left and two text/feature columns right.
- **Evidence:** Star-rating rows, circular badge arrangement, four-stat navy panel, quote carousel with outlined arrow.
- **Geometry:** Mostly square section bands and fully rounded CTA buttons; navy benefit bar overlaps the first neutral section. Dark cookie strip is fixed-looking at bottom.
### Visual rhythm
- **Spacing:** Approximately 100โ160 screenshot px section padding; large art/proof panels alternate with denser feature text.
### Responsive
- **Observed:** Desktop only.
- **Adaptation:** Stack feature rows and proof panels, scale serif headings fluidly and keep CTA pills within mobile width.
### Adaptation guidance
- **Preserve:** Serif/sans contrast, navy/peach/cyan palette and structured feature categories.
- **Replace:** Use current brand/content and verified ratings/security claims; do not copy reference statistics.
Use this context to reproduce the reference's visual language: layout, typography, colors, spacing, borders, radii, and distinctive elements. The screenshot takes priority if descriptions conflict.
## Direction
{{preferences.fidelityInstructions}}
## Output
{{output.instructions}}
Deliver a polished, cohesive design with precise alignment, hierarchy, and spacing. Produce the requested visual artifact, not just a description. If unsupported, explain the limitation.