# Design from Reference: Moss Storage and query analytics 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:** Analytics - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acf524eb2a08d6fb0937a6c__5niDzMfKkOVfwWc5G_3CHeEwxdVU-VM8FMCJuCRCqw.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 - **Style:** Dark developer analytics dashboard with monochrome cards, restrained mint selection, and small chart accents. - **Character:** Near-black background, thin dark borders, compact sans-serif labels, and monospaced metrics. ### Page composition - **Canvas:** 2880 × 2926 image px; CSS estimates assume an unverified 2× capture. - **Sidebar:** Approximately 255 CSS px wide with grouped navigation and bottom workspace identity. - **Header:** Breadcrumb/workspace row across main column. - **Main:** Analytics heading, subtitle, project/time/date filters, then overview card. - **Overview:** Three metric tabs above Storage Trend scatter chart. - **Lower cards:** Build Health summary and Recent Activity table. ### Information hierarchy - **Primary:** Analytics title and overview metric values. - **Selected metric:** Storage tab has a thin mint underline. - **Chart:** Sparse blue/orange points and low-contrast horizontal grid. - **Health:** Large monospaced success percentages. - **Activity:** Table supplies granular operational context. ### Typography - **Family:** Neutral sans serif for interface text; monospace for numeric values and technical identifiers. Exact families unverified. - **Page title:** Approximately 24 CSS px, semibold under assumed 2×. - **Card headings:** Approximately 16px, semibold. - **Body/labels:** Approximately 14px. - **Metrics:** Approximately 32px monospaced. - **Chart labels:** Approximately 11–12px. - **Table identifiers:** Approximately 13–14px monospace. - **Precision:** Sizes and 2× scale are estimates. ### Colors & surfaces - **Page and sidebar:** #0A0A0A. - **Card surfaces:** #111111. - **Borders:** Approximately #242424. - **Selected navigation:** Approximately #181818. - **Primary text:** #FAFAFA. - **Secondary text:** #A3A3A3. - **Minor dividers:** Near #1F1F1F. - **Accent:** Mint underline/status, blue ingest point, and orange egress point; exact accent tokens unverified. - **Precision:** Hex values sampled from flat screenshot regions. ### Components - **Filters:** Dark outlined dropdowns and adjacent date control with calendar icon. - **Overview:** Rounded card with top metric segments and a large chart region. - **Chart:** Horizontal rules, KB axis, one date tick, and centered legend. - **Health:** Two metric groups separated by a vertical line; small outlined result/count chips. - **Activity:** Six-column-style alignment with thin row separators and centered record count below. - **Sidebar:** Small uppercase group labels, outline icons, and rounded selected item. ### Visual rhythm - **Padding:** Approximately 24 CSS px within cards under assumed 2×. - **Gaps:** Approximately 32px between major cards. - **Density:** Large chart area balances compact table rows and small navigation. - **Contrast:** Borders remain subdued; important values are bright. ### Responsive - **Observed:** Desktop only. - **Recommendation:** Collapse sidebar, wrap filters, stack health groups, and horizontally scroll technical tables. - **Chart:** Retain legible labels and simplify ticks on small screens. ### Adaptation guidance - **Preserve:** Near-black surfaces, thin borders, monospaced data, and restrained semantic accents. - **Data:** Replace usage values, project names, dates, and identifiers with supplied data. - **Scale:** Maintain hierarchy rather than copying historical metrics. - **Behavior:** Filtering and chart hover states are not shown. 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.