# Design from Reference: Meiro Verification Email Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Meiro - **Category:** Verification Email - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acadbe1d05a3f53c0a86237_6acadb28701e38c794898e6f_cms-2e8be0050ce64579269b2346.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:** Bold dark verification email with a pastel gradient header and electric-lime confirmation action. ### Page composition - **Canvas:** 2186 × 2430 screenshot px; email CSS scale unverified. - **Structure:** Centered rounded card on near-black surround; gradient brand/banner header; personal greeting and instructions; wide code panel; lime CTA; supporting copy, divider and sign-off. ### Information hierarchy - **Priority:** White staggered headline blocks create the opening; verification code and lime button dominate the functional content. ### Typography - **Family:** Modern sans serif, exact font unverified. - **Scale:** Suggested CSS adaptation: banner 36–40 px, greeting 28 px, body 18 px with approximately 26 px leading and code 32 px bold; estimates based on screenshot proportions. ### Colors & surfaces - **Sampled palette:** Surround #0E0F0F; card #181B1B; code panel #202424; white #FFFFFF; light text #F3F4FA; lime #CAFF00; header pink #F6D2F3. ### Components - **Header:** Lime/peach/pink/lavender gradient with black logo and two offset white headline rectangles. - **Controls:** Large rounded code block, left-aligned lime Confirm account button and purple underlined support links. - **Geometry:** Suggested card radius 28–32 CSS px, body padding 32 px and button radius 16 px; no heavy borders. ### Visual rhythm - **Spacing:** Large gaps separate header, greeting, code and action; body paragraphs remain left aligned within a single column. ### Responsive - **Observed:** Email screenshot only. - **Adaptation:** Use fluid single column and 20–24 px mobile padding, keep code easy to select and confirmation button touch-sized. ### Adaptation guidance - **Preserve:** Dark/pastel contrast, standout code and lime action. - **Replace:** Use fresh verification data and approved contact details; never reuse reference code or identity. 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.