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%18%10%9%7%

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

Vai trò

#12141C

Mực đêm

Nền đêm — bóng tối của phòng đọc · 52%

Dùng chonền trang theme tối, ô logo, nền ảnh noir

Không dùngchữ trên nền tối

#F4EBDC

Giấy ngà

Chữ trên nền tối và nền giấy ở theme sáng · 18%

Dùng chochữ thân bài trên nền đêm, trang sách trong logo, nền in ấn

Không dùngnền nút

#EDA944

Đèn hổ phách

Ánh đèn bàn — nhận diện và nút chính · 10%

Dùng chochùm sáng logo, nút chính trên nền tối, vũng sáng ảnh noir

Không dùngchữ dài trên nền giấy, nền lớn

#363A4C

Gỗ kệ

Đường kẻ, viền, khối kệ chìm trong tối · 9%

Dùng choviền thẻ, đường chia, dãy kệ trong ảnh

Không dùngchữ

#B9B0A2

Khói cà phê

Chữ phụ, chú thích · 7%

Dùng chochú thích, giờ mở cửa phụ, mưa trong ảnh

Không dùngtiêu đề, nút

#E890A2

Mận đêm thơ

Điểm ấm duy nhất mỗi màn (đêm thơ, câu lạc bộ) · 4%

Dùng chohuy hiệu đêm thơ, một chỗ nhấn mỗi màn, má nhân vật

Không dùngnền lớn, chữ dài, 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.27:1	≥ 7:1	Đạt
Sáng	Chữ trên thẻ	Aa	fg / surface	17.23:1	≥ 7:1	Đạt
Sáng	Chữ phụ	Aa	muted / bg	7.64:1	≥ 4.5:1	Đạt
Sáng	Nút chính	Aa	onPrimary / primary	6.79:1	≥ 4.5:1	Đạt
Sáng	Nút phụ	Aa	onSecondary / secondary	7.74:1	≥ 4.5:1	Đạt
Sáng	Viền focus	Aa	focus / bg	7.82:1	≥ 3:1	Đạt
Sáng	Chữ lỗi	Aa	danger / bg	6.20:1	≥ 4.5:1	Đạt
Sáng	Chữ thành công	Aa	success / bg	5.42:1	≥ 4.5:1	Đạt
Tối	Chữ thân bài	Aa	fg / bg	15.55:1	≥ 7:1	Đạt
Tối	Chữ trên thẻ	Aa	fg / surface	13.87:1	≥ 7:1	Đạt
Tối	Chữ phụ	Aa	muted / bg	8.57:1	≥ 4.5:1	Đạt
Tối	Nút chính	Aa	onPrimary / primary	9.07:1	≥ 4.5:1	Đạt
Tối	Nút phụ	Aa	onSecondary / secondary	7.83:1	≥ 4.5:1	Đạt
Tối	Viền focus	Aa	focus / bg	8.86:1	≥ 3:1	Đạt
Tối	Chữ lỗi	Aa	danger / bg	7.56:1	≥ 4.5:1	Đạt
Tối	Chữ thành công	Aa	success / bg	9.70: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
#8A4B0C

--c-onPrimary
#FFFFFF

--c-secondary
#8E3347

--c-onSecondary
#FFFFFF

--c-bg
#F4EBDC

--c-surface
#FFF9EF

--c-fg
#14161E

--c-muted
#4E4840

--c-border
#D6C8B2

--c-success
#2E6B3A

--c-warning
#7A4F00

--c-danger
#A3271B

--c-info
#2B4777

--c-focus
#2B4777

Tối

--c-primary
#EDA944

--c-onPrimary
#12141C

--c-secondary
#E890A2

--c-onSecondary
#12141C

--c-bg
#12141C

--c-surface
#1C1F2B

--c-fg
#F4EBDC

--c-muted
#B9B0A2

--c-border
#363A4C

--c-success
#8FCB8A

--c-warning
#E8C16A

--c-danger
#F08A7E

--c-info
#93B6EA

--c-focus
#93B6EA

Bảng màu cho theme

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