Upbooks Salon Pro — UI/UX Style Guide

Dark theme, purple accents, and a professional dashboard design system.

1. Color Palette

Backgrounds

Dark Background

#0F1419

Sidebar BG

#0D1117

Card BG

#1E2335

Header BG

#252D3D

Hover BG

#2D3748

Accents

Primary Purple

#A855F7

Bright Magenta

#D946EF

Cyan Accent

#06B6D4

Lime Accent

#84CC16

Semantic & Text

Success

#10B981

Warning

#F59E0B

Danger

#EF4444

Info

#3B82F6

Border

#374151

2. Typography

H1 — Hero / 48–64px

H2 — Section / 32–40px

H3 — Subsection / 24–28px

H4 — Card Title / 18–20px

Body — 14–16px regular gray for longer content and descriptions.

Small metadata — 12px, uppercase optional for labels.

3. Buttons & CTAs

4. Forms & Inputs

Text Input

Select

Checkbox

Radio

Form error message example.

5. Badges & Tags

SuccessPendingIn-ProgressCancelledProduct

6. Cards & Containers

Feature Card

Use for features, descriptions, and quick content blocks.

Shashank Kumar

Senior Stylist

Certified Color Specialist
10+ years experience

7. KPI Card Example

Today's Revenue

$2,350

+20.5% from yesterday

8. Table Example

Customer

Role

Status

Actions

Shashank Kumar

shashank@gmail.com

Intern

Active