# Design from Reference: Prelude 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:** Prelude - **Category:** Features Page - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad3a9c2028efdec71b023_6acad152b2165b6c7fffb616_cms-73f4a30f71e8bf218d96dbc9.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 - **Style:** Light developer-oriented transactional-messaging page with restrained line illustrations, technical diagrams and a high-contrast dark feature section. - **Character:** Near-white canvas, black sans-serif headings, muted lavender-gray descriptions and selective blue/violet accents. Rounded message bubbles add a friendly product-demo layer. - **Surface treatment:** Fine grid rules, small crosshair-like corner marks, white illustrative cards and broad rounded dark panels. ### Page composition - **Capture scale:** 2391 × 10448 image px. Reconstruction estimates assume an unverified 2× capture, approximately 1196 × 5224 CSS px. - **Header:** White row with Prelude logo left, solution/resource/documentation/pricing links, account actions, black demo button and a compact locale control. - **Hero:** Two columns pair a bold multiline title, explanatory paragraph and two pill actions with a wireframe globe and two overlapping transactional-message bubbles. - **Multichannel section:** Centered eyebrow/title lead into a broad outlined diagram panel. Introductory text sits above a branching provider-routing diagram and a sample delivery notification. - **Benefit strip:** Three equal cells present Reach, Engagement and Cost-efficiency with circular icon treatments, bold labels and short descriptions. - **Template section:** Centered heading precedes two columns: a country-selection mockup on the left and code/message-preview artwork on the right. - **Analytics:** A full-width outlined region combines small introduction at upper left with an orange/purple two-series line chart and a floating metric tooltip. - **Trust/features:** A rounded black panel starts with centered headline and three customer logos. Below, six dark feature cells form two rows and three columns. - **Developer setup:** A centered heading leads into a left explanatory/action column and a larger right code panel with language tabs. - **Footer:** A rounded white panel contains brand, five link groups and a lower copyright/legal row. - **Capture detail:** Blue circular utility symbols at left and black chat symbols at right repeat down the long screenshot. Their repetition is visible, but it does not establish multiple separate page components or animation behavior. ### Information hierarchy - **Hero emphasis:** Heavy title communicates the messaging use case; muted copy explains it; white and black pills provide the two main routes. - **Section levels:** Small icon/eyebrow labels precede large centered headings. Selected words are bold within otherwise regular-weight headings. - **Product explanation:** Diagram, country selector, code sample and chart show distinct aspects of the workflow rather than repeating text-only cards. - **Trust hierarchy:** Customer marks lead the dark panel; capability titles and descriptions follow in a uniform grid. - **Developer emphasis:** Language tabs and syntax-highlighted code make the setup example a final technical anchor. - **Evidence limit:** Country toggles, chart tooltip and code tabs are visible states; their interactive behavior is not established. ### Typography - **Family:** Neutral modern sans serif; exact identity is unverified. - **Hero title:** Approximately 40–44 CSS px, bold, with 46–50 px leading. - **Centered section headings:** Approximately 34–36 px, regular with selected bold phrases, around 42 px leading. - **Feature titles:** Approximately 22–24 px semibold; small eyebrows around 14 px. - **Body:** Approximately 14–16 px with 22–26 px leading, using muted lavender-gray. - **Code:** Small monospaced text, approximately 12–14 px with 20 px leading; exact monospace family is unverified. - **Footer:** Approximately 12–13 px links and smaller muted group headings. - **Measurement limit:** Values are visual CSS estimates under the assumed 2× scale. ### Colors & surfaces - **Main surface:** Sampled sRGB #FAFAFA dominates the page. - **Illustrative cards:** Sampled #FFFFFF and #F6F7FB provide white/cool near-white surfaces. - **Dark panel:** Sampled #121212 and #000000 supply the trust/feature section's deep tones. - **Code surface:** Sampled #0B1017 supplies the near-black blue code background. - **Action accent:** Sampled #2942FC is a saturated blue reference among prominent circular utility elements. - **Rules:** Sampled #EDEDED is a pale-neutral separator reference. - **Other accents:** Lavender diagram routes, purple/orange chart lines and multicolor provider marks stay localized to illustrations; their exact values are not established by the dominant-color sample. ### Components - **Hero actions:** Compact outlined-white and black-filled pills, approximately 120 px wide and 34–38 px high, with small leading icons. - **Message bubbles:** Rounded white/cool-gray notification cards with sender icon, title, timestamp and multiline message, soft shadow and small speech tail. - **Routing diagram:** Black brand capsule connects through fine curved lines to circular provider-logo nodes; one violet route continues to a sample notification. - **Ruled panels:** Thin light borders with small plus-shaped registration marks at selected corners/intersections. - **Country mockup:** White rounded panel with five flag/name rows and right-aligned toggles. - **Code illustration:** White rounded window with three colored dots, blue/violet code text and a lower outlined message preview. - **Analytics chart:** Two thin colored lines with point markers, pale square grid and small white metric tooltip. - **Dark feature cells:** Fine grid separators, small outlined icon tiles, bright titles and muted descriptions. - **Language tabs:** Go, JavaScript and Python symbols above a dark code block; Go is visibly emphasized. - **Footer container:** White rounded rectangle, fine border, generous padding and text-only columns. ### Visual rhythm - **Section pacing:** Hero, routing, benefits, template tools, analytics, dark trust grid and code alternate between explanation and demonstration. - **Alignment:** A narrow centered content column carries ruled panels and footer; hero text and illustration align to its edges. - **Whitespace:** Large gaps around centered headings balance dense diagrams and code. - **Contrast change:** The dark feature grid interrupts the light page before the technical setup returns to a lighter surrounding canvas. ### Responsive - **Evidence limit:** Only desktop is visible; recommendations below are not observed behavior. - **Hero recommendation:** Stack text and globe/message artwork, keeping actions before decorative imagery. - **Grid recommendation:** Reduce three-column benefits/features and two-column template content progressively to one column. - **Diagram recommendation:** Simplify routing diagrams or provide horizontal scrolling rather than shrinking labels excessively. - **Code recommendation:** Preserve readable monospace size with horizontal overflow and accessible language tabs. - **Utility recommendation:** Keep floating controls clear of text and avoid reproducing screenshot repetition as duplicate live controls. ### Adaptation guidance - **Preserve technical clarity:** Combine concise claims with real workflow diagrams, examples and setup guidance. - **Use verified content:** Replace delivery rates, country counts, logos, savings claims and code with accurate target-product material. - **Retain restraint:** Use near-white surfaces, fine rules, black actions and localized technical accents. - **Match actual complexity:** Include country selection, routing and analytics only when relevant to the target product. - **Accessibility recommendation:** Provide text equivalents for diagrams, labeled toggles, readable code and accessible chart summaries; these behaviors are not verified by the capture. 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.