# Design from Reference: Lightdash 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:** Lightdash - **Category:** Customers Page - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad337d5603a17eba5b5c7_6acad0c03003494aa6937b8d_cms-7de349b0f8735ab36aaecf9e.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:** Precise customer-story directory with pale grid lines, square cards and small violet geometric accents. ### Page composition - **Capture:** 2880 × 6292 screenshot pixels; estimated 2× CSS scale. - **Structure:** Navigation, left-aligned introduction, two-column five-row story grid, dark conversion banner and dark newsletter/footer. ### Information hierarchy - **Priority:** Customer logos top each card; story titles and Read full story links align near the bottom. ### Typography - **Family:** Sans serif; exact family unverified. - **Estimated CSS sizes:** Hero 56px, card titles 20px, body 18px and link/navigation 14–16px. ### Colors & surfaces - **Measured palette:** White #FFFFFF, cards #F9FAFB, subtle #F7F8FA, dark #1A1B25, secondary dark #292A38 and rules #E6E7EB. - **Accents:** Bright violet checkerboard corners and conversion buttons. ### Components - **Elements:** Open rectangular story cards, customer wordmarks, tiny arrow links, dotted alignment grid, paired CTA buttons, award badges and newsletter input. - **Estimated geometry:** Content 1280px wide, 48px grid gutters, cards approximately 550×276px, square corners and 32px padding. ### Visual rhythm - **Spacing:** Large empty card interiors separate logos from titles; repeated grid rules create an architectural rhythm. ### Responsive - **Suggested adaptation:** Stack stories, reduce blank card height and wrap footer groups. Mobile behavior is unverified. ### Adaptation guidance - **Transfer:** Retain logo/title hierarchy, restrained geometry and violet accent restraint. Use genuine customer stories. 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.