Generate a new design based on this screen using your own content.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
# Design from Reference: Surfer SEO Integrations 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:** Surfer SEO
- **Category:** Integrations Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbbd96d6be908889c4e43d_6acbbcc27aa5c17bd93781fb_cms-78264ff8fd21e2f5be4286ce.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
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.
SurferSEO’s Semrush Integration page embodies a crisp, modern aesthetic with a distinctly professional edge. The design embraces generous white space, clean lines, and a harmonized look that communicates clarity and authority—great for SaaS brands aiming for both simplicity and trust.
Layout and Structure
The layout is structured for optimal flow and engagement. It opens with a strong hero section featuring bold headlines and concise copy, quickly educating users on the integration’s value. Below, concise sections highlight the integration’s benefits, a visual “how it works” walkthrough, and clear trust signals in the form of testimonials and partner logos, culminating in a strategic call-to-action before the footer. This logical flow helps guide both skimmers and detail-oriented visitors.
Visual Elements
Custom vector illustrations inject modernity and reinforce core concepts without visual clutter. Subtle micro-animations and gentle hover states provide interactivity without distraction. Branded icons speak to the integration’s features, while clean device mockups showcase the product in action—ideal for building user trust and comprehension.
Color Palette and Typography
The palette blends vibrant SurferSEO purples and oranges with calming, soft gradients, creating lively but unobtrusive contrast that guides attention. Typography is sleek and contemporary, with clear hierarchy: striking headlines in bold display fonts, supported by legible sans-serif body text for effortless reading.
User Experience Patterns & Notable Choices
Navigation is streamlined with a sticky menu and minimal distractions, while recurring, visually prominent CTAs ensure users always know the next step. The inclusion of a product walkthrough and snappy testimonial quotes streamlines credibility without overwhelming the visitor. Notably, the design balances technical authority with inviting energy, making complex data integrations feel approachable and actionable.