Add design documentation for Neutral Analytics Dashboard. Introduced comprehensive design guidelines including principles, color palette, typography, layout structure, grid system, spacing scale, and component inventory to ensure consistency and clarity in the dashboard's UI/UX.

DESIGN.md

@@ -0,0 +1,535 @@
+# 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
+  }
+}
+```