# Design from Reference: Dub Workspace general 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:** Dub - **Category:** Settings - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acd7250f7727a504606ca83_GK6HcT_ZW1M2y9sbZ1zBDSKOsYBwgrBl5aLb72czzSI.png 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 clean workspace-settings interface with layered pale gray navigation, large white configuration cards and a red destructive section. - **Tone:** Practical and modular, with each setting carrying its own explanation, input and save area. ### Page composition - **Capture scale:** The source measures 2880 × 2554 pixels. A roughly 1440 × 1277 CSS-pixel page at 2× scale is plausible but unverified. - **Navigation:** A narrow icon rail sits beside a roughly 232-pixel estimated CSS settings sidebar, both on pale gray. - **Main panel:** A large rounded white workspace contains a General header and five vertically stacked cards. - **Settings sequence:** Workspace Name, Workspace Slug, Workspace Logo and Default Product precede Delete Workspace. - **Lower sidebar:** Usage meters and a black Upgrade plan action remain visible; a compact Complete setup pill overlaps the main panel's bottom right. ### Information hierarchy - **Selection:** General is highlighted blue in the settings sidebar, with Workspace and Developer groups providing navigation context. - **Card structure:** Bold title and muted explanation precede an input or current logo. A separated footer holds constraints/help at left and save action at right. - **Destructive region:** The last card uses a red border, pale red footer and filled red action. - **State:** Save controls appear muted/disabled-looking, while existing values and the current circular logo are visible. ### Typography - **Family:** A neutral sans serif is visible; exact identity is unverified. - **Header:** General is approximately 18 estimated CSS pixels, semibold. - **Card titles:** Around 16 pixels, bold; descriptions, inputs, navigation and buttons are about 14 pixels with 20-pixel line height. - **Utility text:** Usage details and helper constraints are slightly smaller/more muted, around 12–14 pixels. ### Colors & surfaces - **Measured palette:** ICC-aware sRGB sampling yields white #FFFFFF, sidebar/canvas #F5F5F5, card-footer #FAFAFA, border #E5E5E5, muted text #737373 and pale destructive fill #FEF2F2. - **Accents:** Blue selection uses the pale #E8EFF9 family; black anchors the primary upgrade action and current logo. Red identifies deletion. - **Geometry:** Cards have thin gray borders and approximately 12-pixel estimated CSS corners, with flat surfaces and minimal shadow. ### Components - **Name and slug:** Two roughly 448 × 38-pixel outlined inputs contain existing workspace values. Their card footers explain character limits and slug formatting. - **Logo card:** A large circular black mark sits at right, with upload guidance at left and file constraints in the footer. - **Product selector:** A compact dropdown combines a small colored product icon, current product label and right chevron. - **Save footers:** Light gray bands repeat right-aligned rounded Save Changes buttons beneath each setting. - **Danger card:** A clear deletion title/description sits above a pale red action band with a red button at right. - **Navigation utilities:** Icon-and-label links, two slim usage bars and a black upgrade button provide a compact secondary hierarchy. ### Visual rhythm - **Card spacing:** Approximately 24-pixel estimated CSS gaps separate settings cards. - **Padding:** Card interiors use about 24-pixel insets, with consistent left edges for titles, explanations and inputs. - **Repetition:** The title/input/footer pattern makes each setting independent and easy to scan. - **Contrast:** The red final card provides a distinct ending without changing the surrounding layout structure. ### Responsive - **Recommendation:** Collapse the side navigation, let inputs fill the card width and wrap helper text/save controls on narrow screens. - **Recommendation:** Keep destructive controls visually separated and prevent the floating setup pill from obscuring them. No mobile rendering is shown. ### Adaptation guidance - **Preserve:** Retain modular setting cards, local save controls and a separate destructive region. - **Implement:** Provide explicit dirty/saved/disabled states and accessible upload/dropdown labels; behavior is not verifiable from the still. - **Safety of flow:** Use a distinct confirmation flow for deletion in an implementation; the screenshot only establishes the visible red action treatment. 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.