Atria Projects Dashboard
A high-density, professional B2B dashboard for enterprise-grade project planning and portfolio management. Characterized by a deep navy dark mode aesthetic (#0b1530), it utilizes a 'native macOS app' feel with traffic-light window controls and a sidebar navigation. The typography pairs Plus Jakarta Sans for headers, Inter for body text, and JetBrains Mono for numeric data. This design is optimized for sectors like real estate development, fintech, logistics, and SaaS infrastructure where information density and precision are prioritized over white space. It features blueprint-style thumbnails, data-heavy tables, and subtle sparklines for performance tracking.
Summary
Atria is a high-density project management dashboard designed for serious professional use. It features a deep navy palette, a native desktop application aesthetic, and a rigorous table-first approach to data visualization. It avoids marketing fluff (no emojis or welcome messages) in favor of precision, utility, and information-rich components like status pills and inline sparklines.
Style
The style is a sophisticated dark-mode UI with a 'native app' signature. It uses a deep navy background (#0b1530) and a slightly lighter surface for the main content area (#0f1a3a). Typography is highly structured: Plus Jakarta Sans for UI headings (13-14px), Inter for body and labels (11-12px), and JetBrains Mono for IDs and numeric metrics. Colors are used semantically for status states: Amber (#fbbf24) for Entitlement, Cyan (#22d3ee) for Design, Purple (#a855f7) for Permitting, and Emerald (#10b981) for Construction. Borders are extremely subtle, using a 6% opacity white (rgba(255, 255, 255, 0.06)).
Layout & Structure
A classic two-column dashboard layout with a fixed sidebar (240px) and a fluid main content area. The main content is structured vertically: Top navigation bar, 4-column metric grid, filter/control bar, and a hero data table.
Sidebar
Header
Metrics Section
Control Bar
Main Project Table
Components
Blueprint Thumbnail
32x32px square project preview icons.
Status Pill
Contextual status badges with semantic coloring.
Data Sparkline
Minimalist trend indicator within metric cards.
Special Notes
MUST: Maintain high information density (at least 8-10 rows visible). MUST: Use JetBrains Mono for all numeric IDs and financial values. MUST: Keep status pills to a 4px corner radius. DO NOT: Use standard card grids for projects. DO NOT: Use high-contrast borders or drop shadows. DO NOT: Include a 'Welcome' or 'Hello' header.