# Design from Reference: Dub Choose a Dub 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:** Dub - **Category:** Discovery Questions - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acd722e3468536c94f0be8f_XcO5WhnMt2uYi8CITdoAf3T43Sk7TWZj-vraZImnib4.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:** Minimal product-choice onboarding with white cards, oversized emoji imagery and subtle grid/glow background. ### Page composition - **Capture:** 2880 × 1624 screenshot pixels; estimated 2× CSS scale. - **Structure:** Centered wordmark, question/helper and two equal choice cards; account-switch option bottom left and help bottom right. ### Information hierarchy - **Priority:** Trophy and chain illustrations distinguish Partners and Links; each card ends in its own black continuation button. ### Typography - **Family:** Sans serif; exact family unverified. - **Estimated CSS sizes:** Question 20px bold, card titles 16px, description 14px and actions 14px. ### Colors & surfaces - **Measured palette:** White #FFFFFF with near-white #FEFEFE/#FEFEFF/#FFFFFE, black #000000 and border #D4D4D4. - **Accents:** Gold trophy, steel-blue chain and small purple/orange product icons. ### Components - **Elements:** Two outlined cards, large emoji-style product illustrations, explanatory copy and full-width black buttons. - **Estimated geometry:** Cards approximately 292×378px, 12px radii, 24px padding, 16px gap and 40px actions. ### Visual rhythm - **Spacing:** Large upper margin and generous card interiors isolate the binary decision. ### Responsive - **Suggested adaptation:** Stack cards and keep account switch below them. Mobile behavior is unverified. ### Adaptation guidance - **Transfer:** Preserve equal choice weight and concrete product descriptions; route each action to the appropriate workflow. 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.