← Previous16 / 17Next →

ProductBoard Signup Page

ProductBoardProduct Management Software

Design with AI

Create a new design inspired by ProductBoard 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 947 words

# Design from Reference: ProductBoard 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:** ProductBoard
- **Category:** Sign Up
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/o/a9f4f041371a41378ca9.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 signup screen pairs a white form region with a full-height purple/blue abstract brand panel.
- **Tone:** Sparse controls, muted supporting text and a single bright-blue primary button create a focused registration experience.

### Page composition

- **Capture:** The source is 1440 × 821 image pixels. Approximate image-pixel dimensions are used; CSS scale is unverified.
- **Split:** The white left region spans about 864 pixels, or 60% of the width; decorative artwork occupies the remaining 40%.
- **Brand and introduction:** The logo sits near the upper-left, with a bold trial heading and muted proof line below.
- **Form:** A roughly 400-pixel-wide stack contains Google signup, an OR divider, a labeled work-email input, an email signup button and small legal text.
- **Artwork:** Large overlapping translucent curved shapes sweep across a purple field toward blue at the lower-right.

### Information hierarchy

- **Invitation:** A bold one-line trial heading introduces the form before the smaller supporting statement.
- **Choice:** Google signup is presented first, followed by a clear divider and email path.
- **Primary action:** The filled blue email button is stronger than the outlined Google option; terms and privacy links remain visually secondary.

### Typography

- **Family:** A clean sans serif is used; exact identity is unverified.
- **Heading:** Approximately 28–30 pixels, bold with compact leading.
- **Body/control text:** Supporting copy and button labels use roughly 15–16 pixels; buttons are semibold.
- **Utilities:** The uppercase email label and divider text are approximately 11–12 pixels, while legal copy is around 13 pixels.

### Colors & surfaces

- **Measured foundation:** White #FFFFFF forms the form canvas; black #000000 appears in high-contrast text details.
- **Measured action:** Blue #2993FB marks the email signup button.
- **Measured artwork:** Purple samples #714BC9, #724CCA and #6E49C3 occur in the overlapping decorative field.
- **Supporting tones:** Muted blue-gray labels and light-gray borders soften the form hierarchy without additional card backgrounds.

### Components

- **Google option:** An approximately 400 × 44-pixel white outlined button includes a multicolor Google mark at the left and centered label.
- **Divider:** Two fine horizontal rules flank the small OR label.
- **Email field:** An approximately 400 × 44-pixel input has a thin pale border, small radius and subdued placeholder.
- **Primary CTA:** A matching-width bright-blue rectangle is around 44 pixels tall with a small radius and white centered text.
- **Legal line:** A compact sentence below the button contains underlined terms and privacy links.

### Visual rhythm

- **Alignment:** Logo, heading, supporting copy and form all share a left edge near x122.
- **Pacing:** A large gap separates the introductory copy from the first signup option; smaller regular gaps organize field, button and legal text.
- **Balance:** Extensive white space below the form contrasts with the full-height decorative right panel.

### Responsive

- **Observed state:** Only the desktop split screen is shown; mobile behavior is unverified.
- **Recommended simplification:** Hide or reduce the decorative panel on narrow screens and center a fluid form within comfortable side padding.
- **Recommended controls:** Preserve full-width actions and readable legal wrapping; keep labels visible independently of placeholders.

### Adaptation guidance

- **Preserve focus:** Maintain a short introduction, two signup paths and one strong blue primary action.
- **Artwork handling:** Keep abstract shapes decorative and separate from form semantics.
- **Implementation estimates:** Start with a 60/40 split and 400-pixel form width, then tune against source pixels.
- **Accessibility:** Provide persistent input labeling, clear focus states and descriptive provider/action names.

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