# Design from Reference: Huly Pricing 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:** Huly - **Category:** Pricing Page - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad403c910b3adf9e48b4b_6acad17f5a5fdf4c302facfc_cms-ead41a019437d0c5b4c620ca.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:** Dark cinematic pricing explainer with oversized prose, glossy inline icons and a luminous highlighted plan. ### Page composition - **Canvas:** 5760 × 13240 screenshot pixels. CSS estimates assume approximately 4× capture scale; this is inferred, not verified. - **Structure:** Slim navigation above a centered prose column, a horizontal plan-card strip, custom-plan explanation/contact link and a sparse footer. - **Framing:** The plan strip is visibly clipped at the right with a dark fade; this captured view does not show every plan fully. ### Information hierarchy - **Priority:** Large explanatory paragraphs introduce resource categories before pricing cards. - **Emphasis:** Inline pictorial icons mark concepts; the first plan has a bright cyan energy-like border and white Start Free action. Custom-plan contact follows below. ### Typography - **Family:** Clean sans-serif with regular-weight long-form copy; exact font is unverified. - **Scale:** Estimated CSS prose 36–38px with about 60–64px leading, card price 56–64px, card body 17–18px and navigation 14px. ### Colors & surfaces - **Sampled palette:** Near-black #090A0B with subtle #090B0B, #090D0F and #070A0B variations; white #FFFFFF text. - **Accents:** Cyan/teal glows outline the featured card, blue-to-violet inline links mark AI features, and warm orange/red icon highlights diversify the dark field. ### Components - **Inline artwork:** Rounded glossy app-like icons appear within sentence flow for storage, network, compute and media. - **Plan cards:** Tall dark panels with approximately 28–32px CSS radii, thin borders, large prices, checkmarked features and broad pill actions. - **Footer:** Single low-density row of legal links, social icons and a small warm glowing heart. ### Visual rhythm - **Spacing:** Long 60–80px CSS paragraph gaps and broad margins give the explanation a deliberate pace. - **Contrast:** Bright inline icons and a glowing card interrupt an otherwise text-led composition; a large blank interval precedes the footer. ### Responsive - **Guidance:** Mobile is not shown. Reduce prose size, ensure inline icons wrap cleanly and expose pricing through a clearly navigable stack or horizontal strip. ### Adaptation guidance - **Transfer:** Preserve the explanatory pricing narrative, inline visual vocabulary and focused plan emphasis. Use current target pricing and resource definitions rather than screenshot figures. 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.