← Previous35 / 40Next →

Help Kit Account Setup

Help KitTurn Notion into a Help or Doc site

Design with AI

Create a new design inspired by Help Kit Account Setup, 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,064 words

# Design from Reference: Help Kit Account Setup

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

## Reference

- **Product:** Help Kit
- **Category:** Account Setup
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/o/e62d32b77ed4a388b9c8.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:** Friendly project-setup screen with a pale cool form area, deep indigo illustration panel and lavender progression accents.
- **Evidence and scale:** Screenshot measures 1440 × 821 image pixels. Sizes describe image pixels with an estimated 1× CSS scale; actual DPR and font identity are unverified.

### Page composition

- **Split frame:** Two equal-width panels divide the viewport vertically at approximately x720. The left is pale blue-gray; the right is a deep navy/indigo gradient.
- **Form placement:** A roughly 464px-wide stack begins around x128 and is vertically centered slightly above the midpoint.
- **Content order:** Step label and four progress dots precede a gradient welcome heading, a two-line project-naming prompt, a short domain field, helper copy and a full-width Next button.
- **Illustration/support:** A centered laptop-and-globe drawing occupies the right panel. A small purple Help pill sits in the bottom-right corner.

### Information hierarchy

- **Progress:** “Step 1 of 4” and four dots establish a multi-step setup; the first dot is filled and surrounded by a pale violet halo.
- **Primary instruction:** A blue-to-purple welcome heading leads into a darker explanatory question. The field appears directly below with its suffix visually separated.
- **Supporting detail:** Smaller gray helper copy explains naming and domain implications; the Next button is the dominant action below it.

### Typography

- **Heading:** Approximately 34px captured size, bold sans-serif, with a horizontal blue-to-purple text gradient.
- **Prompt:** Around 23–24px medium-weight gray text with roughly 32px leading, wrapping onto two lines.
- **Utility copy:** Step label, field value, suffix, helper text and button label are approximately 14px; helper text uses around 20px leading. Exact family and weights are unverified.

### Colors & surfaces

- **Measured form ground:** Pale #EAEEF6 occupies most of the left panel, with white #FFFFFF input surfaces.
- **Measured accent:** Lavender #9A87F2 fills the main action; #7066EE appears in stronger purple details.
- **Measured illustration ground:** Deep navy/indigo samples include #171A47 and #161941. Light cyan #DAF5FC appears in the laptop illustration.
- **Depth:** The right panel has a soft indigo glow; the field uses a fine gray border and restrained shadow rather than a heavy card container.

### Components

- **Progress dots:** Four small circles approximately 10px across, spaced around 30px apart; only the first is visibly active.
- **Domain input:** Approximately 274 × 45px captured size with a 6px radius, a text-entry region and a fixed suffix region divided by a vertical rule. The suffix is blue-violet.
- **Primary action:** Approximately 464 × 38px lavender button, white centered text and corner radius around 5px. No hover, validation or enabled/disabled transition is established.
- **Illustration:** Roughly 270 × 180px laptop outline with browser chrome, globe, WWW banner and cursor, drawn in navy, white and pale cyan.
- **Help control:** Compact purple rounded pill with white chat icon and label, inset roughly 24px from the viewport edges.

### Visual rhythm

- **Form stack:** Small 16–20px gaps connect progress, heading and prompt; a larger gap near 32px precedes the field.
- **Helper relationship:** Helper copy sits roughly 14px below the field, and the button follows around 20px later.
- **Whitespace balance:** Broad empty areas surround both the compact form and illustration, making the split layout calm despite the dark right half.

### Responsive

- **Observed limit:** Only the first desktop setup state is shown; later steps, field errors and mobile layouts are unobserved.
- **Recommended stacking:** On phones, reduce or remove the decorative panel and keep the form full-width within comfortable 20–24px side padding.
- **Recommended controls:** Preserve the suffix distinction, allow helper copy to wrap naturally and use a mobile action height near 44px or greater. Position Help without obscuring the button.

### Adaptation guidance

- **Preserve the pattern:** Use a clear step cue, one focused question, a compact compound input and a broad progression button.
- **Keep illustration supportive:** Retain simple line art and a restrained cool palette, using the dark panel as atmosphere rather than adding more instructions.
- **Implementation:** Associate a real label and helper description with the field, expose progress accessibly, and define validation/focus states separately. Treat the displayed project value as example content and verify naming rules independently.

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