# Design from Reference: Slite Retention 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:** Slite - **Category:** Retention Email - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ecad731cef288ce803bae9_1659677236659-5eaf00daf728bb7eba3879eb_screencapture-mail-google-mail-u-1-2020-05-03-19_33_42.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 calm retention email using a light bordered panel, conversational copy and two large product screenshots. - **Focus:** Concrete knowledge/project examples lead to one blue return-to-product action. ### Page composition - **Capture:** The source measures 1303 × 1686 image pixels; both readable portions were inspected. CSS scale is unverified. - **Frame:** A roughly 744-pixel-wide white panel sits on an almost-white gray canvas with a fine border. - **Content column:** About 590 pixels wide, inset roughly 75 pixels from the panel edges. - **Sequence:** A pale Slite wordmark, greeting and introduction lead into two benefit statements, each followed by a large screenshot. - **Closing:** A centered Jump back in button sits below the second screenshot with generous bottom whitespace. ### Information hierarchy - **Introduction:** Personal greeting and a short return-oriented explanation establish the purpose. - **Benefit emphasis:** Bold lead phrases introduce centralizing knowledge and documenting projects, with the remainder of each line regular. - **Examples:** A handbook screenshot appears first; a project checklist/share-panel screenshot follows. - **Action:** The blue filled button is the only standalone CTA. ### Typography - **Family:** A conventional sans serif is visible; exact font identity is unverified. - **Body:** Approximately 20 image pixels with 28-pixel line height, medium gray and regular weight. - **Emphasis:** Benefit lead phrases are bold at body size, creating hierarchy without large headings. - **Action:** Around 18 pixels, bold and white; tiny screenshot text is part of the embedded product imagery. ### Colors & surfaces - **Measured palette:** ICC-aware sRGB sampling yields canvas #F9F9F9, white #FFFFFF, near-white #FDFDFD, action blue #5167EB and border #DDDDDD. - **Image tones:** Pale #F5F4F7/#FDFCFF appear within product captures; textured blue/cream surroundings frame the white application windows. - **Treatment:** The outer panel is nearly square-cornered, with no prominent shadow. The button uses a small radius around 3 pixels. ### Components - **Brand:** A large pale gray Slite wordmark aligns with the text column. - **Handbook image:** A white desktop document window shows a bold handbook title, short introduction and grouped linked sections with emoji. - **Project image:** A checklist document includes nested tasks and an open sharing popover with link/privacy controls. - **CTA:** A roughly 200 × 58-pixel blue rectangle centers beneath the images. ### Visual rhythm - **Spacing:** Large gaps around 60–80 pixels separate benefit sections, while introductory paragraphs use smaller intervals. - **Alignment:** Copy and screenshots share the same edges; the CTA centers within that column. - **Pacing:** Text remains short so the two screenshots carry most of the visual weight. ### Responsive - **Recommendation:** Use a fluid panel, reduce inner gutters on phones and scale screenshots proportionally. - **Recommendation:** Provide descriptive alternative text and linked full-size images rather than requiring tiny embedded labels to remain readable. No mobile rendering is shown. ### Adaptation guidance - **Preserve:** Retain two concrete use cases, bold benefit lead-ins and one clear return action. - **Implement:** Use email-safe typography and spacing, with a descriptive product-return link. - **Content:** Keep example documents generic and avoid copying captured personal greeting details. 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.