# Design from Reference: Hyperline 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:** Hyperline - **Category:** Features Page - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad39ec2028efdec71aee0_6acad143ba38b07cf05d6854_cms-01dd6714cae8f2cce96d3959.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:** Polished finance marketing combining bright product explanations with contrasting black feature sections. ### Page composition - **Canvas:** 1742 × 14335 screenshot px. Floating pill navigation, billing hero, landscape-backed dashboard, four alternating feature rows, dark analytics/testimonial/integration sections, pale feature grid, blue CTA, onboarding cards, developer section, product overview, metrics, closing CTA, and footer. ### Information hierarchy - **Priority:** Headline and paired actions introduce billing; detailed interface fragments substantiate each feature before integrations, implementation options, and conversion. ### Typography - **Scale:** Approximate screenshot hero 56 px, section headings 44–48 px, body 22 px, and small labels 16 px. Sans serif family and CSS scale unverified; code examples use monospace. ### Colors & surfaces - **Palette:** Sampled sRGB #FFFFFF, black #080808, pale #F7F7F7, and dark panels #1A1A1A. Bright blue highlights actions; colorful integration tiles and a landscape illustration provide localized color. ### Components - **Details:** Floating rounded navigation and pill buttons use soft shadows. Product screenshots fade into white, dotted dividers separate sections, integration logos form a grid, and testimonial uses portrait plus dark quote panel. ### Visual rhythm - **Spacing:** Approximately 1320 screenshot px content width, broad 140–180 px section spacing, alternating image/text columns, and three- or four-cell feature grids. ### Responsive - **Adaptation:** Mobile is not shown. Stack alternating rows, simplify dense screenshot crops, wrap integrations, and keep dark/light section transitions. ### Adaptation guidance - **Transfer:** Retain product-led evidence and restrained blue emphasis. Replace screenshots, testimonial, metrics, code, and compliance claims with verified target material. 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.