# Design from Reference: Surfer SEO Account Setup 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:** Discovery Questions - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbbd96d6be908889c4e424_6acbbcccad8ac57527851267_cms-efe0ac6a17ae7c54dc604c39.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:** Quiet onboarding questionnaire with a pale blue-white canvas and purple progression controls. ### Page composition - **Capture:** 2880 × 1794 screenshot pixels; estimated 2× CSS scale. - **Structure:** Brand/account header, centered Question 4/5 segmented progress, heading, two dropdown fields and right-aligned Previous/Next; footer links at bottom. ### Information hierarchy - **Priority:** Progress and Tell us about yourself establish context; expertise is required while the priority question is explicitly optional. ### Typography - **Family:** Sans serif; exact family unverified. - **Estimated CSS sizes:** Heading 32px, progress 16px, labels 14px and selected values 16px. ### Colors & surfaces - **Measured palette:** Canvas #F6FAFB, white #FFFFFF, purple #822FD3, borders #C9D5E1, dark #202024 and subtle #ECF2F6. ### Components - **Elements:** Five progress segments, clearable selects with chevrons, outlined Previous, filled Next and purple help launcher. - **Estimated geometry:** Form approximately 480px wide, 40px controls, 8px radii and 24px field gaps. ### Visual rhythm - **Spacing:** Compact upper-center form contrasts with extensive blank space below; footer remains visually distant. ### Responsive - **Suggested adaptation:** Use fluid form width and wrap footer links. Mobile behavior is not shown. ### Adaptation guidance - **Transfer:** Preserve clear progress and optional labeling; tailor choices to actual onboarding needs. 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.