AND.CO Onboarding Email Flow

# Design from Reference: AND.CO 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:** AND.CO - **Category:** Onboarding Email - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbc89ad69dbc5db100932c_6acbc63dedc235600abc83d1_cms-182b886f9e180153fc6305c6.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 illustrated upgrade email with mint headline, simple benefit copy and a dark conversion button. ### Page composition - **Canvas:** 1300 × 2047 screenshot px. - **Structure:** Centered white outlined email on light-gray surround; logo, large freelancer illustration and mint headline; left-aligned letter/benefits; offer paragraph; centered promo/action block; italic terms and support link. ### Information hierarchy - **Priority:** Illustration and large mint question create the opening; bold benefit labels organize the letter. Dark action follows the offer explanation. ### Typography - **Family:** Familiar sans serif, exact font unverified. - **Scale:** Estimated screenshot headline 48–52 px, body 20–22 px with approximately 30 px leading, button 18 px bold; terms use italic body text. ### Colors & surfaces - **Sampled palette:** White #FFFFFF, surround #F9F9F9, body #525252, navy #0F1A26, mint #6CDDBB, border #DDDDDD and illustration coral #E93F33. ### Components - **Artwork:** Flat illustration of a seated freelancer with laptop, hanging lamp and potted plant; mint/coral/yellow fills with dark linework. - **Action:** Centered dark rectangular button with tiny corner radius; promotional code appears in bold text above. - **Terms:** Numbered italic list and underlined blue inline links; main email card uses a thin outline and nearly square corners. ### Visual rhythm - **Spacing:** Estimated screenshot card width 740 px, 70 px side padding and large opening-artwork area; approximately 24–36 px paragraph gaps. ### Responsive - **Observed:** Email screenshot only. - **Adaptation:** Use fluid card width and 20–24 CSS px mobile padding, scale illustration proportionally and retain readable terms. ### Adaptation guidance - **Preserve:** Illustration-led warmth, mint display text and clear dark action. - **Replace:** Use verified offer terms, actual code and current eligibility; do not copy expired discounts or guarantees. 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.