# Design from Reference: Station Onboarding 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:** Station - **Category:** Onboarding Email - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbbf744d71070f5fd4146f_6acbbe9c6b6ddc4c143c537b_cms-1ea960a5261b24289a3310d9.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:** Friendly educational email framed by cyan-to-deep-blue gradient brand bands. ### Page composition - **Canvas:** 1307 × 1981 screenshot px. - **Structure:** Centered brand header; narrow letter column; large cropped app demonstration; italic caption; support links/sign-off; astronaut accent; three-column gradient footer. ### Information hierarchy - **Priority:** Bold inline phrases highlight the taught feature. Product image anchors the explanation; FAQ/community links are secondary. ### Typography - **Family:** Familiar sans serif, exact font unverified. - **Scale:** Estimated screenshot body 20 px, 30 px leading, large wordmark approximately 60 px; captions italic and emphasis bold. ### Colors & surfaces - **Sampled palette:** White #FFFFFF, body gray #818181, product navy #2A517E, blue #2035BB/#2036BD and lighter blue #6698C8. ### Components - **Elements:** Full-width gradient header/footer, left-aligned paragraphs, centered tall product crop and small astronaut illustration at lower right. - **Footer:** Uppercase pale headings, white links/social icons and centered unsubscribe. No large filled body CTA. ### Visual rhythm - **Spacing:** Approximately 40–60 screenshot px paragraph/image gaps; broad margins keep the letter readable. ### Responsive - **Observed:** Email screenshot only. - **Adaptation:** Use fluid reading column, proportional product crop and stack footer columns on small screens. ### Adaptation guidance - **Preserve:** Gradient framing, instructional screenshot and conversational letter. - **Replace:** Use current feature instructions and original imagery; do not reproduce reference user or channel 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.