# Design from Reference: Hypercontext oapbox 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:** Hypercontext - **Category:** Welcome Email - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ecad99df1bb84448f9a69b_1659677299372-5ed1231da83753c10dc08e8a_screencapture-mail-google-mail-u-1-2020-05-29-16_57_31.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 welcoming plain white email uses bright blue branding and actions, gray conversational text, and a practical bulleted onboarding checklist. - **Evidence:** The screenshot measures 1360 × 1115 image pixels. Measurements below describe observed image pixels; actual email CSS scale is unverified. - **Brand treatment:** A chunky blue SoapBox logo sits above a lighter blue welcome headline, contrasting with otherwise conventional sans-serif prose. ### Page composition - **Reading column:** A centered column approximately 600 px wide begins near x387, with broad white margins. - **Opening:** Centered logo and welcome heading precede a left-aligned greeting, short introductory paragraph, and getting-started line. - **Checklist:** Five bullets explain next steps, with bold lead phrases, underlined blue links, and wrapped supporting copy. - **Primary action:** A centered blue pill button follows the list. - **Close:** A brief support invitation and two-line sender signature sit below. No outer card, colored background, or administrative footer is visible in this capture. ### Information hierarchy - **Welcome:** The blue headline is the largest text and reinforces the brand identity. - **Steps:** Bold bullet lead-ins distinguish the practical actions from their regular gray explanations. - **Links:** Several underlined blue inline links offer secondary paths; the filled meeting action receives stronger emphasis. - **Sign-off:** A personal name, support role, and small star emoji maintain an informal service tone. ### Typography - **Family:** A familiar sans serif is used throughout; exact identity is unverified. The logo uses separate stylized artwork. - **Welcome heading:** Approximately 46 px, light to regular weight, with around 56 px line-height. - **Body:** Approximately 20 px with about 30 px line-height, medium-gray color, and neutral tracking. - **Emphasis:** Bullet lead-ins are bold at the same body size; links remain visibly underlined. - **Button:** Approximately 18–20 px white text, medium weight, centered within the capsule. ### Colors & surfaces - **Measured colors:** Source sampling found white #FFFFFF, bright blue #42AEFB, and near-white edge colors including #FDFFFF, #FFFFFD, #FFFEFF, and #FCFFFF. - **Semantic use:** Blue identifies logo, heading, inline links, and primary action. Gray supports the longer paragraphs and bullets. - **Accent:** A small warm yellow-orange star appears in the signature. - **Flat treatment:** There is no visible outer panel, border, or shadow. White space defines the reading region. ### Components - **Brand mark:** A blue wordmark approximately 210 px wide includes a small illustrative figure above the lettering. - **Bulleted list:** Conventional round bullets sit in a narrow left gutter; indented text wraps consistently beneath each lead phrase. - **Inline links:** Blue underlined URLs and descriptive resource links are integrated within the list. - **Primary CTA:** A blue capsule approximately 242 × 62 px with fully rounded ends and no prominent shadow. - **Signature:** A simple two-line text block separated from the support paragraph by a generous gap. ### Visual rhythm - **Alignment:** Greeting, prose, list introduction, support paragraph, and signature share one left edge; logo, headline, and CTA are centered. - **Line spacing:** Open leading makes the dense checklist easy to follow, while bold phrases create repeated visual anchors. - **Group spacing:** About 35–45 px separates major text groups, with smaller gaps between individual bullets. - **Balance:** Large side margins and a compact logo keep attention on practical onboarding content. ### Responsive - **Observed limit:** Only one email rendering is provided; mobile and email-client behavior are unverified. - **Recommended layout:** Use a fluid single-column container with 20–24 CSS px side padding and live text that wraps naturally. - **Recommended list:** Preserve bullet indentation and readable line-height without shrinking the entire email image. - **Recommended CTA:** Maintain a comfortable touch target and let the welcome headline scale down when necessary. ### Adaptation guidance - **Preserve:** Keep the straightforward welcome, bold checklist labels, clearly underlined resource links, and one filled meeting action. - **Implement:** Use email-compatible markup and inline styles with live text, real list structure, and a meaningful logo alternative. - **Content:** Use descriptive destinations rather than relying on a long personalized URL; avoid carrying private example account details into a new template. - **Validate:** Check image-blocked rendering, link contrast, narrow-screen wrapping, and button focus. Interactive outcomes are not shown. 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.