From 152e994961356de4849356d266276b308b17a01d Mon Sep 17 00:00:00 2001 From: Yoga Pangestu Date: Tue, 14 Jul 2026 09:56:41 +0700 Subject: [PATCH] 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 | 535 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 535 insertions(+) create mode 100644 DESIGN.md 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 + } +} +```