# Design from Reference: Searchable Customers 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:** Searchable - **Category:** Customers Page - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad398c2028efdec71ae3c_6acad111e575349288e3c042_cms-91c876fd0826107629af7809.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:** Editorial customer case study with warm neutrals, rust accents, and sparse hand-drawn illustrations. ### Page composition - **Canvas:** 2495 × 10012 screenshot px. Announcement/navigation, story headline, author/use-case metadata, five numbered narrative sections, embedded analytics view, results strip, speech-bubble testimonial, CTA, related story, and dark footer. ### Information hierarchy - **Priority:** Outcome-led headline introduces the story; numbered sections develop challenge, solution, results, and implications. Three large rust metrics emphasize evidence. ### Typography - **Scale:** Estimated CSS at assumed 2× capture: title 36 px, section titles 20 px bold, body 16 px, section numerals 48 px. Sans serif family unverified. ### Colors & surfaces - **Palette:** Sampled sRGB #FFFFFF, dark #15100F, warm #FCFBF7/#FAFAF9/#FBFAF5. Rust accents highlight announcement, metrics, and CTA; muted gray supports paragraphs. ### Components - **Details:** Thin outlined illustrations, generous numbered headings, embedded dashboard fading at its lower edge, hand-drawn outlined quote bubble, compact paired actions, and lightly bordered related-story card. ### Visual rhythm - **Spacing:** Approximate CSS article width 850 px with narrower narrative paragraphs; large 80–120 px section gaps maintain editorial pacing. ### Responsive - **Adaptation:** Mobile is not shown. Stack metadata and metrics, scale the dashboard crop, and keep narrative line lengths comfortable. ### Adaptation guidance - **Transfer:** Preserve numbered storytelling and distinct evidence blocks. Replace quotations, outcomes, dates, and customer details with verified 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.