Hiver Onboarding Emails

# Design from Reference: Hiver Onboarding 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:** Hiver - **Category:** Onboarding Email - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ecad8edf1bb83068f9a652_1659676754107-5eb02e573b6e3eb721d39be2_screencapture-mail-google-mail-u-1-2020-05-04-16_59_19.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 onboarding reminder email inside a thin-bordered white container on light-gray background. ### Page composition - **Canvas:** 1300 × 1448 screenshot px. - **Container:** Approximately 830px wide, centered. - **Sequence:** Large brand mark, greeting, personal reminder, linked setup screenshot, support offer, sign-off, contact signature, and postscript. ### Information hierarchy - **Primary:** Reminder to finish shared-mailbox setup. - **Action:** Inline setup link rather than a large button. - **Proof:** Embedded screenshot shows the intended configuration area. - **Support:** Reply/call options and signature make the message personable. ### Typography - **Family:** Arial-like sans serif; exact family unverified. - **Body:** Approximately 18–20 screenshot px with 28px line-height. - **Signature:** Similar body size with selective bold text. - **Logo:** Image asset rather than inferred type. - **Precision:** Font sizes are visual estimates. ### Colors & surfaces - **Outer surface:** #F2F2F2. - **Email body:** #FFFFFF. - **Screenshot pale shades:** #FCFBFE, #FCFBFF, and #FAFAFC. - **Text:** Dark neutral gray. - **Brand:** Yellow logo and dark wordmark; exact tokens unverified. - **Links:** Underlined blue. - **Precision:** Large flat surfaces sampled; screenshot shades vary. ### Components - **Container:** Thin gray outline and very small radius. - **Screenshot:** Wide rectangular product capture without a decorative card. - **Signature:** Text links, bold contact details, small brand/partner marks. - **No main CTA button:** Navigation remains inline text links. ### Visual rhythm - **Spacing:** Large gap below logo, regular paragraph gaps, generous sign-off spacing. - **Alignment:** All text and screenshot share left edge. - **Tone:** Simple single-column layout resembles a direct support message. ### Responsive - **Observed:** Email capture only. - **Recommendation:** Fluid width, scaled screenshot, and comfortable mobile padding. - **Signature:** Allow long contact lines to wrap. ### Adaptation guidance - **Preserve:** Contextual reminder, direct setup link, screenshot, and personal support offer. - **Privacy:** Replace names, email, phone numbers, and signature details with authorized content. - **Behavior:** Setup and scheduling destinations are 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.