# Design from Reference: Lightdash AI Analysis Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Lightdash - **Category:** Chat - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad12ab2165b6c7ffface2_6ac57417d929c55e13605888_richtext-9ba615ab7dacf4677ee0.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 - **Style:** Light AI analytics workspace with dark global bar and side-by-side conversation/chart. - **Character:** Compact interface text, white panels, pale borders, and violet data emphasis. ### Page composition - **Canvas:** 2880 × 1680 image px; CSS estimates assume an unverified 2× capture. - **Header:** Dark navigation, search, and workspace controls. - **Left:** AI analyst conversation, reasoning disclosure, explanation, chart link, suggestions, and composer. - **Right:** Revenue line chart in a large bordered panel with title, legend, axes, and chart-type toolbar. ### Information hierarchy - **Primary:** Generated analysis and chart result. - **Evidence:** Explanation lists source, metric, time dimension, filters, sort, and chart type. - **Actions:** Chart link, follow-up prompts, and composer. - **Chart:** Violet line dominates the right pane. ### Typography - **Family:** Compact sans serif; exact identity unverified. - **Body:** Approximately 14 CSS px with 20px line-height. - **Titles:** Approximately 14–16px, semibold. - **Metadata/axes:** Approximately 11–12px. - **Precision:** Values and 2× scale are estimates. ### Colors & surfaces - **Canvas/panels:** #FFFFFF. - **Pale surfaces:** #F8F9FA and #F9FAFE. - **Header:** #141414 with #202020/#212121 controls. - **Chart:** Violet line, exact token unverified. - **Text:** Dark neutral with muted gray metadata. - **Precision:** Flat colors sampled. ### Components - **Conversation:** Plain text response with bullets and compact reasoning rows. - **Chart link:** Rounded pale outlined row. - **Suggestions:** Small gray chips with diagonal arrow. - **Composer:** Rounded outlined textarea, circular send. - **Chart controls:** Small icon toolbar at bottom and close/menu in title row. ### Visual rhythm - **Layout:** Balanced split separated by thin vertical boundary. - **Density:** Compact chat text contrasts with broad chart plotting area. - **Hierarchy:** Bold response heading and bright chart color guide scanning. ### Responsive - **Observed:** Desktop only. - **Recommendation:** Stack chart and chat or switch views; retain readable axes and composer. - **Charts:** Reduce ticks on small screens. ### Adaptation guidance - **Preserve:** Explanation alongside visualization and useful follow-up prompts. - **Data:** Use supplied analysis/results; do not copy example revenue values. - **Behavior:** AI reasoning, generation, and chart controls are not demonstrated. 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.