# Design from Reference: Hyperline 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:** Hyperline - **Category:** Landing Page - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6967511d12515f198d27c578_a7djza1x0m8n3vxm9030jpqe51m9wn34.avif 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:** Polished revenue-platform marketing page mixing white editorial sections with near-black feature bands. - **Character:** Neutral typography, subtle grids, pill actions, product-UI collages, lifestyle imagery, and restrained module colors. ### Page composition - **Canvas:** 1695 × 14745 screenshot px; CSS scale unverified. - **Hero:** Floating pill navigation, left headline/actions, three module links, and full-width desk/product photograph. - **Sequence:** Customer marks, revenue overview, pricing/billing feature pairs, violet Stripe banner, dark capabilities/integrations, customer stories, team use cases, repeated product hero, dark metrics/CTA/footer. - **Container:** Broad centered reading column with consistent side insets. ### Information hierarchy - **Primary:** Two-tone revenue-management headline. - **Proof:** Product screenshots and customer quotes support each feature. - **Modules:** CPQ, Billing, Usage-based recur as clear entry points. - **Conversion:** Dark pills on white; white pill on closing dark section. ### Typography - **Family:** Neutral sans serif with compact proportions; exact identity unverified. - **Hero:** Approximately 64–72 screenshot px, medium, tight tracking. - **Section headings:** Approximately 42–48px. - **Body:** Approximately 20–22px with 30px line-height. - **Eyebrows:** Approximately 14–16px. - **Precision:** Image-based estimates, not verified CSS. ### Colors & surfaces - **Canvas:** #FFFFFF. - **Dark bands:** #080808. - **Dark cards:** #1A1A1A. - **Pale surfaces:** #F7F7F7 and #FAFAFA. - **Neutral variation:** #FBFBFB. - **Accents:** Teal, blue, violet module icons and violet partner banner; exact tokens unverified. - **Precision:** Flat screenshot samples; imagery/gradients vary. ### Components - **Navigation:** Rounded white floating bar with soft shadow. - **Actions:** Raised pills with subtle shadows. - **Product art:** Layered invoice, contract, subscription, and analytics UI, often fading into white. - **Dark cards:** Three-column grids with interface previews. - **Stories:** Photo cards with bottom dark gradient and white text. - **Integrations:** Logo-tile matrix fading toward edges. - **Closing metrics:** Three dark tiles with oversized values. ### Visual rhythm - **Spacing:** Large editorial section gaps and repeated dotted separators. - **Alternation:** Feature copy and product art switch sides. - **Contrast:** Long dark middle band creates a distinct product-capability chapter. - **Type:** Large headings balanced by thin labels and quiet body. ### Responsive - **Observed:** Desktop only. - **Recommendation:** Stack feature pairs, reduce card/logo grids, and crop lifestyle media fluidly. - **Navigation:** Collapse links while retaining the main action. ### Adaptation guidance - **Preserve:** Modular product narrative, UI evidence, monochrome structure, and controlled color accents. - **Content:** Use supplied verified metrics, module names, and authorized proof. - **Behavior:** Product UI in artwork does not establish functional controls. 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.