Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Nord VPN 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:** Nord VPN
- **Category:** Landing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb6af1bf2e69a0c03b6cce_6acb6a28096561906c24838b_cms-f0e85e70dd19e59f5eeb2712.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
- **Style:** Mainstream consumer SaaS landing page mixing promotional hero, feature education, social proof, and FAQ.
- **Character:** White and icy-blue surfaces, cobalt feature actions, red purchase CTA, friendly illustrations, and photography.
### Page composition
- **Canvas:** 2453 × 10186 image px; CSS estimates assume an unverified 2× capture.
- **Header:** White navigation strip approximately 55 CSS px high.
- **Hero:** Pale-blue split layout with promotional copy left and a large cutout person over a cobalt numeral and decorative loops right.
- **Container:** Approximately 980–1000 CSS px wide.
- **Body:** Press-logo row followed by four alternating image/text feature sections.
- **Proof:** Centered testimonial heading, category tabs, and three quote cards.
- **Closing:** Promotional banner, pale FAQ section with three collapsed rows, then dark multi-column footer.
### Information hierarchy
- **Primary:** Large discount headline and red deal button.
- **Supporting:** Short checkmarked benefits, countdown pill, and small guarantee line.
- **Features:** Strong short headings above readable paragraphs and blue pill links.
- **Proof:** Press logos and testimonials precede repeated conversion.
- **Final:** FAQ reduces uncertainty before the comprehensive footer.
### Typography
- **Family:** Neutral sans serif; exact family unverified.
- **Hero heading:** Approximately 36 CSS px, weight 700, line-height 44px under assumed 2×.
- **Section headings:** Approximately 28px, weight 700, line-height 36px.
- **Body:** Approximately 14px with 20px line-height.
- **Header navigation:** Approximately 12px.
- **CTA labels:** Approximately 14px, semibold.
- **FAQ title:** Approximately 32px.
- **Precision:** Sizes and weights are visual reconstruction estimates.
### Colors & surfaces
- **Canvas:** #FFFFFF.
- **Hero and promo surface:** #F2F7FB.
- **FAQ background:** #F7F7F8.
- **Footer:** #141923.
- **Primary body/heading:** Approximately #2A2B32.
- **Cobalt:** #3260FF.
- **Illustration pale blue:** #DEF2FF and #DFF1FF.
- **Illustration medium pale blue:** #BDDDF7.
- **Warm accent:** #FFBA5D.
- **Purchase CTA:** Bright red; exact flat token not independently sampled.
- **Precision:** Hex values sampled from screenshot; artwork gradients vary.
### Components
- **Buttons:** Rounded pills approximately 40–44 CSS px high under assumed 2×.
- **Countdown:** Light gray pill with grouped digits beside the hero CTA.
- **Images:** Rounded portrait crops with small floating white product-status cards.
- **Illustrations:** Flat characters and pale-blue abstract backgrounds.
- **Testimonial cards:** Thin light border, small radius, avatar/name header, quote, and source link.
- **FAQ rows:** White rounded rectangles with question and small down chevron.
- **Footer:** App-store badges, six link groups, payment marks, locale selector, and help bubble.
### Visual rhythm
- **Section gaps:** Large vertical breathing room between alternating feature pairs.
- **Balance:** Similar visual weight alternates left and right throughout the body.
- **Hero:** Short bullets and action row keep promotional copy compact.
- **Proof:** Three equal cards introduce a denser grid before the repeated CTA.
- **Footer:** Broad dark band provides a clear endpoint.
### Responsive
- **Observed:** Desktop full-page capture only.
- **Recommendation:** Stack hero and feature pairs, scale decorative numerals, and preserve readable copy widths.
- **Proof:** Wrap testimonial cards; make tabs scrollable or wrap.
- **Footer:** Collapse or stack link groups; keep purchase and help controls accessible.
### Adaptation guidance
- **Preserve:** Promotional hero, alternating education blocks, trust sequence, repeated offer, and FAQ.
- **Content:** Use supplied current product claims, discounts, countdown behavior, reviews, and guarantee terms.
- **Brand:** Keep clear separation between purchase red, feature cobalt, and pale backgrounds.
- **Scale:** Treat CSS metrics as estimates tied to the unverified 2× assumption.
- **Interaction:** FAQ, tabs, and countdown states are not demonstrated by a static image.
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.