# Design from Reference: Twist Onboarding Emails 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:** Onboarding Email - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbbf774d71070f5fd414e1_6acbbea0578bcc411175b1ea_cms-deeaa8ff353fe8581d9f2002.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:** Friendly illustrated upgrade email with a restrained white card, blue branding and a broad primary action. ### Page composition - **Capture:** 1312 × 1452 screenshot pixels; CSS scale unverified. - **Structure:** Approximately 750px-wide screenshot column centered in pale gutters; logo/Launch link, two-line title, full-width key illustration and padded message body. ### Information hierarchy - **Priority:** Bold upgrade heading and key artwork lead into explanatory paragraphs, full-width blue CTA, reassurance and support links. ### Typography - **Family:** Arial-like sans serif; exact family unverified. - **Screenshot sizes:** Heading approximately 30px, body 20px with 30px line height; plausible CSS body 16px at roughly 1.25× capture scale. ### Colors & surfaces - **Measured palette:** Outer #F7F8FA, white #FFFFFF, illustration background #F8F8F8, action blue #316FEA, body gray #6F6F6F and heading #474747. - **Illustration:** Blue textured forms, yellow key and black outlined hand. ### Components - **Elements:** Small brand header, large illustration, bold inline benefit phrase, blue button with right arrow and text support links. - **Screenshot geometry:** Approximately 44px internal gutters, 60px CTA height and subtle 4px corner radii. ### Visual rhythm - **Spacing:** Large artwork separates title and prose; paragraph gaps and a generous CTA margin prevent the long message feeling dense. ### Responsive - **Suggested adaptation:** Use a fluid email width, 20–24px CSS gutters, 16px body text and a full-width tappable action. Mobile behavior is not shown. ### Adaptation guidance - **Transfer:** Retain the illustration-to-message sequence, one strong conversion action and lower-pressure support links. Replace all plan details with verified content. 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.