# Design from Reference: Hugging Face Browse AI Spaces Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Hugging Face - **Category:** Table - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad09351f927271bf81e17_6acad0280c49d10a7abcc673_cms-687e73eff0f9dcb62f06c5ac.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:** A light dataset directory with dense text cards, compact filter chips and understated gray-blue metadata. - **Evidence scale:** Original 2880 × 3076 pixels, inspected to the footer. CSS estimates assume an unverified 2× capture scale. - **Observed page:** The screenshot shows Datasets, regardless of the record's external title. ### Page composition - **Header:** Global brand/search/product navigation. - **Filters:** Approximately 400 px left region with six filter tabs, modality chips, size slider, format chips and type pills. - **Results:** Two-column grid of thirty compact dataset cards. - **Toolbar:** Dataset count/name filter left, full-text search/sort right. - **Bottom:** Pagination then full-width theme/legal/product footer. ### Information hierarchy - **Directory:** Datasets heading and count establish context. - **Cards:** Monospaced dataset identifier above small metadata row. - **Filters:** Main tab is black filled; type pills use distinct pale colors. - **Pagination:** Current first page is outlined. ### Typography - **Heading:** Unverified sans-serif around 16–18 px medium. - **Identifiers:** Monospaced around 16 px regular. - **Metadata:** Approximately 12–13 px muted. - **Filters/footer:** Around 13–14 px regular. ### Colors & surfaces - **Base:** White #FFFFFF with pale #FAFBFC filter background family. - **Cards:** Very subtle cool-white gradients and thin gray edges. - **Ink:** Black/dark slate identifiers, muted blue-gray metadata. - **Accents:** Multicolor modality symbols, yellow/blue/green type pills and yellow brand mark. ### Components - **Filter chips:** Small white outlined rounded pills with leading icons. - **Slider:** Thick black track, circular endpoints and tiny endpoint labels. - **Result cards:** Approximately 402 × 62 px, 8 px radii, faint border/shadow. - **Metadata rows:** Small icons, update time, row/download/like values separated by dots. - **Toolbar:** Compact rounded filter/search/sort controls. - **Pagination:** Previous, numbered pages, ellipsis and Next. ### Visual rhythm - **Grid:** Roughly 20 px column gap and 20 px vertical pitch between cards. - **Filter groups:** Approximately 40 px separation. - **Density:** Tight metadata rows contrast with broad white margins. ### Responsive - **Observed limit:** Desktop only. - **Recommendation:** Collapse filters and use one result column on narrow screens. - **Identifiers:** Truncate long names with access to full labels; preserve metadata meaning. ### Adaptation guidance - **Retain:** Separate rich taxonomy from a compact scannable results list. - **Implement:** Use restrained surfaces, monospaced identifiers and small semantic chips. - **Verify:** Confirm fonts, scale and filtering behavior separately; counts and datasets are captured content, not live inventory. 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.