# Design from Reference: Moss Test semantic search queries 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:** Playground - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acf524a63ba09a03e75a9a9_rYrjjN_gxmiHCshw_ZSbzoAbXdmbYxb81ALx39_cBFA.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 developer portal presents a semantic-search playground with restrained mint highlights and a dense results table. - **Treatment:** Near-black surfaces, subtle borders and subdued gray utility text keep the interface quiet and technical. ### Page composition - **Capture scale:** The original is 2880 × 1624 pixels. A 2× capture is plausible but unverified; dimensions below estimate CSS size at half source resolution. - **Sidebar:** An approximately 255-pixel-wide navigation column contains logo, portal selector, grouped links, bottom support items and workspace identity. - **Top bar:** Workspace, role badge and project selector form a breadcrumb-like horizontal context row. - **Project region:** A back arrow and monospaced project title sit above six tabs; Playground is selected with a mint underline. - **Search/results:** A full-width search field precedes a bordered results panel containing a Top 5 slider, latency badge and five table rows. ### Information hierarchy - **Location:** Workspace/project controls and the selected Projects navigation row establish context. - **Task focus:** The search query field stands alone above results, separating input from output. - **Results:** Rank, document excerpt, score and ID provide a consistent left-to-right reading order; excerpts occupy most of the width. - **Feedback:** A small mint latency badge occupies the panel's upper-right corner, while the slider and result count sit left. ### Typography - **Family:** General interface text uses a sans serif; project title, identifiers and scores use monospaced forms. Exact font identities are unverified. - **Project title:** Approximately 24 pixels with regular weight and compact leading. - **Navigation:** Main links and tabs are around 14 pixels; uppercase sidebar group labels are approximately 10–11 pixels with expanded tracking. - **Table:** Document copy is around 13 pixels with 18-pixel leading; muted headers, ranks, scores and IDs retain compact sizing. ### Colors & surfaces - **Measured foundation:** Near-black #0A0A0A dominates the canvas and shell. - **Measured raised tones:** #181818, #1F1F1F and #242424 supply selected/navigation, boundary and control variations. - **Measured typography:** Near-white #FAFAFA contrasts with muted gray #A3A3A3 for secondary labels and values. - **Accent relationship:** Pale mint marks the active tab underline, slider fill/thumb and latency badge; its exact hex is not established by the sampled dominant colors. ### Components - **Navigation state:** Projects appears inside a dark raised rounded rectangle; line icons precede the other navigation entries. - **Portal selector:** A thin-bordered full-width rounded control includes a compact label and vertical chevrons. - **Search input:** Approximately 1120 × 44 estimated CSS pixels, with subtle border, 8-pixel radius, magnifier and a short visible query. - **Result panel:** A thin dark-gray outline and approximately 9-pixel radius enclose controls and table; no heavy shadow is visible. - **Table rows:** Five horizontal rows use fine separators and roughly 65-pixel heights, with wrapped excerpts and aligned score/ID columns. - **Slider and badge:** A small horizontal slider follows the Top 5 label; the mint latency pill combines a lightning icon and short timing value. ### Visual rhythm - **Workspace padding:** Approximately 32 pixels separates the content from the sidebar and right edge. - **Vertical spacing:** Roughly 40 pixels separates tabs from search, and about 32 pixels separates search from the result panel. - **Table alignment:** Consistent column starts, restrained padding and fine rules make dense result text scannable without alternating row fills. ### Responsive - **Observed state:** Only a desktop portal is supplied; smaller viewport behavior is unverified. - **Recommended shell:** Collapse navigation before narrowing the document column; allow tabs to scroll horizontally. - **Recommended results:** Preserve readable excerpts through horizontal table scrolling or stacked result cards, keeping rank, score and ID associated with each result. ### Adaptation guidance - **Preserve restraint:** Keep mint reserved for active state and feedback against near-black surfaces. - **Reuse hierarchy:** Maintain workspace context, project tabs, isolated query field and the clearly bounded results panel. - **Data fidelity:** Treat the visible query and five returned rows as a captured state; do not infer search quality, scoring rules or live latency. - **Accessibility:** Maintain readable dark-theme contrast, keyboard-operable slider/search controls and a selected-tab cue beyond color alone. 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.