A minimal dashboard design system with all the essential components power users need — collapsible sidebar, top navbar, metric cards, and data tables. Clean, structured, and built for people who live in software.
What Is Enterprise Dashboard UI?
Enterprise Dashboard UI is a design system built around one goal: make data easy to read and act on. It provides a complete shell — collapsible sidebar, sticky navbar, metric cards, and data tables — that works together as a cohesive system.
This is not a marketing style. It is a working interface style. The people using it are looking at it for hours every day, managing records, monitoring metrics, and taking action on data. Every design decision serves that workflow.
The Vibe
Clean enough to disappear. Structured enough to scale.
The sidebar knows where you are. The cards tell you what matters. The table shows you everything. And none of it fights for your attention — it just works.
Core Components
The Sidebar
The sidebar is the navigational spine of the entire product. It has two states:
Expanded (240px): Logo at top with brand mark, nav sections with uppercase labels ("MENU", "OTHERS"), icon + label items with active state showing a left border accent and brand tint background.
Collapsed (64px): Icons only, labels hidden, the collapse animation runs at 220ms. User avatar and toggle button stay visible at the bottom. The transition is smooth enough to feel intentional, not jarring.
The background is #F1F2F7 — not white. This slight differentiation from the main content area (#F7F8FC) and the cards (#FFFFFF) creates three visual layers without any borders needed between them.
The Navbar
Sticky, 60px tall, pure white. Page title and breadcrumb on the left. Search input, notification bell, settings icon, and user avatar on the right. One pixel border separates it from content below. No gradient, no shadow drama — just clean structure.
Metric Cards
Four cards in a row. Each answers a single question: what is the number, and is it trending in the right direction?
The anatomy is consistent across all four: colored icon (40px, tinted background matching the icon color) in the top left, trend badge in the top right, large value number below, descriptive label, and a comparison line at the bottom. The trend badge — green with an up arrow or red with a down arrow — does the emotional work instantly.
Data Table
The table is the workhorse of the dashboard. White card with rounded corners, a header bar above with title and filter controls, a proper thead with uppercase labels on a slightly gray background, comfortable row height, hover states on rows, and action buttons that appear only on hover.
Status badges are pill-shaped and color-coded: Active (green), Pending (yellow), Inactive (gray), Error (red). Four states. No more.
Pagination sits below with clean page number buttons and a count showing how many records are visible.
Activity Feed
A secondary card showing a chronological list of recent events — new orders, user registrations, payment updates, system changes. Each item has a colored dot indicator, a description with bold key terms, and a relative timestamp. Simple and scannable.
Design Rules (Deep Dive)
Three Visual Layers
The depth hierarchy: sidebar (#F1F2F7) → page background (#F7F8FC) → cards (#FFFFFF). No aggressive shadows needed — the background color steps create natural depth. White cards appear to float above the page without any theatrical shadow treatment.
The Active State Formula
Active sidebar item = background: #DEE1F4 + color: #5A6ACF + border-left: 3px solid #5A6ACF. Three properties working together. The left border is the critical element — it anchors the active position to the edge of the sidebar and creates clear directional feedback.
Metric Card Hierarchy
The value number (28px, weight 700) should dominate the card visually. Every other element — label, trend badge, comparison text — is subordinate context. If the number isn't immediately the first thing a user reads on each card, the hierarchy has failed.
Table Row Actions
Row action buttons (view, edit, delete) should be invisible until the user hovers a row. This reduces visual noise on the table dramatically — the actions appear exactly when and where they're needed. Use opacity: 0 on the actions container and opacity: 1 on tr:hover .row-actions.
Collapsed Sidebar UX
When collapsed, the sidebar should feel intentional — not broken. Icons at exactly 64px width, centered. The toggle chevron rotates 180 degrees to indicate the action direction. User avatar stays visible so the user always knows who is logged in. Section labels collapse to zero height (not just hidden) so the icon-only view has no awkward gaps.
Spacing Consistency
Everything runs on an 8px grid. Content padding is 28px 32px. Card padding is 20px 24px. Card headers are 16px 20px. Metric grid gaps are 16px. Section gaps are 24px. These values are not arbitrary — they maintain rhythm across the entire page without needing to think about each spacing decision individually.