Dashboard Design

Dashboard Design

Pre-Flight: Check Design Context

Before generating dashboard code:

1. Use get_design_context to check for existing design tokens, component libraries, or dashboard frameworks.
2. If a Figma URL is provided, pull screenshots and metadata to match the design.
3. Determine: What data is being shown? Who is the user? What actions do they need to take?

---

1. Layout Patterns

Pattern A: Sidebar + Main Content (Most Common)

  
  
    
    
      
    
    
    
      
      
        
        Dashboard
      
      
      
        
        Analytics
      
      
      
        Settings
      
    
    
    
      
        
        
          Jane Doe
          Admin
        
      
    
  

  
  
    
    
      Dashboard
      
        
      
    
    
    
      
    
  

Sidebar Behavior

• Desktop (lg+): Always visible, 240–280px wide.
• Tablet (md): Collapsible to icon-only (64px) with tooltip labels.
• Mobile (sm): Hidden, opens as overlay with backdrop.

Pattern B: Top Nav + Grid

• Best for simpler dashboards with fewer navigation items.
• Horizontal nav bar at top, content fills below.
• Use tabs or pill navigation for sub-sections.

---

2. Data Cards (KPI Tiles)

Standard Stat Card

  
    Total Revenue
    
      
    
  
  
    $45,231
  
  
    
      
      12.5%
    
    vs last month
  

Card Grid Layout

Card Variants

• With sparkline: Add a small inline chart below the number.
• With progress bar: Show completion toward a goal.
• With mini table: Top 3 items listed below the stat.
• Negative trend: Use red with down-arrow for declining metrics.

---

3. Chart Selection Guide

| Data Type | Best Chart | When to Use | |-----------|-----------|-------------| | Trend over time | Line chart | Revenue, users, performance over days/months | | Comparison | Bar chart | Compare categories, A/B results | | Composition | Pie / Donut | Budget breakdown, traffic sources (max 5 slices) | | Volume over time | Area chart | Bandwidth, cumulative metrics | | Distribution | Histogram | Age ranges, price ranges | | Relationship | Scatter plot | Correlation between two variables | | Progress | Progress bar / Gauge | Goal completion, quotas | | Ranking | Horizontal bar | Top pages, top products |

Chart Design Rules

1. Title every chart with what it shows, not how to read it.
2. Label axes clearly. Include units.
3. Limit colors to 5–6 max. Use your primary palette.
4. Start Y-axis at zero for bar charts. Line charts can have non-zero baselines.
5. Add tooltips for exact values on hover.
6. Use grid lines sparingly — light dashed lines, not solid.
7. Responsive: Charts should resize, not overflow.

Chart Color Palette

:root {
  --chart-1: oklch(65% 0.2 265);   /* primary blue */
  --chart-2: oklch(70% 0.2 165);   /* teal */
  --chart-3: oklch(75% 0.2 320);   /* pink */
  --chart-4: oklch(80% 0.15 80);   /* amber */
  --chart-5: oklch(65% 0.15 145);  /* green */
}

---

4. Table Design

Full-Featured Data Table

  
  
    
      Recent Orders
      
        2,847
      
    
    
      
      
      
      
        
        Filters
      
    
  

  
  
    
      
        
          
            Customer
            
          
        
        
          Status
        
        
          Amount
        
        
      
    
    
      
        
          
            
            
              Jane Cooper
              jane@example.com
            
          
        
        
          
            
            Completed
          
        
        $2,500.00
        
          
            
          
        
      
    
  

  
  
    Showing 1-10 of 2,847
    
      Previous
      1
      2
      Next
    
  

Table Design Rules

• Align numbers right, text left.
• Use row hover highlight (hover:bg-gray-50).
• Sticky header on scroll (sticky top-0).
• Zebra striping is optional; subtle dividers are preferred.
• Row actions: icon button (three dots) that opens a dropdown.

---

5. Status Indicators

Badge Styles

  Active

  Pending

  Failed

  Draft

Progress Bars

---

6. Dark Mode Dashboard

Dashboards often look better in dark mode — it reduces eye strain for data-heavy views.

Surface Hierarchy (Dark)

:root[data-theme="dark"] {
  --bg-base: oklch(15% 0.01 265);      /* page background */
  --bg-surface: oklch(20% 0.01 265);   /* cards */
  --bg-elevated: oklch(25% 0.01 265);  /* dropdowns, modals */
  --border: oklch(30% 0.01 265);       /* borders */
  --text-primary: oklch(95% 0 0);      /* headings */
  --text-secondary: oklch(70% 0 0);    /* body text */
  --text-muted: oklch(50% 0 0);        /* captions */
}

Rules

• Elevation is shown through lighter surfaces, not shadows.
• Reduce chart color saturation by ~15%.
• Use semi-transparent borders (oklch(100% 0 0 / 0.08)).
• Active sidebar item: lighter background, not colored.

---

7. Real-Time Data Indicators

Live Pulse Dot

Last Updated Timestamp

  
  Live — Updated 3s ago

Auto-Refresh Pattern

• Show a subtle countdown or progress bar before refresh.
• Animate changed values (flash green for increase, red for decrease).
• Never refresh the entire page — update individual data points.

---

8. Dense Information Without Clutter

Techniques

1. Progressive disclosure: Show summary, expand for details.
2. Tabbed sections: Don't show everything at once.
3. Collapsible panels: Let users hide what they don't need.
4. Tooltips over labels: Save space, add context on hover.
5. Consistent spacing: Use a strict 4px grid (4, 8, 12, 16, 24, 32, 48).
6. Smaller base font: Dashboard body text can be 13–14px.
7. Monospace for data: Numbers in tables use tabular-nums.

.data-table td {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

---

9. Responsive Dashboard Layouts

Breakpoint Strategy

• **Mobile (

Customer Jane Cooper

Status Active

Amount $2,500.00

---

## Dashboard Design Checklist

- [ ] Sidebar navigation with clear active state and section grouping
- [ ] KPI cards at top with trend indicators
- [ ] Charts have titles, labels, and tooltips
- [ ] Tables have sort, search, filter, and pagination
- [ ] Status badges use consistent color coding
- [ ] Responsive: works on tablet and mobile
- [ ] Loading skeletons for all async data
- [ ] Empty states for tables and charts with no data
- [ ] Dark mode considered (especially for monitoring dashboards)
- [ ] Numbers use tabular-nums for alignment

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [ArnavPuri](https://github.com/ArnavPuri)
- **Source:** [ArnavPuri/designskills](https://github.com/ArnavPuri/designskills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.