CAPO Dashboard UI

Color Palette

Primary

Primary 900
#16A34A

Primary 800
#22C55E

Primary 200
#7B91B0

Dark Shade
#052E16

Neutrals (Blue Grey)

White / 100
#FFFFFF

Grey 300
#F9FAFB

Grey 700
#737791

Grey 800
#444A6D

Grey 900
#151D48

Black
#374557

Supporting Colors

Yellow
#FFA412

Yellow Shade
#FEF6E6

Green
#3CD856

Green Shade
#E2FFF3

Violet
#A700FF

Violet Shade
#FBF1FF

State Colors

Error
#EB5757

Success
#27AE60

Chart Colors

Blue
#0095FF

Green
#00E096

Purple
#884DFF

Orange
#FF8F0D

Yellow
#FFCF00

Teal
#4AB58E

Red
#EF4444

Violet
#A700FF

Card Backgrounds

Pink
#FFE2E5

Orange
#FFF4DE

Green
#DCFCE7

Purple
#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

Standard card with 20px border-radius and subtle shadow.

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

#	Name	Sales
01	Home Decor Range	45%
02	Disney Princess Pink Bag	29%
03	Bathroom Essentials	18%
04	Apple Smartwatches	25%

Bar Charts

Online Sales Offline Sales

Reality Sales Target Sales

Sidebar Navigation

Dabang

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%