# Design from Reference: Pitch Onboarding Email Flow Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Pitch - **Category:** Onboarding Email - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbcb648313d4c6c0cc76b8_6acbc9011790037d3e057d5a_cms-fd80dd0ed86745101ae1d17f.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 onboarding email with a narrow white reading column, bold black headings and colorful product illustrations. ### Page composition - **Canvas:** 1305 × 3661 screenshot pixels. This is a long email capture; CSS scale is unverified, so sizes below are visual estimates. - **Structure:** Centered logo above a white panel approximately 750 screenshot pixels wide. Welcome hero leads into three stacked image-and-copy feature blocks, a final CTA and a postscript. ### Information hierarchy - **Priority:** Illustrated greeting, welcome heading, short introduction and blue opening action. - **Narrative:** Template inspiration, brand styling and collaboration each pair a large image with a headline and paragraph. A repeated closing action provides a clear next step. ### Typography - **Family:** Plain sans-serif with heavy headings; exact family is unverified. - **Scale:** Estimated rendered headings 30–34px, body 18–20px and button text 16px; allow for capture scaling when adapting to an email width. ### Colors & surfaces - **Sampled palette:** Outer background #F6F6F9; panel #FFFFFF; dark text #161618; blue #4866F9; golden illustration #F6BA5B and #F7C16B; coral #EC7371. - **Treatment:** Secondary paragraphs are gray; colorful imagery supplies most of the visual energy. ### Components - **Hero:** Four sculpted hand gestures sit above the centered welcome text and rectangular blue button. - **Images:** Tall template collage, warm yellow style-comparison illustration and blue/purple collaboration graphic with circular character portraits. - **Geometry:** Estimated 6–8px image/button radii, 48–54px button height and thin pale separators before the closing CTA. ### Visual rhythm - **Spacing:** Approximately 60–80 screenshot pixels of panel side padding; substantial 48–72px gaps separate feature blocks. - **Alignment:** Greeting and closing CTA are centered, while feature headlines and body copy are left-aligned. ### Responsive - **Guidance:** Mobile is not shown. Use a fluid single column, reduced side padding and full-width images; keep buttons comfortably tappable. ### Adaptation guidance - **Transfer:** Retain the welcome/action/education/action sequence and varied illustrative blocks. Replace product examples and links with relevant onboarding 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.