# Design from Reference: Customer.io Free Trial Email 2 Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Customer.io - **Category:** Free Trial Emails - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6aca27e7aca7079066e8e7d8_6aca2707e91902f29e9de2aa_cms-0e0a7e502957b9980eebbefa.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, text-led lifecycle email with pale lime panels, deep teal branding and a friendly, direct tone. - **Visual treatment:** Flat rectangular regions replace cards, photography and decoration; a single dark capsule button supplies the main emphasis. ### Page composition - **Capture scale:** The original image measures 2489 × 1896 pixels. Measurements below refer to the 1400-pixel-wide inspection rendition, not verified CSS dimensions. - **Header:** A centered email column spans approximately x362–1037, about 675 inspection pixels. The wordmark sits left and an underlined browser-view link right, above a generous gap. - **Main region:** A roughly 495-pixel-high lime block has a dark teal top rule and about 45 pixels of horizontal inset. Heading, deadline paragraph, three-item list, upgrade explanation and CTA align left. - **Lower regions:** A white reply-and-signoff block follows directly. The lime footer returns beneath it, combining brand symbol, social icons and small administrative copy. ### Information hierarchy - **Primary message:** The large question-style heading leads, followed by a bold deadline embedded in regular body copy. - **Supporting detail:** Three square bullets enumerate channels; a separate paragraph introduces the action. - **Secondary route:** The white region emphasizes the trial-extension sentence in bold while leaving the signoff regular. - **Footer priority:** Small preference links, unsubscribe copy and address remain below the logo-and-social row. ### Typography - **Family:** The content uses a neutral sans serif; the exact font identity is unverified. - **Heading:** Approximately 34 inspection pixels, medium weight, compact tracking and roughly 41-pixel line height. - **Body:** Approximately 18 pixels with 27-pixel line height; bold inline passages are visibly heavier without changing size. - **Utilities:** Header and footer copy are around 14 pixels. The CTA uses about 17 pixels, medium weight and slightly open tracking. ### Colors & surfaces - **Measured palette:** Sampled image colors include warm outer background #FBF9F8, lime #E4FFCD and white #FFFFFF. - **Brand contrast:** Deep teal #0C353B and #0E464D appear in branding and dark elements; body text includes near-black #151515. - **Links:** Footer links use a brighter green-teal and underlining. Exact link color is not established by the dominant-color samples. - **Depth:** Broad color blocks provide separation; no conspicuous shadows or gradients are visible. ### Components - **Primary CTA:** The dark teal button is approximately 171 × 48 inspection pixels, with a full capsule radius and centered pale text. - **Bullet list:** Small square markers sit slightly inside the text column; rows are spaced around 34 pixels apart. - **Section framing:** The top teal rule is about 8 pixels thick; adjoining blocks have square outer corners. - **Footer controls:** Four small dark social glyphs align in a right-hand row opposite the brand symbol. Administrative links remain inline and underlined. ### Visual rhythm - **Alignment:** A consistent left inset connects heading, paragraphs, button, lower note and footer copy. - **Spacing:** Paragraph-to-paragraph gaps are around 20–30 inspection pixels; section padding is approximately 40–60 pixels. - **Density:** The main panel is comfortably spaced, the white note compact, and the footer uses smaller, denser lines. ### Responsive - **Evidence:** Only one captured layout is visible; mobile behavior and source CSS are unverified. - **Recommended reflow:** Use a fluid email column with reduced horizontal padding on narrow screens, natural text wrapping and a CTA that retains a comfortable tap target. - **Footer recommendation:** Allow social icons and administrative text to wrap without shrinking type or forcing horizontal scrolling. ### Adaptation guidance - **Preserve:** Keep the lime–white–lime region sequence, teal top rule, left-aligned message stack and single capsule CTA. - **Implement:** Translate inspection measurements into a responsive email grid only after establishing the intended capture scale; do not treat the 2489-pixel source width as a browser viewport. - **Content emphasis:** Reserve bold for the deadline and reassuring extension statement, maintaining the distinction between the main action and reply-based alternative. 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.