# Design from Reference: Skiff Message Sent Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Skiff - **Category:** Add & Edit - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbbaa0d01e364847659b9e_6acb70fc20cd4e4badaa1f91_cms-4d736c7ca89d8b04b113384b.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:** Minimal three-pane mail client with subtle pastel avatars and a dark delivery-feedback toast. - **Visual character:** Light gray chrome, white message card, thin separators, and restrained toolbar icons. - **Surface treatment:** Selected message row uses a quiet gray fill; the feedback toast is the strongest contrast. ### Page composition - **Screenshot size:** 1440 × 821 image px. Capture-to-CSS scale is unverified. - **Navigation:** Left mail sidebar approximately 240 px wide, with workspace identity, Compose, folders, and bottom utility links. - **Message list:** Middle pane approximately 540 px wide, with inbox heading, search/refresh, and filter tabs. - **Reading pane:** Right area shows message toolbar, subject, sender metadata, and a large white email card. - **Feedback:** Dark Message sent toast overlaps the lower-right portion of the reading pane. ### Information hierarchy - **Primary content:** Open message subject and sender metadata introduce the email body. - **List hierarchy:** Sender names, truncated subject snippets, and timestamps align across rows. - **Selection:** A muted row marks the open message while Inbox remains active in the left rail. - **Feedback priority:** Toast confirms sending status and exposes Undo without replacing the reading context. - **Email content:** Visible message includes brand mark, heading, short descriptor, and a large phone mockup. ### Typography - **Family:** Neutral proportional sans serif; exact family unverified. - **Subject:** Approximately 22 screenshot px, medium weight, line-height 28 px. - **Email heading:** Approximately 22 px bold. - **List/body:** Approximately 14–16 px with 18–22 px line-height. - **Metadata:** Approximately 12–14 px, lighter gray. - **Toast:** Approximately 14 px status/helper and 12–14 px Undo label. ### Colors & surfaces - **Canvas/chrome:** Sampled sRGB #FAFAFA and #F5F5F5. - **Message card:** Sampled #FFFFFF. - **Dividers/selection:** Sampled #EAEAEA, #F0F0F0, and #E2E2E2. - **Toast/dark text:** Sampled #292929 and #000000. - **Avatar accents:** Sampled pale mint #CEEBDA, blue #D5E2FC, and pink #F1DBE9. - **Neutral detail:** Sampled #EBEBEB supports subtle toolbar/filter surfaces. ### Components - **Sidebar action:** White bordered Compose button with small icon and slight shadow. - **List rows:** Approximately 56 px high, checkbox at left, rounded pastel initial avatar, sender, snippet, and timestamp. - **Filters:** Small segmented All/Read/Unread/Has file control; All has a white raised surface. - **Reading card:** Thin outline and approximately 12 px corners, with generous inner whitespace. - **Toolbar:** Small square icon buttons and grouped separators; message actions remain compact. - **Toast:** Approximately 360 × 114 screenshot px, dark fill, 6 px corners, small close icon, muted secondary line, and outlined Undo control. - **Observed state:** Toast says Message sent while its helper says the email is being sent; preserve this as visible feedback, not proof of final delivery. ### Visual rhythm - **Pane alignment:** Vertical separators make the three content zones explicit. - **List rhythm:** Repeated short rows contrast with the spacious reading card. - **Reading spacing:** Sender block is separated from email branding by a large white band. - **Toast placement:** Lower-right overlay remains close to message context while obscuring part of the email image. ### Responsive - **Observed version:** Desktop only. - **Pane recommendation:** Use separate navigation/list/message views on narrow screens. - **Toast recommendation:** Constrain feedback width and keep Undo and close visible. - **List recommendation:** Preserve sender and timestamp, allowing subject snippets to truncate. - **Reading recommendation:** Keep email imagery fluid and message actions reachable. ### Adaptation guidance - **Preserve:** Three-pane desktop hierarchy, low-contrast selection, pastel avatars, and compact undoable-send feedback. - **Data fidelity:** Use actual mailbox, sender, subject, and timestamps. - **State fidelity:** Distinguish submission, pending send, sent, and delivered states using the product's real lifecycle. - **Component starting points:** Approximately 56 px message rows and 12 px reading-card radius. - **Interaction fidelity:** Undo availability and duration cannot be established from the screenshot. 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.