Cycle Onboarding Email

# Design from Reference: Cycle Onboarding 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:** Cycle - **Category:** Onboarding Email - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb6adabf2e69a0c03b69fe_6acb6a055e515b69c796815d_cms-17012bae3b1198db7b9d29e3.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:** Personal educational email with white reading column, pale-gray outer canvas, product screenshot, and blue CTA. ### Page composition - **Canvas:** 2166 × 1846 image px; CSS scale unverified. - **Column:** Centered white rectangle with broad outer margins. - **Sequence:** Greeting, onboarding advice, large screenshot, explanatory links, centered Open Cycle, support invitation, sign-off, and unsubscribe. ### Information hierarchy - **Primary:** Instructional body and contextual product screenshot. - **Action:** Blue Open Cycle. - **Secondary:** Tutorial and feedback-call links. - **Tone:** Personal sender-style message. ### Typography - **Family:** Arial-like sans serif; exact identity unverified. - **Body:** Approximately 28–30 image px with 38px line-height. - **CTA:** Approximately 28px bold. - **Footer:** Approximately 22px muted. - **Precision:** Image-based estimates. ### Colors & surfaces - **Outer surface:** #F9F9F9. - **Content:** #FFFFFF. - **Screenshot neutral:** #F7F7F7. - **Body:** #666666. - **CTA blue:** #2544EE. - **Precision:** Flat samples; screenshot artwork adds pastel gradient. ### Components - **Screenshot:** Wide insight-card UI with lavender/pink backdrop. - **CTA:** Blue rounded rectangle, centered. - **Links:** Underlined blue. - **Footer:** Small sender attribution and unsubscribe outside white content. ### Visual rhythm - **Spacing:** Broad side padding and regular paragraph gaps. - **Alignment:** Body/screenshot left edges match; CTA centered. - **Grouping:** Screenshot demonstrates the preceding advice. ### Responsive - **Observed:** Email capture only. - **Recommendation:** Fluid column, scalable screenshot, readable body, and mobile side padding. ### Adaptation guidance - **Preserve:** One practical tip, contextual screenshot, direct return-to-product action. - **Privacy:** Replace names and customer quotes. - **Behavior:** Embedded product interactions not demonstrated. 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.