← Previous3 / 8Next →

Heap Video Tour

HeapThe New Standard in Product Analytics

Design with AI

Create a new design inspired by Heap Video Tour, 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,036 words

# Design from Reference: Heap Video Tour

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

## Reference

- **Product:** Heap
- **Category:** Product Video
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/o/5fbcdc97c08024bb061b.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:** Captured analytics-definition demonstration with a purple pricing page, two large white plan columns and a floating event-definition utility.
- **Visual layering:** A dark toolbar spans the top; a pink outlined target and small utility window identify the selected page element.
- **Capture:** The image measures 1429 × 791 px. Dimensions below are image estimates; CSS scale and video playback state are unverified.

### Page composition
- **Toolbar:** A dark horizontal bar contains the HEAP mark, Definition Mode/Normal Mode choices and right-side Events/Exit controls.
- **Underlying page:** Two tall white pricing cards sit on a purple gradient, with circular line icons, uppercase category labels, price/status text and warm gradient actions.
- **Selection:** The right card's Get Started action has a pink rectangular outline.
- **Floating utility:** A light-gray panel overlaps the right card, with a small chart/count summary, name field, checkboxes, option rows and blue Define Event button.
- **Edges:** A small chat strip appears bottom right and a destination-status strip bottom left. Lower pricing content is cut off by the viewport.

### Information hierarchy
- **Mode:** Definition Mode is highlighted in the toolbar.
- **Target:** The outlined pricing action is the selected element in the demonstration.
- **Utility:** A count/percentage summary precedes naming and optional definition settings.
- **Primary utility action:** Define Event is the strongest filled control within the floating panel.
- **Evidence limit:** Only a still frame is visible; event creation, video motion and successful saving cannot be established.

### Typography
- **Family:** Conventional sans-serif across the captured page/tool; exact identity is unverified.
- **Pricing roles:** Uppercase category labels are letter-spaced; price/status labels are larger and bold.
- **Body:** Pricing descriptions use medium gray and approximately 16–18 image px.
- **Utility:** Compact labels/controls are around 12–14 px, with a bold numerical summary.
- **Actions:** Underlying gradient buttons use spaced uppercase text; the utility button uses a regular title-case caption.

### Colors & surfaces
- **Measured purple:** ICC-aware sRGB sampling yields #30134A, #341652 and #381756 in the page background.
- **Measured neutrals:** #FBFBFC and #FFFFFF define plan surfaces; #312C33 appears in dark chrome and #EFE9EB in the floating utility.
- **Action palette:** Warm orange-to-pink buttons contrast with purple; the definition action is blue.
- **Selection:** A pink outline marks the target action, visually separate from its own gradient fill.
- **Depth:** White cards have pale violet outlines; the utility window has a pronounced soft shadow.

### Components
- **Mode switch:** Two compact adjacent rectangular choices show one light selected state and one dark inactive state.
- **Plan cards:** Tall white panels have a violet border, centered icon/title/description/action and fine horizontal feature separators.
- **Event utility:** A draggable-looking small header includes grip and close symbols. A sparkline sits beside usage statistics.
- **Form controls:** One name input, two unchecked options, a More Options row and custom-property row precede the blue action.
- **Target frame:** Thin pink bounding rectangle encloses the right pricing button.
- **State:** No completed event list or success message is visible.

### Visual rhythm
- **Symmetry:** Two equal-width pricing cards create a strong centered pair.
- **Vertical cadence:** Icon, heading, description and action stack with regular gaps before feature lists.
- **Overlay density:** The compact utility contrasts with the spacious marketing page behind it.
- **Clipping:** The viewport cuts off card bottoms, so the full page length is unknown.

### Responsive
- **Evidence limit:** Only this desktop demonstration frame is shown; recommendations follow.
- **Tool overlay:** Keep definition controls within the viewport and allow repositioning on smaller screens.
- **Underlying cards:** Stack pricing columns at narrow widths.
- **Readability:** Preserve utility input/button sizes rather than scaling the whole tool interface down.

### Adaptation guidance
- **Reusable pattern:** Show a clearly selected page target beside a concise event-definition panel.
- **Layer distinction:** Separate analytics-tool chrome from the page being inspected.
- **State clarity:** Provide explicit saved/cancelled feedback in implementation; neither outcome is shown.
- **Accessibility:** Label selection targets, mode controls and utility options, with keyboard access and visible focus.

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