# Design from Reference: Meiro Verification 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 - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acadbe1d05a3f53c0a86213_6acadb28afcaef5001d5d88d_cms-93c00157de8da9e038cab25d.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:** Dark account-verification screen with a compact rounded card and a vivid lime confirmation action. ### Page composition - **Capture:** 2880 × 1630 screenshot pixels; estimated 2× CSS scale. - **Structure:** Centered wordmark above a narrow verification card; title, explanation, activation-code input, Apply button and resend link. Legal links sit outside below. ### Information hierarchy - **Priority:** Check your inbox heading explains the state, code entry and lime Apply button form the main task, resend is secondary. ### Typography - **Family:** Rounded sans serif; exact family unverified. - **Estimated CSS sizes:** Heading 24px, explanatory text 16px with 22px line height, control labels 16px and legal links 14px. ### Colors & surfaces - **Measured palette:** Canvas #0E0F0F, card #171818, input #202222, lime action #A6D11E, white #FFFFFF and secondary text #CDD1D1. ### Components - **Elements:** Single activation-code field, full-width lime button, Get a new code link with arrow and underlined legal links. - **Estimated geometry:** Card approximately 520px wide, 28px corner radius, 40px padding, input/button 50px high and 16px radii. ### Visual rhythm - **Spacing:** Large dark margins isolate the card; regular short gaps connect explanation, entry and confirmation while resend receives extra separation. ### Responsive - **Suggested adaptation:** Fit the card within 20–24px mobile gutters and keep code entry and primary action full width. Mobile behavior is not shown. ### Adaptation guidance - **Transfer:** Preserve the clear pending-verification state, one input and obvious resend route. Use real validation and resend feedback. 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.