Canny Welcome Email

# Design from Reference: Canny Welcome 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:** Canny - **Category:** Welcome Email - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ecad990e99ef2438d921d0_1659676501185-5ec3a0370d2f9b4d676e7fab_screencapture-mail-google-mail-u-1-2020-05-19-10_58_41.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 text-led onboarding email uses white space, purple branding/links and two large product screenshots to explain setup choices. - **Evidence:** The original is 1297 × 1998 pixels. Both portions were inspected; measurements refer to image pixels, with email CSS scale unverified. ### Page composition - **Column:** A roughly 600-pixel-wide centered body begins near x357. - **Opening:** Centered Canny branding precedes greeting and several setup paragraphs. - **Examples:** Bold Portal and Widget subheads introduce wide bordered screenshots. - **Closing:** Comparison, identity/setup documentation and teammate-invite links appear in prose before a personal signoff. ### Information hierarchy - **Welcome:** Greeting and introductory paragraphs establish the onboarding context. - **Decision support:** Two labeled screenshots distinguish portal and embedded-widget options. - **Next steps:** Inline links guide organization, implementation and teammate help without a separate filled CTA. ### Typography - **Brand:** Approximately 36 pixels, medium-weight purple wordmark. - **Body:** Around 20 pixels with 28-pixel leading; subheads use the same size in bold. - **Screenshots:** Embedded interface text is much smaller and belongs to the examples, not the email's type scale. - **Identity:** A neutral sans-serif resembling Arial/Helvetica is visible; exact family is unverified. ### Colors & surfaces - **Measured base:** ICC-to-sRGB sampling identifies #FFFFFF as canvas, #F8F6F7 and #F6F6F6 in embedded pale surfaces. - **Measured dark:** #332533 is prominent within the darker widget example; #E9E9E9 supplies light borders/gray regions. - **Accents:** Purple identifies email branding/links and selected elements within examples. - **Treatment:** The email is flat; screenshots have thin outlines and small radii. ### Components - **Product examples:** Two approximately 600-pixel-wide images show feedback lists, suggestion forms, vote counts and navigation. - **Section labels:** Portal and Widget are short bold standalone lines with generous space around them. - **Inline navigation:** Underlined purple links sit naturally within paragraphs. - **Signoff:** A short personal two-line ending closes the email without a decorative footer. ### Visual rhythm - **Paragraph cadence:** Consistent leading and roughly 30–40-pixel gaps structure the message. - **Image alignment:** Both screenshots and all copy share the same column edges. - **Alternation:** Text, subhead and screenshot repeat twice before the final guidance paragraphs. ### Responsive - **Observed scope:** One email rendering is visible; mobile layout is not shown. - **Recommended layout:** Make the column fluid with padded edges and scale screenshots proportionately. - **Recommended content:** Keep surrounding explanations readable even when embedded screenshot text becomes small. ### Adaptation guidance - **Onboarding pattern:** Explain a setup decision with two named visual examples, then link to implementation and teammate support. - **Content fidelity:** Treat screenshots as illustrations, not live interactive forms. - **Implementation:** Confirm fonts/scale, provide meaningful image descriptions and retain recognizable underlined links. 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.