#F6F3EC
Vôi
Nền trang như tường quét vôi · 46%
Dùng chonền trang, nền ảnh isometric
Không dùngchữ, viền mảnh trên nền trắ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ò
#17241C
Mực rêu
Chữ và nét · 14%
Dùng chochữ thân bài, icon nghỉ, nét vẽ
Không dùngnền lớn ở chế độ sáng
#1E5B3A
Xanh rêu
Hành động chính và mặt trái khối · 16%
Dùng chonút chính, liên kết, mặt trái khối isometric
Không dùngchữ nhỏ trên nền rêu sẫm
#143F28
Rêu sẫm
Mặt tối của khối (bóng) · 8%
Dùng chomặt phải khối isometric, chân trang
Không dùngchữ, nút
#8DBF5A
Lá non
Mặt đỉnh khối, cây xanh · 8%
Dùng chomặt đỉnh khối, mầm cây, biểu đồ tích cực
Không dùngchữ, nền chữ nhỏ
#B44D27
Gạch nung
Điểm nhấn duy nhất mỗi màn · 4%
Dùng chohuy hiệu, dấu ạ trong wordmark, mái nhà isometric
Không dùngnền lớn, nút thứ hai
#E8B23A
Mật ong
Nắng và năng lượng (nhân vật Ong) · 2%
Dùng chotia nắng, pin mặt trời, nhân vật Ong Thợ
Không dùngchữ trên nền sáng
#3A8FB7
Nước mưa
Nước và gió mát (nhân vật Giọt) · 2%
Dùng chogiọt nước, luồng gió, nhân vật Giọt Mưa
Không dùngchữ 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.
| Chế độ | Cặp | Mẫu | Token | Tỉ lệ | Cần | Kết quả |
|---|---|---|---|---|---|---|
| Sáng | Chữ thân bài | Aa | fg / bg | 14.51:1 | ≥ 7:1 | Đạt |
| Sáng | Chữ trên thẻ | Aa | fg / surface | 15.42:1 | ≥ 7:1 | Đạt |
| Sáng | Chữ phụ | Aa | muted / bg | 6.60:1 | ≥ 4.5:1 | Đạt |
| Sáng | Nút chính | Aa | onPrimary / primary | 8.04:1 | ≥ 4.5:1 | Đạt |
| Sáng | Nút phụ | Aa | onSecondary / secondary | 5.21:1 | ≥ 4.5:1 | Đạt |
| Sáng | Viền focus | Aa | focus / bg | 7.25:1 | ≥ 3:1 | Đạt |
| Sáng | Chữ lỗi | Aa | danger / bg | 6.04:1 | ≥ 4.5:1 | Đạt |
| Sáng | Chữ thành công | Aa | success / bg | 5.75:1 | ≥ 4.5:1 | Đạt |
| Tối | Chữ thân bài | Aa | fg / bg | 15.72:1 | ≥ 7:1 | Đạt |
| Tối | Chữ trên thẻ | Aa | fg / surface | 14.04:1 | ≥ 7:1 | Đạt |
| Tối | Chữ phụ | Aa | muted / bg | 8.61:1 | ≥ 4.5:1 | Đạt |
| Tối | Nút chính | Aa | onPrimary / primary | 8.71:1 | ≥ 4.5:1 | Đạt |
| Tối | Nút phụ | Aa | onSecondary / secondary | 6.04:1 | ≥ 4.5:1 | Đạt |
| Tối | Viền focus | Aa | focus / bg | 8.63:1 | ≥ 3:1 | Đạt |
| Tối | Chữ lỗi | Aa | danger / bg | 7.26:1 | ≥ 4.5:1 | Đạt |
| Tối | Chữ thành công | Aa | success / bg | 10.18: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
#1E5B3A
#1E5B3A
--c-onPrimary
#FFFFFF
#FFFFFF
--c-secondary
#B44D27
#B44D27
--c-onSecondary
#FFFFFF
#FFFFFF
--c-bg
#F6F3EC
#F6F3EC
--c-surface
#FCFAF5
#FCFAF5
--c-fg
#17241C
#17241C
--c-muted
#4A5A50
#4A5A50
--c-border
#D9D3C5
#D9D3C5
--c-success
#2F6B3F
#2F6B3F
--c-warning
#8A5A00
#8A5A00
--c-danger
#A8321E
#A8321E
--c-info
#1F5F80
#1F5F80
--c-focus
#1E5B3A
#1E5B3A
Tối
--c-primary
#7CC495
#7CC495
--c-onPrimary
#0B1A10
#0B1A10
--c-secondary
#E07A4F
#E07A4F
--c-onSecondary
#0B1A10
#0B1A10
--c-bg
#101A14
#101A14
--c-surface
#18251D
#18251D
--c-fg
#EEF2EC
#EEF2EC
--c-muted
#A9B8AE
#A9B8AE
--c-border
#2A3A30
#2A3A30
--c-success
#8FD3A2
#8FD3A2
--c-warning
#E8B23A
#E8B23A
--c-danger
#F08A6E
#F08A6E
--c-info
#7CC0E0
#7CC0E0
--c-focus
#7CC495
#7CC495
Bảng màu cho theme
Mỗi bảng: hàng trên sáng, hàng dưới tối.