Design System - Figma Ready

Tất cả states được hiển thị đồng thời (Default • Hover • Focus • Disabled)

1. Colors

Primary - Red

Red 100
#FEE2E2
Red 300
#FCA5A5
Red 500
#EF4444
Red 600 ★
#DC2626
Red 700
#B91C1C
Red 800
#991B1B

Secondary - Blue

Blue 100
#DBEAFE
Blue 300
#93C5FD
Blue 500 ★
#3B82F6
Blue 600
#2563EB
Blue 700
#1D4ED8
Blue 800
#1E40AF

Success - Green • Warning - Yellow • Neutral - Gray

Green 100
#DCFCE7
Green 300
#86EFAC
Green 500
#22C55E
Green 600 ★
#16A34A
Green 700
#15803D
Green 800
#166534
Yellow 100
#FEF3C7
Yellow 200
#FDE68A
Yellow 500 ★
#F59E0B
Yellow 600
#D97706
Yellow 700
#B45309
Yellow 800
#92400E
Gray 100
#F5F5F5
Gray 200
#E5E5E5
Gray 400
#A3A3A3
Gray 500
#737373
Gray 600
#525252
Gray 900
#0A0A0A

2. Buttons

All Button States

Default
Hover
Disabled
With Icon
Secondary Default
Secondary Hover
Outline Default
Outline Hover

3. Form Inputs

Default
Hover
Focus
With Value

4. Badges

Default States

errorError infoInfo check_circleSuccess warningWarning

Hover States

errorError infoInfo check_circleSuccess warningWarning

5. Icons

Default vs Hover States

Default
add
add
check
check
close
close
edit
edit
delete
delete
save
save
search
search
visibility
visibility
Hover
add
add
check
check
close
close
edit
edit
delete
delete
save
save
search
search
visibility
visibility

6. Table

STTTênTrạng tháiNgày
1Item One - DefaultActive20/11/2025
2Item Two - Hover StatePending19/11/2025
3Item Three - DefaultProcessing18/11/2025

7. Typography

Headings

48px / Bold / -0.03em

H1

24px / Bold / -0.02em

H2

20px / Semibold

H3

18px / Semibold

H4

Body & Weights

16px / Regular

Body Large

14px / Regular

Body Base

13px / Regular

Body Small

400 → 500 → 600 → 700
Aa Aa Aa Aa

8. Spacing & Layout

Spacing Scale

4px
XS
8px
SM
12px
MD
16px
LG
24px
2XL
32px
3XL

Border Radius

4px
6px
8px
10px
12px
Circle