diff --git a/DESIGN.md b/DESIGN.md
new file mode 100644
index 0000000..1c01229
--- /dev/null
+++ b/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
+  }
+}
+```