← Previous18 / 33Next →

Copperx Payment Links Table

CopperxPayment APIs for Web3 businesses

Design with AI

Create a new design inspired by Copperx Payment Links Table, with your own content.

1Content

2Fidelity to the reference

Keeps its visual language, rearranges freely around your content.

3Your brand Optional

Use the reference style

Brand nameColorsFontsGuidelines

4Output

Prompt 1,027 words

# Design from Reference: Copperx Payment Links Table

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:** Table
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/v/7c6a465474c94c852c8f-1600.webp)

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

- **Character:** A minimal payment-link dashboard with white surfaces, blue navigation/action emphasis and a compact ruled table. Green badges and token icons add focused semantic color.
- **Image basis:** Source dimensions are 2880 × 1630, inspected at approximately 1400 × 792. Sizes below are inspection-pixel estimates; CSS scale and font identity are unverified.

### Page composition

- **Top bar:** A roughly 55 px header places brand/beta left and test-mode, support and account controls right.
- **Sidebar:** A roughly 232 px navigation region contains icon/text destinations and a lower promotional card with a mainnet link beneath.
- **Main area:** Content begins around x256 with a page title and upper-right creation button.
- **Summary/table:** Three horizontal summary tabs precede a seven-column table with three visible rows. The lower canvas is empty.

### Information hierarchy

- **Task:** The page title and blue Create payment link action establish the main workflow.
- **Filtering:** Summary cards show all, active and deactivated counts. Active has a stronger blue outline.
- **Rows:** Truncated URL, title, creation time, amount/token and green status are the principal values; tags are blank and ellipses provide further actions.
- **Observed state:** The dashboard is in test mode, all three rows show Active, and no menu or creation dialog is open.

### Typography

- **Title:** Approximately 24 px bold sans-serif.
- **Navigation/controls:** Around 14 px, with selected blue navigation text semibold.
- **Table:** Headers and row values are approximately 14 px regular; summary counts are slightly heavier.
- **Utility:** Small badges and promotional copy use approximately 12–14 px. Typeface identity and exact CSS metrics are unverified.

### Colors & surfaces

- **Measured base:** White #FFFFFF dominates. Pale #E8EDF6 and #D4DBE6 appear among boundaries and muted details.
- **Measured accent:** Blue #4663F6 supplies the creation action, active summary outline and selected navigation.
- **Measured text:** Dark slate #444F62 and muted #687386 establish reading hierarchy.
- **Measured status:** Pale green #C1FCD6 supports Active badges. Token icons use distinct teal, lavender and blue; the test-mode badge is pale orange.

### Components

- **Summary cards:** Three approximately 365 × 62 px outlined panels have around 8 px corners, a count above a label and consistent padding.
- **Table:** Thin pale horizontal rules divide an approximately 1112 px wide region. Rows are around 55 px high, with aligned text and small token icons.
- **URLs:** Long values truncate with an ellipsis and a small adjacent clipboard icon; unique link tokens are not reproduced.
- **Status badges:** Small green rectangles with modest corners contain explicit Active text.
- **Create action:** Approximately 171 × 34 px, blue filled, around 9 px corners and a leading plus.
- **Promotion:** A roughly 196 × 233 px outlined card uses soft corners, a close control, currency artwork, short copy and a small outlined early-access action.
- **States:** Active filter is selected; no focus, hover or copied-link feedback is shown.

### Visual rhythm

- **Alignment:** Title, summary cards and table share a common left edge.
- **Density:** Compact top content contrasts with broad empty space below the three rows.
- **Consistency:** Equal summary widths, repeated row heights and aligned amount/status columns make scanning straightforward.
- **Color:** Small status/token accents differentiate data while leaving the main surface neutral.

### Responsive

- **Evidence limit:** Only desktop is observed.
- **Recommended summaries:** Wrap or stack summary tabs with clear selected-state text.
- **Recommended table:** Keep title, amount and status prominent; use safe horizontal scrolling for other columns.
- **Recommended navigation:** Collapse sidebar destinations and move promotion below core content on narrow screens.
- **Recommended controls:** Maintain usable copy/ellipsis targets and accessible creation access.

### Adaptation guidance

- **Preserve:** Keep explicit filter counts, concise row structure, token symbols and text status badges.
- **Build:** Reuse summary-filter, payment-link-row and amount-with-token components.
- **State design:** Add empty, deactivated, copied and creation states explicitly rather than inferring them from the active list.
- **Validate:** Confirm font metrics, truncation, keyboard row actions and responsive column priorities.

## 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 imageAttach it to your message: assistants can’t open image links.

Build it in

Opening a tool copies the screenshot so you can paste it with your prompt.