← Previous28 / 30Next →

Audienceful Account Setup

AudiencefulEmail Marketing re-invented

Design with AI

Create a new design inspired by Audienceful Account Setup, 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 903 words

# Design from Reference: Audienceful Account Setup

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

## Reference

- **Product:** Audienceful
- **Category:** Account Setup
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/v/70c8d43fe8ffbeb023b6-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 workspace-setup modal uses a plain white card over a blurred pale-gray application backdrop.
- **Focus:** A single required text field and compact Next button make the step visually uncomplicated.

### Page composition

- **Capture scale:** The original is 5760 × 3260 pixels. Capture density is unverified; the 1400-pixel inspection rendition was used for composition, and dimensions below are relative estimates rather than confirmed CSS sizes.
- **Backdrop:** A blurred navigation column remains visible at left while the rest of the workspace is empty gray.
- **Dialog:** A centered card occupies about 40% of the image width and 40% of its height.
- **Content:** A bold heading and two-line explanation precede the required business-name field and a left-aligned Next control.
- **Help:** A small circular question-mark control sits at the lower-right edge of the screen.

### Information hierarchy

- **Task:** Name your workspace is the strongest element.
- **Explanation:** Muted copy explains what the workspace contains before the field label.
- **Action:** The gray Next button follows the empty field; its appearance suggests reduced emphasis, but interaction state is not verified.

### Typography

- **Family:** A conventional sans serif appears throughout; exact identity is unverified.
- **Heading role:** Bold text is about 1.5 times the size of the supporting paragraph.
- **Reading role:** Paragraph and label use gray regular text with comfortable leading.
- **Control role:** Placeholder text is lighter; the button label is white and semibold.

### Colors & surfaces

- **Measured backdrop:** Light gray #F0F0F0 dominates the screen, with nearby #F3F3F3/#F2F2F2 in blurred regions.
- **Measured card:** White #FFFFFF provides the focused surface.
- **Neutral palette:** #F1F1F1 and #EFEFEF appear among subtle background details; dark heading and muted gray text establish contrast without a strong brand accent.

### Components

- **Dialog shell:** A broad white rectangle has softly rounded corners and a faint downward shadow.
- **Field:** A single nearly full-width outlined input has a small radius, light border and muted placeholder.
- **Required label:** Business name is followed by an asterisk immediately above the field.
- **Button:** A compact gray rounded rectangle sits below the input at its left edge.
- **Backdrop handling:** Blur and a pale overlay reduce navigation detail while retaining spatial context.

### Visual rhythm

- **Padding:** Broad, consistent side insets align heading, explanation, label, input and button.
- **Grouping:** The heading sits close to its explanation; a larger pause precedes the field group.
- **Whitespace:** The card leaves generous space below the compact action, surrounded by a much larger empty backdrop.

### Responsive

- **Observed state:** Only the wide capture is supplied; viewport and pixel density are unverified.
- **Recommended sizing:** Use a bounded fluid dialog with viewport side padding and a full-width input.
- **Recommended content:** Allow explanatory copy to wrap naturally and preserve an adequate action hit area.

### Adaptation guidance

- **Preserve focus:** Keep one workspace-name field and one progression action in this step.
- **Avoid false precision:** Validate CSS sizing from a live implementation before using source-pixel dimensions.
- **State fidelity:** Reproduce the empty-field appearance without assuming validation behavior or successful setup.
- **Accessibility:** Associate the required label with the input and provide semantic dialog/focus handling.

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