← Previous7 / 17Next →

Daybridge User Onboarding

DaybridgeMake time for what matters

Design with AI

Create a new design inspired by Daybridge 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 998 words

# Design from Reference: Daybridge 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:** Daybridge
- **Category:** User Onboarding
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/v/deeeb38c29c87a5c08d9-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

- **Style:** Dark onboarding screen with vivid pink illustration field and purple interaction accents.
- **Tone:** A community invitation combines subdued form content with a large stylized chat-workspace preview.

### Page composition

- **Canvas:** Source 2880 × 1842 pixels; geometry uses the 1400 × 895 inspection rendering. Approximate 2× CSS capture is plausible but unverified.
- **Brand:** Centered lavender Daybridge mark above the main panel.
- **Main shell:** Approximately 1128 × 677px, beginning near x136, y141, with strongly rounded outer corners.
- **Left column:** Roughly 428px wide, containing step indicator, heading, explanation, community card, updates card and bottom navigation.
- **Right column:** Pink field around a large cropped chat-workspace illustration, extending to the shell’s bottom/right edges.
- **Viewport:** A scrollbar is visible at the far right.

### Information hierarchy

- **Progress:** Small 04 / 05 label precedes the onboarding heading.
- **Invitation:** A bold heading and short gray paragraph explain community participation.
- **Choices:** Community card offers Join Now; a separate email-updates card shows a purple toggle.
- **Progression:** Back and Continue form a bottom pair, with Continue in vivid purple.
- **Illustration:** A stylized channel/sidebar, messages and content blocks demonstrate community activity without functioning as live controls.

### Typography

- **Heading:** Approximately 28px bold sans serif, around 34px line height.
- **Body:** Approximately 14px regular, around 20px line height.
- **Card labels:** Around 14px semibold; card descriptions around 13px with 16–17px line height.
- **Progress/buttons:** Progress around 12px; buttons about 14px medium. Exact family is unverified.

### Colors & surfaces

- **Measured darks:** #18191B outer canvas, #1F2024 left panel and #202429 illustration/workspace areas.
- **Measured illustration colors:** #6F286B and #5E2259 plum surfaces, #FFBCFF bright pink field, #255065 blue message block and #30192F dark purple header.
- **Accents:** Lavender brand and vivid purple Continue/toggle supply interactive emphasis.
- **Foreground:** White headings and medium-gray descriptions preserve a subdued dark interface.

### Components

- **Outer shell:** Roughly 30px radius, with the split clipping the illustration cleanly to the right corners.
- **Community card:** Approximately 335 × 158px, thin dark-gray border, 16px radius and subtle shadow; circular Slack icon sits beside title/body, with a full-width bottom action band.
- **Updates card:** Approximately 335 × 114px, matching shell treatment, circular mail icon and right-aligned compact toggle.
- **Bottom actions:** Each about 157 × 40px, pill-shaped; Back charcoal, Continue purple with a lighter edge.
- **Illustration:** Rounded desktop-window shell with colored sidebar, skeletal message blocks, a small avatar/message cluster and a large blue media rectangle.
- **Captured state:** Fourth onboarding step; toggle has purple track and right-positioned thumb. Actual consent behavior and subsequent screen are unverified.

### Visual rhythm

- **Left padding:** Approximately 47px from shell edge to content.
- **Opening:** Progress, heading and explanation use compact 12–16px gaps, followed by around 32px before the first card.
- **Card stack:** Approximately 16px separates invitation and update cards.
- **Navigation:** Large open gap pushes Back/Continue toward the bottom, with roughly 47px bottom inset.
- **Visual balance:** Dense small text on the left contrasts with broad pink and graphic blocks on the right.

### Responsive

- **Observed scope:** Desktop only; small-screen layouts are unverified.
- **Recommended stack:** Prioritize onboarding controls and move illustration below or replace it with a smaller crop.
- **Recommended height:** Let the panel follow content rather than forcing desktop height.
- **Recommended actions:** Retain readable full-width or evenly paired touch targets and keep consent text adjacent to its toggle.

### Adaptation guidance

- **Preserve:** Step context, distinct community/update choices and strong primary progression action.
- **Content:** Use supplied community destination and update-consent language; do not assume joining is required to continue.
- **Interaction:** Define toggle semantics, external join behavior and Back/Continue state explicitly.
- **Accessibility:** Expose switch state, maintain readable muted text and mark the chat illustration decorative.

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