# Design from Reference: Intercom Article Settings Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Intercom - **Category:** Settings - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad5d2d05a3f53c0a6e570_6acad556a43009b06fe5f596_cms-342a486471b90343d3fc36ec.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:** Practical article-settings drawer layered over a dimmed help-center editor, using clear form groups and restrained grayscale controls. ### Page composition - **Capture:** 2880 × 1630 screenshot pixels; estimated 2× CSS scale. - **Structure:** Right drawer occupies approximately half the viewport; title and Save/close controls sit above collection, target-audience and article-suggestion sections. ### Information hierarchy - **Priority:** Collection selection comes first, audience rules second and suggestion exclusion last. Black Save settings button remains prominent at the top. ### Typography - **Family:** Sans serif; exact family unverified. - **Estimated CSS sizes:** Drawer heading 18px, section labels/body 14px and explanatory text 13–14px. ### Colors & surfaces - **Measured palette:** Drawer white #FFFFFF with near-white #FFFFFE/#FEFFFF/#FFFEFF; dimmed background grays #6F6F6F and #6A6A6A. - **Accents:** Black save action, blue Add audience rule and a pale red delete control. Gray background samples include the overlay effect. ### Components - **Elements:** Collection dropdown and trash icon, audience chip, Add audience rule link, explanatory links, exclusion checkbox, save button and close icon. - **Estimated geometry:** Drawer approximately 700px wide, 32px padding, 1px separators, controls 32px high and 6–8px radii. ### Visual rhythm - **Spacing:** Broad paragraph spacing and horizontal rules divide three form groups; substantial blank lower area keeps the drawer uncluttered. ### Responsive - **Suggested adaptation:** Expand drawer to a full-screen sheet on narrow viewports and keep Save/close accessible. Mobile behavior is not shown. ### Adaptation guidance - **Transfer:** Preserve the collection/audience/discovery grouping and explicit save control. Keep explanatory copy next to the setting it qualifies. 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.