# Design from Reference: Moss Add a website crawl source Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Moss - **Category:** Add & Edit - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acf524880ef78ba374815e5_73YsIZwPZJ2iSDy12FuhOgy1HXhfdkOeN26vvb2EExQ.png 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 dark website-crawl configuration modal uses nearly black surfaces, fine gray borders and a muted mint primary action. - **Capture scale:** The screenshot measures 2880 × 1624 image pixels. Approximate CSS dimensions assume a 1440 × 812 viewport at 2× density; this is unverified. - **Tone:** Compact technical fields and blurred background context focus attention on a single source-configuration task. ### Page composition - **Underlying app:** A left navigation sidebar and source/index workspace remain visible behind a very dark blurred backdrop. - **Modal:** A centered roughly 560 × 494px CSS rectangle contains the full visible form. - **Opening:** Add website and a short explanation sit above a full-width Website URL field. - **Middle controls:** Max pages and Re-crawl share a two-column row. - **Path controls:** Include paths and Exclude paths occupy two side-by-side multiline fields. - **Footer:** A short helper line precedes right-aligned Cancel and Start crawl actions. ### Information hierarchy - **Task heading:** The compact bright heading identifies the modal. - **Context:** Muted copy names the target index in a monospace-style fragment and explains existing-document handling. - **Input hierarchy:** URL is the first and widest field; limits and path restrictions follow. - **Optionality:** Include/exclude labels explicitly mark their fields optional. - **Primary action:** Start crawl uses the only filled mint treatment; Cancel is a plain text action. ### Typography - **Family:** A neutral interface sans-serif is visible; exact identity is unverified. - **Modal title:** Approximately 18px CSS, semibold, with 24px line-height. - **Labels and values:** Approximately 14px regular-to-medium. - **Description and helper:** Approximately 13–14px with 20px line-height, muted gray. - **Technical text:** Index names and path-pattern examples use monospace forms. - **Actions:** Approximately 14px medium, with dark text on the mint action. ### Colors & surfaces - **Backdrop:** Sampled #040404 dominates the blurred/dimmed surrounding workspace. - **Modal:** Sampled #111111 supplies the main dialog surface. - **Fields:** Sampled #0A0A0A supplies darker input interiors. - **Nearby dark tones:** Sampled #050505, #030303, #060606 and #171717 contribute to subtle layered boundaries. - **Text:** Near-white labels and gray secondary copy create the hierarchy. - **Primary action:** A desaturated mint-green button provides localized contrast against the dark form. ### Components - **Modal shell:** A dark rectangle with thin low-contrast outline, around 12px radii and subtle shadow. - **URL input:** Approximately 510 × 40px CSS, dark fill, thin border and 6px radius. - **Two-column row:** A roughly 246px numeric field sits beside a smaller recurrence dropdown with chevron. - **Textareas:** Two roughly 246 × 72px dark fields use thin borders, rounded corners and visible resize grips. - **Helper text:** A single muted line explains that path patterns are regular expressions entered one per line. - **Actions:** Start crawl is a compact approximately 104 × 36px rounded button; Cancel remains unfilled. - **Background treatment:** Strong blur prevents underlying navigation and index details from competing with the modal. ### Visual rhythm - **Padding:** Approximately 24px surrounds modal content. - **Field spacing:** Around 22–24px separates field groups; labels sit close above their inputs. - **Column gap:** Approximately 16px separates the paired controls. - **Footer spacing:** A moderate gap separates helper text from the action row. - **Alignment:** All full-width content shares a stable left edge, while actions align to the right. ### Responsive - **Evidence limit:** Only the desktop dialog state is observed; validation, crawling and mobile layouts are unverified. - **Form recommendation:** Stack paired controls and textareas at narrow widths. - **Dialog recommendation:** Constrain the modal to viewport margins and allow internal scrolling on short screens. - **Technical-input recommendation:** Preserve readable monospace text and allow long URLs/patterns to scroll or wrap safely. - **Focus recommendation:** Keep keyboard focus within the dialog while open and restore it on dismissal. ### Adaptation guidance - **Configuration clarity:** Keep source URL, crawl limit, recurrence and path rules as distinct labeled controls. - **Validation:** Provide clear inline feedback for malformed URLs, invalid patterns and unavailable recurrence settings. - **Dark system:** Reuse separate backdrop, modal and field tones rather than flattening every surface to black. - **Accessibility:** Associate helper text with relevant inputs and label all modal actions. - **Behavioral scope:** The screenshot establishes the configuration form only; no crawl was initiated or verified. 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.