← Previous5 / 13Next →

Vowel Sign Up Flow

VowelVideo conferencing tool that makes meetings better.

Design with AI

Create a new design inspired by Vowel Sign Up 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 926 words

# Design from Reference: Vowel Sign Up 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:** Vowel
- **Category:** Account Setup
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/o/214130eaa38d6a11305f.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:** Quiet signup-consent step with pale-gray ground, a centered white card and a single violet action.
- **Evidence and scale:** Screenshot measures 1440 × 789 image pixels. Sizes describe captured pixels with plausible 1× CSS scale; actual DPR and font family are unverified.

### Page composition

- **Card frame:** Approximately 680 × 400px white card centered horizontally and slightly above vertical center.
- **Content order:** Dark compact brand symbol, bold privacy heading, two-line explanation with policy links, checked agreement row and Continue button.
- **Progress:** Three small dots sit near the card bottom, with the middle dot dark.
- **Outer page:** Broad empty gray margins surround the card; no navigation/header/footer is visible.

### Information hierarchy

- **Message:** Bold privacy statement is the strongest textual element.
- **Consent:** Policy links are violet within explanatory copy; a checked violet checkbox appears in a separate agreement row.
- **Action:** Wide violet Continue pill anchors the task.
- **Progress:** Small dots remain visually secondary; the captured state indicates the middle of a three-position sequence without showing other steps.

### Typography

- **Heading:** Approximately 22px captured size, bold sans-serif.
- **Explanation:** Around 14px regular with 20px leading; policy links use a stronger violet treatment.
- **Consent/action:** Agreement text around 11–12px, Continue around 14px bold.
- **Family:** Exact font identity, computed weights and tracking are unverified.

### Colors & surfaces

- **Measured foundation:** Pale #F6F6F6 page and white #FFFFFF card dominate.
- **Measured emphasis:** Violet #6F60F6 fills button/checkbox and highlights policy links.
- **Neutrals:** Dark charcoal logo/headline contrasts with gray explanatory text and light inactive dots.
- **Depth:** Soft gray shadow beneath the card and faint border separation create modest elevation.

### Components

- **Card shell:** Roughly 680 × 400px, radius around 8px, broad padding and subtle lower shadow.
- **Brand mark:** Small dark geometric symbol centered above the heading, approximately 42px tall.
- **Agreement row:** Small filled violet square with white check beside compact consent text; no unchecked state is visible.
- **Continue:** Approximately 250 × 48px, fully rounded, violet fill and white centered label.
- **Progress dots:** Three circles around 8px diameter, evenly spaced; middle dark and outer two pale gray.

### Visual rhythm

- **Centered stack:** All major elements share one vertical axis; the consent line remains centered as a compact unit.
- **Spacing:** Roughly 20–24px separates logo, heading and explanation; a larger gap leads from action to progress dots.
- **Whitespace:** Extensive space around the card reinforces the single focused decision.

### Responsive

- **Observed limit:** Only one desktop checked-consent state is shown; toggling, policy navigation and progression are unobserved.
- **Recommended sizing:** Use a fluid capped card with comfortable viewport margins and reduced side padding on phones.
- **Recommended text:** Allow agreement copy to wrap without separating it from the checkbox, and retain readable policy links.
- **Recommended controls:** Keep Continue comfortably tappable and expose selected/required state accessibly.

### Adaptation guidance

- **Preserve clarity:** Separate the privacy explanation, agreement control and progression action into distinct readable steps.
- **Keep restraint:** Neutral surfaces and one violet action color are sufficient for this simple screen.
- **Implementation:** Use a real labeled checkbox, accessible policy links and visible focus; define continuation requirements from actual product logic. The screenshot's privacy promise and checked state do not establish current policy or user consent outside this captured interface.

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