# Design from Reference: Bubble 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:** Bubble - **Category:** Onboarding Email - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbc9501790037d3e059422_6acbc6f2c1c9f6598505dc6d_cms-9c25c96492ba20d90db734e6.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 simple onboarding email uses a white reading column on a pale-gray surround, with black body text and vivid blue links. - **Capture evidence:** The screenshot measures 1298 × 1187 pixels and shows the full visible message. Dimensions are image-pixel estimates; email CSS scale is unverified. - **Tone:** A customer quotation and analytics screenshot provide social proof within a plain letter-like layout. ### Page composition - **Container:** A centered white rectangle approximately 750px wide sits within broad gray margins. - **Brand:** A centered Bubble wordmark appears above a thick blue horizontal rule. - **Opening:** An italic multiline quotation precedes a large analytics image. - **Body:** Several left-aligned paragraphs explain the example, link to other stories and invite a response. - **Closing:** A short team sign-off and postscript finish the message. ### Information hierarchy - **Quotation:** Italic introductory text creates the opening emphasis without a display heading. - **Evidence image:** A large line-chart screenshot is the main visual asset. - **Links:** Bright blue underlined text highlights the example site, additional stories and feedback routes. - **Letter structure:** Regular paragraphs, sign-off and postscript maintain a personal email tone. - **Claim scope:** Displayed performance figures belong to the source email and are not independently verified. ### Typography - **Family:** Body copy uses a familiar sans-serif; exact identity is unverified. - **Quote:** Approximately 18px italic with 26px line-height. - **Body:** Approximately 18px regular with 26px line-height. - **Brand:** A large dark custom wordmark is centered. - **Image text:** Smaller chart labels and values are embedded within the analytics screenshot. ### Colors & surfaces - **Surround:** Sampled #F8F8F8 supplies the outer background. - **Message:** Sampled #FFFFFF supplies the white column. - **Ink:** Sampled #000000 supplies body text. - **Blue accent:** Sampled #294AFB supplies the strong divider and relates to the bright link treatment. - **Chart fill:** Sampled #E7F4FA supplies pale-blue chart shading. - **Chart details:** Blue and orange lines and green summary values appear within the image. ### Components - **Brand divider:** A thick approximately 12px blue rule spans the inner content width. - **Quote block:** A four-line italic paragraph sits directly on white without a border. - **Analytics image:** A roughly 600 × 330px screenshot contains a comparison chart, tooltip and three summary metrics. - **Inline links:** Underlined blue links remain embedded in prose, with no separate CTA button. - **Container styling:** Square corners and no visible shadow keep the email plain. ### Visual rhythm - **Inner padding:** Approximately 50–64px side inset frames quote and body text. - **Image spacing:** Large gaps separate the quotation, chart and following paragraphs. - **Paragraph cadence:** Around 24px separates body blocks. - **Alignment:** Brand is centered; all editorial copy uses one stable left edge. - **Closing space:** The postscript is followed by generous bottom padding. ### Responsive - **Evidence limit:** Only one email width is observed; client rendering is unverified. - **Container recommendation:** Use a fluid centered email with comfortable mobile gutters. - **Image recommendation:** Scale analytics proportionally and provide a concise textual alternative. - **Text recommendation:** Preserve readable live text and distinct underlined links. ### Adaptation guidance - **Email structure:** Keep quotation, explanatory copy, links and sign-off as live text. - **Evidence:** Use an authentic or representative chart without inventing performance claims. - **Action focus:** Preserve the letter-like linked-text approach rather than adding unsupported buttons. - **Accessibility:** Provide meaningful link names and image alternatives. - **Content:** Distinguish customer-reported results from verified product 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.