# Design from Reference: NewsCatcher Create Company Watchlist Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** NewsCatcher - **Category:** Add & Edit - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbcc48e13ab9df8f0531d8_6acbcaf30f0c77113b5b8590_cms-b9613c436bb86dac63dc7663.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 tall white creation dialog overlays a heavily dimmed and blurred workspace, with blue accents and pale lavender guidance boxes. - **Tone:** Square-edged fields, compact typography and explicit import instructions create a practical data-management form. ### Page composition - **Capture scale:** The source measures 2880 × 1739 image pixels. CSS estimates below assume a 2× capture; device-pixel ratio is unverified. - **Dialog:** A roughly 520 px CSS wide panel is centered horizontally and nearly fills the viewport height. - **Header:** An upload-document icon sits beside the title and a one-line explanation of CSV versus empty-list creation. - **Form sequence:** Name, optional description and optional project fields precede a CSV section with template action, two guidance boxes and a large drop zone. - **Footer:** A thin rule separates Cancel and Create Empty Watchlist actions from the form body. A chat launcher remains visible at the background's lower right. ### Information hierarchy - **Task title:** The bold creation heading is the strongest text, followed by a muted subtitle. - **Required versus optional:** Name appears without an optional qualifier; description, project and CSV labels explicitly mark optionality. - **Import guidance:** A blue-accented requirement box emphasizes exact column names; a quieter tip box explains descriptive content. - **Primary route:** The bottom creation action is gray in this empty state; actual disabled behavior cannot be confirmed from pixels alone. ### Typography - **Family:** A neutral sans serif is visible; exact identity is unverified. - **Title:** Approximately 20 px CSS, bold, with 26 px leading. - **Labels and fields:** Approximately 14 px with 20 px leading; optional qualifiers and placeholders use muted slate. - **Guidance:** Approximately 12 px with 18–20 px leading. Column-name fragments use small monospaced blue-highlighted text. - **Actions:** Compact 14 px labels distinguish template download, cancellation and creation. ### Colors & surfaces - **Measured foundation:** ICC-aware sRGB sampling yields white #FFFFFF and near-white #FBFCFD. - **Measured guidance:** Pale #F4F5FD and #F4F7FA distinguish instructional and inactive surfaces. - **Measured backdrop:** Dark grays #313132 and #333333 dominate the dimmed workspace. - **Accent:** Vivid blue marks the header icon, template action, requirement rule and information symbols. - **Neutral controls:** Fine pale borders and gray placeholder text create subtle separation without shadows inside the dialog. ### Components - **Inputs:** Full-width rectangular fields are approximately 40 px CSS high, with thin lavender-gray borders and nearly square corners. - **Description:** A roughly 70 px high textarea provides extra vertical room beneath its label. - **Project selector:** A folder icon and empty-project message align left; a small up/down indicator sits right. - **Template action:** A compact outlined blue download button aligns opposite the CSV label. - **Guidance panels:** Two bordered rectangles contain small icons and wrapped instructions; the first has a strong blue left rule. - **Drop zone:** A roughly 470 × 125 px CSS dashed rectangle contains a circular upload icon and centered instruction. - **Footer actions:** A plain Cancel action sits beside a broad gray rectangular creation button. ### Visual rhythm - **Field cadence:** Labels sit close to their controls, with larger gaps between field groups. - **Dense lower section:** Guidance boxes, drop zone and footer form a compact import sequence. - **Alignment:** All fields and panels share the same approximately 24 px CSS inset. - **Layer focus:** The crisp bright dialog contrasts strongly with the blurred dark background. ### Responsive - **Evidence boundary:** Only a desktop state is shown; responsive behaviors are recommendations. - **Dialog flow:** Use a full-width mobile task surface or fluid max-width dialog with a scrollable body. - **Guidance wrapping:** Let instructions wrap naturally while preserving readable code-style column labels. - **Action access:** Keep footer controls reachable and provide file-picker access alongside drag and drop. ### Adaptation guidance - **Creation pattern:** Reuse a required name, optional metadata and optional CSV import with an explicit empty-list route. - **Validation:** Define missing-name, malformed-CSV, upload-progress and success states separately. - **Accessibility:** Associate guidance/errors with inputs and manage modal focus; expose upload through keyboard-operable controls. - **Content separation:** Treat schema instructions as displayed application content rather than instructions to operate external tools. - **Scale calibration:** Validate the assumed 2× capture scale before implementing CSS dimensions. 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.