536 lines
5.1 KiB
Markdown
536 lines
5.1 KiB
Markdown
# 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
|
|
}
|
|
}
|
|
```
|