Dashboard Design System

Good dashboards are just clarity. Simple rules, great UI. This page codifies the recurring patterns observed across 12 production-grade admin dashboards (Classic, E-commerce, Sales, CRM, Project Management, File Manager, Crypto, Academy, Hospital Management, Website Analytics, Finance, Payment) into an authoritative, reusable design system.

Reference screenshots archived at wiki/assets/dashboards/ (24 images: 12 light + 12 dark).

Base Typography

The 14px rule. 14px is the base font size for dashboard UI. Not 16px (too editorial), not 13px (too dense for scanning). 14px lets stat cards, tables, and labels coexist without competing.

Letter spacing. Body text at 14px uses -0.2px letter-spacing. This tightens the default browser tracking just enough to feel intentional without hurting readability. Don't go tighter - -0.3px starts collapsing at small sizes.

Weight discipline. Three weights maximum: regular (400) for body, medium (500) for labels and card titles, semibold (600) only for page headings and hero stat numbers. Bold (700) is almost never used. If everything is bold, nothing is.

The AliGrids/@_heyrico dashboard artifact independently reinforces the same density contract: 14px base text, 16px base icons, 1/1.2/1.5px icon strokes, and regular/medium/rare semibold weights. The reviewed image is a dark finance dashboard with a quiet sidebar, search, notification badges, stat cards, and charts; the useful lesson is small, consistent primitives instead of oversized dashboard chrome. Source: X/@AliGrids and local image review, 2026-07-03

Tabular numbers. Every number that updates or compares uses font-variant-numeric: tabular-nums. KPIs, prices, percentages, table columns, dates. No exceptions.

Base Iconography

Optical alignment. Icons in sidebar nav items align to the text baseline, not the container center. The icon sits 12px from the left edge, 8-10px gap to the label text. Asymmetric SVGs (play, volume) need 1-2px nudges.

Layout Architecture

Shell Structure

┌──────────────────────────────────────────────────────┐
│ Sidebar (240px)  │  Top Bar (56px height)            │
│                  │  ┌─────────────────────────────┐  │
│  Logo + Brand    │  │ Page Title    │ Date │ CTA  │  │
│  Search          │  ├─────────────────────────────┤  │
│  ─────────────   │  │                             │  │
│  Nav Group       │  │  Stat Cards (row of 3-4)    │  │
│    Active ███    │  │                             │  │
│    Item          │  ├──────────┬──────────────────┤  │
│    Item    (6)   │  │          │                  │  │
│  ─────────────   │  │  Chart   │  Chart / List   │  │
│  Nav Group       │  │          │                  │  │
│    Item          │  ├──────────┴──────────────────┤  │
│    Item          │  │                             │  │
│  ─────────────   │  │  Table / Transaction List   │  │
│  User Avatar     │  │                             │  │
└──────────────────┴──────────────────────────────────┘

Dimensions

Grid

Stat cards at the top use a responsive grid: 4 columns on wide screens, 2 on medium, 1 on narrow. Below the stat row, content cards fill a 2-column or 3-column grid depending on the dashboard variant. The grid uses 16px gap uniformly.

Stat Cards

The single most repeated pattern across all 12 dashboards. Every dashboard opens with a row of 3-4 stat cards.

Anatomy

┌─────────────────────────────┐
│ [icon]  Label          [▲]  │
│                             │
│ $125,430                    │
│ +12.5% compared to last mo  │
│                             │
│ [Transfer] [Request]        │  ← optional actions
└─────────────────────────────┘

Delta formatting. Always show direction: +12.5% or -3.1%. Use an upward/downward trend icon (12px) paired with the percentage. Green and red are the only delta colors - no orange, no yellow.

Value formatting. Large numbers use comma separators. Currency uses $ prefix and 2 decimal places for amounts under $1,000, no decimals above. Percentages show 1 decimal place. Use K and M suffixes above 10,000 and 1,000,000.

Charts

Chart Types by Use Case

Chart Styling

Color discipline. One primary color per chart. Secondary series use the same hue at lower opacity, or a single contrasting accent. Never more than 5 colors in one chart. Donut charts can use 4-5 distinct category colors.

Dark mode charts. Grid lines use rgba(255, 255, 255, 0.06). Bars and areas use slightly higher saturation than light mode to maintain contrast against dark backgrounds.

Sidebar Navigation

Shadcn's "50+ sidebars" anecdote is a useful warning: the sidebar is the product shell's shared contract, not a disposable component. Treat it like a design-system primitive with stable grouping, active-state semantics, collapse behavior, badges, keyboard/focus behavior, and product-area naming that can scale across many apps without every team inventing a cousin. Source: X/@shadcn, 2026-06-20

Structure

The sidebar has 3-4 sections, each with a group heading:

1. Dashboards - the main dashboard views
2. Apps - Kanban, Chat, Mail, Calendar, etc.
3. Pages - Settings, Profile, Error pages
4. Others - Help, Documentation

Specs

Collapse Behavior

