← Previous19 / 34Next →

Senja User Onboarding

SenjaCollect, Manage & Share Testimonials

Design with AI

Create a new design inspired by Senja User Onboarding, 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,119 words

# Design from Reference: Senja User Onboarding

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

## Reference

- **Product:** Senja
- **Category:** User Onboarding
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/o/e451788a0ad89035693f.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:** Minimal testimonial-form editor with a white settings column and a pale-gray live-preview region, mostly monochrome controls and tiny pastel section icons.
- **Evidence and scale:** Screenshot is 1440 × 821 image pixels. Sizes refer to captured pixels, with plausible but unverified 1× CSS scale. Font identity is unverified.

### Page composition

- **Editor split:** Left settings column occupies approximately 576px, or 40% of the viewport; the preview fills the remaining width.
- **Settings stack:** Editable form title sits above eight accordion-style groups. Advanced is expanded, revealing a publication toggle, auto-tag explanation and compact tag action.
- **Bottom action:** A wide black Finish button anchors the lower settings area.
- **Preview:** A device-mode toggle sits above a large dark-outlined desktop frame. A small white thank-you card is centered inside; a circular support portrait overlaps the frame's lower-right region.

### Information hierarchy

- **Editor navigation:** Muted collapsed section labels and colored line icons give way to a dark expanded Advanced heading.
- **Active settings:** Toggle label and tag-group title are darker/bolder than helper copy. The publication toggle is visibly off in this capture.
- **Preview content:** A small square logo, thank-you heading with emoji and short supporting paragraph form the card's hierarchy.
- **Completion action:** The full-width black Finish button is the strongest control in the left pane; the preview badge remains a small secondary element.

### Typography

- **Editor title:** Approximately 21px captured size, semibold-to-bold sans-serif, with a small pencil icon.
- **Settings text:** Accordion labels are around 16px; detailed labels/helper copy around 13–14px with 20px leading.
- **Preview heading:** Approximately 25–26px, medium-to-semibold; paragraph around 15px with 23px leading.
- **Utilities:** Tag button, Finish label and branding badge are around 12–14px. Exact font family, weights and tracking remain unverified.

### Colors & surfaces

- **Measured ground:** White #FFFFFF and near-white #FAFAFA dominate settings/card/preview interiors; pale gray #E5E7EB fills much of the preview surround.
- **Measured borders:** #E4E6EA supports thin settings separators and card boundaries.
- **Measured foreground:** Black #000000 supports primary actions/logo; dark slate #202A36 forms the thick preview frame and some text.
- **Local accents:** Small purple, pink, green, orange and blue section icons and a violet heart in the branding badge add color without defining large surfaces.

### Components

- **Accordion rows:** Approximately 56–58px high with thin horizontal separators, small chevrons, pastel outline icons and indented labels.
- **Publication toggle:** A compact gray pill around 48 × 24px with its white knob left, displaying an off state.
- **Tag control:** Small black rounded button with white tag icon and label, below helper copy.
- **Finish action:** Approximately 512 × 40px, black fill, white centered label with decorative sparkle and radius around 8px.
- **Device selector:** Compact gray rounded group above the preview, with desktop selected on a white rounded square and a phone icon beside it.
- **Preview frame/card:** Frame around 805 × 675px with a 4px dark outline and 9px radius. Centered card around 512 × 248px uses a thin pale border, 12px radius, roughly 24px padding and pronounced soft shadow.
- **Brand/support badges:** A small outlined Powered by badge overlaps the card's upper-right edge; the lower-right support portrait has a small green availability dot.

### Visual rhythm

- **Settings alignment:** Title, accordion separators, detailed settings and Finish action share approximately 32px side insets.
- **Preview whitespace:** Broad blank space surrounds the centered card, emphasizing how the end-user message will appear.
- **Expanded content:** Short label/helper/action gaps distinguish the expanded group from the regular accordion cadence.
- **Framing:** A strong dark preview boundary contrasts with the editor's delicate horizontal rules.

### Responsive

- **Observed limit:** The editor is shown with desktop preview selected; the phone preview and actual narrow-screen layout are unobserved.
- **Recommended editor layout:** Stack settings and preview or provide explicit modes on narrow screens, rather than shrinking both columns together.
- **Recommended preview:** Fit the frame proportionally or use a bounded scroll area, while preserving a readable true-size mobile preview when selected.
- **Recommended controls:** Keep accordion, toggle and Finish touch targets comfortable and avoid support controls covering preview content.

### Adaptation guidance

- **Preserve the separation:** Keep configuration controls visually distinct from the end-user preview, with clear mode selection.
- **Use restraint:** Reserve black fills for decisive controls and retain muted separators and small colored icons for section scanning.
- **Implementation:** Provide accessible accordion/toggle semantics, visible focus and accurate preview state. The off publication toggle is observed only; the screenshot does not establish any publishing or tagging behavior.

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