← Previous15 / 24Next →

Shortcut Signup Page

ShortcutProject Management for Software Teams

Design with AI

Create a new design inspired by Shortcut Signup Page, 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,038 words

# Design from Reference: Shortcut Signup Page

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

## Reference

- **Product:** Shortcut
- **Category:** Sign Up
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/o/6e119894321f13f365a0.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:** Sparse centered signup page with purple brand emphasis and a white background.
- **Brand state:** The actual screenshot displays the Clubhouse wordmark, despite the record’s Shortcut title; the description follows the visible pixels.
- **Character:** Friendly rounded sans-serif typography, pill actions, light input borders, and generous vertical separation.

### Page composition

- **Capture and scale:** 1440 × 821 image px. CSS estimates assume approximately 1× capture; scale is unverified.
- **Column:** Approximately 490px wide, centered horizontally, without an enclosing card.
- **Brand and introduction:** Purple wordmark near the top, followed by a centered signup heading and short muted offer sentence.
- **Form:** Work-email label and empty input, purple primary action, horizontal or divider, and white Google signup button.
- **Legal and login:** Centered two-line terms/privacy copy below the form; existing-account sentence and sign-in link sit lower down.

### Information hierarchy

- **Brand:** Large purple wordmark is the first visual anchor.
- **Task:** Medium-size heading introduces signup, with smaller reassurance copy beneath it.
- **Primary action:** Purple full-width pill emphasizes the email route.
- **Alternative:** White Google pill with multicolor logo provides a second signup method.
- **Secondary content:** Muted legal copy and purple inline links are separated from the main interaction group.

### Typography

- **Family:** Rounded proportional sans serif; exact family is unverified.
- **Wordmark:** Approximately 48px high as a brand asset rather than a verified text style.
- **Heading:** Approximately 24px semibold with 30px line-height.
- **Supporting copy / input:** Approximately 16px regular.
- **Buttons:** Approximately 18px medium, centered.
- **Labels and legal:** Approximately 14px, with about 22px line-height for the two-line legal block.
- **Precision:** Sizes and weights are visual estimates, not extracted CSS or font metadata.

### Colors & surfaces

- **Canvas:** Sampled #FFFFFF.
- **Purple emphasis:** Sampled #6A45DD on the dominant brand/action treatment.
- **Primary text:** Sampled #333333 among dark text pixels.
- **Input boundary:** Sampled #D0D3D6.
- **Secondary neutrals:** Sampled #F9F9F9, #F4F4F4, and #E4E4E4 occur in subtle borders/shadows and antialiased light elements.
- **Surface hierarchy:** White Google button is distinguished by its pale outline and soft shadow rather than a colored fill.

### Components

- **Email field:** Approximately 490 × 50px, white fill, thin gray outline, and 3–4px radius; muted example-email placeholder.
- **Primary pill:** Approximately 490 × 50px, purple fill, white centered label, fully rounded ends.
- **Divider:** Small gray or label between two thin light-gray horizontal rules.
- **Google button:** Approximately 490 × 50px, white pill, multicolor Google mark, dark label, pale border, and soft shadow.
- **Legal block:** Centered muted text with purple terms and privacy links.
- **State limits:** Empty form only; validation, loading, and authentication behavior are not shown.

### Visual rhythm

- **Vertical sequence:** Brand, introduction, email entry, signup alternatives, legal copy, and login form distinct groups.
- **Alignment:** Input and both buttons share identical widths; label is left aligned while surrounding copy is centered.
- **Spacing:** About 36–40px separates the email input from the primary action; larger gaps isolate legal and account-access content.
- **Whitespace:** Broad side margins keep attention on a narrow interaction column.

### Responsive

- **Observed state:** Desktop only; mobile rendering is unverified.
- **Width recommendation:** Use a roughly 490px maximum column with 20–24px side padding.
- **Text recommendation:** Allow the offer/legal sentences to wrap naturally without shrinking text.
- **Action recommendation:** Keep signup methods full width and maintain comfortable tap heights.
- **Short-screen recommendation:** Permit document scrolling so legal and sign-in links remain reachable.

### Adaptation guidance

- **Preserve:** Centered single-column form, purple email action, white provider alternative, and separated legal/account links.
- **Starting dimensions:** Approximately 490px width, 50px controls, 24px heading, and 14px legal copy under the unverified 1× assumption.
- **Brand fidelity:** Use the intended supplied brand assets; the screenshot’s historical Clubhouse branding should not be silently relabeled.
- **Content fidelity:** Treat free-plan and payment reassurance as captured historical copy, not verified current product conditions.
- **Implementation recommendation:** Associate the email label, provide visible focus and validation, and use the real authentication provider integration.

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