# Design from Reference: Ruul Client Added Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Ruul - **Category:** Add & Edit - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb6d83b206c0d3f8f39e50_6acb6b870e8221f1308271b0_cms-e269999258e20535340e55a6.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:** Financial client directory with white canvas, deep-teal navigation/actions, warm-gray controls, and soft panel elevation. ### Page composition - **Canvas:** 2880 × 1642 image px; CSS estimates assume an unverified 2× capture. - **Sidebar:** Approximately 300 CSS px wide with logo, navigation, and lower account selector. - **Main:** Clients heading, six status tabs, large white directory panel. - **Panel:** Search and New Client action above one client row, then broad empty region and entry count. ### Information hierarchy - **Primary:** Clients title and New Client button. - **Filter state:** All Clients is filled teal. - **Row:** Avatar, client name, secondary details, amber verification badge, and ellipsis menu. - **Feedback:** Single visible record establishes a populated state. ### Typography - **Family:** Neutral sans serif; exact family unverified. - **Title:** Approximately 40 CSS px, bold. - **Navigation/buttons:** Approximately 14–16px, semibold. - **Row name:** Approximately 14px, bold. - **Secondary details/count:** Approximately 12px. - **Precision:** Font values and scale are estimates. ### Colors & surfaces - **Canvas/panel:** #FFFFFF. - **Row surface:** #F8F8F6. - **Search/account selector:** #ECECE5. - **Primary teal:** #003F39. - **Avatar:** Bright cyan-blue. - **Status:** Amber-yellow. - **Shadow:** Broad soft gray below main panel. - **Precision:** Flat neutral/teal samples; accent exact tokens unverified. ### Components - **Tabs:** Rectangular adjacent cells with thin dividers. - **Search:** Wide warm-gray field with magnifier. - **New Client:** Teal rounded rectangle approximately 180 × 58 CSS px under assumed 2×. - **Client row:** Pale rounded strip with circular initial avatar and small status pill. - **Menu:** Teal square with three white dots. - **Utilities:** Circular search/notification controls and dark-teal chat bubble. ### Visual rhythm - **Whitespace:** Large empty directory area beneath the single row. - **Alignment:** Heading, tabs, search, and list share main left edge. - **Density:** Compact sidebar contrasts with broad main content. - **Elevation:** Panel shadow separates list from otherwise white page. ### Responsive - **Observed:** Desktop only. - **Recommendation:** Collapse sidebar, wrap tabs, and stack client metadata under name. - **Search/action:** Split into separate rows if needed. ### Adaptation guidance - **Preserve:** Status-filtered directory, strong teal action system, and compact row identity/status. - **Privacy:** Replace client names and email details. - **Behavior:** Filtering, menu, and creation flow 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.