# Design from Reference: Wope Set up domain Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Wope - **Category:** User Onboarding - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acc0d39ea6cae5cb6f1c253_6acc0847a15ed315114308f0_cms-84b902d4945411d5396c079b-v3.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:** Quiet project-setup wizard with pale-lavender canvas, centered white card, and blue progression. ### Page composition - **Canvas:** 1440 × 789 screenshot px. - **Card:** Approximately 560 × 430px, centered. - **Sequence:** Website heading/explanation, domain field, project-name link, location selector, region/language link, steps, Continue. - **Header:** New Project left, Back to Wope right; help lower-left. ### Information hierarchy - **Primary:** Domain setup. - **Validation:** Small green check in domain field. - **Localization:** Flag and location selector. - **Progress:** Step 1 emphasized in three-step sequence. ### Typography - **Family:** Neutral sans serif; exact identity unverified. - **Title:** Approximately 24px bold. - **Body:** Approximately 14px with 20px line-height. - **Labels/controls:** Approximately 14px. - **Precision:** Screenshot estimates. ### Colors & surfaces - **Canvas:** #F5F5FA. - **Card:** #FFFFFF. - **Selector:** #ECEDF4. - **Action blue:** #3C56BF. - **Body:** #575966. - **Precision:** Flat sampled colors. ### Components - **Card radius:** Approximately 8px. - **Inputs:** Pale filled rows with thin outline, about 40px high. - **Progress:** Three small circular markers with short separator. - **Continue:** Compact blue rectangle. - **Location:** Flag, country name, chevron. ### Visual rhythm - **Spacing:** Tight label/helper groupings, generous outer whitespace. - **Alignment:** Fields and footer span common card width. ### Responsive - **Observed:** Desktop only. - **Recommendation:** Fluid card width, wrapped helpers, and persistent progression controls. ### Adaptation guidance - **Preserve:** Domain-first setup and localization clarity. - **Privacy:** Replace domain/project name. - **Behavior:** Validation and automatic discovery not demonstrated. 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.