#0F1E2E
Mực sân
Chữ và ô logo · 18%
Dùng chochữ thân bài, ô logo, thanh đầu trang tối
Không dùngnền lớn ở theme sáng
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ẽ.
Tỉ lệ dùng
Tổng 100% ✓ · màu nhấn mạnh nhất ≤ 10%.
Vai trò
#0B6E4F
Xanh thảm sân
Hành động chính · 12%
Dùng chonút chính, trạng thái đã đặt sân, liên kết quan trọng
Không dùngchữ dài, nền toàn trang
#0A5C8A
Xanh gió
Thông tin và focus · 6%
Dùng choviền focus, liên kết, hộp thông tin
Không dùngnút chính
#FAFAF5
Lông cầu
Nền đọc · 52%
Dùng chonền trang, nền thẻ in
Không dùngchữ trên nền trắng
#D5DED6
Vạch sân
Đường kẻ, viền · 7%
Dùng choviền thẻ, đường chia, vạch sân minh hoạ
Không dùngchữ
#F2542D
Đế cầu
Điểm nhấn duy nhất mỗi màn · 5%
Dùng chođế quả cầu trong logo, huy hiệu mới, một điểm nhấn mỗi màn
Không dùngchữ trên nền sáng, trang trí rải rác
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.
| Chế độ | Cặp | Mẫu | Token | Tỉ lệ | Cần | Kết quả |
|---|---|---|---|---|---|---|
| Sáng | Chữ thân bài | Aa | fg / bg | 16.10:1 | ≥ 7:1 | Đạt |
| Sáng | Chữ trên thẻ | Aa | fg / surface | 16.86:1 | ≥ 7:1 | Đạt |
| Sáng | Chữ phụ | Aa | muted / bg | 7.01:1 | ≥ 4.5:1 | Đạt |
| Sáng | Nút chính | Aa | onPrimary / primary | 6.25:1 | ≥ 4.5:1 | Đạt |
| Sáng | Nút phụ | Aa | onSecondary / secondary | 4.88:1 | ≥ 4.5:1 | Đạt |
| Sáng | Viền focus | Aa | focus / bg | 6.89:1 | ≥ 3:1 | Đạt |
| Sáng | Chữ lỗi | Aa | danger / bg | 6.28:1 | ≥ 4.5:1 | Đạt |
| Sáng | Chữ thành công | Aa | success / bg | 5.97:1 | ≥ 4.5:1 | Đạt |
| Tối | Chữ thân bài | Aa | fg / bg | 16.73:1 | ≥ 7:1 | Đạt |
| Tối | Chữ trên thẻ | Aa | fg / surface | 14.79:1 | ≥ 7:1 | Đạt |
| Tối | Chữ phụ | Aa | muted / bg | 8.64:1 | ≥ 4.5:1 | Đạt |
| Tối | Nút chính | Aa | onPrimary / primary | 9.53:1 | ≥ 4.5:1 | Đạt |
| Tối | Nút phụ | Aa | onSecondary / secondary | 7.89:1 | ≥ 4.5:1 | Đạt |
| Tối | Viền focus | Aa | focus / bg | 9.56:1 | ≥ 3:1 | Đạt |
| Tối | Chữ lỗi | Aa | danger / bg | 6.59:1 | ≥ 4.5:1 | Đạt |
| Tối | Chữ thành công | Aa | success / bg | 9.53: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
#0B6E4F
#0B6E4F
--c-onPrimary
#FFFFFF
#FFFFFF
--c-secondary
#F2542D
#F2542D
--c-onSecondary
#0F1E2E
#0F1E2E
--c-bg
#FAFAF5
#FAFAF5
--c-surface
#FFFFFF
#FFFFFF
--c-fg
#0F1E2E
#0F1E2E
--c-muted
#475A55
#475A55
--c-border
#D5DED6
#D5DED6
--c-success
#0B6E4F
#0B6E4F
--c-warning
#8A5A00
#8A5A00
--c-danger
#B42318
#B42318
--c-info
#0A5C8A
#0A5C8A
--c-focus
#0A5C8A
#0A5C8A
Tối
--c-primary
#4FD1A1
#4FD1A1
--c-onPrimary
#0C1620
#0C1620
--c-secondary
#FF8A66
#FF8A66
--c-onSecondary
#0C1620
#0C1620
--c-bg
#0C1620
#0C1620
--c-surface
#142231
#142231
--c-fg
#F4F6EE
#F4F6EE
--c-muted
#A7B6AE
#A7B6AE
--c-border
#26384A
#26384A
--c-success
#4FD1A1
#4FD1A1
--c-warning
#F2C14E
#F2C14E
--c-danger
#F87171
#F87171
--c-info
#7CC4F0
#7CC4F0
--c-focus
#7CC4F0
#7CC4F0
Bảng màu cho theme
Mỗi bảng: hàng trên sáng, hàng dưới tối.