Dashboard Design

Dashboard Design

"Data at a glance. Organized, scannable, and highly functional."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Modular Grid: The screen is broken down into functional "widgets" or cards. Usually a sidebar on the left and a top nav.
2. Data Hierarchy: The most important numbers (KPIs) are large and usually at the top. Charts take up the middle, and lists/tables are at the bottom.
3. Muted Backgrounds: A soft grey or off-white background so the white data cards stand out clearly.

Visual DNA

• Colors: Minimalist Slate or Earth-Grounded Elegance. Avoid too many colors. Use red/green strictly for positive/negative trends.
• Typography: Clean, tabular sans-serifs (Inter, Roboto Mono for numbers).
• Styling: Very subtle shadows or 1px borders to separate cards.

Web Implementation

• Use CSS Grid for the macro layout (Sidebar, Header, Main).
• CSS Example:

body {
  background-color: #F8F9FA;
  color: #212529;
  font-family: 'Inter', sans-serif;
  margin: 0;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 70px 1fr;
  height: 100vh;
}

.sidebar {
  grid-row: 1 / 3;
  background-color: #ffffff;
  border-right: 1px solid #e9ecef;