# Design System — Neutral Analytics Dashboard

## Overview

A modern analytics dashboard inspired by the provided reference layout, adapted to a neutral grayscale color palette. The design emphasizes clarity, hierarchy, whitespace, and data readability.

---

# Design Principles

- Clean and minimal
- Data-first layout
- Consistent spacing system
- Soft visual hierarchy
- Neutral color palette
- Accessible contrast ratios
- Responsive across desktop, tablet, and mobile

---

# Color Palette (Neutral)

## Primary Neutrals

| Token | Value |
|---------|---------|
| Neutral-50 | #FAFAFA |
| Neutral-100 | #F5F5F5 |
| Neutral-200 | #E5E5E5 |
| Neutral-300 | #D4D4D4 |
| Neutral-400 | #A3A3A3 |
| Neutral-500 | #737373 |
| Neutral-600 | #525252 |
| Neutral-700 | #404040 |
| Neutral-800 | #262626 |
| Neutral-900 | #171717 |

## Semantic Colors

### Success
- #22C55E

### Warning
- #F59E0B

### Error
- #EF4444

### Info
- #3B82F6

---

# Typography

## Font Family

Primary:

```css
Inter, ui-sans-serif, system-ui, sans-serif
```

Alternative:

```css
Geist, Inter, sans-serif
```

## Type Scale

| Style | Size | Weight |
|---------|---------|---------|
| Display | 36px | 700 |
| H1 | 30px | 700 |
| H2 | 24px | 600 |
| H3 | 20px | 600 |
| H4 | 18px | 600 |
| Body Large | 16px | 400 |
| Body | 14px | 400 |
| Small | 12px | 400 |
| Caption | 11px | 500 |

---

# Layout Structure

## Sidebar Width

- Expanded: 260px
- Collapsed: 72px

## Content Container

```text
Sidebar
├── Navigation
├── User Section
└── Settings

Main Content
├── Header
├── KPI Cards
├── Charts
├── Analytics Widgets
└── Tables
```

---

# Grid System

## Desktop

- 12 Columns
- Gutter: 24px
- Margin: 32px

## Tablet

- 8 Columns
- Gutter: 16px

## Mobile

- 4 Columns
- Gutter: 12px

---

# Spacing Scale

| Token | Value |
|---------|---------|
| xs | 4px |
| sm | 8px |
| md | 12px |
| lg | 16px |
| xl | 24px |
| 2xl | 32px |
| 3xl | 40px |
| 4xl | 48px |

---

# Border Radius

| Token | Value |
|---------|---------|
| Small | 8px |
| Medium | 12px |
| Large | 16px |
| XL | 20px |

Recommended card radius:

```css
border-radius: 12px;
```

---

# Shadows

## Card Shadow

```css
box-shadow:
0 1px 2px rgba(0,0,0,.05),
0 4px 10px rgba(0,0,0,.04);
```

## Floating Panel

```css
box-shadow:
0 10px 30px rgba(0,0,0,.08);
```

---

# Sidebar Design

## Background

```css
#FFFFFF
```

## Active Menu

```css
background: #F5F5F5;
color: #171717;
font-weight: 600;
```

## Inactive Menu

```css
color: #737373;
```

## Icon Size

```css
20px
```

## Menu Height

```css
40px
```

---

# Header

## Height

```css
72px
```

Contains:

- Page title
- Date filter
- Global actions
- Notifications
- User profile

---

# KPI Cards

## Card Size

```css
height: 96px;
```

Contents:

- Metric label
- Main value
- Trend percentage
- Status icon

Example:

```text
Total Customers
567,899
↑ 2.5%
```

Card Style:

```css
background: white;
border: 1px solid #E5E5E5;
border-radius: 12px;
padding: 20px;
```

---

# Analytics Chart Card

## Product Sales Chart

Height:

```css
380px
```

Components:

- Title
- Legend
- Tooltip
- Chart Area

Chart Colors:

```text
Series A → Neutral-700
Series B → Neutral-400
```

Tooltip:

```css
background: white;
border-radius: 12px;
padding: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,.08);
```

---

# Donut Chart Widget

## Layout

Left:
- Category list

Right:
- Donut chart

Chart Thickness:

```css
16px
```

Neutral Palette Example:

```text
#171717
#262626
#404040
#525252
#737373
#A3A3A3
#D4D4D4
```

---

# Country Analytics Widget

Contains:

- Country list
- Percentage values
- Mini map

Style:

```css
background: white;
border: 1px solid #E5E5E5;
border-radius: 12px;
```

---

# Table Design

## Header

```css
background: #FAFAFA;
font-weight: 600;
```

## Row Height

```css
52px
```

## Hover

```css
background: #F5F5F5;
```

---

# Buttons

## Primary

```css
background: #171717;
color: white;
```

## Secondary

```css
background: white;
border: 1px solid #D4D4D4;
color: #171717;
```

## Ghost

```css
background: transparent;
```

Height:

```css
40px
```

Radius:

```css
10px
```

---

# Inputs

Height:

```css
40px
```

Style:

```css
border: 1px solid #D4D4D4;
background: white;
border-radius: 10px;
```

Focus:

```css
border-color: #525252;
```

---

# Dark Mode

## Background

```css
#171717
```

## Surface

```css
#262626
```

## Card

```css
#2D2D2D
```

## Border

```css
#404040
```

## Text Primary

```css
#FAFAFA
```

## Text Secondary

```css
#A3A3A3
```

---

# Responsive Behavior

## Desktop

- Full sidebar
- Multi-column widgets

## Tablet

- Collapsible sidebar
- 2-column dashboard

## Mobile

- Drawer navigation
- Single-column layout
- Stacked cards

---

# Component Inventory

- Sidebar
- Header
- User Profile Menu
- KPI Card
- Analytics Card
- Donut Chart Widget
- Country Widget
- Table
- Button
- Input
- Select
- Dropdown
- Modal
- Tooltip
- Toast Notification

---

# Suggested Design Tokens

```json
{
  "radius": {
    "sm": 8,
    "md": 12,
    "lg": 16
  },
  "spacing": {
    "xs": 4,
    "sm": 8,
    "md": 12,
    "lg": 16,
    "xl": 24,
    "2xl": 32
  }
}
```