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

45%18%12%10%8%7%

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

Vai trò

#120B24

Đêm phòng thu

Nền tối của sân khấu — mọi trang chế độ tối, chân trang, ảnh social · 45%

Dùng chonền trang tối, nền social, chữ thân ở theme sáng

Không dùngchữ trên nền tối, viền mảnh

#F7F5FF

Trắng sân khấu

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

Dùng chochữ thân trên nền tối, nền theme sáng, lõi sáng của ống neon

Không dùngnút chính, điểm nhấn

#5B2BD9

Tím mic

Hành động chính trên nền sáng và ống neon của logo bản sáng · 12%

Dùng chonút chính theme sáng, ống neon logo trên nền sáng, liên kết

Không dùngnền toàn trang, chữ trên nền tối

#22E1F0

Cyan neon

Hành động chính trên nền tối — ống neon chính · 10%

Dùng chonút chính theme tối, ống neon logo trên nền tối, icon trạng thái bật

Không dùngchữ trên nền sáng, nền lớn

#FF3EA5

Hồng đèn sân khấu

Điểm nhấn duy nhất — cột sóng âm trong logo, huy hiệu, đêm diễn · 8%

Dùng chocột sóng âm logo, huy hiệu đêm diễn, focus trên nền tối

Không dùngchữ dài, nền toàn trang, hai điểm nhấn trên một màn

#C9CEDB

Crôm

Viền, đường kẻ và dải kim loại crôm · 7%

Dùng choviền thẻ theme sáng, dải crôm trên panel, đường chia

Không dùngchữ trên nền sáng

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	17.71:1	≥ 7:1	Đạt
Sáng	Chữ trên thẻ	Aa	fg / surface	19.11:1	≥ 7:1	Đạt
Sáng	Chữ phụ	Aa	muted / bg	8.00:1	≥ 4.5:1	Đạt
Sáng	Nút chính	Aa	onPrimary / primary	7.52:1	≥ 4.5:1	Đạt
Sáng	Nút phụ	Aa	onSecondary / secondary	5.90:1	≥ 4.5:1	Đạt
Sáng	Viền focus	Aa	focus / bg	6.97:1	≥ 3:1	Đạt
Sáng	Chữ lỗi	Aa	danger / bg	6.09:1	≥ 4.5:1	Đạt
Sáng	Chữ thành công	Aa	success / bg	4.86:1	≥ 4.5:1	Đạt
Tối	Chữ thân bài	Aa	fg / bg	17.71:1	≥ 7:1	Đạt
Tối	Chữ trên thẻ	Aa	fg / surface	15.96:1	≥ 7:1	Đạt
Tối	Chữ phụ	Aa	muted / bg	10.70:1	≥ 4.5:1	Đạt
Tối	Nút chính	Aa	onPrimary / primary	11.92:1	≥ 4.5:1	Đạt
Tối	Nút phụ	Aa	onSecondary / secondary	5.90:1	≥ 4.5:1	Đạt
Tối	Viền focus	Aa	focus / bg	5.90:1	≥ 3:1	Đạt
Tối	Chữ lỗi	Aa	danger / bg	8.42:1	≥ 4.5:1	Đạt
Tối	Chữ thành công	Aa	success / bg	11.11: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
#5B2BD9

--c-onPrimary
#FFFFFF

--c-secondary
#FF3EA5

--c-onSecondary
#120B24

--c-bg
#F7F5FF

--c-surface
#FFFFFF

--c-fg
#120B24

--c-muted
#4E4670

--c-border
#C9CEDB

--c-success
#0F7B5A

--c-warning
#8A5A00

--c-danger
#B42318

--c-info
#1F5FA8

--c-focus
#5B2BD9

Tối

--c-primary
#22E1F0

--c-onPrimary
#120B24

--c-secondary
#FF3EA5

--c-onSecondary
#120B24

--c-bg
#120B24

--c-surface
#1E1538

--c-fg
#F7F5FF

--c-muted
#C4BEDD

--c-border
#3A2E5C

--c-success
#4ADE9B

--c-warning
#F5C451

--c-danger
#FF8A8A

--c-info
#8DC2FF

--c-focus
#FF3EA5

Bảng màu cho theme

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