# Design from Reference: Junip Activation 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:** Junip - **Category:** Activation Emails - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbbbe3f023ce865170e05a_6acbbb218892d3072b70c48e_cms-4b9cef21bd2243de25d1e226.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:** A short personal activation-help email with a green Junip wordmark and plain gray body copy on a white bordered sheet. - **Character:** Warm and direct, asking for a reply rather than presenting a prominent button. ### Page composition - **Capture and scale:** The screenshot measures 1230 × 433 pixels. Approximate dimensions below refer to screenshot pixels; CSS scale is unverified. - **Frame:** A roughly 595 px-wide white rectangular sheet is centered on a near-white canvas, with a thin gray border and about 60 px internal padding. - **Sequence:** A large left-aligned green logo precedes a greeting, a three-line store-connection help paragraph, a short closing, and a plain-text CEO sign-off. ### Information hierarchy - **Brand:** The wordmark is the largest element. - **Message:** The single paragraph asks whether the recipient encountered a connection issue and invites a reply with details. - **Action:** There is no filled button or separate visual CTA; replying to the email is communicated in prose. ### Typography - **Family:** Body resembles a standard Arial-style sans serif; exact family is unverified. - **Body:** Approximately 14–15 px with 22–23 px line-height, regular weight. - **Logo:** The green wordmark is substantially larger, approximately 60 px tall, and includes a small star-like suffix. ### Colors & surfaces - **Foundation:** Sampled sRGB #F9F9F9 defines the outer canvas and #FFFFFF the message sheet. - **Brand:** Sampled green #55804E defines the logo. - **Text and border:** Sampled gray #525252 supports body copy, with #DDDDDD for the fine sheet boundary. ### Components - **Sheet:** A flat white rectangle has square corners, a thin border, and no visible shadow. - **Text flow:** Greeting, explanation, closing, and sign-off remain plain left-aligned paragraphs without additional icons or components. - **Logo:** A large green graphic is the only decorative element; no footer/social block is visible. ### Visual rhythm - **Spacing:** Allow roughly 40–45 px below the logo and about 20–24 px between text blocks. - **Alignment:** All content shares one left edge, with generous unused space to the right and beneath. ### Responsive - **Observed state:** Only the captured email is visible. - **Recommended email reflow:** Use a fluid sheet with 20–24 px mobile padding and preserve natural paragraph wrapping. - **Readability:** Keep the logo proportionate and body text at least 16 px CSS in a new functional email template. ### Adaptation guidance - **Preserve:** Retain the personal reply-based help message, restrained green branding, and simple bordered sheet. - **Adapt:** Use accurate activation context, recipient identity, and real sender details. - **Avoid:** Do not invent a connection failure or copy the reference's personal/signature information. 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.