# Design from Reference: Sprout Social Invitation 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:** Sprout Social - **Category:** Invitation Emails - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ecad7cdf1bb86443f9a611_1659677312117-5f0a2c5b8fbf67ab812649fd_screencapture-mail-google-mail-u-0-2020-07-11-23_16_07.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:** A celebratory invitation email with a charcoal hero, fresh green action and simple product illustration. - **Tone:** The large congratulatory heading gives way to explanatory prose and a handwritten team signature. ### Page composition - **Capture:** The source measures 1306 × 1279 image pixels. Measurements refer to image pixels; CSS scale is unverified. - **Column:** An approximately 750-pixel-wide email sits centered on light gray. The logo aligns with the column's left edge above the main panel. - **Hero:** A charcoal block around 468 pixels high centers a heading, circular brand emblem, invitation details and green CTA. - **Body:** A white section uses roughly 62-pixel side padding, two paragraphs, a central laptop illustration and a team signature near the bottom. ### Information hierarchy - **Celebration:** “Congratulations” is the strongest text, followed by the green leaf emblem. - **Invitation:** Two centered lines identify the inviter/account, with the account name bold. “ACCEPT INVITE” is the primary action. - **Explanation:** The body describes the product and includes an inline invitation link; a second paragraph repeats the invitation path after the illustration. - **Closing:** A handwritten team signature adds a personal note without another filled action. ### Typography - **Family:** A conventional sans serif is used; exact identity is unverified. The closing signature is graphic handwriting. - **Hero scale:** The main heading is approximately 48 pixels and bold; invitation details are around 24 pixels with 32-pixel line height. - **Body:** Paragraphs are approximately 20 pixels with a 30-pixel line height and regular weight. - **Action:** The CTA label is around 20 pixels, bold and uppercase; inline links use blue underlined text. ### Colors & surfaces - **Measured palette:** ICC-aware sRGB sampling yields canvas #EFEFEF, body #FFFFFF, hero #4D4D4D and green #7AC142. - **Supporting tones:** Pale illustration gray #DDDDDD contrasts with near-black #1A1A1A and dark green-black #17201F. - **Surface treatment:** The email uses flat rectangular regions without a visible card shadow; the CTA has modest rounded corners. ### Components - **Branding:** The top wordmark combines green and dark lettering; a green folded-leaf mark sits inside a dark circle in the hero. - **CTA:** A centered green rectangle, approximately 275 × 50 image pixels, uses a small radius around 6 pixels. - **Product illustration:** A laptop with a simplified social inbox is surrounded by colored social-network speech bubbles. - **Body links:** Underlined invitation phrases repeat the main action within prose; they are visually distinct from ordinary paragraph text. ### Visual rhythm - **Hero stack:** Heading, emblem, invitation copy and CTA share one central axis with generous vertical intervals. - **Body rhythm:** Wide paragraph line spacing and large margins around the illustration keep the lower section calm. - **Alignment:** Body paragraphs and signature share a left edge, contrasting with the fully centered hero. ### Responsive - **Recommendation:** Use a fluid email container, reduce body gutters on narrow screens and scale the laptop illustration proportionally. - **Recommendation:** Let invitation details wrap naturally and keep the CTA large enough to tap. A mobile state is not shown. ### Adaptation guidance - **Preserve:** Retain the celebration-to-invitation-to-explanation sequence and the strong green primary action. - **Content:** Keep account/inviter information readable while avoiding unnecessary personal details in reusable examples. - **Implement:** Provide accessible invitation links and alternative text for the product illustration; do not rely on the image to explain the invitation. 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.