# Design from Reference: Workable 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:** Workable - **Category:** Welcome Email - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ecad99df1bb8d66ef9a69c_1659677528981-5edba6c7bca2fa97138f4f49_screencapture-mail-google-mail-u-1-2020-06-06-16_22_09.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 restrained welcome email uses a white letter-like sheet, dark body text and muted teal branding. - **Tone:** The design is personal and text-led, with a CEO sign-off and one prominent account action rather than a promotional hero. ### Page composition - **Capture dimensions:** The source is 1307 × 996 image pixels. Measurements describe the image; email CSS scale and capture zoom are unverified. - **Sheet:** A centered white panel spans approximately x279–1029, about 750 pixels wide, within a pale gray outer background. - **Header:** The Workable logo occupies the upper-left corner, while an underlined browser-view link sits toward the upper right. - **Body:** A single left-aligned column contains greeting, account acknowledgement, explanatory paragraphs, a three-step numbered list, a specialist link and a two-line signature. - **Action placement:** A teal sign-in button sits near the bottom-left of the sheet after a large empty vertical interval. ### Information hierarchy - **Reading sequence:** The message begins with the greeting rather than a large headline; consistent body size encourages linear reading. - **Inline emphasis:** Underlined teal links identify account and setup steps, while the specialist invitation and brand in the signature use heavier weight. - **Primary action:** The isolated filled button gains prominence through color and separation from the body copy. ### Typography - **Family:** The body resembles a conventional Arial-style sans serif; its exact family is unverified. - **Body role:** Text is approximately 20 image pixels with roughly 32-pixel leading and regular weight, including the numbered list and signature. - **Utility role:** The browser-view link is smaller, approximately 16 pixels, with an underline. - **Button role:** The button label is approximately 18 pixels, bold and white; the logo remains a distinct branded graphic. ### Colors & surfaces - **Measured canvas:** The outer background is #EDEFF1; the content sheet is #FFFFFF. - **Measured accent:** Teal #37766A appears in the branding/action palette and provides the principal color contrast. - **Text relationship:** Dark charcoal body text has strong contrast on white; links retain visible underlines as well as teal coloring. ### Components - **Email sheet:** The rectangular white surface has square corners and no conspicuous border or shadow. - **Numbered steps:** Three indented items use native-looking numeric markers, teal underlined links and hanging continuation text on the third item. - **CTA:** The filled sign-in button is approximately 245 × 58 image pixels with a roughly 10-pixel corner radius and centered text. - **Signature:** Two simple lines close the message, with the brand portion bold, teal and underlined. ### Visual rhythm - **Insets:** The body begins about 24 pixels inside the white sheet, matching the logo and button left edge. - **Paragraph spacing:** Roughly 32–48-pixel pauses separate major text blocks; list lines use a tighter continuous rhythm. - **Closing space:** About 190 pixels of empty space separates the signature from the button, making the final action visually independent. ### Responsive - **Observed state:** The supplied image shows a centered desktop email; narrower email-client rendering is unverified. - **Recommended width:** Use a fluid email-safe container with a maximum width, reduce outer gutters on small screens and retain at least 20–24 pixels of inner padding. - **Recommended wrapping:** Let links and numbered steps wrap naturally; reduce the large pre-button spacer on short mobile screens while preserving a comfortable tap target. ### Adaptation guidance - **Preserve simplicity:** Keep the logo, readable letter body, meaningful inline links and single filled action as the core structure. - **Email implementation:** Prefer robust email-compatible layout and explicit line-height; test client handling of list indentation and button corners. - **Hierarchy control:** Avoid adding decorative cards or a large headline that would change the personal correspondence character. - **Accessibility:** Retain underlines, sufficient contrast and descriptive link text; use image alternatives for the brand mark. 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.