[4] Luật màu sắc trong Design System

🎨 Color Foundation trong Design System

🧠 Mục tiêu

Color Foundation định nghĩa toàn bộ hệ thống màu trong Design System, từ màu nguyên thủy đến cách sử dụng trong UI.

Một hệ thống màu tốt không nằm ở việc có nhiều màu, mà ở việc:

• có cấu trúc rõ ràng
• có vai trò cụ thể
• có thể mở rộng và sử dụng nhất quán

🧱 1. Primitive (Raw Color)

Primitive là các màu gốc, chưa có ý nghĩa sử dụng trong UI.

Bao gồm:

• màu cơ bản (blue, green, red…)
• trắng và đen

👉 Đây là “nguyên liệu” để tạo ra hệ thống màu.

Ví dụ:

• #000000 (black)
• #FFFFFF (white)
• base blue, base green, base red

Nguyên tắc:

• Primitive không được dùng trực tiếp trong UI
• Chỉ dùng để xây dựng palette

🎨 2. Color Palette

Palette là tập hợp các màu đã được chuẩn hóa từ primitive.

Mỗi màu sẽ có nhiều cấp độ (scale):

• 50 → rất sáng
• 100 → sáng
• 200–300 → trung gian nhẹ
• 400–500 → màu chính
• 600–700 → đậm (hover, active)
• 800–900 → rất đậm

👉 Palette giúp màu có thể sử dụng linh hoạt trong nhiều ngữ cảnh.

Nguyên tắc:

• Mỗi màu phải có scale rõ ràng
• Scale phải nhất quán giữa các nhóm màu
• Không sử dụng palette trực tiếp trong UI

🎯 3. Semantic Tokens

Semantic là lớp gán ý nghĩa (role) cho màu.

Thay vì dùng:

• blue-500
• neutral-200

👉 sẽ dùng:

• text-primary
• bg-primary
• action-primary
• border-default

🧠 Vai trò của semantic

• tách UI khỏi màu cụ thể
• hỗ trợ dễ dàng thay đổi theme (light/dark)
• đảm bảo tính nhất quán

🎯 Nguyên tắc

• Mỗi token đại diện cho một vai trò
• Không gắn cố định vào 1 giá trị màu
• Phải hỗ trợ nhiều mode (light / dark)

👉 Ví dụ:

text-primary

• light: neutral-900
• dark: neutral-50

🧩 4. Color Rules

Color Rules định nghĩa cách sử dụng semantic tokens trong UI.

👉 Đây là phần quan trọng nhất trong foundation

🧠 4.1 Nguyên tắc cốt lõi

• Không dùng màu trực tiếp (hex, rgb) trong UI
• Chỉ sử dụng semantic tokens
• Không sử dụng màu ngoài system

👉 Nguyên tắc quan trọng nhất:

Không chọn màu — chỉ áp dụng đúng vai trò của màu

🎨 4.2 Vai trò của nhóm màu

Primary

• dùng để nhấn mạnh hành động chính
• không bắt buộc phải là màu logo
• phải đảm bảo dễ đọc và dễ sử dụng

👉 Brand color có thể tách riêng (accent)

Secondary

• hỗ trợ primary
• không cạnh tranh với primary

Neutral dùng cho:

• text
• background
• surface
• border

👉 Đây là nhóm màu quan trọng nhất trong UI

State (Success / Warning / Error / Info)

• dùng cho trạng thái hệ thống
• không dùng cho mục đích trang trí

👉 Không bắt buộc phải có đầy đủ tất cả → chỉ define khi có use case.

🎚 4.3 Nguyên tắc cấp độ màu

• tone sáng → background
• tone trung → border / UI nhẹ
• tone đậm → text / nhấn mạnh

👉 Cấp độ màu quyết định cách dùng, không phải cảm tính

🧩 4.4 Rule theo vai trò

Text

• ưu tiên dùng neutral
• tránh dùng màu mạnh cho đoạn text dài

Background & Surface

• background chính phải trung tính
• surface tạo layer trong UI

Nguyên tắc:

• không dùng màu mạnh làm nền chính
• layer cao hơn → nổi hơn

Border

• dùng neutral để giữ sự ổn định
• tránh dùng màu mạnh

🎯 4.5 Rule cho State

Tất cả trạng thái nên theo cùng một pattern:

• background → tone nhẹ
• text → tone đậm
• border → tone trung

👉 giúp dễ nhận diện và nhất quán

🧱 4.6 Rule cho Background

Phân loại background:

• nền chính → neutral
• nền chức năng → state color
• nền nhấn nhẹ → tone sáng của primary / secondary

Nguyên tắc:

• không dùng primary làm nền toàn bộ UI
• màu mạnh chỉ dùng để nhấn

🧠 4.7 Quy tắc nâng cao

• không dùng quá nhiều màu mạnh trên một màn hình
• không dùng màu trạng thái cho trang trí
• luôn đảm bảo độ tương phản (contrast)
• ưu tiên neutral cho phần lớn UI

🔧 4.8 Khi màu có vấn đề

Nếu UI gặp lỗi:

• khó đọc
• thiếu tương phản
• không rõ hierarchy

👉 Không chỉnh từng màn

👉 Thay vào đó:

• chỉnh semantic tokens
• hoặc chỉnh palette

💀 4.9 Sai lầm cần tránh

• dùng màu theo cảm tính
• dùng trực tiếp palette
• lạm dụng primary
• không phân biệt vai trò màu

🧭 5. Guidelines

Guidelines là các khuyến nghị giúp sử dụng màu hiệu quả trong thực tế.

🎯 Nguyên tắc

• giữ UI đơn giản, không lạm dụng màu
• ưu tiên readability hơn thẩm mỹ
• sử dụng màu để tạo hierarchy, không phải trang trí

📌 Khuyến nghị

• hạn chế số lượng màu trên một màn
• tránh dùng màu sáng (như vàng) cho text dài
• dùng surface để tạo phân cấp thay vì màu mạnh
• luôn kiểm tra contrast giữa text và background

🔥 Kết luận

Color Foundation không chỉ là bảng màu, mà là một hệ thống có thể:

• áp dụng nhất quán
• mở rộng theo thời gian
• hỗ trợ nhiều theme (light / dark)

💥 Câu chốt

Không phải bạn chọn màu — mà là bạn sử dụng đúng vai trò của màu trong hệ thống

Color Foundation: https://www.figma.com/design/QwbgeUIRaVa3ETy8O3UOxT/Design-system-2026?node-id=1-2&p=f&t=L518EaEZQLyUm4wN-0