Bonsai Onboarding Emails

# Design from Reference: Bonsai Onboarding Emails Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Bonsai - **Category:** Onboarding Email - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbc93b1790037d3e05903b_6acbc64fc2a55c243f9a2d4a_cms-232aad0f05a89a1715801045.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 long instructional email presents invoice capabilities through repeated white modules on a pale gray background. - **Branding:** A centered mint-green wordmark and matching action buttons provide continuity; product screenshots supply most visual detail. ### Page composition - **Capture:** The source is 1293 × 6846 image pixels, inspected throughout. Dimensions below describe image pixels; email CSS scale and capture zoom are unverified. - **Column:** A roughly 725-pixel-wide centered column begins with a text-only introduction below the logo. - **Feature sequence:** Six white modules cover branding, contract/proposal integration, recurring payments, reminders/late fees, payment methods and time/expense integration. - **Module structure:** Each uses a centered title, broad product screenshot, left-aligned explanatory paragraph and centered green CTA. - **Ending:** A small white sign-off panel precedes an underlined unsubscribe link on the gray background. ### Information hierarchy - **Introduction:** Two substantial paragraphs establish the payment theme, with a long underlined statement inside the second paragraph. - **Feature proof:** Each heading introduces a screenshot before explanation and action, repeating a predictable teaching pattern. - **Actions:** Large green buttons are the strongest recurring interface elements outside the embedded product imagery. ### Typography - **Family:** A conventional sans serif is visible; exact family is unverified. - **Body:** Main copy is approximately 21–23 pixels with generous 40–45-pixel leading. - **Titles:** Centered feature titles are around 23 pixels with regular weight rather than oversized display treatment. - **CTA labels:** Approximately 23–24-pixel white uppercase text; one invoice-dashboard label wraps onto two lines. - **Embedded UI:** Smaller invoice tables and form labels belong to screenshot assets and use a denser hierarchy. ### Colors & surfaces - **Measured foundation:** Pale gray #F5F5F5 surrounds white #FFFFFF modules. - **Measured accent:** Mint green #57B38A appears in the main brand/action palette. - **Measured image surface:** Pale lavender #ECECF5 appears in the contract integration screenshot. - **Color relationships:** Gray body text remains restrained; red/purple invoice imagery and blue payment-provider controls are confined to product screenshots. ### Components - **Email modules:** Square-cornered white rectangles have little visible border treatment and no heavy shadow. - **Invoice imagery:** The first screenshot combines a colorful banner, centered logo tile and invoice heading; later examples show milestone tables, a recurrence dropdown, totals and expense rows. - **Payment-method example:** Five stacked provider/manual-payment rows use left accent strips, brand names and right-aligned connection buttons. - **Primary buttons:** Green rectangles are approximately 370–480 pixels wide and 80 pixels tall, with small corner radii and generous padding; the wrapped dashboard button is taller. - **Sign-off:** A short two-line text block closes the message without adding another promotional graphic. ### Visual rhythm - **Insets:** Approximately 50 pixels of side padding aligns body paragraphs inside the main column. - **Module gaps:** Gray gaps of around 35 pixels separate most feature panels, with larger pauses around introduction and closing. - **Internal pacing:** Broad screenshots sit close to panel edges, while paragraphs and buttons receive much more breathing room. ### Responsive - **Observed state:** Only the wide email capture is supplied; mobile layout is unverified. - **Recommended column:** Make modules fluid with reduced outer gutters and retain readable inner padding. - **Recommended content:** Scale screenshots proportionally, allow long CTA labels to wrap safely and reduce oversized line-height on small screens without creating dense text. ### Adaptation guidance - **Preserve repetition:** Keep heading, screenshot, explanation and action consistent across all six capabilities. - **Maintain restraint:** Use green for primary actions and keep other strong colors inside screenshots. - **Email resilience:** Use client-compatible layout, explicit spacing and meaningful screenshot alternatives; avoid fixed-height copy blocks. - **Content fidelity:** Treat payment options and product states as captured illustrations rather than evidence of current integrations or functionality. 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.