# Design from Reference: Prelude 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:** Prelude - **Category:** Landing Page - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad3aac2028efdec71b035_6acad152ba38b07cf05d6e64_cms-f06fb24be08a1cbc4755961b.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:** A long monochrome developer-platform landing page with soft white cards, fine technical grid rules, oversized metrics, and a concentrated black/lime security section. - **Character:** Clean and demonstration-led, with small pill actions, diagrammatic product evidence, and restrained color outside illustrations. ### Page composition - **Capture and scale:** 1948 × 12828 screenshot pixels. Sizes below are approximate screenshot pixels; CSS scale is unverified. - **Opening:** A white navigation header precedes centered verification-message/code artwork, two-line product headline, supporting copy, and paired actions. - **Proof:** Customer marks and a testimonial share a split region, followed by category pills and a customer-story action. Three large KPI cards sit over a dotted field. - **Routing story:** A ruled content frame contains a routing introduction and three alternating text/diagram rows: provider network, fallback routes, and messaging channels. - **Security/analytics:** A large black panel with lime top strip contains a globe and two security diagrams. A light analytics section follows with a wide dashboard image and two supporting metric/optimization panels. - **Closing:** Three additional-benefit columns precede a six-cell audience grid, then a developer setup section with language tabs/code and paired actions. A rounded white multicolumn footer completes the page. ### Information hierarchy - **Narrative:** The sequence moves from verification value to proof, KPIs, delivery mechanics, security, analytics, audience fit, and implementation. - **Display hierarchy:** Headlines mix regular and bold phrase emphasis; huge percentage figures provide strong intermediate anchors. - **Evidence:** Diagrams and real-looking dashboard/code examples explain capabilities more prominently than long prose. ### Typography - **Family:** Neutral sans serif with monospace code/numeric details; exact identities unverified. - **Display:** Hero heading approximately 64 px screenshot, bold, with tight leading. Major section headings around 50–54 px, often mixed weight. - **Metrics:** KPI percentages are extremely large, roughly 190–210 px in the capture. Supporting captions are much smaller. - **Body:** Main descriptions around 24–26 px with generous leading; smaller grid copy 18–20 px. Pill actions and utility labels remain compact. ### Colors & surfaces - **Foundation:** Sampled sRGB #FAFAFA and #FFFFFF define the page/cards, with #F5F5F5 and #F9F9F9 subtle boundaries. - **Dark regions:** Sampled #000000, #020617, and #0B1017 define security/code/dashboard surfaces. - **Accents:** Lime highlights fraud/positive metrics, violet marks analytics details, and product/channel logos contribute localized colors. Exact accent hex values unverified. - **Text:** Black headings contrast with muted lavender-gray prose and line icons. ### Components - **Pill actions:** Compact white outlined and black filled pills use small leading icons. Header also contains signup, demo, and language controls. - **KPI cards:** Three white rounded rectangles have soft shadows, small cloud-like top cutouts, oversized figures, and captions; the center card sits slightly higher. - **Technical frame:** Thin gray rules and small plus-shaped intersections organize alternating feature rows and audience cells. - **Routing diagrams:** Circular provider logos orbit the brand, stacked route-price/status rows illustrate fallback, and notification cards represent channels. - **Security panel:** Black rounded region uses a lime country-code strip, dotted globe, stacked wireframe protection layers, and phone/status rows. - **Developer evidence:** A language-tab row sits above a dark syntax-colored code block. The footer is a large rounded outlined white panel. - **Capture artifact:** Blue and black floating support widgets repeat at many vertical positions in this long capture; do not reproduce every repetition as intentional content. ### Visual rhythm - **Spacing:** Use broad 140–200 px chapter intervals, consistent centered content edges, and generous room around large diagrams. - **Grid cadence:** Alternate full-width statements, two-column rows, three-column benefits, and a two-by-three audience grid. - **Restraint:** Keep most backgrounds pale; concentrate strongest contrast and lime emphasis in security and performance evidence. ### Responsive - **Observed state:** Desktop only; motion and alternative tab states are unverified. - **Recommended reflow:** Stack alternating rows and card grids, simplify diagrams, reduce enormous figures, and preserve readable dashboard/code crops. - **Controls:** Keep code internally scrollable and group floating support controls without duplication. ### Adaptation guidance - **Preserve:** Retain the restrained monochrome system, ruled technical grid, bold KPI cards, delivery diagrams, black security region, and developer implementation close. - **Adapt:** Use verified metrics, customer permissions, coverage, providers, security claims, and original product evidence. - **Avoid:** Do not copy performance percentages, route prices, code identifiers, or repeated capture widgets as real content. 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.