Blobr Add Product

# Design from Reference: Blobr Add Product Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Blobr - **Category:** Add & Edit - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb6d9eb206c0d3f8f3a579_6acb6b89c08cd859ff875d4c_cms-8f7b2d66a9b522d0ecc3dc73.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:** Utilitarian SaaS configuration wizard with restrained blue accents, a persistent step list and contextual help sidebar. ### Page composition - **Canvas:** 1440 × 821 screenshot pixels; CSS estimates are approximately screenshot scale, with capture scale unverified. - **Structure:** Thin top header, narrow left step navigation, central form about 580px wide and a pale right help column occupying roughly 29% of the width. ### Information hierarchy - **Priority:** Pricing-model heading, short instruction, five model choices, explanatory notice, then unit/billing/limit controls. - **Navigation:** The active Pricing model step is blue with a matching vertical marker. Back and Continue appear beneath the form. ### Typography - **Family:** Compact neutral sans-serif; exact family is unverified. - **Scale:** Estimated CSS heading 24px bold, description 16px, control labels 14px and help text 13–14px with relaxed line height. ### Colors & surfaces - **Sampled palette:** White #FFFFFF; sidebar #F3F4F5; notice tint #EEF9FC; border #E4E7EB; muted gray #7F7F7F. - **Accent:** Bright blue identifies selected radio cards, current wizard step, recurring mode and links; Continue is a softer blue in the captured state. ### Components - **Model picker:** Five adjacent outlined radio cards, with Free visibly selected. A pale blue information strip sits directly below. - **Form:** Full-width unit dropdown, two small billing-mode buttons, call-limit input and throttling input with helper copy. - **Help:** Video thumbnail with central play control, separated usage/tax guidance and a bottom-right circular chat launcher. Estimated 4–6px radii, 40px input heights and 1px borders. ### Visual rhythm - **Spacing:** Regular 24–32px field-group gaps and tight 8–12px intra-group spacing support scanning. - **Balance:** A broad blank gap separates central inputs from the quieter help rail; horizontal rules organize sidebar guidance. ### Responsive - **Guidance:** Mobile is not shown. Convert steps to a compact progress control, wrap pricing options and move contextual help below the form. ### Adaptation guidance - **Transfer:** Retain explicit model selection, conditional explanation and persistent progress. Adapt billing terminology and form validation to the target product. 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.