Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Wise Add Money
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** Wise
- **Category:** Add & Edit
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/662fbefe0fbd8afa1d16d73e_3-_QvSzxQxuzahO-7oatOLlPfTi4-XvW0vtf55K3nO0.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:** Focused financial flow with a white canvas, dark-green branding, quiet fee disclosure and a vivid green progression action.
- **Capture scale:** Source 2880 ร 1630px. Dimensions estimate a 1440px-wide CSS viewport at 2ร capture scale.
### Page composition
- **Header:** Wise branding sits left of a three-stage Amount/Verification/Payment progress line; profile and close controls sit right.
- **Main column:** A centered approximately 480px-wide stack contains Add money heading, amount field, payment method, fee breakdown and Continue.
- **Whitespace:** Broad empty margins isolate the transaction details; no sidebar, promotional content or footer is visible.
### Information hierarchy
- **Amount:** The large amount input shows a value and EUR selector, with a small label above.
- **Funding source:** A pale payment-method row identifies a debit card and offers Change.
- **Costs:** A bordered summary lists payment currency, debit-card fee, platform fee, total fees and final payable amount.
- **Progression:** Continue is the only prominent completion action; Amount is the active header step.
### Typography
- **Family:** Clean sans-serif; exact font identity is unverified.
- **Roles:** Estimated heading 26px semibold, amount/currency 22px medium, labels/body 16px and progress text 14px.
- **Emphasis:** Total fees and final payable amount are bold; the final row is separated by a fine rule.
### Colors & surfaces
- **Sampled palette:** ICC-aware sRGB samples include white #FFFFFF, pale green-gray #EBEFEC, bright green #87EA5C, neutral border #E2E2E1, dark #0E0F0C and muted green-gray #DAE0D8.
- **Accent roles:** Dark green identifies brand, active progress and currency controls. Bright green is concentrated in Continue.
- **Contrast:** Payment-source surface is tinted, while the fee summary remains white with a thin neutral outline.
### Components
- **Amount control:** Approximately 480 ร 72px, rounded 10px corners, thin gray outline, large left value and right currency/flag/chevron group.
- **Payment method:** Approximately 480 ร 80px pale rounded rectangle with circular card-network icon, masked card detail and small Change pill.
- **Fee summary:** Approximately 480 ร 225px with 16px corners, around 16px padding and right-aligned currency amounts.
- **Continue:** Full-width green pill approximately 48px high, centered dark label.
- **Header utilities:** Pale circular profile button and separate dark-green X; progress uses a fine pale line and a small active dot.
### Visual rhythm
- **Spacing:** Labels sit close to controls; around 24โ28px separates amount and payment source. A larger gap precedes Continue.
- **Alignment:** Input, funding row, summary and action share one width. Fee labels and amounts form stable left/right columns.
### Responsive
- **Recommended adaptation:** Only desktop is observed. Make the column fluid within 16โ24px margins and simplify progress labels if needed.
- **Readability:** Preserve currency units, fee labels and total emphasis; let payment-method text wrap without crowding Change.
### Adaptation guidance
- **Preserve:** Keep amount, funding source and transparent cost breakdown in a clear sequence before progression.
- **Adapt:** Use live amounts, actual fees and supported payment methods. Never reuse the displayed card details or treat screenshot pricing as current product rules.
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.