Abstract Free Trial Emails

# Design from Reference: Abstract Free Trial 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:** Abstract - **Category:** Free Trial Emails - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbc93f1790037d3e05911f_6acbc6534f59d5c9438a122c_cms-a8c32142ded7a639c9bcbc06.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 plain personal trial-reminder email displayed inside an email-client reading view, with conventional blue links and a branded signature. - **Character:** Brief and conversational, without a marketing card, hero graphic, or filled call-to-action button. ### Page composition - **Capture and scale:** The screenshot measures 1119 × 435 pixels. Approximate dimensions below refer to screenshot pixels; CSS scale is unverified. - **Client chrome:** A subject line spans the upper area. Sender avatar/name/address and recipient metadata sit below left, while timestamp and message utility icons align right. - **Message:** The body begins around 73 px from the left edge with a greeting, one long trial-expiry sentence containing three inline links, and a compact personal closing. - **Signature:** A bold sender name, role, meeting link, large Abstract logo, and two address lines form the lower-left signature block. ### Information hierarchy - **Primary message:** The subject communicates remaining trial time. The body immediately follows with a short question about the recipient's needs. - **Links:** Three blue underlined phrases within the sentence provide contextual paths; a separate meeting-booking link appears in the signature. - **Brand:** The signature logo supplies the largest brand element while remaining below the actual message. ### Typography - **Family:** A conventional Arial-like sans serif is visible; exact family identity is unverified. - **Subject:** Approximately 23–24 px regular weight. - **Body:** Approximately 13–14 px with 20 px line-height. Sender metadata uses similar sizing, with bold sender name and lighter address. - **Signature:** The sender name is bold at body size. The black logo graphic is substantially larger than the surrounding text. ### Colors & surfaces - **Foundation:** Sampled sRGB #FFFFFF covers the reading surface. - **Text:** Sampled #222222, #191A1B, and #202124 define the dark text system, with #767676 supporting utility details. - **Links:** Sampled blue #1155CC provides conventional underlined link emphasis. No additional brand-color surface is present. ### Components - **Email body:** A simple unboxed text flow with paragraph breaks and no border, shadow, radius, or background panel. - **Signature lockup:** A black rounded-square symbol and bold black Abstract wordmark sit above the address. - **Client controls:** Star, reply, overflow, print, and open-window icons belong to the surrounding email client rather than the authored email design. ### Visual rhythm - **Spacing:** Short paragraphs are separated by roughly 20–24 px. Signature lines use tighter spacing. - **Alignment:** All authored content shares one left edge; the client avatar sits in a separate gutter. - **Density:** The message occupies only the upper-left portion of the wide reading surface, preserving the feel of a personal email. ### Responsive - **Observed state:** Only a desktop email-client view is shown. - **Recommended email behavior:** Use natural text wrapping on mobile, keep inline links underlined, and scale the signature logo within the available width. - **Content boundary:** Do not reproduce email-client controls as part of a reusable email template. ### Adaptation guidance - **Preserve:** Retain the concise personal reminder, contextual inline links, and understated branded signature. - **Adapt:** Use accurate trial timing, genuine recipient needs, and a real sender/meeting destination. - **Avoid:** Do not copy personal contact information, office address, or client chrome from the reference. 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.