# Design from Reference: Segment Welcome 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:** Segment - **Category:** Welcome Email - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ecad968ef10802cf100d6d_1659677154837-5eaada6af27a157af4a420e7_screencapture-mail-google-mail-u-1-2020-04-30-16_01_30.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 - **Style:** A simple welcome email with mint-green brand/action accents, dark-teal prose, and a solid green footer. - **Character:** Personal and instructional, prioritizing teammate invitation before offering direct setup and learning links. ### Page composition - **Capture and scale:** The screenshot measures 1203 × 1003 pixels. Approximate dimensions below refer to screenshot pixels; CSS scale is unverified. - **Frame:** A roughly 800 px-wide email column is centered on white. The green Segment logo is centered above a narrower left-aligned body. - **Sequence:** Greeting, two explanatory paragraphs, centered Add a teammate button, two setup/help paragraphs with green links, a short cofounder sign-off, and a green legal/footer block. ### Information hierarchy - **Primary action:** The teammate invitation is the only filled button and occupies a generous gap in the center of the message. - **Secondary paths:** Inline green links offer source setup and a learning resource without competing with the main invitation. - **Personal close:** A simple text sign-off precedes the footer, keeping the message conversational. ### Typography - **Family:** A rounded sans serif is visible; exact identity is unverified. - **Body:** Approximately 21–22 px with 32 px line-height, regular weight, and a comfortable reading measure. - **Actions:** The button label is about 22 px white; inline links use bold weight at body size. - **Footer:** Centered white legal/address text is approximately 14–15 px with tighter leading. ### Colors & surfaces - **Foundation:** Sampled sRGB #FFFFFF covers the page and message. - **Brand accent:** Sampled mint-green #5BBD95 defines logo, button, links, and footer. - **Text:** Dark teal prose contrasts with white; its exact hex value is unverified. ### Components - **Primary button:** A green rectangle roughly 215 × 60 px uses small 4–5 px radii and a centered white label. - **Footer block:** A full-width green rectangle contains browser/unsubscribe links, copyright, and mailing-address lines in centered white text. - **Message body:** No enclosing border, shadow, image cards, or decorative illustration is visible; the logo is the only major graphic. ### Visual rhythm - **Spacing:** Use roughly 35–45 px between prose paragraphs and broad 60–70 px gaps around the invitation action. - **Alignment:** Prose and sign-off share one left edge, while logo, button, and footer text are centered. - **Pacing:** The prominent action interrupts the prose once, then the message returns to concise setup guidance. ### Responsive - **Observed state:** Only the captured email is visible. - **Recommended email reflow:** Use a fluid body with 20–24 px mobile gutters, preserve readable line-height, and let footer address lines wrap. - **Accessibility:** Keep links distinguishable and the button text live; scale the logo proportionally. ### Adaptation guidance - **Preserve:** Retain the personal welcome, invitation-first action, secondary setup/learning links, and green footer. - **Adapt:** Use actual onboarding priorities, sender identity, and compliance/footer details for the new product. - **Avoid:** Do not copy platform integration counts, product claims, personal greeting, or mailing address. 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.