Hotjar Survey Emails

# Design from Reference: Hotjar Survey 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:** Hotjar - **Category:** Survey Emails - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ecad7fb0a5d81f5676c67c_1659676766165-5f1556f72ba25e49cf012c4f_screencapture-mail-google-mail-u-3-2020-07-20-10_33_34.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:** Friendly survey email with a white reading panel, playful textured illustration, coral action and pale-aqua support band. - **Scale:** Source 1305 × 1305px. Measurements refer to screenshot pixels; email CSS scale is unverified. ### Page composition - **Column:** A roughly 800px-wide centered white email sits on a near-white outer canvas. - **Opening:** Hotjar branding is centered above a large illustration of people and question-filled speech bubbles. - **Message:** Centered heading and two explanatory paragraphs lead to one coral survey button. - **Support band:** A full-width pale-aqua block closes the email with left-aligned support copy and underlined resource links. ### Information hierarchy - **Primary request:** Help us help you introduces feedback about unfinished tracking-code installation. - **Effort cue:** The copy emphasizes a quick three-question survey before Tell us what you think. - **Alternative help:** The lower section offers one-to-one support and a user-centric CRO guide. ### Typography - **Family:** Straightforward sans-serif; exact font identity is unverified. - **Roles:** Estimated heading 36px bold, centered body 21px/28px, action 20px bold with slight tracking and support copy 18px/24px. - **Emphasis:** Bold inline phrases highlight survey length and support links; support links are also underlined. ### Colors & surfaces - **Sampled palette:** ICC-aware sRGB samples include outer #F9F9F9, white #FFFFFF, aqua #D9FDFC and coral #EA4259. - **Illustration:** Mint, yellow and coral faces/speech bubbles combine with black linework and grainy gray texture. - **Contrast:** Dark gray body copy remains readable on white/aqua; the coral action is the strongest filled control. ### Components - **Hero illustration:** Broad editorial artwork with three people, floating questions and irregular textured shapes; no enclosing card border. - **CTA:** Approximately 300 × 52px coral button with 8px corners and centered white label. - **Support block:** Approximately 800 × 265px aqua region with around 100px horizontal padding and compact heading/body stack. - **Brand:** Small black Hotjar wordmark with coral flame accent centered above the illustration. ### Visual rhythm - **Spacing:** Large image-led opening gives way to a compact centered message. Generous gaps isolate the action before the contrasting support band. - **Alignment:** Main message is centered, while support copy switches to a left-aligned reading measure. ### Responsive - **Recommended adaptation:** Only desktop email is observed. Make artwork and column fluid, reduce support padding and allow paragraph lines to wrap naturally. - **Action:** Retain a readable, generous survey button and distinct support links. ### Adaptation guidance - **Preserve:** Keep one clear feedback request, an honest effort estimate and separate help alternatives. - **Adapt:** Use actual onboarding state, survey length and support destinations. Avoid assuming installation failure for users without supporting data. 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.