Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Reveal Features 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:** Reveal
- **Category:** Features Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbbe3a476aea3982e3fa6c_6acbbd68578bcc4111757ae7_cms-fa5c5c50c91d78f4e4ffcc23.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 distinctive features page combines deep blue-black surfaces, warm cream sections, large serif headings and mint/purple accents.
- **Brand expression:** Grainy green-to-violet gradients, arched illustration backplates and surreal editorial artwork create a rich visual identity.
### Page composition
- **Capture:** The source measures 1440 ร 10621 image pixels. Observed dimensions below approximate CSS only under an unverified 1ร capture assumption.
- **Header and hero:** The wordmark sits left of a cream capsule navigation. A centered two-line serif heading, explanation and mint action sit over a gradient fading into the dark page.
- **Feature sequence:** Six alternating image/text rows cover ecosystem expansion, partnership assessment, account mapping, lead targeting, ROI and workflow integrations.
- **Feature visuals:** Simplified product-interface illustrations sit over tall dark arched backplates; text columns include large serif headings, body copy and purple numeric callouts.
- **Conversion and integrations:** A centered signup/demo block ends the dark sequence. A cream section pairs CRM integration copy with a vertical stack of large muted provider marks.
- **Audience and FAQ:** A very large centered statement introduces three illustrated audience cards. A split FAQ region pairs heading/support action with three collapsed questions.
- **Closing:** A second gradient signup band leads into a dark four-column footer with legal links, social circles, decorative brand marks and a back-to-top control.
### Information hierarchy
- **Display voice:** Large serif headings dominate the hero and each feature, contrasting with plain sans-serif explanatory copy.
- **Metric emphasis:** Purple numbers or symbols sit beneath feature paragraphs with small muted captions.
- **Product evidence:** White interface fragments stand out clearly against dark arched shapes.
- **Audience paths:** Three cards use large artwork, centered serif titles, short descriptions and outlined actions.
- **FAQ priority:** Only three broad questions are visible, with a separate support-center route.
### Typography
- **Families:** A bold editorial serif is used for display text and metrics; body/navigation use sans serif. Exact identities are unverified.
- **Hero and major statements:** Approximately 80โ96 px in the source, bold, with tight line spacing.
- **Feature headings:** Approximately 60โ68 px, often wrapping to two or three lines.
- **Body:** Approximately 18 px with 26 px leading, in narrow readable columns.
- **Secondary roles:** Metric captions and footer links are around 14โ16 px. An italic serif subtitle introduces audience cards.
### Colors & surfaces
- **Measured dark base:** ICC-aware sRGB sampling yields #0C151B, with #1D252F for illustration backplates.
- **Measured warm surfaces:** Cream #F6F2E8 and pale #FAFAF6 support light sections and interface fragments.
- **Measured accents:** Mint #95E1B0 and purple #7177F9 appear in actions, metrics and gradient treatments.
- **Measured muted text:** #8D909D supports captions and provider marks.
- **Transitions:** Soft grainy bands blend cream, mint, blue and violet at the opening and closing conversion regions.
### Components
- **Capsule navigation:** A broad cream rounded container holds links, purple login text and an outlined mint signup pill.
- **Feature illustrations:** White tables, partner lists, consent prompts and CRM fragments float over rounded-top dark arch shapes.
- **Metric blocks:** Large purple serif numerals/symbols sit above compact two-to-four-line captions.
- **Buttons:** Mint filled, cream filled, dark filled and thin outlined pills share a consistent rounded silhouette.
- **Integration marks:** Large gray provider logos and a CSV document symbol form a vertical visual stack beside copy.
- **Audience cards:** Three equal-width cream/near-white cards combine large mint/purple surreal artwork with centered text and bottom actions.
- **FAQ rows:** Thin horizontal rules separate bold questions with angular downward indicators at the right.
- **Footer utilities:** Outlined circular social controls, decorative typographic marks, a back-to-top pill and a purple chat launcher complete the lower region.
### Visual rhythm
- **Alternating cadence:** Feature illustrations and copy swap sides, with broad vertical gaps between rows.
- **Arched repetition:** Consistent backplate silhouettes unify otherwise different product diagrams.
- **Light/dark chapters:** The cream integration/audience area creates a strong transition after the long dark feature narrative.
- **Width changes:** Narrow body columns contrast with expansive centered display statements and full-width gradient bands.
- **Footer spacing:** Link groups, legal row and decorative bottom strip are separated by generous gaps and a fine rule.
### Responsive
- **Evidence boundary:** Only a desktop page is shown; responsive behaviors are recommendations.
- **Stacked features:** Collapse image/text rows into a consistent single-column order, reducing heading scale fluidly.
- **Integration and audience flow:** Reflow provider marks and audience cards without shrinking text into narrow columns.
- **Navigation/footer:** Collapse the wide capsule menu and stack footer groups while preserving clear primary actions.
- **Decorative treatment:** Scale gradients and arches independently from text so they remain supportive rather than obstructive.
### Adaptation guidance
- **Feature storytelling:** Reuse one benefit, one product visual and one supporting metric per row for a coherent long-page narrative.
- **Visual consistency:** Preserve serif/sans contrast, arched backplates and the cream/mint/purple palette across assets.
- **Content separation:** Treat metrics, integration claims and provider identities as captured content rather than current product facts.
- **Accessible interactions:** Define focus and expanded FAQ states; ensure decorative artwork does not replace explanatory text.
- **Scale calibration:** Validate observed source pixels against the intended CSS viewport before implementing dimensions.
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.