# Design from Reference: Mercury Integrations 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:** Mercury - **Category:** Integrations - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb722210423f7ec1f64f41_6ac5745462053959450f6475_richtext-beea4390d007578efcdd.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:** Quiet banking integrations settings with pale lavender navigation, fine dividers and understated pill actions. ### Page composition - **Capture:** 2880 × 2900 screenshot pixels; estimated 2× CSS scale. - **Structure:** Left settings sidebar, top utilities and main Integrations column. Active integration groups expand into connection rows; available integrations appear below. ### Information hierarchy - **Priority:** Integration names/logos lead into connection counts and creators; read-only badges and pink Remove actions align right. Available tools end in setup links. ### Typography - **Family:** Slightly tracked sans serif; exact family unverified. - **Estimated CSS sizes:** Page heading 28px, section titles 20px, body 15–16px and helper/badges 12–14px. ### Colors & surfaces - **Measured palette:** White #FFFFFF, sidebar #F9F9FB, pale rules #F0EFFE, selected surface #F3F2F7 and ink #201F30. - **Accents:** Pink destructive links and provider logos; setup actions use quiet neutral pills. ### Components - **Elements:** Integration icons, active-count badges, connection creator/date rows, read-only labels/info icons, Remove pills, Add New Connection and setup/external-link actions. - **Estimated geometry:** Main width approximately 970px, 54px connection rows, 108px catalog rows, 32px actions and pill radii. ### Visual rhythm - **Spacing:** Thin horizontal rules organize open rows without enclosing cards; larger gaps distinguish active and available sections. ### Responsive - **Suggested adaptation:** Collapse sidebar and stack row details/actions on narrow screens. Mobile layout is unverified. ### Adaptation guidance - **Transfer:** Preserve integration-to-connection nesting and explicit permission labels. Keep removal visually distinct from setup. 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.