ProductBoard roductboard Retention Email

# Design from Reference: ProductBoard roductboard Retention 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:** ProductBoard - **Category:** Retention Email - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbc0677ce271b12870b507_6acbbfb2a4008ddb7477cd95_cms-f2bd3b0e0646cc44594493fe.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:** Plain, personal retention email with a centered brand mark and a single column of readable text. ### Page composition - **Capture:** 1290 × 653 screenshot pixels; CSS scaling is unverified. - **Structure:** White email sheet approximately 890 screenshot pixels wide, centered on gray gutters. Logo sits above a left-aligned greeting, two paragraphs, sign-off and bold sender name. ### Information hierarchy - **Priority:** Greeting opens the message; the second paragraph contains the sole bright, bold, underlined link. Sender signature provides a clear endpoint. ### Typography - **Family:** Arial-like sans serif; exact family unverified. - **Screenshot sizes:** Body glyphs approximately 23–24px, line height approximately 33px; estimated CSS body 16px if displayed around 1.5× scale. Greeting and signature use bold weight. ### Colors & surfaces - **Measured palette:** White #FFFFFF email surface, outer gray #E0E0E0, dark slate text #485059 and link blue #2993FB. - **Brand accent:** Small multicolor geometric logo supplies the only decorative color. ### Components - **Elements:** Centered logo, bold greeting, plain paragraphs, inline text CTA and sender signature; no card grid or large button. - **Screenshot geometry:** Approximately 75px inner side padding and 35–45px paragraph gaps; square sheet edges. ### Visual rhythm - **Spacing:** Large separation between logo and greeting gives way to a consistent paragraph rhythm and a short signature block. ### Responsive - **Suggested adaptation:** Let the email sheet fill narrow viewports, use 20–24px CSS gutters and preserve readable 16px body text. Mobile rendering is not shown. ### Adaptation guidance - **Transfer:** Preserve the personal prose-led structure and one clear inline action. Substitute actual recipient/sender content without adding promotional decoration. 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.