# Design from Reference: Hyperline Documentation 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:** Documentation - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/69674fae26440c54754b1710_moybwoHRuLlYYxFgXspVvbr8xl2OneuUurotuSIOO1Q.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 - **Character:** A neutral documentation home uses off-white surfaces, black text, thin rounded outlines and simple line icons. - **Evidence:** The image measures 2940 × 2814 pixels. CSS sizes assume an unverified approximately 2× capture density. ### Page composition - **Top bar:** Brand sits left, broad search and Ask AI centrally, with call/support/start/theme controls right. - **Sidebar:** A roughly 320-pixel navigation column groups documentation destinations and many nested topic links. - **Article area:** Intro label, welcome heading, subtitle and paragraph lead into six getting-started cards in two columns. - **Lower content:** Helpful Yes/No controls, next-page navigation, a divider and two social marks finish the main area. ### Information hierarchy - **Introduction:** The welcome heading dominates, followed by a medium subtitle and explanatory paragraph. - **Getting started:** Six icon-led cards identify account setup, customers, subscriptions, invoices, usage and API documentation. - **Navigation state:** Home has a filled gray highlight in the sidebar; group labels are bold above indented links. - **Feedback:** Page-helpfulness controls and next-page link are clearly secondary. ### Typography - **Heading:** Approximately 30–32 CSS pixels semibold; Get started around 24 pixels. - **Body/cards:** About 16 pixels with 24–28-pixel leading; card titles are semibold. - **Navigation:** Around 14 pixels; exact sans-serif identity is unverified. ### Colors & surfaces - **Measured palette:** ICC-to-sRGB sampling identifies #FAFAFA as the broad canvas, #FFFFFF as cards and #3F3F3F as a prominent text tone. - **Measured supporting tones:** #E4E4E4/#E6E6E6 supply outlines/selection areas and #505050 body text. - **Accent approach:** The page is predominantly monochrome; the primary Get Started control is near-black. - **Depth:** Fine outlines and roughly 16-pixel card radii establish grouping with minimal shadow. ### Components - **Search:** A rounded field includes magnifier and shortcut hint, beside a small outlined AI action. - **Topic cards:** Six approximately 400 × 158-pixel panels use 24-pixel padding, large line icon, title and short description. - **Sidebar links:** Major destinations have icon tiles; topic groups use simple text links and occasional chevrons. - **Feedback:** Two compact rounded buttons include thumbs icons and Yes/No labels. - **Next-page link:** A small right-aligned label and chevron sit below the cards. ### Visual rhythm - **Content width:** The main reading/card region is roughly 820 pixels wide with generous right whitespace. - **Grid cadence:** Two equal columns use approximately 16-pixel gaps and consistent card padding. - **Vertical spacing:** Large gaps separate introduction, card grid, feedback and footer-like controls. ### Responsive - **Observed scope:** One desktop documentation view is shown; search/AI interactions and collapsed navigation are not visible. - **Recommended layout:** Collapse the sidebar, reduce cards to one column and let search fill available width. - **Recommended access:** Preserve semantic navigation groups, selected-page indication and clear keyboard focus. ### Adaptation guidance - **Documentation pattern:** Introduce scope, offer a small set of task-oriented entry cards and retain a detailed topic tree. - **Content hierarchy:** Keep card descriptions short and distinguish API reference from general setup. - **Implementation:** Verify fonts/density and define search, feedback and theme states; retain accessible icon labels. 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.