Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Heap Landing Page
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:** Landing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62eca45008e2d872ed29f3e2_1659675257948-62ec9cb3f0eb3d12607f2b85_screenshot-device-4ae390c8f6abef18d5cf75ab0292cbb2-1659619746577.webp
Analyze the screenshot first. If inaccessible, request it rather than guessing.
## Content
{{content.instructions}}
{{content.data}}
Preserve essential messaging and factual accuracy. Adapt structure and copy length for visual balance; never invent product claims.
## Visual Design
### Overall aesthetic
- **Character:** A bold analytics landing page alternates deep navy, bright mint-green and white sections with a strict ruled grid.
- **Capture evidence:** The screenshot measures 1504 ร 7095 pixels and was inspected in five portions through the footer. Dimensions below are approximate image pixels; CSS scale is unverified.
- **Tone:** Large sans-serif headings, geometric light-ray artwork and structured proof modules create an analytical brand presentation.
### Page composition
- **Top:** A dark demo announcement sits above a pale navigation bar.
- **Hero:** A navy region places a large headline and paragraph on the right, while colored rays fan from a point on the left.
- **Customer proof:** A white centered heading/action and two-row logo field follow.
- **Green grid:** A bright-green band pairs a short statement with explanation above three benefit columns.
- **Media/resources:** A white brand-video section precedes a two-column report promotion.
- **Further proof:** A navy three-benefit grid leads into a pale six-award grid.
- **Conversion/footer:** A large left conversion heading sits beside a long demo form; the navy footer contains brand, grouped links and a lower-right cookie notice.
### Information hierarchy
- **Hero:** A large two-line headline leads into explanatory copy and trial/demo actions.
- **Proof:** Large customer-count messaging and recognizable logos support the commercial story.
- **Grid modules:** A narrow left label column anchors wider content/benefit columns.
- **Media:** Video and report cover provide distinct supporting assets.
- **Awards:** Six badges each pair a title with an award-source line.
- **Form:** A right-side request-demo column contains six text fields and two dropdowns before a gradient action.
### Typography
- **Family:** A rounded geometric sans-serif is visible; exact identity is unverified.
- **Hero/conversion headings:** Approximately 64โ68px image size, regular-to-medium, with compact line-height.
- **Section headings:** Approximately 40โ44px.
- **Benefit titles:** Approximately 28โ30px with 38px line-height.
- **Body:** Approximately 16โ20px with 24โ30px line-height, depending on role.
- **Small labels:** Approximately 14px uppercase with increased tracking.
- **Footer:** Approximately 14px links and small legal copy.
### Colors & surfaces
- **Navy:** Sampled #100942 supplies hero, benefit band and footer.
- **Green:** Sampled #30D992 supplies the bright benefit region and primary accents.
- **Neutral:** Sampled #FFFFFF supplies reading areas; #F6F5F8 supplies pale navigation/award surfaces.
- **Ink:** Sampled #111111 supplies dark text on light/green regions.
- **Rays:** Cyan, blue, purple, pink and yellow lines fan across the hero.
- **Actions:** Green-to-blue gradients appear on selected actions; white and pale text contrast with navy.
### Components
- **Hero actions:** Compact pills pair a green filled trial action with a green outlined demo action.
- **Ruled grids:** Thin contrasting borders divide label columns, benefits and award cells.
- **Benefit icons:** Small symbols sit within large outlined circles.
- **Video:** A wide rectangular preview includes a large central play control and visible playback bar.
- **Report promotion:** Text and underlined download link sit left of a report-cover image with soft shadow.
- **Awards:** Six pale cells use badge images, large titles and smaller source labels.
- **Demo form:** Minimal underline-only fields and dropdowns form a narrow right column; no enclosing card is used.
- **Cookie notice:** A small white box overlays the footer with compact copy, policy link and close icon.
### Visual rhythm
- **Band alternation:** Navy, white, green and pale-gray sections create strong vertical progression.
- **Grid alignment:** Repeated narrow-left/wide-right divisions connect benefit and proof regions.
- **Whitespace:** Customer logos and report promotion use generous vertical padding.
- **Form asymmetry:** A large mostly open left conversion area contrasts with the dense right form.
- **Footer density:** Compact links and cookie copy form a denser ending.
### Responsive
- **Evidence limit:** Only desktop is observed; video, form and menu behavior are unverified.
- **Hero recommendation:** Stack text and decorative rays without obscuring the message.
- **Grid recommendation:** Convert benefits and awards to fewer columns with explicit headings.
- **Form recommendation:** Place the demo form below conversion copy and maintain persistent labels.
- **Overlay recommendation:** Keep cookie controls inside the viewport without covering form actions.
### Adaptation guidance
- **Layout system:** Reuse the ruled grid and narrow-label column consistently.
- **Brand assets:** Preserve the light-ray motif and coherent navy/green palette.
- **Data claims:** Treat displayed customer counts, report statistics and awards as source content unless verified.
- **Accessibility:** Provide labeled form fields, accessible media controls and semantic proof-group headings.
- **Behavior:** Define trial, demo and download flows separately from the static screenshot.
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.
## Direction
{{preferences.fidelityInstructions}}
## Output
{{output.instructions}}
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.