# Design from Reference: Front AI-generated support reply draft 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/6aca27d6aca7079066e8e525_6ac57443b0b01de4ca91cc2b_richtext-4f153f0bef34e350c795.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:** Calm collaborative support inbox with pale lavender surfaces and a prominent AI draft card. ### Page composition - **Canvas:** 13500 × 8438 screenshot px. Very high-resolution desktop capture shows navigation, conversation list, wide message workspace, narrow app rail, and bottom internal-comment composer. ### Information hierarchy - **Priority:** Selected conversation leads to subject, assignment/status metadata, and a suggested reply. Shared-draft banner contains feedback, Discard, and Take over controls; Sources and review reminder sit at the card bottom. ### Typography - **Scale:** CSS capture ratio is unverified. Relative to a 1440 px-wide desktop rendering, body would be about 14 px, subject 16 px, and metadata 12 px. Sans serif family unverified. ### Colors & surfaces - **Palette:** Sampled sRGB #FCFBFE canvas, #FFFFFF draft, #EFEDF3 navigation, #F2F2F2 banner, #F5F6FE selected conversation, and #15131B text. Violet accents identify AI and links. ### Components - **Details:** Rounded white reply card with soft shadow, lavender sparkle icon, bulleted response with bold lead-ins, colored urgency/VIP tags, avatar assignment chip, thin column separators, and icon integration rail. ### Visual rhythm - **Spacing:** Navigation and conversation columns occupy about 17% and 19% of width. Reply uses comfortable line spacing and broad inner padding; empty thread space separates it from the comment box. ### Responsive - **Adaptation:** Mobile is not shown. Navigate between inbox, conversation list, and thread as separate views while retaining draft status and review controls. ### Adaptation guidance - **Transfer:** Preserve human review, source access, and shared-draft context. Replace generated answer content with grounded support information and maintain distinct internal-comment styling. 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.