# Design from Reference: Copperx Add Crypto Address Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Copperx - **Category:** Empty - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad8a2d05a3f53c0a74c7a_6acad8178b7c605a8f57fd79_cms-65c7992bfd6ed7c08fea7b0a.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:** Payment-settings dashboard with a focused address-entry modal over a dimmed background. ### Page composition - **Capture:** 2880 × 1630 screenshot pixels; estimated 2× CSS scale. - **Structure:** Sidebar and payment-method list behind a centered Add Goerli Testnet Address dialog; supporting address guidance remains visible at right. ### Information hierarchy - **Priority:** Modal title identifies the chain, followed by address name and wallet address fields. Cancel and blue Add address sit in the footer. ### Typography - **Family:** Sans serif; exact family unverified. - **Estimated CSS sizes:** Modal title 16px, labels/body 14px and helper text 12px. ### Colors & surfaces - **Measured palette:** Dimmed background #B2B2B2 with #B1B1B1/#B0B0B0/#AFAFAF variations, modal white #FFFFFF and pale body #F5F9FC. - **Accents:** Blue-violet primary action, blue chain icon and green checklist markers behind the overlay. ### Components - **Elements:** Chain icon/title, two outlined inputs, chain-specific helper, separated footer actions and soft modal shadow. - **Estimated geometry:** Dialog approximately 460px wide, 12px radius, 20px padding and 34px inputs/buttons. ### Visual rhythm - **Spacing:** Short form groups use regular vertical gaps; modal header/body/footer bands clearly organize the task. ### Responsive - **Suggested adaptation:** Fit dialog within 20px gutters and allow wallet strings to scroll within the input. Mobile behavior is unverified. ### Adaptation guidance - **Transfer:** Preserve explicit network identification and address guidance. Treat the named test network as reference content and use the actual supported network. 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.