# Design from Reference: Moss Add a payment card Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Moss - **Category:** Billing - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acf525faf1af195aa52addd_h7TxFVDqaP3VY7AKtPZ5pphCE-7aB85y7j-gWbT4jpQ.png 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 payment-method modal with subdued borders and soft mint action emphasis. ### Page composition - **Canvas:** 2880 × 1673 screenshot pixels; CSS estimates assume approximately 2× scale. - **Structure:** Centered modal over a heavily dimmed/blurred billing workspace. Card entry is expanded; US bank account appears as a collapsed alternative. ### Information hierarchy - **Priority:** Add payment method title, brief reassurance, card details, country and small authorization copy; Cancel/Save in separated footer. ### Typography - **Family:** Neutral sans-serif; exact font is unverified. - **Scale:** Estimated CSS title 24px bold, labels/body 14–16px and helper 14px. ### Colors & surfaces - **Sampled palette:** Dark backdrop #040404; form surfaces #111111; modal #0A0A0A; subtle dark variants #070707 and #050505. - **Accents:** Mint labels/lock and Save button; white primary text, medium-gray helper text. ### Components - **Fields:** Full card-number row with network marks, paired expiry/security fields and country dropdown. - **Geometry:** Estimated 16px modal radius, 10px field radii, 1px gray borders and 44px input heights. - **Footer:** Plain Cancel left and compact mint Save right; no real card details are entered. ### Visual rhythm - **Spacing:** Compact 12–16px field gaps with 24–32px modal padding. ### Responsive - **Guidance:** Mobile is not shown. Use full-width modal and keep paired fields readable or stack them. ### Adaptation guidance - **Transfer:** Preserve secure-payment hierarchy and payment-method alternatives. Use approved payment controls and target copy. 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.