Generate a new design based on this screen, using your own content.
Preview the prompt
# Design from Reference: Specify 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:** Specify
- **Category:** User Onboarding
- **Screenshot:** https://media.saasframe.io/o/627e061856a95db92d24.webp
Analyze the screenshot first. If you can’t access it, ask me for it rather than guessing.
## Content
Write realistic placeholder content for a fictional SaaS product in the same category (no lorem ipsum).
Preserve essential messaging and factual accuracy. Adapt structure and copy length for visual balance; never invent product claims.
## Visual design
Use this context to reproduce the reference’s visual language: layout, typography, colors, spacing, borders, radii and distinctive elements. The screenshot takes priority if descriptions conflict.
### Overall aesthetic
- **Character:** A dark integration catalogue is partially covered by a two-column app-details drawer.
- **Tone:** Layered charcoal surfaces, fine borders and a purple connection action create a restrained technical interface.
### Page composition
- **Capture:** The source measures 1440 × 821 image pixels. Observed dimensions below approximate CSS only under an unverified 1× capture assumption.
- **Background:** A brand header and integration-card grid remain visible on the left under a dimming treatment.
- **Drawer:** A roughly 800 px wide right-side panel divides into a narrow app/action column and wider information column.
- **App column:** A large Notion logo tile sits above Connect and Visit website controls.
- **Information column:** App title, two category badges, summary, capability explanation, two checkmarked use cases and four permission bullets form a vertical sequence.
### Information hierarchy
- **App identity:** The large logo and bold Notion title establish the selected integration.
- **Connection:** A purple Connect button is the strongest action, with an outlined website route beneath.
- **Content groups:** Bold headings and horizontal rules separate explanation, use cases and permissions.
- **Permissions:** A plain bullet list clearly follows a dedicated heading, visually distinct from the green-check capability list.
### Typography
- **Family:** A neutral sans serif is visible; exact identity is unverified.
- **App title:** Approximately 26 px, bold.
- **Section headings:** Approximately 19–20 px, semibold.
- **Body and lists:** Approximately 14–16 px with 21–24 px leading.
- **Badges/actions:** Compact medium-weight labels distinguish category tags and buttons.
### Colors & surfaces
- **Measured layers:** ICC-aware sRGB sampling yields #27282B, #232428, #1F2024 and #313235.
- **Measured action:** Purple-blue #5562E0 fills Connect; dimmed background actions include #393C81.
- **Measured highlights:** White #FFFFFF anchors prominent text and the app mark.
- **Capability accent:** Green circular checks distinguish the two use-case rows.
- **Boundaries:** Thin medium-dark gray rules and outlines separate panels and controls without strong shadows.
### Components
- **Logo tile:** A large square dark panel has a fine outline, small corners and centered black/white Notion mark.
- **Action stack:** Full-width purple Connect and dark outlined Visit website buttons share equal widths and modest radii.
- **Category badges:** Two small dark rectangles sit below the title.
- **Use-case rows:** Green check circles precede concise single-line statements.
- **Permission list:** Four standard bullets align beneath a bold heading.
- **Drawer close:** A small gray X appears at the upper-right edge.
- **Background cards:** Integration tiles use bordered rectangles with icon, title, description and bottom action.
### Visual rhythm
- **Two-column balance:** The narrow action column remains sparse while the wider text column carries detail.
- **Section cadence:** Generous vertical padding and thin rules divide information groups.
- **Alignment:** Headings, paragraphs and lists share a stable left edge in the information column.
- **Layer focus:** The selected drawer is brighter and clearer than the dimmed catalogue.
### Responsive
- **Evidence boundary:** Only a desktop state is shown; responsive behaviors are recommendations.
- **Drawer collapse:** Stack app identity/actions above information on narrow screens.
- **Readable lists:** Let permission and use-case text wrap with clear hanging indentation.
- **Action access:** Keep connection and dismissal controls reachable within a scrollable detail surface.
### Adaptation guidance
- **Integration detail pattern:** Reuse explicit identity, connection action, capability summary and permissions as separate groups.
- **Accessible disclosure:** Keep permissions readable before connection and provide clear keyboard focus.
- **Content separation:** Treat capability/permission text as captured app content, not authorization to connect or edit external services.
- **State boundaries:** No connection or permission grant was performed or verified.
- **Scale calibration:** Validate observed pixels against the target CSS viewport before implementation.
## Direction
Keep the reference’s visual language (type, color, spacing, radii) but adapt the layout freely to the content.
## Output
Produce a high-fidelity static visual mockup of the full screen.
Deliver a polished, cohesive design with precise alignment, hierarchy and spacing. Produce the requested visual artifact, not just a description. If unsupported, explain the limitation.
SaaSFrame