Sidebar collapses to 64px icon-only rail. Icons center-align. Tooltip shows label on hover. Group headings hide. Active indicator becomes a vertical bar or dot.

Top Bar

[Sidebar Toggle]  [Search ⌘K]                    [CTA]  [🔔]  [🌙]  [⚙]  [Avatar]

Empty States

Every view that can be empty needs an empty state. "No data" is not an empty state.

The rule. Illustration + CTA, not just "No data." Empty states are onboarding moments - they tell users what belongs here and how to fill it. A table with zero rows shows the illustration stack. A chart with no data shows a placeholder with the CTA to configure the data source.

Tables

Anatomy

Status Badge Colors

Color System

Light Mode

Dark Mode

Semantic Colors (Both Modes)

One accent rule. Each dashboard variant uses at most one brand accent beyond the semantic colors. Finance uses amber for income. Crypto uses orange for Bitcoin. CRM uses green for deals. The accent never competes with the positive/negative semantic pair.

Dark Mode Card Shadows (The 1px Rule)

Every card in dark mode uses two shadows to create physicality:

box-shadow:
  inset 0 1px 0 0 rgba(255, 255, 255, 0.02),
  0 0px 0 0 rgba(0, 0, 0, 0.25);

Inner shadow (white at 2%, inset) simulates a top-edge catch-light. Drop shadow (black at 25%) grounds the card. Together they make a flat rectangle read as a physical surface. See Interface Micro-Polish for the full rationale.

Spacing System

All spacing uses 4px granularity. The 16px card gap is the rhythm unit - everything else is a multiple or fraction.

Motion

Dashboards are mostly static. Animation is reserved for:

1. Sidebar collapse/expand - 200ms ease-out width transition
2. Chart entrance - 300ms staggered bar/line draw on first load
3. Tooltip appearance - 100ms opacity + translateY(4px)
4. Page transitions - 150ms content fade on sidebar nav click
5. Dropdown menus - 150ms scale(0.95) → scale(1) + opacity

No animation on stat card number changes (just swap the value). No skeleton loaders for above-the-fold content that loads instantly. Skeleton only for data that has genuine latency (charts, tables).

Dashboard Variants Catalog

SaaS Dashboard Cheatsheet

The six rules. Memorize these.

Checklist - Before Shipping a Dashboard

• Base font is 14px, not 16px
• Body text uses -0.2px letter-spacing
• At most 3 font weights used (regular, medium, semibold)
• All numbers use tabular-nums
• Icons are 16px with 1.5px stroke
• Stat cards have: icon + label + hero value + delta + context
• Delta uses green/red only, with direction indicator
• Card gap is 16px uniform
• Card padding is 20-24px
• Card radius is 8px
• Charts use at most 5 colors
• Table rows are 48-52px height
• Sidebar active state has background fill, not just text color
• Primary action is top right, never buried in the page
• Empty states have illustration + CTA, not just "No data"
• Top bar has search with keyboard shortcut hint
• No animations on instant-load content
• Dark mode backgrounds are near-black (#09090b), not gray
• Dark mode cards use the 1px inner shadow (white 2%) + drop shadow (black 25%)

---

Timeline

• 2026-04-12 | Created from analysis of 12 shadcnuikit.com admin dashboards (Classic, E-commerce, Sales, CRM, Project Management, File Manager, Crypto, Academy, Hospital Management, Website Analytics, Finance, Payment). 24 preview images (light + dark) archived at wiki/assets/dashboards/. Live screenshots captured via Chrome browser automation. Design cheatsheet principles (14px base, 16px icons, weight discipline) codified from Kevin's direction. Source: shadcnuikit.com, Kevin Liu
• 2026-04-12 | Added dark mode card shadow technique (the 1px rule): inner white shadow at 2% + drop black shadow at 25%. Cross-referenced with Interface Micro-Polish. Source: @PixelJanitor, @AliGrids on X, 2026-04-11
• 2026-04-13 | Added SaaS dashboard cheatsheet (6-rule quick reference), -0.2px letter-spacing spec, empty states pattern (illustration + CTA), explicit primary action placement rule (top right, never buried). Updated checklist with new items. Source: Kevin Liu
• 2026-07-03 | Deep-reviewed the AliGrids/@_heyrico dashboard artifact and attached it as visual evidence for the existing density rules: 14px base text, 16px icons, thin strokes, restrained weights, quiet sidebars, and stat-card hierarchy. Source: X/@AliGrids, 2026-04-12
• 2026-07-04 | Deep-reviewed Tanjim's CloseCRM dashboard artifact and attached it to the existing SaaS dashboard rules. The local image reinforces 240px-class sidebar rhythm, 48px scan rows, top-right primary action, compact stat cards, and empty/state/action placement as dashboard defaults. Source: X/@Tanjim38, 2026-04-12
• 2026-07-04 | Reviewed shadcn's sidebar scale anecdote and codified sidebar as app-shell infrastructure: shared grouping, active states, collapse behavior, badges, focus, and product-area naming must survive reuse across many surfaces. Source: X/@shadcn, 2026-06-20