# Design from Reference: MentionFunnel 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:** MentionFunnel - **Category:** Product Tour - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbbbe6f023ce865170e0c2_6acbbb28d1be8ecd29135801_cms-1677710d0f397f31dbd28894.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 - **Style:** Dark contextual product tour with charcoal tooltip and lavender progression buttons. ### Page composition - **Canvas:** 1440 × 821 screenshot px. - **Workspace:** Narrow rail, campaign navigation, list, and message pane. - **Tour:** Approximately 400 × 180px card beside selected Contacts navigation. ### Information hierarchy - **Primary:** Contacts tooltip explains bulk messaging. - **Target:** Contacts row spotlight. - **Actions:** Exit, Back, Next. ### Typography - **Family:** Neutral sans serif; exact identity unverified. - **Title:** Approximately 16px semibold. - **Body:** 14px with 20px line-height. - **Precision:** Screenshot estimates. ### Colors & surfaces - **Canvas:** #0B0B0B. - **Panels:** #131313/#111111/#0E0E0E. - **Tooltip:** #262626. - **Controls:** #181818. - **Actions:** Pale violet, exact token unverified. - **Precision:** Dark backdrop includes dimming. ### Components - **Tooltip:** Rounded charcoal rectangle, short heading/body, right-aligned footer. - **Target:** Pale-dark selected navigation. - **Workspace:** Message editor with violet outline and dark reply control. - **Help:** Violet chat bubble. ### Visual rhythm - **Contrast:** Most interface heavily subdued; tooltip and target retain emphasis. - **Spacing:** Compact instructional card. ### Responsive - **Observed:** Desktop only. - **Recommendation:** Reposition tooltip and ensure target/action visibility. ### Adaptation guidance - **Preserve:** Context-specific explanation and back/next hierarchy. - **Privacy:** Replace campaign/message identities. - **Behavior:** Tour and bulk sending unverified. 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.