Asana Webinars Emails

# Design from Reference: Asana Webinars 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:** Asana - **Category:** Webinars Emails - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbcea575891049b183ff43_6acbcd24dd83b3a9f608bae8_cms-daee373353358b038b0bbd41.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 webinar invitation email using a narrow bordered white sheet, large colorful geometric event artwork and a purple registration action. - **Image basis:** The 1348 × 1680 source was inspected through both crops at original width. Dimensions below are image-pixel estimates; email CSS scale and typeface identity are unverified. ### Page composition - **Outer header:** A small browser-view link sits upper right; a large centered Asana logo appears beneath. - **Email sheet:** A roughly 750 px wide outlined panel begins around x298, y187. - **Event opening:** Centered title/subtitle precede a broad graphic of yellow/coral rectangles, dark blocks and a circular check. - **Body:** A left-aligned greeting, paragraphs, three-item event-details list and sign-off occupy the lower panel. - **Action:** A centered approximately 375 × 56 px purple Register now button closes the email. ### Information hierarchy - **Event identity:** The centered heading and oversized artwork establish the webinar. - **Explanation:** Large body text introduces the event; purple inline links identify the event and registration destination. - **Logistics:** A bulleted list separates when, where and presenter information. - **Conversion:** The filled registration button is the strongest action. No registration-complete state is visible. ### Typography - **Title:** Approximately 38 px regular sans-serif, with a roughly 24 px subtitle. - **Body:** Around 23–24 px with 31 px line-height, in muted slate-gray. - **Artwork:** Large heavy black display lettering belongs to the event image. - **Action/utility:** Button text is around 22 px bold; browser link around 14 px. Exact font families and CSS metrics are unverified. ### Colors & surfaces - **Measured base:** White #FFFFFF dominates; pale #EFF0F1 defines subtle panel boundaries. - **Measured artwork:** Yellow #F7BD33 and coral #EA5E70 form the principal graphic blocks. - **Measured accent:** Purple #7967FC appears in registration/link emphasis. - **Measured text:** Slate #676D76, dark #222B37 and black #000000 establish text/artwork contrast. ### Components - **Logo:** A large centered multicolor symbol/wordmark sits well above the sheet. - **Event artwork:** A roughly 750 px wide flat graphic has sharp rectangles and a thin dark circular check motif. - **Body block:** Approximately 45 px inner side padding contains paragraphs and a conventional indented bullet list. - **Registration action:** A wide sharp-cornered purple rectangle with centered bold white text. - **State limits:** No focused link, hovered action or activated registration form is shown. ### Visual rhythm - **Centering:** Brand, event heading/artwork and button align centrally; body text is left aligned. - **Spacing:** Large gaps separate brand, panel, image and reading content. - **Density:** A strong image-led opening transitions into a substantial but clearly grouped invitation. - **Geometry:** Sharp artwork/button edges contrast with the circular check and rounded brand marks. ### Responsive - **Evidence limit:** Only the captured email is observed. - **Recommended sheet:** Use fluid width and reduce side padding safely. - **Recommended artwork:** Scale proportionally and keep essential event details in real text. - **Recommended list/action:** Preserve natural wrapping and touch-friendly registration access. ### Adaptation guidance - **Preserve:** Keep event identity, readable logistics, colorful artwork and one final registration action. - **Build:** Use robust email-compatible layout, real text and a linked button. - **Content integrity:** Replace historical dates and presenter details with verified event information. - **Validate:** Test client rendering, image-disabled readability, link contrast and mobile wrapping. 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.