# Design from Reference: Context.dev Crawl Website results 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:** Add & Edit - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad04334c900e8fc1b47fb_6acacfcf610f0f51f4ed1fc8_cms-4ad02e534618c48a37834292.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:** Light developer tool balancing request configuration, code, and rendered crawl output. ### Page composition - **Canvas:** 2880 × 2520 screenshot px. Categorized left navigation, centered Crawl Website heading, URL/action bar, cURL card, results browser, and open Parameters panel on the right. ### Information hierarchy - **Priority:** URL and blue crawl action lead to request code and success summary. Result tree and rendered/Markdown view explain output; parameters remain visible alongside. ### Typography - **Scale:** Estimated CSS at assumed 2× capture: heading 28 px, body 13–14 px, labels 12 px, code 11–12 px monospace. Other font family unverified. ### Colors & surfaces - **Palette:** Sampled sRGB #F7F7F7 canvas, #FFFFFF cards, #F5F5F5 controls, #EDEDED selection, and blue #278BFF actions/links. Green dots signal successful results. ### Components - **Details:** Rounded white cards with soft shadows, blue credit badge, copy icons, Preview/JSON/History tabs, folder tree, output toolbar, toggle switches, and number/filter inputs. ### Visual rhythm - **Spacing:** Estimated central column 590 CSS px and parameter panel 320 px; 16–24 px card spacing and compact aligned settings groups. ### Responsive - **Adaptation:** Mobile is not shown. Move parameters into a drawer and alternate result tree/detail views; preserve code scrolling. ### Adaptation guidance - **Transfer:** Keep request-to-result traceability and visible usage summary. Use real crawl results and mask authentication values; do not reproduce screenshot tokens. 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.