# Design from Reference: Melio Sign Up Flow Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Melio - **Category:** Verification Email - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbc13eb7ca13cf70095b2a_6acbc035436a6cc27afecffe_cms-ad5304eaaf98749d24e71310.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 - **Style:** Minimal verification email with a large centered code panel and violet brand. ### Page composition - **Canvas:** 1303 × 866 screenshot px. - **Layout:** Pale outer canvas, centered rounded white card, logo, two-line heading, instruction, gray code box, caution, and left-aligned sign-off. ### Information hierarchy - **Primary:** Confirm-email heading. - **Key information:** Four-digit code in separate pale box. - **Secondary:** Ignore-message warning and team sign-off. ### Typography - **Family:** Arial-like sans serif; exact family unverified. - **Heading:** Approximately 38px bold. - **Body:** Approximately 24px. - **Code:** Approximately 32px with wide tracking. - **Caution:** Approximately 16px bold. - **Precision:** Screenshot estimates. ### Colors & surfaces - **Outer:** #FAFAFA. - **Card:** #FFFFFF. - **Code box:** #EFEFEF. - **Text:** #212124. - **Brand violet:** #744DF6. - **Precision:** Flat sampled colors. ### Components - **Card:** Subtle rounding, no strong border. - **Code:** Centered gray rounded rectangle. - **No CTA:** User is instructed to enter code elsewhere. - **Sign-off:** Quiet text at lower left. ### Visual rhythm - **Whitespace:** Large gaps between heading, instructions, code, warning, and sign-off. - **Alignment:** Main content centered, closing left-aligned. ### Responsive - **Observed:** Email capture only. - **Recommendation:** Fluid width and generous padding; keep code clearly legible. ### Adaptation guidance - **Preserve:** Verification purpose, isolated code, and security context. - **Security:** Never reuse the reference code; insert intended dynamic value. - **Behavior:** Account activation not shown. 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.