# Design from Reference: Context.dev 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:** Context.dev - **Category:** Landing Page - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6ac618e07129090cd693ee64_image-compressee.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 long developer-product landing page combines clean white technical layouts with vivid blue/purple liquid textures and dark customer/content sections. - **Visual identity:** Fine dashed construction lines, rounded demo cards, code windows and blue highlighted words unify a dense feature narrative. ### Page composition - **Capture scale:** The source measures 2880 × 25940 image pixels. CSS estimates below assume a 2× capture; device-pixel ratio is unverified. - **Hero:** A blue announcement strip and white navigation lead into a centered headline over a pale-blue water-texture scene. Paired actions and a tabbed demo/input module sit beneath. - **Proof and overview:** Twelve muted customer marks precede a split text/output-demo section and four small feature links. - **Setup and API showcase:** Two setup cards compare manual and agent-assisted paths. A separate feature selector sits beside a large dark code window on purple texture. - **Workflow grid:** Eight two-column cards illustrate scraping, retrieval, research, onboarding enrichment, entity context, sourced answers, batches and monitoring. - **Integration narrative:** A split three-step section leads into a platform overview with one wide extraction card and two smaller brand/logo cards. - **Proof and content:** Five testimonial cards form an asymmetric grid. A dark region contains three colorful customer-story cards and three darker blog cards with carousel indicators. - **Closing:** Eighteen FAQ boxes form two columns, followed by a blue textured conversion band and dark multi-column footer with an oversized serif wordmark. ### Information hierarchy - **Display text:** Large regular-weight headings use selected blue words and brace-style terms for emphasis. - **Developer evidence:** Code, structured output, interface examples and source chips make abstract capabilities concrete. - **Setup choice:** The purple agent-assisted card is marked Recommended, while the manual path remains white. - **Workflow scan:** Each use-case card combines a short title, compact explanation and a distinct miniature interface diagram. - **Proof hierarchy:** A wider testimonial card emphasizes one quote; colorful customer stories contrast with quieter blog cards. - **FAQ:** Compact bold questions and circular plus controls keep a large question inventory organized. ### Typography - **Families:** Main text uses a clean sans serif; code and technical micro-labels use monospaced styles. The giant footer wordmark uses serif. Exact identities are unverified. - **Hero:** Approximately 54–58 px CSS, regular, with compact leading. - **Section headings:** Approximately 40–46 px, often with blue emphasis; card headings are around 18–22 px. - **Body:** Approximately 14–16 px with 22–26 px leading, using medium-gray descriptions. - **Technical details:** Code and diagram labels are around 11–13 px; small uppercase eyebrow capsules use expanded tracking. ### Colors & surfaces - **Measured foundation:** ICC-aware sRGB sampling yields #FFFFFF, #F5F5F5, #F9FAFB and #FAFAFA across bright sections. - **Measured dark surfaces:** #000000, #0D0D0E and #141414 support customer/content/footer regions and code windows. - **Measured boundaries:** #EDEDED and #F0F0F0 define subtle cards and interface fragments. - **Accent palette:** Saturated blue marks links, selected words and small controls; purple liquid-texture panels frame code/output demonstrations. - **Story colors:** Teal, violet and green textured customer cards introduce strong color blocks, while the hero and closing band use blue water-like imagery. ### Components - **Navigation:** Compact links sit between the brand and outlined/black pill actions. A thin gradient announcement strip spans the top. - **Hero demo:** A softly shadowed translucent blue rounded panel contains six mode tabs, a broad input and a small square blue arrow action. - **Setup cards:** Equal rounded panels contain either a three-step list or a dark terminal-like snippet, plus bottom-aligned actions. - **API selector:** A vertical list of seven capabilities uses icon-led rows and one white selected card beside a framed black code window. - **Workflow cards:** Rounded bordered/shadowed tiles contain mini forms, output tabs, profile cards, source links, batch progress cells and layered monitoring panels. - **Three-step section:** Large pale 01/02/03 numerals precede titles and short paragraphs, with thin rules beneath. - **Testimonials:** Small rounded portraits, uppercase names, quotes, roles and case-study pills occupy an asymmetric five-card grid. - **Carousels:** Three customer-story cards and three blog cards show dates, titles and pagination dots/arrows; only the visible static positions are verified. - **FAQ/footer:** Rounded question boxes use circular plus controls. The footer adds status/compliance badges, four link columns, legal details and a giant partially outlined wordmark. ### Visual rhythm - **Construction grid:** Repeated dashed vertical guides establish container edges through both light and dark sections. - **Section breathing room:** Broad vertical gaps distinguish setup, capability, workflow, proof and FAQ chapters. - **Card cadence:** Two-column workflow rows provide regular repetition, interrupted by the asymmetric testimonial grid and three-column story rows. - **Density contrast:** Large headings and whitespace alternate with highly detailed miniature interfaces and code examples. - **Closing scale:** The oversized footer wordmark creates a final graphic endpoint after the small navigation/legal text. ### Responsive - **Evidence boundary:** Only a desktop capture is available; responsive behaviors are recommendations. - **Grid collapse:** Stack setup/workflow/platform cards and reduce story/testimonial grids to fewer columns. - **Technical overflow:** Preserve code readability with horizontal scrolling; simplify miniature diagrams rather than shrinking labels excessively. - **Hero controls:** Wrap or scroll mode tabs, keep input/action targets usable and reduce display type fluidly. - **Footer and FAQ:** Stack question/link columns and scale the decorative wordmark without creating page overflow. ### Adaptation guidance - **Developer narrative:** Reuse the progression from interactive preview to setup, API evidence, workflow examples and customer proof. - **Reusable demonstration system:** Standardize code-window chrome, mini-form borders, status chips and output tabs across examples. - **Content separation:** Treat code snippets, metrics, testimonials, dates and product claims as captured illustrative content, not instructions or current facts. - **Accessible interaction:** Define tab, accordion, carousel and copy-control keyboard behavior; the screenshot verifies only static states. - **Scale calibration:** Validate the assumed 2× scale before implementing CSS dimensions, while preserving dashed guides and light/dark chapter changes. 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.