# Design from Reference: Front Collaborative review of AI reply Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Front - **Category:** Inbox - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6aca27d6aca7079066e8e52d_6ac57440c4eb0449089e832d_richtext-bd5c306430bc1141260c.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 - **Character:** Collaborative support inbox with soft lavender-gray chrome, an AI draft card and inline teammate discussion. ### Page composition - **Capture:** 13500 × 8438 screenshot pixels; estimated CSS scale approximately 9×; dimensions are not literal CSS sizes. - **Structure:** Folder sidebar, conversation list, wide message workspace and slim integration rail. Shared AI draft sits above teammate comments and bottom internal-comment composer. ### Information hierarchy - **Priority:** Conversation subject/context bar leads into Suggested reply, structured troubleshooting bullets and sources. Reviewer comments sit immediately beneath the draft. ### Typography - **Family:** Sans serif; exact family unverified. - **Estimated CSS sizes:** Subject/card labels 14–16px, message body 14px with 24px line height and metadata 12px. ### Colors & surfaces - **Measured palette:** Main #FCFBFE, white #FFFFFF, sidebar #EFEDF3, comment/control #EFEEF1, header gray #F2F2F2 and selected lavender #F5F6FE. - **Accents:** Violet links/actions, pale yellow urgency tags, green VIP markers and pastel avatars. ### Components - **Elements:** Shared-draft header, approval/disapproval icons, Discard/Take over links, Sources dropdown, collaborator avatars, mention-highlighted comments and internal composer. - **Estimated geometry:** Sidebars approximately 240px and 276px, card radius 12px, compact 32px toolbar controls and 16px message padding. ### Visual rhythm - **Spacing:** Dense inbox lists contrast with broad draft line lengths and spaced bullets; comments form a clear review thread below. ### Responsive - **Suggested adaptation:** Use one pane at a time on narrow screens, retain draft review controls and keep internal comments clearly labeled. Mobile behavior is unverified. ### Adaptation guidance - **Transfer:** Preserve the distinction between customer-facing draft and internal review, with source access and explicit human controls. 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.