Design System v2.0 — Enhanced
Phong phú hơn,
đa dạng hơn.
Bộ design system mở rộng với gradients, glass effects, animations và hàng chục components mới — sẵn sàng để xây mọi trang.
01
Colors
Brand · Accent · Semantic
Accent Violet (cho variety)
Chart palette (cho biểu đồ)
chart-1
chart-2
chart-3
chart-4
chart-5
chart-6
02
Gradients
Mới — sẵn dùng qua CSS variables
Linear Gradients
Success
--gradient-success
Warning
--gradient-warning
Rainbow
--gradient-rainbow
Mesh light
--gradient-mesh-1
Mesh dark
--gradient-mesh-dark
Gradient Text (cho hero, tiêu đề lớn)
Welcome to FINORA
Quản lý tài chính thông minh
03
Typography
Inter · 9 cấp độ
6xl · 60pxHero display
5xl · 48pxDisplay heading
4xl · 36pxPage title
3xl · 30pxSection heading
2xl · 24pxCard title
xl · 20pxSubsection heading
lg · 18pxLarge body text
base · 16pxBody text — default size
sm · 14pxSmall text — secondary content
xs · 12pxCaption · Muted
05
Stat Cards
Mới: gradient cards với sparklines, mini cards
Tổng số dư hệ thống
2.147.580.000đ
+12.4%
so với tháng trước
Hoạt động hôm nay
147
+8.2%
Mini stat cards (compact)
06
Cards
Mới: glass, gradient border, accent stripe
.card.card-hover
Standard card
Hover sẽ nâng nhẹ và đậm shadow.
.card-elevated
Elevated
Có shadow sẵn, không border.
.card-gradient-border
Gradient border
Viền gradient dùng mask, look đẹp.
.card-accent
Brand accent
Stripe màu bên trái.
.card-accent-success
Success accent
Cho thông báo tích cực.
.card-accent-danger
Danger accent
Cho cảnh báo nghiêm trọng.
.card-glass — Glassmorphism
Frosted glass card
Hiệu ứng kính mờ trên nền có texture/gradient.
08
Badges & Chips
Mới: live ping, gradient, solid, removable chips
Variants chuẩn (soft)
Đã duyệt
Chờ duyệt
Quá hạn
Mới
Cao cấp
Tạm dừng
✨ Solid (đậm)
Active
Banned
Limited
Pro
Premium
✨ Live (animated ping)
Live
Recording
Đang chờ
✨ Chips (removable, interactive)
JavaScript
Tháng này
Đã duyệt
Quá hạn
09
Avatars
Mới: status indicator, group, gradient
Sizes
NA
TB
LC
PD
VE
✨ Gradient avatars
AD
AD
AD
✨ With status indicator
A
B
C
✨ Avatar group (overlapping)
10
Progress
Mới: striped, indeterminate, circular ring
✨ Indeterminate (loading)Loading...
✨ Circular Progress Rings
11
Timeline
Mới — cho activity log, lịch sử giao dịch
2026-05-07 · 14:32
Yêu cầu nạp được duyệt
Admin đã duyệt yêu cầu nạp 2,000,000đ của Nguyễn Văn An
2026-05-07 · 14:30
Khách hàng gửi yêu cầu nạp
Nguyễn Văn An yêu cầu nạp 2,000,000đ qua QR
2026-05-07 · 13:15
Cảnh báo dư nợ
Lê Hoàng Cường có dư nợ vượt mức cảnh báo (35M / 40M)
2026-05-07 · 09:42
Quá hạn mức tín dụng
Phạm Thị Em đã vượt hạn mức tín dụng 5,200,000đ
2026-05-07 · 08:00
Hệ thống khởi động
Bắt đầu phiên làm việc ngày mới
12
Table
Hover · Clickable rows · Compact
| Khách hàng |
Mã KH |
Số dư |
Dư nợ |
Hạn mức |
Trạng thái |
|
NA
Nguyễn Văn An
an.nguyen@mail.com
|
U001 |
45.320.000đ |
12.500.000đ |
|
Hoạt động |
|
TB
Trần Thị Bình
binh.tran@mail.com
|
U002 |
128.900.000đ |
0đ |
|
VIP |
|
LC
Lê Hoàng Cường
cuong.le@mail.com
|
U003 |
8.750.000đ |
35.000.000đ |
|
Quá hạn |
|
13
Feedback
Alerts · Toasts · Tooltips · Skeletons
Alerts
Thông tin: Hệ thống bảo trì 23:00–01:00 ngày 15/05.
Thành công: Đã duyệt 3 yêu cầu nạp tiền.
Cảnh báo: Có 5 khách hàng vượt hạn mức.
Lỗi: Không kết nối được cổng thanh toán.
Toasts (góc trên phải)
Đã lưu
Cài đặt đã được cập nhật
Yêu cầu nạp mới
Lê Hoàng Cường vừa gửi yêu cầu
Có lỗi xảy ra
Vui lòng thử lại sau
✨ Tooltips (hover vào nút)
14
Background Patterns
Mới — texture cho hero, empty states
15
Animations & Effects
Mới — float, pulse, glow, ripple
16
Icons (Lucide)
2000+ icons miễn phí · Click để xem tên
home
users
wallet
bell
settings
search
plus
trash-2
edit-3
check
x
qr-code
trending-up
dollar
sparkles
zap
FINORA Design System v2.0
Bước tiếp theo: Layout chính (Sidebar + Header) → Trang Login → Trang Dashboard