# Design from Reference: Testimonial.to User Onboarding Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Testimonial.to - **Category:** Discovery Questions - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbbb6b151c40fa4074625a_6acbba6e83528b9b9a225c86_cms-be5dab651d8bc28ad774834b.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:** Minimal white onboarding questionnaire with dark navy text and blue-violet actions. - **Tone:** Friendly welcome emoji and a conversational question soften an otherwise utilitarian radio form. ### Page composition - **Canvas:** Source 1440 × 966 pixels; geometry uses the 1400 × 939 inspection rendering. CSS scale is unverified. - **Header:** Small brand mark/name near x81, y25 and a circular avatar near the opposite edge. - **Main:** Centered welcome heading near y178, followed by the question and a roughly 374px-wide list of seven options. - **Action:** A narrower centered dashboard button sits about 46px below the option list. - **Support:** Round blue-violet chat launcher sits at the bottom right. ### Information hierarchy - **Welcome:** Large bold heading is the dominant element. - **Question:** A single referral-source question precedes all controls. - **Options:** Seven equal rows cover named channels and a final Other choice, each with a left radio circle. - **Progression:** Go to my dashboard is the sole form action. No selection is visible. ### Typography - **Heading:** Approximately 40px bold sans serif with around 48px line height. - **Question:** Approximately 20px regular, around 28px line height. - **Options/action:** Around 14px regular, with compact single-line labels. - **Brand:** Around 20px bold; exact font identity is unverified. ### Colors & surfaces - **Measured base:** #FFFFFF white canvas, #121927 dark navy text and #E5E7EB pale borders. - **Measured accent:** #5071F9 blue-violet supplies prominent action/brand pixels. - **Rendering tones:** #FEFEFE, #FDFDFD, #FCFCFC and #FBFBFB occur around pale boundaries and antialiasing. - **Depth:** The questionnaire stays flat; the floating support control has a soft shadow. ### Components - **Option rows:** Approximately 374 × 46px, thin pale border, 8px radius and around 16px horizontal padding. - **Radio controls:** Small unfilled circles about 15px across, consistently aligned before labels. - **Dashboard button:** Approximately 249 × 36px, blue-violet fill, white text and small 2–3px radius. - **Header/support:** Small circular brand symbol, approximately 39px avatar and 47px chat launcher. - **Captured state:** All radio controls appear unselected; validation and post-submit behavior are not shown. ### Visual rhythm - **Opening space:** A broad blank band separates header and welcome heading. - **Question spacing:** Roughly 45–50px follows the heading before the question; about 20px follows the question before options. - **List cadence:** Rows are separated by roughly 10px gaps, forming a stable vertical stack. - **Action spacing:** The button has more separation than adjacent options, clearly marking progression. ### Responsive - **Observed scope:** Desktop only; mobile layouts are unverified. - **Recommended form:** Use a fluid maximum-width list with 20–24px gutters. - **Recommended heading:** Reduce welcome size and allow natural wrapping without compressing option labels. - **Recommended targets:** Retain full-row selection and adequate touch height; keep chat clear of the final action. ### Adaptation guidance - **Preserve:** Single-question focus, equal option treatments and one clear progression button. - **Content:** Use supplied attribution channels and define the Other input behavior explicitly if required. - **Interaction:** Implement a semantic radio group and determine whether answering is optional; the screenshot alone does not establish that rule. - **Accessibility:** Provide visible focus, selected-state contrast and a meaningful group legend. 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.