# Design from Reference: Skiff New Message 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/6acbbaa2d01e364847659bd1_6acb70ff5a8f98ddabc005bc_cms-d05882c23b54d4eb5cd6c5ed.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:** Neutral three-pane email application with a floating white composer, fine gray rules and restrained black actions. - **Scale:** Source 1440 × 821px; dimensions are screenshot pixels, CSS scale unverified. ### Page composition - **Shell:** A roughly 240px mailbox rail sits beside a roughly 540px message list; the reading pane fills the right. - **Composer:** An approximately 572 × 534px panel overlays the lower-right reading pane. - **Header/footer:** Composer title and window controls sit above recipient/subject/from rows; send/attachment tools sit along the bottom. ### Information hierarchy - **Message context:** The background reading pane shows a selected team email. - **Draft:** New message contains recipient chip, CC/BCC, subject, sender and short body with security-signature line. - **Actions:** Black Send is primary; scheduling, media/link/attachment icons and red trash are secondary. ### Typography - **Family:** Neutral sans-serif; exact font identity is unverified. - **Roles:** Estimated composer title 22px medium, fields/body 16px and mailbox metadata 14px. - **Contrast:** Dark draft text contrasts with muted field labels and subdued background messages. ### Colors & surfaces - **Sampled palette:** ICC-aware sRGB samples include #FAFAFA, white #FFFFFF, #F5F5F5, #F0F0F0 and #EBEBEB. - **Accents:** Pastel sender avatars add color; a coral signature link and red delete icon stand out. - **Depth:** Composer has rounded corners, thin outline and pronounced soft shadow. ### Components - **Recipient:** Rounded chip with lock icon and remove X; CC/BCC align right. - **Field rows:** Thin horizontal rules separate To, Subject and From. - **Composer body:** Large blank editable area beneath short text, ending in a toolbar separated by a rule. - **Window controls:** Minimize, expand and close icons align top right; Send is a black rounded rectangle. ### Visual rhythm - **Density:** Compact mailbox rows contrast with the spacious draft body. - **Alignment:** Draft labels and body share consistent internal padding; tools align along the bottom baseline. ### Responsive - **Recommended adaptation:** Only desktop is observed. Use a full-screen composer on narrow screens and collapse mailbox/list panes. - **Controls:** Keep Send and close accessible above the keyboard, with overflow for secondary tools. ### Adaptation guidance - **Preserve:** Keep clear message fields, recipient chips and a distinct send action. - **Adapt:** Use actual sender/recipient data and security states. Do not send messages or reuse personal addresses merely to reproduce the layout. 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.