ChartMogul Event Announcement Emails

# Design from Reference: ChartMogul Event Announcement 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:** ChartMogul - **Category:** Event Announcement Emails - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb6454b206c0d3f8f0641a_6acb62a1d8a653ae3d575d5c_cms-0158ea9e5864cdf829729050.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:** Event invitation email with a warm gradient banner, black editorial copy and a restrained dark-teal registration action. - **Evidence and scale:** Screenshot measures 2494 × 2006 image pixels. Capture scale is unverified; measurements describe raster proportions rather than confirmed email CSS. ### Page composition - **Frame:** Narrow white email card centered within pale-gray outer margins, roughly 1140px wide in the original image. - **Banner:** Full-width yellow/peach/pink gradient hero contains brand/live label, large event title, date/time lines, three circular portraits and partner note. - **Body:** Left-aligned greeting, explanatory paragraphs, three-item speaker list and bold event sentence. - **Action/close:** Centered Save your seat button precedes recording note and sender sign-off. - **Footer:** Small centered company/address, preferences and unsubscribe text sits outside the card. ### Information hierarchy - **Event identity:** Large black title and date/time metadata dominate the gradient banner. - **Personal invitation:** Plain paragraphs and a short speaker list provide a conversational explanation. - **Conversion:** Dark-teal button is the clearest action; bold fragments emphasize event and registration availability. - **Utilities:** Small gray footer links stay separate from message content. ### Typography - **Banner title:** Approximately 76px original image pixels, bold sans-serif. - **Body:** Around 28–30px original pixels with generous 48–50px leading. - **Metadata:** Banner/date/speaker labels smaller than title, using regular sans-serif and compact line icons. - **Scale caveat:** Raster sizes do not establish CSS values; exact font family and computed weights are unverified. ### Colors & surfaces - **Measured foundation:** Pale #F9F9F9 outer ground and white #FFFFFF card. - **Measured warm tones:** #FFD99C and #FFD79B appear in the banner, with pale #FFF8BD and pink/peach gradients. - **Measured foreground:** Black #000000 text and deep teal #03334D action. - **Boundaries:** Fine warm-gray card edge and rounded lower corners provide slight separation without a heavy shadow. ### Components - **Event banner:** Broad gradient rectangle with softly curved wave shapes and small light decorative marks. - **Speaker portraits:** Three small circular headshots with pale outlines, arranged horizontally beneath event metadata. - **Registration button:** Approximately 265 × 76 original pixels, dark-teal fill, white label and small corner radius. - **Speaker list:** Standard bullets and compact line spacing, with no separate cards. - **Footer:** Small centered lines, underlined unsubscribe and muted address text. ### Visual rhythm - **Body inset:** Approximately 40px in the displayed 1400px inspection rendering, proportional to a modest email padding. - **Paragraph cadence:** Broad blank intervals separate greeting, explanation, speaker list and closing. - **Action isolation:** Centered button has generous space above/below within otherwise left-aligned copy. - **Contrast:** Color-rich banner transitions into plain white reading content. ### Responsive - **Observed limit:** One email rendering only; mobile wrapping and client behavior are unobserved. - **Recommended sizing:** Use a fluid capped container and scale banner artwork/text deliberately. - **Recommended body:** Preserve speaker bullets and paragraph breaks, choosing CSS type for readability rather than raster size. - **Recommended action:** Maintain a comfortable tap target and allow date/time lines to wrap. ### Adaptation guidance - **Preserve sequence:** Event identity, rationale, speaker proof and one clear registration action. - **Keep restraint:** Let the gradient banner carry decoration while body copy remains plain. - **Implementation:** Use selectable text, accessible links and email-safe layout. Event schedule, research claims and speaker roles are historical captured content requiring separate verification. 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.