profitra/management-bisnis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
314aab2600
management-bisnis/DESIGN.md

5.1 KiB
Raw Blame History

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:

Inter, ui-sans-serif, system-ui, sans-serif

Alternative:

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

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:

border-radius: 12px;

Shadows

Card Shadow

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

Floating Panel

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

Sidebar Design

Background

#FFFFFF

Active Menu

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

Inactive Menu

color: #737373;

Icon Size

20px

Menu Height

40px

Header

Height

72px

Contains:

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

KPI Cards

Card Size

height: 96px;

Contents:

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

Example:

Total Customers
567,899
↑ 2.5%

Card Style:

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

Analytics Chart Card

Product Sales Chart

Height:

380px

Components:

  • Title
  • Legend
  • Tooltip
  • Chart Area

Chart Colors:

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

Tooltip:

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:

16px

Neutral Palette Example:

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

Country Analytics Widget

Contains:

  • Country list
  • Percentage values
  • Mini map

Style:

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

Table Design

Header

background: #FAFAFA;
font-weight: 600;

Row Height

52px

Hover

background: #F5F5F5;

Buttons

Primary

background: #171717;
color: white;

Secondary

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

Ghost

background: transparent;

Height:

40px

Radius:

10px

Inputs

Height:

40px

Style:

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

Focus:

border-color: #525252;

Dark Mode

Background

#171717

Surface

#262626

Card

#2D2D2D

Border

#404040

Text Primary

#FAFAFA

Text Secondary

#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

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