← Previous12 / 23Next →

Reply Upgrading Flow

ReplySupercharge your sales team

Design with AI

Create a new design inspired by Reply Upgrading Flow, 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,139 words

# Design from Reference: Reply Upgrading Flow

Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.

## Reference

- **Product:** Reply
- **Category:** Billing
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/o/cf253ffea4b22d9c57be.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

- **Style:** Conventional settings interface with layered white upgrade dialogs over a gray-dimmed dashboard.
- **Character:** Thin rules, small corner radii and strong drop shadows emphasize a transactional confirmation flow.
- **Capture:** The image measures 1440 × 821 pixels. CSS estimates assume approximately 1:1 capture scale; browser scale and font identity are unverified.

### Page composition

- **Background:** A dark top navigation and left settings menu remain visible beneath the overlay.
- **Outer dialog:** A large white plan panel approximately 1098 × 602 pixels begins near x171, y110.
- **Outer header:** A back arrow and plan name sit left, with current-trial metadata toward the right.
- **Outer footer:** A thin divider separates the lower upgrade action area, with a green button aligned right.
- **Inner confirmation:** A smaller white modal approximately 650 × 280 pixels overlays the center, containing a title, centered question and two response controls.
- **Support:** A green circular chat launcher remains at the lower right.

### Information hierarchy

- **Immediate decision:** The inner confirmation is foregrounded through shadow and placement.
- **Confirmation text:** A centered sentence states the selected annual amount and asks whether to proceed.
- **Responses:** Yes is a filled blue button; No is a simple muted text action.
- **Plan context:** The outer dialog retains the selected team plan and current trial state behind the confirmation.
- **Action layers:** The green outer Upgrade control remains visible but subordinate to the foreground decision.
- **State scope:** No completed payment, successful upgrade or billing receipt is shown.

### Typography

- **Family:** A neutral sans-serif is visible; exact identity is unverified.
- **Outer plan title:** Approximately 24-pixel CSS size, regular weight.
- **Inner title:** Approximately 24 pixels, regular, in muted slate.
- **Question:** Approximately 18 pixels with 28-pixel line height, centered across two lines.
- **Buttons:** Approximately 14 pixels, regular-to-medium.
- **Metadata:** Small uppercase current-plan label around 10 pixels, with a larger value beneath.

### Colors & surfaces

- **Measured dialogs:** White #FFFFFF fills both panels.
- **Measured overlay appearance:** Gray #5D5D5D and #5B5C5C dominate the dimmed dashboard.
- **Measured top navigation:** Dark #232329 appears in the background header.
- **Text:** Near-black body copy contrasts with slate title and secondary controls.
- **Action roles:** Bright blue marks confirmation; green marks the outer upgrade route and support launcher.
- **Depth:** Broad gray shadows strongly separate the inner confirmation from the outer plan panel.
- **Boundaries:** Fine light-gray rules divide outer header/footer regions.

### Components

- **Outer panel:** Approximately 4-pixel corner rounding, large white body and a prominent drop shadow.
- **Back control:** A small left arrow precedes the selected plan name.
- **Current-plan block:** Small uppercase label and trial value form a compact right-side metadata group.
- **Confirmation modal:** Approximately 650 pixels wide with small corners and generous internal whitespace.
- **Yes control:** Approximately 110 × 40 pixels, blue-filled with white text.
- **No control:** A small text action sits to the left of Yes.
- **Dismissal icons:** Gray X controls are visible near the upper-right edges of the layered dialog regions.
- **Outer upgrade:** Approximately 165 × 40 pixels, green-filled and right aligned.
- **State scope:** The visible amount is captured interface content, not a verified current price.

### Visual rhythm

- **Layered centering:** Both dialogs align around the viewport center, with the smaller panel offset lower than the outer header.
- **Whitespace:** Large gaps separate the inner title, question and action row.
- **Action alignment:** Response controls sit along the lower-right portion of the inner panel.
- **Outer structure:** Horizontal rules create clear header, body and footer zones.
- **Background suppression:** The scrim reduces dashboard detail while preserving the source context.

### Responsive

- **Recommendation — layers:** Avoid cramped overlapping panels on small screens; retain a clear single foreground decision.
- **Recommendation — width:** Make dialogs fluid with safe gutters and wrapping text.
- **Recommendation — actions:** Keep both confirmation responses visible and comfortably tappable.
- **Recommendation — height:** Allow scrolling without hiding title or dismissal.
- **Recommendation — focus:** Manage focus across nested dialogs and restore it correctly. No mobile state is evidenced.

### Adaptation guidance

- **Preserve explicit confirmation:** State the selected commitment before a final affirmative action.
- **Keep context available:** Retain plan identity and current subscription state without competing with the decision.
- **Differentiate actions:** Maintain a clear visual distinction between cancellation and confirmation.
- **Simplify layering where needed:** Use a deliberate modal stack with clear focus ownership.
- **Treat prices as data:** Keep captured amounts separate from reusable layout and current commercial configuration.
- **Define outcomes separately:** Payment processing, failure and successful-upgrade feedback are outside the 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 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.