Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Kinsta 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:** Kinsta
- **Category:** Landing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62f280e5e38c6de9e0131827_1660057633520-791124d2-835c-46aa-8126-ad6e8cc4e3dc-name%3Dscreencapture-kinsta-2022-08-09-17_05_09.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:** A long illustrated hosting landing page with heavy rounded headings, purple/cyan branding, isometric diagrams and alternating white, pale-gray and dark-blue sections.
- **Evidence scale:** Original 1440 ร 12435 pixels, inspected across all nine readable crops. Dimensions are image-pixel estimates; CSS scale and font identities remain unverified.
### Page composition
- **Opening:** Purple announcement strip above navigation. Split hero has a large three-line heading, prose and paired actions left, a large isometric platform/people illustration right and six customer logos below.
- **Performance:** Centered introduction precedes three illustrated benefit columns; a Google Cloud section pairs text with a large faint globe.
- **Developer promotion:** Wide pale-blue banner overlays the globe, combining a laptop mockup, copy, purple download action and three OS symbols.
- **Security/support:** A pale section pairs an illustration with five accordion-like topics, first open; the next white section pairs three support benefits with a large staff cutout and floating chat messages.
- **Management/solutions:** Dashboard preview sits beside four expandable-looking topics; four solution choices sit beside another isometric illustration, followed by a migration banner.
- **Reviews/pricing:** Purple patterned review field contains five award badges and ten white testimonial cards in three staggered columns. Dark-blue pricing follows with four plan columns and a custom-plan strip.
- **Lower proof:** A white guarantee panel overlaps the pricing boundary, followed by a video testimonial and three related-story items.
- **Closing/footer:** Another illustrated plan CTA leads into a newsletter band, language/login utility row, five footer columns and legal/social/chat controls.
### Information hierarchy
- **Display:** Heavy dark headings organize each major section; hero and pricing amounts receive strongest scale.
- **Actions:** Filled purple pills mark plans/download/migration; outlined pills provide secondary demo and sales paths.
- **Content states:** First security and management topics display body copy, while others show closed chevrons; first solution item has a purple outline.
- **Social proof:** Star rows, review badges, avatars and names distinguish testimonials from explanatory sections.
- **Plan comparison:** Four aligned columns use cyan prices, white feature lists and outlined Choose buttons. Captured prices are not current-price verification.
### Typography
- **Hero:** Unverified rounded display sans-serif, approximately 54โ58 px heavy with 60โ64 px line height.
- **Major headings:** Roughly 40 px heavy with 46 px line height.
- **Feature headings:** Around 22โ24 px bold, 28 px line height.
- **Body:** Unverified sans-serif around 18 px regular, 28โ30 px line height.
- **Reviews:** Around 16 px regular, 26 px line height; names bold and roles smaller.
- **Metadata/actions:** Approximately 12โ16 px bold/medium, with uppercase tracking in pricing labels and story dates.
### Colors & surfaces
- **Base:** Measured white #FFFFFF and off-white #FAFAFA alternate through the page.
- **Primary dark:** Deep blue #1B1D73 anchors pricing and related dark regions.
- **Accent:** Purple #5748ED and neighboring #5947ED drive buttons, reviews and branding.
- **Pale blue:** #E1EAF7 supports banners and illustration backgrounds.
- **Secondary:** Cyan highlights emphasize selected copy, prices, review action and chat control; dark navy headings contrast with gray body copy.
### Components
- **Header/actions:** Slim purple strip with close icon; navigation includes dropdown arrows, search, login and outlined demo pill.
- **Hero artwork:** Isometric grid, translucent panels, vertical lines and small human figures on a pale gradient background.
- **Feature columns:** Three equal centered blocks with small illustrations, bold headings and multi-line descriptions.
- **Accordions:** Unboxed bold topic rows with chevrons; open rows reveal indented regular prose.
- **Banners:** Wide pale-blue rectangular promotions with modest radii, illustrations and purple pill buttons.
- **Dashboard preview:** Large rounded white-framed screenshot with shadow, dark sidebar and metric/chart panels.
- **Review cards:** Approximately 330 px wide, white with 4 px radii, 30 px padding, star rows and avatar/name attribution; variable heights create a masonry-like pattern.
- **Pricing:** Four equal unboxed columns separated by thin purple rules; large cyan prices and approximately 120 ร 48 px outlined pills.
- **Guarantee panel:** Broad raised white rectangle with large heading left and four icon-led benefits right.
- **Video/story items:** Large thumbnail with purple circular play mark; three smaller unboxed story thumbnails, titles, excerpts and tracked dates.
- **Footer:** Five text columns, fine pale rules, pill language selector and small social icons; circular cyan support control at bottom right.
### Visual rhythm
- **Content width:** Most sections align to roughly 1140 px with about 150 px side margins.
- **Section padding:** Large 100โ160 px vertical intervals keep the long feature narrative readable.
- **Alternation:** Text/artwork pairs switch orientation, while centered introductions and three-column proof groups provide recurring breaks.
- **Repeated motifs:** Isometric grids, small purple-clothed figures, cyan highlights and pill actions tie distant sections together.
### Responsive
- **Observed limit:** Long desktop only; mobile behavior is unverified.
- **Recommendation:** Stack split sections, collapse benefit/review/pricing grids progressively and preserve plan-label/value associations.
- **Artwork:** Crop decorative grids and reposition figures without covering text; scale screenshots independently of body copy.
- **Footer:** Wrap or collapse link groups and retain accessible language/chat controls.
### Adaptation guidance
- **Retain:** Build a broad product narrative through clear feature groups, concrete interface previews, social proof and aligned plan comparison.
- **Implement:** Reuse a disciplined purple/cyan system, heavy headings and consistent pill actions across alternating surfaces.
- **Verify:** Confirm fonts, scale, accordion behavior and current commercial/performance claims separately; no download, trial, subscription or migration action was performed.
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.