Dark Mode Listings Dashboard
A sophisticated dark-mode dashboard designed for automotive or high-value asset marketplaces. It features a high-contrast palette of deep charcoals and vibrant brand accents like emerald green and amber orange. Key characteristics include a structured 280px sidebar, a bento-grid metric system with integrated progress bars, and a clean data table for listing management. The style uses 'General Sans' typography for a modern, tech-forward feel, suitable for SaaS, fintech, or inventory management platforms.
Summary
A professional dark-mode management interface with a fixed sidebar, integrated search, high-visibility metric cards, and a detailed data table for tracking listings and statuses.
Style
Professional dark mode using 'General Sans' typography. Palette focuses on deep neutrals (#141416, #1A1B1E, #222327) contrasted with functional status colors (Green #4CA758, Orange #F59E0B, Blue #3B82F6). The aesthetic is defined by subtle borders (#2E2F36), large border-radii (up to 16px), and high-quality micro-interactions on hover.
Layout & Structure
Fixed sidebar navigation with a flexible main content area. Content is structured into a search-focused header, a summary metrics grid, and a large-format data list.
Sidebar Navigation
Top Header Customer
Metrics Grid
Listings Table
Top Header Non Customer
Components
Status Badge Pill
A refined status indicator with low-alpha backgrounds.
Progressive Metric Card
Summary card with integrated health-bar.
Special Notes
MUST maintain the high contrast between text (#FFFFFF) and background (#141416). DO NOT use pure black (#000000); use the specified charcoal tones. MUST ensure all interactive elements have a :hover state transition. Icons should always be accompanied by labels or clear tooltips.