# Design from Reference: Threads Product Tour Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Threads - **Category:** Product Tour - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbba9bd01e364847659ae1_6acbb96553e35daefea9c717_cms-1cc69b8be731c2a62f905226.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:** Immersive product-tour slide with a purple background, sparse guidance and a large application preview. ### Page composition - **Canvas:** 2880 × 1642 screenshot px; CSS estimates assume 2× capture. - **Structure:** Circular previous/next controls at the upper corners; centered Inbox title, short subtitle and Show me action; large rounded app preview beginning below and cropped at the viewport bottom. ### Information hierarchy - **Priority:** Brief tour instruction leads immediately to the demonstrative inbox interface. The purple action is the only prominent central control. ### Typography - **Family:** Neutral sans serif, exact identity unverified. - **Scale:** Estimated CSS tour title 20 px, subtitle 14 px, action 13–14 px and embedded inbox labels 12–14 px. ### Colors & surfaces - **Sampled palette:** App background #F4F6F5 and near-white #FCFCFC. - **Backdrop:** Violet gradient includes sampled #604DA6, #5A489D and #59479C; lower area becomes darker. Bright violet controls contrast with the pale app preview. ### Components - **Tour controls:** White circular arrows approximately 40 CSS px diameter; rectangular violet Show me button with subtle rounding. - **App preview:** Left sidebar with Compose, Inbox, Drafts, channels and chats; main area with Inbox/Follow up/Done tabs, search and seven notification rows. - **Rows:** Compact avatars, sender, highlighted mentions, truncated message, channel icon and elapsed time; fine dividers and subtle shared shadow. ### Visual rhythm - **Spacing:** Open space above the product preview isolates the instruction. Dense repeated inbox rows demonstrate information organization within the larger slide. ### Responsive - **Observed:** Desktop tour only. - **Adaptation:** Use a focused product crop on mobile, keep arrows reachable and scale text independently rather than shrinking the entire screenshot. ### Adaptation guidance - **Preserve:** Minimal tour copy, one demonstration action and strong purple framing around the product. - **Replace:** Use the target product's actual inbox and supplied notification examples. 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.