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ẽ.

52%14%12%10%6%6%

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

Vai trò

#FBF5EA

Kem bột

Nền đọc — như mặt bàn bột · 52%

Dùng chonền trang, nền thẻ công thức

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

#2A1E17

Nâu mực

Chữ và wordmark · 14%

Dùng chochữ thân, tiêu đề, wordmark

Không dùngnền lớn ở theme sáng

#A8401C

Gạch nồi đất

Hành động chính và thân bánh bao trong logo · 12%

Dùng chonút chính, logo mark, liên kết đang chọn

Không dùngchữ dài, nền toàn trang

#2F6B4F

Lá húng

Thành công và nguyên liệu tươi · 10%

Dùng chotrạng thái hoàn thành, nhãn rau củ, nút phụ

Không dùngnút chính, cảnh báo

#E6DCCB

Khói mây

Đường kẻ, viền, mảng nền phụ · 6%

Dùng choviền thẻ, đường chia, nền ô nhập

Không dùngchữ

#E8A33D

Nghệ

Điểm ấm duy nhất — mây hơi nước, ngôi sao khen · 6%

Dùng chomây trong logo, huy hiệu khen, focus ở nền tối

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

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	14.93:1	≥ 7:1	Đạt
Sáng	Chữ trên thẻ	Aa	fg / surface	16.20:1	≥ 7:1	Đạt
Sáng	Chữ phụ	Aa	muted / bg	6.05:1	≥ 4.5:1	Đạt
Sáng	Nút chính	Aa	onPrimary / primary	6.15:1	≥ 4.5:1	Đạt
Sáng	Nút phụ	Aa	onSecondary / secondary	6.29:1	≥ 4.5:1	Đạt
Sáng	Viền focus	Aa	focus / bg	6.50:1	≥ 3:1	Đạt
Sáng	Chữ lỗi	Aa	danger / bg	6.06:1	≥ 4.5:1	Đạt
Sáng	Chữ thành công	Aa	success / bg	5.80:1	≥ 4.5:1	Đạt
Tối	Chữ thân bài	Aa	fg / bg	16.31:1	≥ 7:1	Đạt
Tối	Chữ trên thẻ	Aa	fg / surface	14.54:1	≥ 7:1	Đạt
Tối	Chữ phụ	Aa	muted / bg	9.18:1	≥ 4.5:1	Đạt
Tối	Nút chính	Aa	onPrimary / primary	7.16:1	≥ 4.5:1	Đạt
Tối	Nút phụ	Aa	onSecondary / secondary	8.69:1	≥ 4.5:1	Đạt
Tối	Viền focus	Aa	focus / bg	8.21:1	≥ 3:1	Đạt
Tối	Chữ lỗi	Aa	danger / bg	6.40:1	≥ 4.5:1	Đạt
Tối	Chữ thành công	Aa	success / bg	8.69: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
#A8401C

--c-onPrimary
#FFFFFF

--c-secondary
#2F6B4F

--c-onSecondary
#FFFFFF

--c-bg
#FBF5EA

--c-surface
#FFFFFF

--c-fg
#2A1E17

--c-muted
#6B5A4E

--c-border
#E6DCCB

--c-success
#2F6B4F

--c-warning
#8A5A00

--c-danger
#B42318

--c-info
#2F5D7C

--c-focus
#2F5D7C

Tối

--c-primary
#F08A5D

--c-onPrimary
#1E1712

--c-secondary
#7FC4A0

--c-onSecondary
#1E1712

--c-bg
#1E1712

--c-surface
#2A211A

--c-fg
#FBF5EA

--c-muted
#C9B8A6

--c-border
#4A3B30

--c-success
#7FC4A0

--c-warning
#E8A33D

--c-danger
#F87171

--c-info
#8DB8D6

--c-focus
#E8A33D

Bảng màu cho theme

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