# Design from Reference: Frame Search Modal Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Frame - **Category:** Search Modal - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbcc50e13ab9df8f053323_6acbcafcc4b48999da414ce8_cms-9bd06894cc2463ec3056d0a8.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:** Lightweight search overlay above a pale workspace dashboard with large shortcut tiles. - **Character:** White dialog, thin outline, broad soft shadow, compact result row, and restrained neutral palette. ### Page composition - **Canvas:** 5760 × 3260 image px; CSS estimates assume an unverified 4× capture. - **Header:** Thin global utility row. - **Dashboard:** Greeting and shortcut tiles above grouped product/operations integrations. - **Search:** Approximately 600 × 148 CSS px floating near top center, without heavy background dimming. - **Dialog:** Query field on top; helper label and one result below divider. ### Information hierarchy - **Primary:** Typed query and matching result. - **Result:** Bold matching name fragment, quieter remaining title, and small blue document icon. - **Context:** Shortcut and integration tiles remain visible behind the overlay. ### Typography - **Family:** Neutral interface sans serif; exact family unverified. - **Query/result:** Approximately 14 CSS px under assumed 4×. - **Helper:** Approximately 12px. - **Dashboard greeting:** Approximately 28px. - **Tile labels:** Approximately 16px, semibold. - **Precision:** Font values and 4× scale are estimates. ### Colors & surfaces - **Canvas:** #F9F9F9. - **Dialog/tiles:** #FFFFFF. - **Result highlight:** Approximately #F5F5F5. - **Other neutrals:** #F8F8F8, #F7F7F7, and #F3F3F3. - **Text:** Dark gray/black. - **Document icon:** Bright blue. - **Precision:** Flat samples from screenshot; exact text/icon tokens unverified. ### Components - **Dialog:** Approximately 10px CSS radius, subtle cool border and diffuse dark shadow. - **Query:** Unboxed full-width input area. - **Result:** Rounded pale-gray row with icon and mixed-weight title. - **Dashboard tiles:** Large white squares with icon top-left and label bottom-right. - **Help:** Small black circular chat launcher. ### Visual rhythm - **Spacing:** Compact search/results contrasts with broad dashboard tile gaps. - **Overlay:** Shadow supplies focus while preserving underlying content. - **Alignment:** Query, helper, and result use repeated left insets. ### Responsive - **Observed:** Desktop only. - **Recommendation:** Make search width fluid with safe side margins and constrain results height. - **Keyboard:** Implement clear focus and selection only as intended behavior, not inferred from the still. ### Adaptation guidance - **Preserve:** Immediate query/result hierarchy, compact highlighted row, and strong elevation. - **Privacy:** Replace query, result names, and workspace identity. - **Behavior:** Search matching, shortcuts, and opening results are not demonstrated. 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.