Prompt 999 words Copy
# Design from Reference: Checkout.com Top Up Account
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** Checkout.com
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/v/d7bf24593d608e984554-1600.webp)
- **Source:** https://dashboard.sandbox.checkout.com/funds/balances/ca_bmvit2h66o2ulevph5mea2dxqu/topups
Analyze the attached screenshot first. If no image is attached, open the screenshot link; if neither is accessible, ask for it rather than guessing.
## Visual Design Context
### Overall aesthetic
- **Style:** Minimal financial workflow with black typography, white surfaces and a focused blue selection/action accent.
- **Character:** Open form layout and generous whitespace keep account selection straightforward.
### Page composition
- **Canvas:** Source 2880 × 1648 pixels; geometry uses the 1400 × 801 inspection rendering. Approximate 2× source-to-CSS capture is plausible but unverified.
- **Header:** Workspace label and utilities occupy the first row; global navigation beneath has Funds selected with a blue underline.
- **Subnavigation:** Balances is highlighted in a pale blue chip, followed by two quiet text tabs.
- **Form:** A roughly 654px-wide column begins around x373, y194. Page introduction, currency account field and two balance-choice cards follow vertically.
- **Bottom bar:** A full-width top rule separates a bottom action row with Back left and blue Continue right, aligned to a wider centered region.
### Information hierarchy
- **Task:** Top up an account is the primary heading, followed by two-line explanatory copy.
- **Account selection:** Currency Account subsection has a short helper sentence, external field label and a muted account selector.
- **Balance choice:** A second subsection explains the choice, then offers Available balance and Operational balance cards.
- **Selection:** Available balance has a blue outline; the alternate card has a gray outline.
- **Progression:** Continue is the primary action. No transfer amount or payment confirmation appears at this stage.
### Typography
- **Page heading:** Approximately 28px semibold sans serif with 34px line height.
- **Section/card titles:** Around 20px medium-to-semibold, 25px line height.
- **Body:** Approximately 14px regular with 23px line height.
- **Navigation and actions:** Around 14–16px; field label is bold. Exact font family is unverified.
### Colors & surfaces
- **Measured base:** #FFFFFF white dominates, with #000000 dark text.
- **Measured neutrals:** #F4F2F2 field fill, #DFDDDD outlines and #999595 muted field text.
- **Measured blue:** #006BFF active navigation and primary action; #CAE5FF supplies pale selected-tab fill.
- **Secondary text:** #5C5B60 appears among muted gray text pixels.
- **Depth:** Flat surfaces, thin borders and no pronounced card shadows.
### Components
- **Account selector:** Approximately 654 × 32px, muted neutral fill, thin border, small radius and chevron control at right. Actual disabled semantics are unverified.
- **Choice cards:** Roughly 315 × 150px, about 16px radius, 24px padding and approximately 24px gap.
- **Selected card:** Thin vivid blue outline without a prominent filled background or visible radio circle.
- **Bottom actions:** Compact gray Back control with left chevron and blue Continue button, both around 30px tall.
- **Header utilities:** Small help icon and pale-blue circular avatar.
- **States:** Selected balance option is visible; dropdown contents, validation and subsequent transfer details are not shown.
### Visual rhythm
- **Form spacing:** Around 40px separates page copy from the first subsection; around 40px separates the selector from the next subsection.
- **Field cadence:** Label sits about 9px above the field; helper sentences follow headings with roughly 8–10px gaps.
- **Choice text:** Large gap separates each card title from its two-line explanation.
- **Alignment:** All form text and cards share a common left edge; the bottom bar visually brackets the workflow.
### Responsive
- **Observed scope:** Desktop only; mobile behavior is unverified.
- **Recommended form:** Use a fluid maximum-width column and 20–24px viewport gutters.
- **Recommended choices:** Stack the two cards at narrow widths while retaining selected outline and readable descriptions.
- **Recommended navigation:** Condense global navigation and keep Back/Continue reachable without covering form content.
### Adaptation guidance
- **Preserve:** Clear task introduction, externally labeled account selector and descriptive two-option balance selection.
- **Data:** Use supplied account identifiers and balance descriptions; avoid exposing unnecessary account details in shared previews.
- **Interaction:** Implement semantic selection controls with keyboard support and visible focus.
- **Complete states:** Define account-loading, unavailable-account, validation and next-step behavior explicitly; they are not established by this screenshot.
## Content
**Instructions:**
Generate realistic example content that fits the selected design reference.
Create appropriate headlines, descriptions, labels, buttons, and supporting copy based on the type of interface being designed.
If a product or business description is provided, use it to guide the content.
Otherwise, invent a plausible fictional SaaS product appropriate for the reference.
Keep the content concise, coherent, and visually balanced.
Do not present fictional statistics, customer names, or testimonials as verified facts.
## Design Direction
**Instructions:**
Use the reference screenshot as the main source of visual inspiration rather than a strict layout template.
Preserve its most distinctive design characteristics, such as typography, visual rhythm, color relationships, component treatments, and overall aesthetic.
Feel free to modify section arrangements, proportions, spacing, and individual components to better suit my content.
Introduce original design decisions where they improve usability, composition, or brand consistency.
The result should clearly reflect the reference's visual language without looking like a direct reproduction.
Follow the visual identity of the reference design.
Use its typography, color palette, component styling, and overall aesthetic as the primary design direction.
Do not introduce an unrelated visual identity.
## Output
**Instructions:**
Generate a high-fidelity visual mockup of the requested interface.
Present the design as a polished, realistic website or product UI screenshot.
Prioritize visual composition, typography, spacing, colors, alignment, and component details.
Use the available image-generation or visual-design capabilities.
Do not replace the mockup with source code, a written design specification, or a textual description.
If direct visual generation is unavailable, clearly explain the limitation.
## Constraints
- Use the actual screenshot as the primary visual reference.
- Preserve essential messaging and factual accuracy.
- Prioritize visual quality and consistency.
- Do not invent unsupported product claims.
- Adapt structure and copy length for visual balance. Reference image Attach it to your message: assistants can’t open image links. Open in ChatGPT ↗ Open in Claude ↗
Build it in Lovable ↗ v0 ↗ Figma Make ↗
Opening a tool copies the screenshot so you can paste it with your prompt.
SaaSFrame
