Quality Lead Live
Design System Showcase - Components & Design Tokens
Button Component
Button Variants
Variants
Sizes
States
With Icons
Input Component
Input States
This is helper text
This field is required
Card Component
Default Card
This is a default card with header, content, and footer sections.
Interactive Card
Hover over this card to see the lift effect and enhanced shadow.
Selected Card
This card is in a selected state with primary border and background.
Badge Component
Badge Variants
Status Badges
DefaultPrimarySuccessWarningError
Count Badges
Messages3
Notifications42
Overflow99+
Dot Indicators
Online
Away
Busy
Offline
Avatar Component
Avatar Variants
Sizes
JS
JS
JS
JS
JS
Fallback States
AJ
Icon Fallback
With Status Indicator
OU
AU
BU
OU
Avatar Group
A
B
C
D
+2
Skeleton Component
Loading Skeletons
Basic Shapes
Text
Circular
Rectangular
Skeleton Text (Multiple Lines)
Skeleton Avatars
Skeleton Card
Color Palette
Neutral (Warm Gray, hue 60)
25
50
100
200
300
400
500
600
700
800
900
925
950
Primary (Electric Blue, hue 250)
50
100
200
300
400
500
600
700
800
900
Success (Green, hue 155)
50
100
500
600
Warning (Amber, hue 75)
50
100
500
600
Error (Red, hue 25)
50
100
500
600
Typography Scale
Page Title - 22px Semibold
Section Title - 18px Semibold
Card Title - 14px Medium
Body - 14px Regular
Body Large - 15px Regular (Chat Messages)
Small - 13px Regular
Caption - 11px Regular
Data: 1,234,567.89 (Mono)
Spacing Scale (4px base)
4px
8px
12px
16px
24px
32px
48px
64px
Border Radii
sharp (4px)
sm (6px)
md (8px)
lg (12px)
xl (16px)
2xl (20px)
full
Shadow Scale (Warm-tinted)
xs
sm
md
lg
xl
card
card-hover
Chat Message Bubbles
Hi, I'm interested in your services.
Hello! I'd be happy to help. What questions do you have?
Chat started at 2:34 PM
Navigation Rail Preview
The dark nav rail anchors the interface, creating a premium app feel. Active items use the primary accent color.