← Previous3 / 8Next →

Air Sign Up Flow

AirCollaborate creatively

Design with AI

Create a new design inspired by Air 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 1,016 words

# Design from Reference: Air 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:** Air
- **Category:** Account Setup
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/o/b5ade0a15d467bd156b0.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:** An airy onboarding form combines a white functional area with a bold navy decorative side panel.
- **Character:** A large serif greeting, handwritten brand mark and muted blue action give the otherwise minimal screen a welcoming personality.

### Page composition

- **Capture:** The image measures 1440 × 789 pixels. Approximate dimensions below use image pixels; a corresponding 1× CSS scale is unverified.
- **Split layout:** White content occupies about 71% of the width; the rightmost roughly 415 pixels form a full-height navy panel with oversized cropped blue arcs.
- **Brand placement:** A small blue script logo sits near x135, y20. A thin turquoise line runs across the top edge.
- **Form region:** A roughly 380-pixel-wide form is centered within the white area, starting with a greeting around y245, followed by two short centered lines, one field and a full-width action.

### Information hierarchy

- **Greeting:** The personalized serif heading is the largest element and establishes the screen's focus.
- **Instruction:** Two small centered lines explain the workspace-naming task before the form.
- **Field hierarchy:** A left-aligned Workspace name label precedes the input; illustrative placeholder content is lighter than surrounding copy.
- **Action:** A single Next button follows, with no competing action visible.

### Typography

- **Heading:** Approximately 50 pixels, bold serif, compact line height and natural tracking; exact font identity is unverified.
- **Body:** Neutral sans-serif copy around 16 pixels with roughly 30-pixel line spacing in the centered instruction.
- **Form roles:** Label and button text are approximately 14 pixels, medium or semibold; placeholder text is about 16 pixels and regular.
- **Brand:** The logo uses a distinctive connected script treatment; it should be treated as an asset rather than reconstructed from an assumed font.

### Colors & surfaces

- **Measured base:** White #FFFFFF fills the left region; near-black #262626 appears in heading/text samples.
- **Decorative blues:** Navy #0B1953 and blue #142A72 create the flat arc composition at right.
- **Accent:** Sampled muted blue #7EA6E0 corresponds to the action treatment; turquoise #68DCDB marks the thin top rule.
- **Borders:** Light gray #DCDCDC appears in the input outline. Surfaces remain flat, without visible shadows.

### Components

- **Input:** Approximately 380 × 48 pixels, white fill, thin gray border and a small 3–4-pixel radius; text has about 16 pixels of horizontal inset.
- **Action:** Approximately 380 × 48 pixels, muted blue fill, small corner radius and centered white label. Whether this appearance represents a disabled state is unverified.
- **Side artwork:** Huge concentric arc segments extend beyond all edges of the right panel, creating movement without introducing an illustration.
- **Form grouping:** Label and input sit close together; the button follows after approximately 40 pixels.

### Visual rhythm

- **Whitespace:** Large open areas above and below the form keep attention on a single task.
- **Alignment:** Heading, instruction and controls share a central axis, while the label and input content align left.
- **Spacing:** The gap from instruction to label is around 35–40 pixels; the heading-to-instruction gap is much smaller.

### Responsive

- **Observed layout:** One wide desktop frame is visible; no mobile layout or validation states are demonstrated.
- **Recommended reflow:** Hide or shorten the decorative side panel on narrow screens and make the form fluid with 24-pixel side insets.
- **Recommended sizing:** Reduce the greeting toward 32–36 pixels while preserving readable 16-pixel field text and a comfortable action height.

### Adaptation guidance

- **Preserve:** Keep the asymmetric split, serif greeting, restrained form and oversized navy arcs.
- **Implementation:** Use a flexible content region and a clipped decorative wrapper; retain a reasonable maximum form width rather than stretching controls across the whole white area.
- **Behavior:** Define focus, validation and enabled/disabled action states explicitly; only the empty field appearance is observed.
- **Content:** Use the actual workspace task and supplied brand assets without adding extra onboarding steps from the record title.

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