← Previous23 / 23

Duffel Signup

DuffelThe complete toolkit for selling travel online.

Design with AI

Create a new design inspired by Duffel Signup, 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,115 words

# Design from Reference: Duffel Signup

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

## Reference

- **Product:** Duffel
- **Category:** Sign Up
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/v/c1ccf0c8bd3f257dea53-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 clean signup page splits white benefit messaging from a pastel blue/teal gradient form background, with dark-plum text and actions.
- **Evidence:** Original dimensions are 2880 × 1630 px, inspected at 1400 px width. Dimensions below are approximate CSS-scale estimates assuming a 1440 px layout at 2× capture; this ratio is unverified.
- **Contrast:** Teal check icons and soft gradients add color while the white form card keeps input controls clear.

### Page composition

- **Split:** Two equal-width desktop halves divide the screen vertically.
- **Left:** A small Duffel logo sits near the upper-left of a constrained content region. A large travel-selling headline and three benefit groups appear below.
- **Right:** A centered white rounded card holds name, email, password, country, two checkboxes, a signup action, and a login link.
- **Support:** A small black circular help control sits near the lower-right corner of the gradient region.

### Information hierarchy

- **Headline:** A large dark-plum statement introduces the value proposition, with its final word italicized.
- **Benefits:** Each benefit has a teal checked circle, medium-size title, and smaller muted supporting line or two.
- **Form:** External labels and required asterisks precede four full-width controls.
- **Consent:** Optional-update and terms-agreement checkboxes sit above the filled signup button. Both are unchecked in the screenshot.
- **Alternative:** A centered login link provides the secondary route beneath submission.

### Typography

- **Family:** A neutral sans serif is used throughout; exact identity is unverified.
- **Headline:** Approximately 40 CSS px, semibold, with around 48 px line-height and an italic ending.
- **Benefit titles:** Around 18 px regular to medium weight; descriptions are about 14 px with 21 px leading.
- **Form labels and controls:** Approximately 15–16 px, regular weight.
- **Consent and action:** Checkbox copy is around 14 px; signup text is about 16 px semibold. Login text is similar body size with an underlined link.

### Colors & surfaces

- **Measured palette:** Sampled source colors include white #FFFFFF, very dark plum #140026, pale blue #D1E3FF, gray outline #E2E2E7, and gradient blues #D6E0FF and #D5DFFF.
- **Semantic use:** Plum carries headline, labels, and the primary button. Teal identifies benefit checks.
- **Background:** The right half shifts through light blue, lavender, and teal, while the left remains white.
- **Card depth:** The white form card has a soft diffuse shadow and no prominent outer border.

### Components

- **Form card:** Approximately 520 × 590 CSS px, with 8 px radii and around 32 px padding.
- **Inputs:** About 455 × 40 px, with thin pale-gray outlines, 5–6 px radii, and muted placeholders.
- **Password:** A trailing crossed-eye icon indicates hidden password display; its interaction is unverified.
- **Country:** An empty outlined selector has a trailing chevron and a small information icon beside its label.
- **Checkboxes:** Approximately 22 px square, outlined and unchecked, with text to the right.
- **Signup action:** A full-width dark-plum rectangle around 455 × 40 px, slightly rounded, with white centered text and a right arrow.
- **Benefits:** Small teal circles with white checks align with titles; descriptions indent to the title edge.

### Visual rhythm

- **Left inset:** Content begins roughly 125 CSS px from the viewport edge, with a large gap between brand and headline.
- **Benefit cadence:** Three groups repeat at roughly 90–105 px intervals, each tightly pairing title and description.
- **Form spacing:** Labels sit close above inputs; around 20 px separates groups. Consent and actions form a compact lower cluster.
- **Balance:** The form card is vertically centered higher than the benefit block's bottom, leaving substantial gradient space beneath.

### Responsive

- **Observed limit:** Only desktop is supplied; actual mobile layout and validation are unverified.
- **Recommended stacking:** Prioritize a readable signup form and place benefits above or below it in a clear single-column order.
- **Recommended fields:** Use a fluid card with 20–24 CSS px gutters, preserve input text size, and let checkbox copy wrap.
- **Recommended controls:** Maintain adequate touch areas for checkbox, eye, country, and help controls; prevent keyboard overlap.

### Adaptation guidance

- **Preserve:** Keep the equal desktop split, calm gradient, concise checked benefits, and strong dark-plum signup action.
- **Implement:** Use associated labels, required semantics, accessible password visibility, country selection, and independent consent checkboxes.
- **State design:** Define focus, invalid, submitting, and success states separately; only the empty form is visible.
- **Validate:** Confirm fonts, true CSS sizing, gradient treatment, narrow-screen order, and terms-link accessibility. Do not infer registration outcomes from this capture.

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