← Previous9 / 24Next →

Miro Checkout

MiroVisual Collaboration Software‎

Design with AI

Create a new design inspired by Miro Checkout, 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 865 words

# Design from Reference: Miro Checkout

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

## Reference

- **Product:** Miro
- **Category:** Checkout
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/o/bcf7feaf331641a2b950.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 white checkout modal over a dimmed board dashboard, with a structured payment form and a narrow benefits column.
- **Evidence scale:** Original 1440 × 836 pixels. Dimensions are image-pixel estimates; sampled background grays include the scrim.

### Page composition

- **Modal:** Approximately 842 × 756 px centered white panel with rounded corners.
- **Left:** Roughly 520 px form region contains title, team size, billing frequency, card details, country/postal fields and promo link.
- **Right:** Approximately 320 px benefits column, divided by a thin vertical rule.
- **Bottom:** Full-width footer row contains blue Purchase button and total summary.
- **Background:** Board navigation, thumbnails and account controls remain dimly visible.

### Information hierarchy

- **Title:** Bold team-plan heading leads.
- **Billing:** Yearly radio is selected and accompanied by a small savings badge; monthly is unselected, with prices aligned right.
- **Payment:** Card field and billing information have bold section labels.
- **Benefits:** Eleven checkmarked features form a compact list.
- **Total:** Bold amount sits beside Purchase, with smaller calculation below.

### Typography

- **Title:** Unverified sans-serif around 24 px bold, 32 px line height.
- **Section labels:** Approximately 16 px semibold.
- **Body/benefits:** Around 14 px regular, 20–22 px line height.
- **Price/total:** Approximately 14–16 px, total bold.
- **Fine print:** Around 12 px muted text with 20 px line height.

### Colors & surfaces

- **Foreground:** White #FFFFFF.
- **Scrim:** Gray #787C88 and #7C808B are composited background tones.
- **Primary ink:** Deep navy #070938.
- **Accent:** Blue #4361FB marks selected radio, links and Purchase.
- **Secondary:** Muted blue-gray #3A458A family and pale control borders.

### Components

- **Team selector:** Approximately 200 × 36 px white outlined dropdown.
- **Billing choices:** Two radio rows, selected blue dot and pale savings pill.
- **Card field:** Full-width compact outlined row with card icon, number placeholder and expiry/security-code placeholders.
- **Billing row:** Two equal outlined fields for country and postal code.
- **Promo link:** Blue underlined text, unboxed.
- **Benefits:** Gray checks beside wrapped text; divided fine-print block below.
- **Purchase footer:** Thin top divider, approximately 120 × 48 px blue button and adjacent total/calculation.
- **Modal shell:** Approximately 16 px radius and soft shadow.

### Visual rhythm

- **Form groups:** Around 36–48 px separates team, billing type, card and billing details.
- **Column padding:** Approximately 48 px form inset and 32 px benefits inset.
- **List rhythm:** Benefits use regular roughly 32 px pitch.
- **Footer:** Stable bottom action row distinguishes commitment from form entry.

### Responsive

- **Observed limit:** Desktop checkout only; mobile behavior is unverified.
- **Recommendation:** Stack benefits below form and collapse paired billing fields when needed.
- **Viewport handling:** Allow modal scrolling while retaining a clear total/action relationship.

### Adaptation guidance

- **Retain:** Keep plan selection, payment fields, benefits and total clearly separated.
- **Implement:** Use restrained blue selection/action emphasis and explicit billing labels.
- **Verify:** Confirm fonts, scale, validation and current billing terms separately; no payment or purchase was performed.

## 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.