# Design from Reference: Sellx Import Leads Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Sellx - **Category:** Import & Export - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acadab1d5603a17eba7e57e_6acada3d5f2661b16657f521_cms-d99d839dd09afc5e0543add8.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 minimal campaign-import step combines a pale blue-gray canvas, white central panel and one violet-accented imported-file card. - **Typography contrast:** A serif task heading adds editorial character to the compact sans-serif application shell. ### Page composition - **Capture scale:** The original is 2880 × 1630 pixels. A 2× capture is plausible but unverified; sizes below estimate CSS pixels at half source resolution. - **Header:** Brand and back-to-campaigns control sit left, campaign name centrally and Preview right. - **Step navigation:** Nine uppercase stages form a second header row; Import is underlined and darker. - **Main panel:** A centered approximately 890 × 450-pixel white rounded rectangle contains heading, helper and imported-file status card. - **Footer actions:** A thin divider separates content from pale Back and dark Continue buttons at opposite ends. ### Information hierarchy - **Location:** Campaign title and selected Import stage establish context. - **Task:** The large centered heading precedes a short instruction. - **Status:** A filename and imported-lead count appear inside the only outlined content card. - **Progression:** The dark Continue action anchors the lower-right corner. ### Typography - **Families:** Serif is used for the main heading; sans serif for interface text. Exact families are unverified. - **Heading:** Approximately 36 pixels, bold serif. - **File card:** Filename is around 20 pixels and semibold; count around 14 pixels. - **Utilities:** Step labels are around 12 pixels and uppercase; buttons and helper copy around 14 pixels. ### Colors & surfaces - **Measured foundation:** White #FFFFFF contrasts with pale #F3F7FB and #F6F7FB. - **Measured boundary:** #E6ECF5 supports pale button/border details. - **Measured dark:** #080F16 supplies the strong action and text palette. - **Accent relationship:** Violet-blue outlines, filename and circular import icon highlight the imported asset. ### Components - **Main card:** Approximately 12-pixel radii with no strong shadow. - **Imported-file card:** Roughly 368 × 130 pixels, thin violet outline and rounded corners; a circular rocket icon sits left of filename/count. - **Remove control:** A small X in a pale circle sits at the file card's upper-right. - **Footer buttons:** Compact rounded rectangles around 40 pixels high, with a right arrow on Continue. - **Step state:** A short black underline and darker label identify Import among muted stages. ### Visual rhythm - **Centering:** Heading, helper and file card share a central axis. - **Whitespace:** Wide empty margins surround the imported-file card. - **Footer alignment:** Buttons use equal side insets and a clear separating rule. ### Responsive - **Observed state:** Only desktop is supplied; narrow behavior is unverified. - **Recommended navigation:** Let stages scroll horizontally rather than reducing labels excessively. - **Recommended panel:** Use fluid width, wrap long filenames and retain accessible remove/action targets. ### Adaptation guidance - **Preserve focus:** Keep the imported-file summary as the only central object. - **State fidelity:** Match the visible imported count without inferring later campaign completion. - **Type pairing:** Retain serif task heading against sans-serif controls. - **Accessibility:** Label file removal clearly and communicate the current step semantically. 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.