# Design from Reference: Hugging Face Repository settings 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:** Settings - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad09051f927271bf81ddf_6acad0286fd1e78f7bcbff7f_cms-ba5f0189a4feda07cd513cda.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:** Restrained developer repository editor with dense metadata and code controls. ### Page composition - **Canvas:** 2880 × 2906 screenshot px. Global navigation, repository identity/tabs, README filename, two-column metadata grid, code editor, branch choice, commit form, and actions. ### Information hierarchy - **Priority:** Files and versions is active. Metadata precedes editable Markdown; branch destination and commit description follow below. ### Typography - **Scale:** Estimated CSS at assumed 2× capture: repository title 18 px, body 14 px, code 14 px monospace, metadata labels 13 px. Sans serif family unverified. ### Colors & surfaces - **Palette:** Sampled sRGB #FFFFFF, neutral #F3F4F6, mint notice #F3FEF8, selected code line #EEF6FF, and border #E6E7EB. ### Components - **Details:** Thin rounded panels, gray input chips, Edit/Preview tabs, line-number gutter, radio branch choices, and disabled-looking commit action. Panel corners about 10 CSS px. ### Visual rhythm - **Spacing:** Estimated 1250 CSS px main width, compact 40 px metadata rows, and 24 px section gaps. Large editor area contrasts with dense metadata. ### Responsive - **Adaptation:** Mobile is not shown. Stack metadata columns and allow code scrolling without compressing controls. ### Adaptation guidance - **Transfer:** Retain metadata-to-edit-to-commit order and explicit branch choice. Adapt repository names, schema, and destination behavior to the target. 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.