Assembly Search Modal

# Design from Reference: Assembly 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:** Assembly - **Category:** Search Modal - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb6758994832179b56051c_6acb6567ac21a1e4ab65773b_cms-7ebeada20317b621d2e5a691.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:** A light calendar-planning dashboard with a compact command-search overlay and subdued gray backdrop. - **Focus:** Search results use simple rows, social-channel icons and a keyboard-hint footer rather than large cards. ### Page composition - **Capture scale:** The source is 2880 × 1742 pixels. A roughly 1440 × 871 CSS-pixel viewport at 2× scale is plausible but unverified. - **Dashboard:** A roughly 200-pixel estimated CSS sidebar sits beside a two-week calendar, toolbar and campaign/post blocks. - **Search overlay:** A wide panel around 768 × 273 estimated CSS pixels sits near the top center rather than the viewport's vertical midpoint. - **Internal stack:** Search input, POSTS category strip, three results and a gray keyboard-hint footer form the overlay. ### Information hierarchy - **Search:** A magnifier and entered single-character query lead the panel. - **Results:** Each row shows a post title, social-channel mark and smaller date. The first row is highlighted with a warm pale fill and a right chevron. - **Hints:** Small boxed keys explain campaign, post and help search modes at the panel's bottom. - **Background:** Calendar date labels, campaign bars and status-tagged post cards remain recognizable beneath the scrim. ### Typography - **Family:** A compact sans serif is visible; exact font identity is unverified. - **Results:** Titles are around 14 estimated CSS pixels, regular; dates are approximately 12 pixels. - **Category and hints:** POSTS is around 11 pixels, uppercase; footer guidance is about 12–13 pixels. - **Dashboard:** Navigation is around 14 pixels, while calendar metadata uses smaller compact labels. ### Colors & surfaces - **Measured palette:** ICC-aware sRGB samples include dimmed background #D8DCDF, white #FFFFFF, footer/category gray #EDEDED and highlighted result #F4F2EC. - **Background variations:** #D7DBDE and #D5D9DC reflect dimmed surfaces, while #C2C9E2 appears in the campaign-band family. - **Accents:** Teal dashboard controls, blue social icons and small colored status dots provide context without dominating the overlay. - **Elevation:** The search panel has small corners around 6 estimated CSS pixels and a broad soft shadow. ### Components - **Search field:** A plain full-width white row around 48 CSS pixels high, with a left magnifier and no separate submit button. - **Result rows:** Three compact two-line entries use roughly 50-pixel heights and about 20-pixel side insets. - **Key hints:** Small white outlined keycaps appear inline with explanatory text in the gray footer. - **Calendar shell:** A view switch, filter button, Today navigation and time-range controls sit above the grid. - **Utilities:** A chat launcher with a small notification badge appears at lower right beneath the scrim. ### Visual rhythm - **Overlay density:** Short, repeated result rows keep the panel easy to scan. - **Alignment:** Search icon/query, category text, result titles and footer share consistent horizontal insets. - **Background rhythm:** Fine calendar rules and long campaign bars form a regular grid behind the floating panel. ### Responsive - **Recommendation:** Fit the search panel within viewport width minus 24–32 CSS pixels, allowing long titles and hint text to wrap. - **Recommendation:** Preserve a clear highlighted result and keyboard/touch navigation; simplify the background calendar on phones. No mobile state is shown. ### Adaptation guidance - **Preserve:** Retain the compact input/results/hints structure and channel/date metadata. - **Implement:** Use accessible combobox/listbox semantics, keyboard result movement and focus restoration; behaviors cannot be verified from the image. - **Clarity:** Keep selected-row treatment distinct from background campaign colors. 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.