Sprout Social Onboarding Email Flow

# Design from Reference: Sprout Social 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:** Sprout Social - **Category:** Onboarding Email - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbc0757ce271b12870b6e1_6acbbfcb0f0c77113b58cb3c_cms-c96cf3a9e34ef1512de95193.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:** Personal-looking educational email with a restrained green CTA, large product screenshot and human sender signature. ### Page composition - **Canvas:** 1300 × 1382 screenshot pixels; rendered CSS scale is unverified. - **Structure:** Centered logo/login header, outlined white message panel, then an avatar/signature block outside the panel. ### Information hierarchy - **Priority:** Greeting and several short explanatory paragraphs lead to Try it Out. A broad product screenshot illustrates the feature before closing copy and a source footnote. ### Typography - **Family:** Conventional sans-serif; exact font is unverified. - **Scale:** Estimated rendered body 20px, button 20px bold, sender name 22px bold and secondary signature 16px. ### Colors & surfaces - **Sampled palette:** White #FFFFFF; green #55A851; dark gray-green #364141; pale screenshot gray #EDEFEF; blue screenshot accent #227CEE. - **Treatment:** Main email is almost entirely white with thin neutral borders and dark copy. ### Components - **Message panel:** Fine rectangular border with a small speech-tail notch near the lower-left edge. - **Action:** Centered green rectangle approximately 250 screenshot pixels wide and 60px high, with minimal corner rounding. - **Signature:** Circular sender photo beside bold name and two compact text lines. ### Visual rhythm - **Spacing:** Approximately 48px screenshot-pixel padding, 24–32px paragraph gaps and large white separation around the screenshot. ### Responsive - **Guidance:** Mobile is not shown. Use a fluid single column and make the screenshot expand to content width without shrinking body text. ### Adaptation guidance - **Transfer:** Retain personal greeting, single-feature education and human signoff. Replace claims, source footnotes and screenshots with verified target material. 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.