# Design from Reference: Current Product Hunt 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:** Current - **Category:** Product Hunt Emails - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb6457b206c0d3f8f06499_6acb62a581513cf526d0a86e_cms-089b621aad268e8c0c795f1c.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:** Personal launch-announcement email with bold headline and bright product artwork. ### Page composition - **Canvas:** 2502 × 2372 screenshot px. Narrow centered column: logo, announcement heading, personal greeting, paragraphs, violet pill action, lime product banner, divider, and small footer. ### Information hierarchy - **Priority:** Launch headline and Product Hunt request precede a product preview; one prominent action focuses the message. ### Typography - **Scale:** Capture-to-CSS scale unverified. At an estimated 640 px email width, heading would be about 56 px and body 16 px. Sans serif family unverified. ### Colors & surfaces - **Palette:** Sampled sRGB #FFFFFF, lime #DFFF5D, dark #1E1E1E, violet #2019EA, and divider #DEDEDE. ### Components - **Details:** Solid pill CTA with arrow, large rectangular lime graphic containing product screenshot and display text, plain blue social links, and tiny unsubscribe line. ### Visual rhythm - **Spacing:** Approximately 32 px desktop paragraph gaps and 48 px separation around the product banner. ### Responsive - **Adaptation:** Mobile is not shown. Reduce headline size and scale banner to the email width. ### Adaptation guidance - **Transfer:** Preserve personal founder voice, one launch action, and product proof. Replace release claims and dates with verified content. 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.