Color system là gì?
Còn gọi: hệ thống màu giao diện
Color system là bộ quy tắc tổ chức màu trong một sản phẩm số, gồm bảng màu gốc, các dải sắc độ và vai trò của từng màu như nền, chữ, viền, màu chính, màu nhấn và màu trạng thái.
Hiểu kỹ hơn
Một hệ thống màu thường có ba lớp. Lớp gốc là các dải màu như blue-100 đến blue-900 và dải xám trung tính. Lớp vai trò (semantic) gán màu gốc cho mục đích, ví dụ text/primary, surface/default, border/subtle, action/primary. Lớp thành phần áp vai trò vào từng component. Cách chia này giúp làm chế độ tối dễ hơn: chỉ đổi giá trị của lớp vai trò. Trong Figma, có thể làm bằng Variables, tạo collection Primitives và collection Semantic với hai mode Light và Dark. Mọi cặp màu chữ và nền cần đạt tỉ lệ tương phản 4.5:1 cho chữ thường và 3:1 cho chữ lớn theo WCAG. Ví dụ: Material Design 3 tạo cả hệ thống màu từ một màu gốc qua công cụ Material Theme Builder. Lỗi thường gặp là mỗi màn hình tự chọn một mã màu xám khác nhau, đến khi bàn giao có hàng chục màu gần giống nhau mà không ai biết dùng cái nào.
