# Design from Reference: Mercury Checking Dashboard 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:** Dashboard - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb722210423f7ec1f64f35_6acb6f2d018523cfee2c782e_cms-cabe73b49bd0b41361e91017.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:** Refined banking dashboard with white cards, pale-lavender navigation, compact labels, and restrained blue chart. ### Page composition - **Canvas:** 2880 × 1690 image px; CSS estimates assume unverified 2×. - **Sidebar:** Account navigation and balances. - **Main:** Search/move-money row; checking-details card left, balance chart right; transactions card below. ### Information hierarchy - **Primary:** Checking identity and account balance. - **Details:** Routing/account/bank information. - **Activity:** Recent transactions table. - **Action:** Move Money and smaller account actions. ### Typography - **Family:** Clean sans serif with slight tracking; exact identity unverified. - **Balance:** Approximately 30px CSS. - **Account heading:** Approximately 28px. - **Body:** Approximately 14–16px. - **Micro-labels:** Approximately 11px uppercase. - **Precision:** Estimated under 2×. ### Colors & surfaces - **Cards:** #FFFFFF. - **Sidebar:** #F9F9FB. - **Selected account:** #F3F2F7. - **Chart pale blue:** #EAF4FF. - **Text:** Dark violet/slate. - **Trend/positive values:** Teal. - **Precision:** Flat surfaces sampled; exact accent tokens unverified. ### Components - **Cards:** Approximately 14px radius, thin outline, soft shadow. - **Account data:** Pale rectangular value fields and masked number with eye. - **Chart:** Thin blue line with gradient fill. - **Transactions:** Avatars, dates, direction icons, amounts, fine separators. - **Actions:** Quiet inline row and white Move Money pill. ### Visual rhythm - **Spacing:** Broad card padding, balanced two-column top row. - **Alignment:** Financial values and table amounts line up clearly. - **Density:** Compact sidebar balances spacious cards. ### Responsive - **Observed:** Desktop only. - **Recommendation:** Stack cards, collapse account list, scroll transactions if needed. ### Adaptation guidance - **Preserve:** Account-details/balance/activity hierarchy and restrained financial presentation. - **Privacy:** Replace all account identifiers, balances, names, and transactions. - **Behavior:** Transfers and disclosure controls 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.