Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Surfe Use Cases
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** Surfe
- **Category:** Use Cases
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbb9bed1be8ecd2912de64_6acb694becc5bd4d930a0d44_cms-3b31e8ce3bc5f99adaae0b40.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:** Playful sales-software marketing with dark teal typography, pastel blocks, cutout portraits and hand-drawn surfing motifs.
### Page composition
- **Canvas:** 2880 × 12834 screenshot px; CSS estimates assume a 2× capture.
- **Sequence:** Navigation; split hero with testimonial collage; ruled logo strip; proof metrics; three alternating product-image/text rows; paired feature panels; testimonial mosaic; split photographic CTA; two-tone footer.
- **Layout:** Estimated CSS outer gutters 60 px, two-column gaps 40–80 px and broad full-width testimonial/footer bands.
### Information hierarchy
- **Emphasis:** Multiline hero highlights its last word in pale blue; later headings highlight individual words in rounded pink or orange shapes.
- **Progression:** Product explanation alternates with social evidence before the final signup prompt.
### Typography
- **Family:** Rounded humanist sans serif with open forms; exact font unverified.
- **Scale:** Estimated CSS hero 56–60 px, section headings 44–48 px, feature headings 30–32 px and body 18 px; compact navigation approximately 14 px.
### Colors & surfaces
- **Sampled palette:** Near-white #FAFAFA; pale cyan #EBFAFD; teal #083742; deeper footer #09272E; white #FFFFFF; pink #FFDEF6; peach #FFCFB4.
- **Treatment:** Flat pastel fills, soft product-image shadows and restrained thin rules. Yellow metric tile adds a small bright accent.
### Components
- **Hero collage:** Cutout portrait overlaps an irregular cyan shape and layered quote card, with large yellow quotation marks and loose ink-like arrows.
- **Features:** Floating CRM fragments fade into the background; paired pink/peach panels use large imagery above text.
- **Footer:** Oversized surf-styled logo, three link columns, newsletter input, social icons and illustrated character. Estimated corners 4–12 CSS px; buttons are compact dark rectangles.
### Visual rhythm
- **Spacing:** Approximately 100–160 CSS px separates major feature rows. Alternating alignment and pastel evidence blocks sustain the long page.
### Responsive
- **Observed:** Desktop only.
- **Adaptation:** Stack split rows in reading order, keep product crops readable and turn metric/feature grids into one column. Reduce display type to approximately 36–40 CSS px on small screens.
### Adaptation guidance
- **Preserve:** Teal/pastel contrast, selective word highlights, casual doodles and generous feature spacing.
- **Replace:** Use supplied product UI, genuine customer evidence and brand-appropriate photography; do not copy metrics or identities.
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.