03 · Màu

Mỗi màu một việc

Màu được chọn theo vai trò. Tỉ lệ cho biết màu nào là nền, màu nào chỉ được chạm khẽ.

50%18%16%6%6%

Tổng 100% ✓ · màu nhấn mạnh nhất ≤ 10%.

Vai trò

#F8F2E7

Giấy lụa

Nền đọc — khoảng thở như tấm lụa mộc · 50%

Dùng chonền trang, nền thẻ sản phẩm, mặt sau phiếu số đo

Không dùngchữ, nền nút

#1E1815

Sơn then

Chữ và nền sơn mài · 18%

Dùng chochữ thân bài, tiêu đề, nền ảnh sơn mài

Không dùngnền lớn ở theme sáng ngoài ảnh

#8A2B22

Đỏ son

Nhận diện và nút chính · 16%

Dùng choô logo, nút chính, ánh màu dưới lớp sơn

Không dùngchữ dài trên nền tối, cảnh báo lỗi

#2C4A6E

Chàm

Liên kết, thông tin, focus · 6%

Dùng choliên kết, vòng focus, hộp thông tin

Không dùngnút chính, trang trí lớn

#DDD2C0

Khói chỉ

Đường kẻ, viền · 4%

Dùng choviền thẻ, đường chia, khung ảnh

Không dùngchữ

#C8962E

Vàng lá

Điểm sáng duy nhất mỗi màn — chỉ vàng sơn mài · 6%

Dùng chodải lụa trong logo, viền chỉ vàng, huy hiệu lớp nhuộm

Không dùngchữ nhỏ trên nền sáng, nền lớn, nút chính

Tương phản

Chữ thân bài ≥ 7:1, chữ phụ và nút ≥ 4.5:1, focus ≥ 3:1 — cả nền sáng lẫn tối.

Tính lúc build từ design-system.json → color.light / color.dark (WCAG 2.x)
Chế độ	Cặp	Mẫu	Token	Tỉ lệ	Cần	Kết quả
Sáng	Chữ thân bài	Aa	fg / bg	15.75:1	≥ 7:1	Đạt
Sáng	Chữ trên thẻ	Aa	fg / surface	17.26:1	≥ 7:1	Đạt
Sáng	Chữ phụ	Aa	muted / bg	6.77:1	≥ 4.5:1	Đạt
Sáng	Nút chính	Aa	onPrimary / primary	8.57:1	≥ 4.5:1	Đạt
Sáng	Nút phụ	Aa	onSecondary / secondary	6.57:1	≥ 4.5:1	Đạt
Sáng	Viền focus	Aa	focus / bg	8.15:1	≥ 3:1	Đạt
Sáng	Chữ lỗi	Aa	danger / bg	6.58:1	≥ 4.5:1	Đạt
Sáng	Chữ thành công	Aa	success / bg	5.74:1	≥ 4.5:1	Đạt
Tối	Chữ thân bài	Aa	fg / bg	16.14:1	≥ 7:1	Đạt
Tối	Chữ trên thẻ	Aa	fg / surface	14.63:1	≥ 7:1	Đạt
Tối	Chữ phụ	Aa	muted / bg	8.92:1	≥ 4.5:1	Đạt
Tối	Nút chính	Aa	onPrimary / primary	8.42:1	≥ 4.5:1	Đạt
Tối	Nút phụ	Aa	onSecondary / secondary	9.29:1	≥ 4.5:1	Đạt
Tối	Viền focus	Aa	focus / bg	9.21:1	≥ 3:1	Đạt
Tối	Chữ lỗi	Aa	danger / bg	7.72:1	≥ 4.5:1	Đạt
Tối	Chữ thành công	Aa	success / bg	9.90:1	≥ 4.5:1	Đạt

Token giao diện

Tên biến CSS dùng trong code; đổi theme chỉ đổi giá trị.

Sáng

--c-primary
#8A2B22

--c-onPrimary
#FFFFFF

--c-secondary
#C8962E

--c-onSecondary
#1E1815

--c-bg
#F8F2E7

--c-surface
#FFFDF8

--c-fg
#1E1815

--c-muted
#5E524A

--c-border
#DDD2C0

--c-success
#2F6B3A

--c-warning
#8A5A00

--c-danger
#A3271B

--c-info
#2C4A6E

--c-focus
#2C4A6E

Tối

--c-primary
#E89A8A

--c-onPrimary
#15110F

--c-secondary
#DDB04F

--c-onSecondary
#15110F

--c-bg
#15110F

--c-surface
#211B18

--c-fg
#F5EDDF

--c-muted
#BDB1A3

--c-border
#3A302A

--c-success
#8FCB8A

--c-warning
#E8C16A

--c-danger
#F08A7E

--c-info
#9DB8DA

--c-focus
#9DB8DA

Bảng màu cho theme

Mỗi bảng: hàng trên sáng, hàng dưới tối.