# Design from Reference: Twist Welcome Email Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Twist - **Category:** Welcome Email - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ecad961d8c6b23a92e4fcf_1659677400307-5ead84269268705e59990845_screencapture-mail-google-mail-u-0-2020-05-02-16_29_43.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:** Friendly welcome email with a white content column on pale gray, blue actions and soft illustrated/product media. - **Scale:** Source 1304 × 1893 screenshot pixels. Measurements below describe the source image; email CSS scale is unverified. ### Page composition - **Column:** A roughly 750px-wide centered email begins with a white header containing Twist branding left and Launch Twist right. - **Opening:** A wide blue-toned illustration leads into a personalized welcome heading, two explanatory paragraphs and a full-width blue guide button. - **Lower content:** A broad product-video thumbnail precedes a video link, reassurance paragraphs and a personal signoff. App, social/help and unsubscribe links sit below the white card. ### Information hierarchy - **Welcome:** The heading addresses the recipient; the first paragraph emphasizes the newly created team name. - **Primary resource:** Browse the Getting Started Guide is the strongest action. The video thumbnail and Watch the videos link provide a secondary learning path. - **Support:** The final copy invites replies and introduces the sender/team before the utility footer. ### Typography - **Family:** Straightforward sans-serif; exact font identity is unverified. - **Roles:** Estimated welcome heading 30px bold, body 20px/30px, primary action 22px bold and footer links 16px. - **Emphasis:** Team name is bold and links blue; most body copy uses medium gray. ### Colors & surfaces - **Sampled palette:** ICC-aware sRGB samples include pale background #F6F8FA, white #FFFFFF, blue #3270EA, soft blue #DDEDFE and near-white #FAFAFA. - **Illustration:** Blue/lavender shapes, a small yellow accent and black outlines give the upper character scene a friendly editorial appearance. - **Media contrast:** The video image shows white application windows over pale pastel shapes with a large blue play control. ### Components - **Header:** Generous horizontal padding aligns the logo and launch link with the body text. - **Guide button:** Almost full text width, approximately 660 × 62px with modest 4px corners, centered white text and a right arrow. - **Video preview:** Wide layered application-window composition with a prominent circular blue/white play symbol; no playback state is visible. - **Footer:** Three centered lines separate app download, Blog/Twitter/Help Center and unsubscribe actions, without enclosing cards. ### Visual rhythm - **Spacing:** Large media blocks alternate with padded text regions. Paragraph gaps are generous, and the signoff has a visibly larger pause above it. - **Alignment:** Body, action and lower text share consistent inset edges; external footer links are centered. ### Responsive - **Recommended adaptation:** Only desktop email is observed. Make the column/media fluid, reduce padding and let the guide button label wrap if necessary. - **Legibility:** Maintain readable body copy and clear spacing between footer links rather than scaling the entire email uniformly. ### Adaptation guidance - **Preserve:** Keep personalized welcome copy, one primary getting-started action, secondary video guidance and a human support signoff. - **Adapt:** Use the actual team name, onboarding resources and sender identity. Keep app and unsubscribe destinations functional and relevant. 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.