← Previous24 / 25Next →

Superlist Sign Up With Email

SuperlistHome to all your lists

Design with AI

Create a new design inspired by Superlist Sign Up With Email, 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,048 words

# Design from Reference: Superlist Sign Up With Email

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

## Reference

- **Product:** Superlist
- **Category:** Sign Up
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/v/1488e0a077be8fb87657-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 playful signup screen uses a near-white lavender canvas, oversized dark welcome text and hand-drawn decorative marks.
- **Capture scale:** The screenshot measures 2880 × 1630 image pixels. Approximate CSS dimensions assume a 1440 × 815 viewport at 2× density; the scale is unverified.
- **Tone:** A bright red brand icon and red annotation-like strokes enliven an otherwise restrained authentication layout.

### Page composition

- **Outer frame:** A pale lavender border surrounds a large rounded near-white surface with narrow gutters.
- **Central stack:** Brand icon, two-line welcome heading, decorative doodles, two-line tagline and authentication controls share a centered axis.
- **Authentication:** Two dark provider buttons sit above a rounded email field with an embedded Send link control.
- **Decoration:** Pale circles, crosses and loose strokes fill the space between heading and tagline; red strokes and an arrow point toward the signup controls.
- **Surround:** Large blank margins keep the entire experience focused on authentication.

### Information hierarchy

- **Welcome:** The large two-line heading dominates the page.
- **Brand:** A small red rounded-square icon sits above the heading.
- **Tagline:** Two short centered lines introduce the product's team-and-person orientation.
- **Provider options:** Google and Apple actions have equal dark filled styling.
- **Email state:** The empty email field shows a placeholder and a subdued Send link button, suggesting an unavailable action until input is provided.

### Typography

- **Family:** A rounded sans-serif is visible; exact identity is unverified.
- **Welcome heading:** Approximately 56px CSS, bold, with 62px line-height and tight tracking.
- **Tagline:** Approximately 18px regular with 30px line-height.
- **Provider actions:** Approximately 14px medium, white, alongside provider icons.
- **Email controls:** Approximately 14px regular, muted purple-gray.
- **Alignment:** All main text is centered except the email placeholder.

### Colors & surfaces

- **Main surface:** Sampled #FAFAFC supplies the near-white interior.
- **Primary ink:** Sampled #26253D supplies the welcome and dark provider buttons.
- **Lavender layers:** Sampled #E7E6F1, #E4E4EB and #E9E9F1 supply the frame, input and doodle tones.
- **Red accent:** Sampled #FF3A27 supplies the bright annotation strokes and relates to the brand icon.
- **Muted control:** Sampled #BFBFD6 contributes to subdued input/action styling.

### Components

- **Provider buttons:** Approximately 370 × 40px CSS, fully rounded, dark purple fill and centered icon/label groups.
- **Email field:** Matching width and height, thin lavender outline, pale fill and pill shape.
- **Embedded send action:** A small rounded muted segment sits inside the field at right.
- **Brand icon:** Roughly 40px square with rounded corners and a red/orange folded-ribbon appearance.
- **Doodles:** Low-contrast freehand geometric marks are decorative; the red curved arrow reinforces the email area.
- **Page frame:** Around 12px corner radii soften the full-screen interior panel.

### Visual rhythm

- **Vertical stack:** Generous spacing separates icon, heading and tagline, while authentication controls are tightly grouped.
- **Control gaps:** Approximately 8px separates each provider button and the email field.
- **Decorative bridge:** Doodles occupy the large gap between heading and tagline.
- **Symmetry:** A consistent central axis balances the asymmetric red arrow and strokes.
- **Whitespace:** Broad open margins emphasize the compact control width.

### Responsive

- **Evidence limit:** Only one desktop state is visible; provider flows, email submission and mobile behavior are unverified.
- **Layout recommendation:** Keep a fluid centered column with 20–24px side padding and a sensible maximum width.
- **Typography recommendation:** Reduce the welcome heading on narrow screens while preserving its two-line hierarchy.
- **Artwork recommendation:** Crop or reposition doodles so they do not overlap controls.
- **Control recommendation:** Maintain full-width provider actions and an accessible email submission target.

### Adaptation guidance

- **Authentication pattern:** Keep provider and email routes visually distinct but equally clear.
- **State design:** Define email validation, loading and confirmation states separately; only the empty state is observed.
- **Brand system:** Reuse the dark purple, pale lavender and red annotation language consistently.
- **Accessibility:** Label the email input, provide accessible provider names and keep decorative doodles outside the reading order.
- **Interaction:** Ensure keyboard focus and disabled-state semantics are explicit rather than relying only on pale color.

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