Color Palette
Primary
Primary 900
#16A34A
#16A34A
Primary 800
#22C55E
#22C55E
Primary 200
#7B91B0
#7B91B0
Dark Shade
#052E16
#052E16
Neutrals (Blue Grey)
White / 100
#FFFFFF
#FFFFFF
Grey 300
#F9FAFB
#F9FAFB
Grey 700
#737791
#737791
Grey 800
#444A6D
#444A6D
Grey 900
#151D48
#151D48
Black
#374557
#374557
Supporting Colors
Yellow
#FFA412
#FFA412
Yellow Shade
#FEF6E6
#FEF6E6
Green
#3CD856
#3CD856
Green Shade
#E2FFF3
#E2FFF3
Violet
#A700FF
#A700FF
Violet Shade
#FBF1FF
#FBF1FF
State Colors
Error
#EB5757
#EB5757
Success
#27AE60
#27AE60
Chart Colors
Blue
#0095FF
#0095FF
Green
#00E096
#00E096
Purple
#884DFF
#884DFF
Orange
#FF8F0D
#FF8F0D
Yellow
#FFCF00
#FFCF00
Teal
#4AB58E
#4AB58E
Red
#EF4444
#EF4444
Violet
#A700FF
#A700FF
Card Backgrounds
Pink
#FFE2E5
#FFE2E5
Orange
#FFF4DE
#FFF4DE
Green
#DCFCE7
#DCFCE7
Purple
#F3E8FF
#F3E8FF
Typography
Primary font: Poppins | Secondary: Open Sans | Accent: Inter
4XL / Semibold (36px/1.4)
Dashboard Title
3XL / Semibold (30px/1.5)
Brand Name
2XL / Semibold (24px/32)
$1,250
XL / Semibold (20px/32)
Card Title
LG / Semibold (18px)
Navigation Active
Base / Medium (16px/24)
Stat Label
Base / Regular (16px/30)
Body text paragraph
SM / Medium (14px/20)
Table value
SM / Regular (14px/20)
Table content
XS / Semibold (12px/16)
Legend label bold
XS / Medium (12px/16)
Change indicator
XS / Regular (12px/16)
Axis label
Spacing Scale
2xs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
2xl: 30px
3xl: 32px
4xl: 40px
5xl: 48px
Border Radius
sm: 2px
md: 4px
base: 6px
lg: 8px
xl: 16px
2xl: 20px
3xl: 26px
Shadows
Card Shadow
0px 4px 20px rgba(238,238,238,0.5)
Elevated Shadow
0px 20px 50px rgba(55,69,87,0.1)
Components
Stat Cards (Today's Sales)
$1k
Total Sales
+8% from yesterday
300
Total Order
+5% from yesterday
5
Product Sold
+1.2% from yesterday
8
New Customers
0.5% from yesterday
Buttons
Badges
45%
29%
18%
25%
Progress Bars
Blue (45%)
Green (29%)
Purple (18%)
Orange (25%)
Card Containers
Card Title
Standard card with 20px border-radius and subtle shadow.
Rounded Card
Card with larger 26px border-radius.
Dabang Pro
Get access to all features
Chart Legends
Loyal Customers
New Customers
Unique Customers
Online Sales
Offline Sales
Reality Sales
Target Sales
Stats Row (Divider pattern)
Last Month
$3,004
This Month
$4,504
Avatars & Icons
M
Products Table
Top Products
| # | Name | Popularity | Sales |
|---|---|---|---|
| 01 | Home Decor Range | 45% | |
| 02 | Disney Princess Pink Bag | 29% | |
| 03 | Bathroom Essentials | 18% | |
| 04 | Apple Smartwatches | 25% |
Bar Charts
Total Revenue
Online Sales
Offline Sales
Target vs Reality
Reality Sales
Target Sales
Sidebar Navigation
Dashboard Preview
Full-size interactive demo of the original Figma design, rebuilt with the design system components.
Open Full Dashboard Demo →Dashboard Variations
Alternative color themes and layout ideas based on the same design system.
Variation 1: Dark Theme
$1k
Total Sales
+8% from yesterday
300
Total Order
+5% from yesterday
5
Product Sold
+1.2% from yesterday
8
New Customers
0.5% from yesterday
Variation 2: Warm / Coral Palette
$2.4k
Revenue
+12%
542
Orders
+7%
89
Deliveries
+3.5%
24
Returns
-2.1%
Variation 3: Compact Metric Cards
$45.2k
Total Revenue
1,245
Active Users
98.3%
Completion Rate
Variation 4: Ocean / Teal Theme
$3.8k
MRR
+15%
1.2k
Subscribers
+22%
96%
Uptime
+0.5%
42ms
Avg Response
-8%