# Design from Reference: Moss Preview a sample index dataset 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/6acf523dd1e0031d264a3fba_GqVWxHVz8qsvndBPHA3lxdAAo0B8x6sQb1vCXzH-m14.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:** Near-monochrome dark developer modal with fine gray borders, numbered configuration regions and a syntax-colored JSON preview. - **Accent restraint:** Mint is reserved for the creation action, while green strings and purple keys provide semantic code color. - **Scale:** The source is 2880 × 2115 image px. Dimensions below estimate a 1440 × 1058 CSS layout at 2× scale; device ratio and zoom are unverified. ### Page composition - **Overlay:** A dark blurred application shell recedes behind a centered modal approximately 900 CSS px wide. - **Header:** Create New Index is centered above one-line upload/template guidance; an outlined close button sits upper right. - **Configuration:** A full-width numbered panel contains index-name input left and embedding-model dropdown right. - **Lower split:** A narrower data-source panel on the left contains source-mode choices and seven sample datasets. A wider right panel displays a scrollable JSON preview with line numbers. - **Footer:** A bottom action row places Cancel left and mint Create Index right. ### Information hierarchy - **Task:** The modal title leads; numbered labels identify Configuration, Data Source and Preview data. - **Selection:** Quick Start Templates is active in a four-choice segmented area. The first sample FAQ dataset is selected with a dark outlined row and bold text. - **Preview:** The code pane exposes example document structure, giving feedback on the chosen sample before creation. - **Action:** Mint Create Index is the only strong filled action. No index-creation result is visible. ### Typography - **Family:** Neutral interface sans-serif; exact font identity is unverified. The preview uses a monospace face. - **Title:** Approximately 24 px, medium-to-bold, with compact leading. - **Labels/body:** Roughly 14 px; section labels are slightly stronger than muted explanatory copy. - **List:** Dataset names are around 14 px, document counts about 12 px and muted. - **Code:** Approximately 13 px monospace with 20 px line spacing, gray line numbers and colored JSON tokens. ### Colors & surfaces - **Measured base:** ICC-aware sRGB sampling yields #040404, #0A0A0A and #111111 across overlay, modal and nested panels. - **Measured rules:** #1F1F1F and #242424 occur in borders and segmented surfaces. - **Measured primary accent:** #ABE6C7 is the mint action color. - **Measured syntax:** #98C379 appears in code strings and #C678DD in keys/tokens. - **Depth:** Fine outlines and approximately 10–12 px corners define panels; the dark overlay supplies separation without bright shadows. ### Components - **Configuration fields:** A wide dark outlined index-name input sits beside a compact embedding-model selector with chevron. - **Number badges:** Small rounded outlined squares containing 1, 2 and 3 precede section labels. - **Source selector:** Four choices form a two-by-two dark segmented group; the active top-left choice has a near-black inset pill. - **Dataset list:** Seven plain rows align names left and document counts right; one selected row has a stronger outline and brighter label. - **JSON editor:** Dark code area includes a line-number gutter and visible vertical/horizontal scrollbars, clipping long lines. - **Footer controls:** Plain Cancel text contrasts with an approximately 115 × 40 CSS px mint rounded button. - **Close:** A compact outlined rounded-square X sits at the modal's top right. ### Visual rhythm - **Panel spacing:** Approximately 16 px gaps separate numbered sections; 16–24 px padding aligns internal controls. - **List cadence:** Dataset rows have consistent generous height, making the selected state easy to locate. - **Column balance:** The source list and code preview share their top/bottom edges. - **Footer separation:** A distinct lower strip and generous whitespace isolate cancellation/creation from technical input. ### Responsive - **Evidence limit:** Only desktop is shown; these are recommendations. - **Modal:** Constrain to viewport width and allow vertical scrolling. - **Columns:** Stack source selection above preview on narrow screens. - **Code:** Preserve horizontal scrolling and readable monospace type rather than wrapping JSON arbitrarily. - **Actions:** Keep creation and cancellation reachable with visible focus and adequate touch targets. ### Adaptation guidance - **Reusable pattern:** Combine explicit configuration, selectable sample data and immediate structured preview before creation. - **Visual discipline:** Use neutral dark surfaces and one restrained action accent; reserve syntax color for code meaning. - **State handling:** Define validation, upload, loading and creation outcomes separately; this capture shows a selected sample only. - **Accessibility:** Label fields, expose selected dataset/source state and provide a readable text alternative to purely color-coded JSON. 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.