colors
hệ thống màu gồm 3 tầng: brand palettes (màu thương hiệu), neutral-gray (bề mặt & văn bản), và semantic colors (trạng thái). mỗi brand có 5 mức độ sáng/tối từ base color.
blue-reputa
phát triển từ #064BAE
red-premier
phát triển từ #A10B2E
neutral-gray
dải màu xám trung tính, dùng làm bề mặt toàn bộ giao diện. từ trắng tới đen tuyệt đối.
0
#ffffff 50
#f8fafc 100
#f1f5f9 200
#e2e8f0 300
#cbd5e1 400
#94a3b8 500
#64748b 600
#475569 700
#334155 800
#1e293b 900
#0f172a 1000
#020617 semantic colors
màu theo ngữ nghĩa — không thay đổi giữa các brand. dùng cho badge, alert, toast, form validation.
cách dùng
nên
- dùng neutral palette cho nền, brand color cho điểm nhấn
- kiểm tra contrast ratio trước khi merge
- dùng semantic colors cho trạng thái (success/warning/error/info)
không nên
- dùng brand color làm màu nền toàn trang
- thêm màu mới mà không định nghĩa token
- trộn brand palettes trong cùng một giao diện