← Previous8 / 26Next →

Olvy Empty State

OlvyManage your user feedback like never before

Design with AI

Create a new design inspired by Olvy Empty State, 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,356 words

# Design from Reference: Olvy Empty State

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

## Reference

- **Product:** Olvy
- **Category:** Empty State
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/v/95fa682f96c931a74fee-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
- **Character:** A light issue-management empty state uses cool blue-gray application chrome, compact toolbars, a centered soft illustration, and vivid pink creation controls.
- **Tone:** The interface balances operational density at the edges with a spacious explanatory center.
- **Observed scale:** The source measures 2880 × 1642 pixels. CSS estimates assume a 2× capture, roughly 1440 × 821; actual pixel ratio is unverified.

### Page composition
- **Sidebar:** A roughly 196 CSS-pixel rail contains workspace selection, Getting Started, a pink Create dropdown, primary modules, a Widgets group, utility links, and a lower profile/plan card.
- **Header:** Issues appears at the top-left of the main region; a search hint and Create Issue control sit at right.
- **Status row:** All, Active, Done, Ready to Broadcast, and Pass tabs show zero counts. All is visually selected.
- **Filter/view row:** Compact icon, Status, Users, and Creator controls align left; two view-switch buttons align right.
- **List context:** A checkbox and Total 0 Issues line sit below the toolbar.
- **Empty state:** A centered file-box illustration appears above a two-line heading, a short three-line explanation, and two side-by-side actions.
- **Captured extent:** There are no issue cards or additional lower modules visible.

### Information hierarchy
- **Module context:** Issues is selected in the sidebar and repeated as the page title.
- **Zero state:** Count badges and the total line establish that the current issue list is empty.
- **Explanatory center:** The bold two-line message introduces roadmap/feedback closure. Smaller muted copy describes linking feedback with project-management issues.
- **Primary action:** Create Issues is filled pink and visually leads the action row.
- **Secondary action:** Integrate your PM tools uses a white outlined control with small service symbols.
- **Scope limit:** The screenshot does not show an issue creation dialog, connected integrations, or successful workflow state.

### Typography
- **Typeface appearance:** A neutral sans-serif is used throughout. Exact family is unverified.
- **Page and empty-state headings:** Around 16–18 CSS pixels, medium/semibold, with approximately 24-pixel line-height.
- **Explanation:** Approximately 14–15 pixels with 21-pixel line-height, centered in a moderate-width block.
- **Navigation:** Sidebar items are around 14 pixels; group labels are uppercase with slightly expanded tracking.
- **Toolbar roles:** Tabs, filters, and buttons use roughly 12–14-pixel medium text. Count badges are smaller.
- **Profile detail:** Name, subtitle, and plan label use compact text with clear primary/secondary contrast.

### Colors & surfaces
- **Measured cool palette:** #F2F7FA, #F3F8FB, #F1F6F9, #EEF2F8, and #EFF3F9 occur across the pale application surfaces.
- **Card/control surfaces:** White or near-white fills distinguish buttons, selected navigation, and the profile block.
- **Accent:** Saturated pink marks creation actions, selected module icon, and active view control. A red notification badge appears beside What’s New.
- **Text hierarchy:** Main labels are dark navy; navigation and helper copy use muted slate-blue.
- **Illustration:** The file box uses white, pale blue-gray, and a pink inner backing, with a circular lavender halo and small floating dots.
- **Depth:** Controls have fine cool borders and slight shadows. The illustration has a diffuse shadow; the main canvas remains flat.

### Components
- **Workspace control:** A small white outlined selector combines a green circular initial with workspace text; a separate lightning button sits beside it.
- **Create dropdown:** A pink rounded rectangle with plus icon and chevron spans most of the sidebar.
- **Selected module:** The Issues row has a white rounded background, fine border, and pink icon.
- **Status tabs:** A pale grouped strip contains five labels and tiny boxed zero counts; the selected All tab is raised on white.
- **Filters:** Small white outlined buttons combine icons and labels. No open dropdown is visible.
- **View switch:** The list icon is highlighted pink; the adjacent split-column icon is neutral.
- **Empty illustration:** A file-box/folder stack roughly 180 pixels across occupies the upper center of the main area.
- **Action row:** A pink Create Issues button sits beside a wider white integration control containing small service marks.
- **Profile/plan block:** A bordered lower card contains avatar, account text, and a separate plan control. Personal details are example data.
- **Notification:** A small red circular count badge overlaps the utility area.
- **Unshown states:** Selection, issue cards, filtering results, integration setup, hover/focus, and loading are not established.

### Visual rhythm
- **Compact perimeter:** Sidebar and toolbar rows use regular small spacing and thin dividing lines.
- **Open center:** Large whitespace surrounds the illustration and message, keeping the empty state legible.
- **Centered stack:** Illustration, heading, explanation, and action row share one central axis.
- **Consistent controls:** Small rounded rectangles and icon-label pairings repeat across navigation and toolbars.
- **Accent repetition:** Pink connects creation, module selection, and view state without coloring the whole workspace.

### Responsive
- **Evidence limit:** Only a desktop issue workspace is visible. Mobile behavior and fixed positioning are unverified.
- **Recommended navigation:** Collapse the sidebar to a drawer or compact rail on narrow screens.
- **Recommended toolbars:** Wrap filters or place them in an accessible panel; keep current status and view selection visible.
- **Recommended empty state:** Reduce illustration size, preserve readable copy, and stack the two actions when necessary.
- **Recommended controls:** Provide clear focus, accessible labels for icon-only controls, and usable touch targets.
- **Recommended data states:** Define populated, loading, no-filter-results, and error states separately from the true empty state.

### Adaptation guidance
- **Preserve the empty-state purpose:** Explain the value of issues and offer creation plus integration as clear next steps.
- **Keep shell hierarchy:** Separate global modules, status views, filters, total count, and central guidance.
- **Use semantic state cues:** Pair color with text, borders, and accessible selected-state attributes.
- **Do not infer connections:** Small service logos are visual invitations, not evidence of configured integrations.
- **Use safe examples:** Replace account/profile details and workspace labels with approved sample or live state.
- **Standardize the palette:** Build from cool pale surfaces, dark navy text, white controls, and a restrained pink action accent.

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