#FBF8EF
Giấy lúa
Nền đọc · 45%
Dùng chonền trang, nền thẻ in, hộp thoại pixel
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ò
#1B1633
Mực đêm
Chữ và khung sprite · 18%
Dùng chochữ thân bài, viền 1 ô của sprite, thanh đầu trang tối
Không dùngnền lớn ở theme sáng
#4A2C9B
Tím số
Hành động chính · 12%
Dùng chonút chính, ô logo, bầu trời trong ảnh pixel
Không dùngchữ dài, trang trí rải rác
#A6D930
Lá chuối
Mầm và trạng thái đạt · 8%
Dùng cholá mầm trong logo, thanh tiến độ đã đạt, đồi pixel
Không dùngchữ trên nền sáng, nền chữ dài
#1F5FA8
Nước trời
Nước, thông tin và focus · 5%
Dùng chogiọt nước, độ ẩm, viền focus, hộp thông tin
Không dùngnút chính
#DDD6EA
Vạch luống
Đường kẻ, viền · 4%
Dùng choviền thẻ, đường chia, lưới luống minh hoạ
Không dùngchữ
#E0452F
Cà chua
Điểm nhấn duy nhất mỗi màn · 3%
Dùng choque đo cảm biến trong logo, cảnh báo cần tưới, huy hiệu mới
Không dùngchữ trên nền sáng, nhiều điểm trên một màn
#7B4B2A
Đất luống
Đất và gốc cây · 2%
Dùng chođất trong minh hoạ pixel, thân giun Tơi
Không dùngchữ, nút
#F2C14E
Nắng sớm
Mặt trời và thưởng · 2%
Dùng chonhân vật Nắng, sao thưởng chuỗi ngày
Không dùngchữ trên nền sáng
#FF8A73
Hồng giun
Nhân vật Tơi và má hồng · 1%
Dùng chothân giun Tơi, má hồng nhân vật
Không dùngchữ, 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.
| Chế độ | Cặp | Mẫu | Token | Tỉ lệ | Cần | Kết quả |
|---|---|---|---|---|---|---|
| Sáng | Chữ thân bài | Aa | fg / bg | 16.35:1 | ≥ 7:1 | Đạt |
| Sáng | Chữ trên thẻ | Aa | fg / surface | 17.37:1 | ≥ 7:1 | Đạt |
| Sáng | Chữ phụ | Aa | muted / bg | 8.10:1 | ≥ 4.5:1 | Đạt |
| Sáng | Nút chính | Aa | onPrimary / primary | 9.88:1 | ≥ 4.5:1 | Đạt |
| Sáng | Nút phụ | Aa | onSecondary / secondary | 4.19:1 | ≥ 4.5:1 | Chưa đạt |
| Sáng | Viền focus | Aa | focus / bg | 6.06:1 | ≥ 3:1 | Đạt |
| Sáng | Chữ lỗi | Aa | danger / bg | 6.19:1 | ≥ 4.5:1 | Đạt |
| Sáng | Chữ thành công | Aa | success / bg | 6.10:1 | ≥ 4.5:1 | Đạt |
| Tối | Chữ thân bài | Aa | fg / bg | 16.70:1 | ≥ 7:1 | Đạt |
| Tối | Chữ trên thẻ | Aa | fg / surface | 14.84:1 | ≥ 7:1 | Đạt |
| Tối | Chữ phụ | Aa | muted / bg | 8.81:1 | ≥ 4.5:1 | Đạt |
| Tối | Nút chính | Aa | onPrimary / primary | 8.61:1 | ≥ 4.5:1 | Đạt |
| Tối | Nút phụ | Aa | onSecondary / secondary | 7.97:1 | ≥ 4.5:1 | Đạt |
| Tối | Viền focus | Aa | focus / bg | 9.89:1 | ≥ 3:1 | Đạt |
| Tối | Chữ lỗi | Aa | danger / bg | 6.63:1 | ≥ 4.5:1 | Đạt |
| Tối | Chữ thành công | Aa | success / bg | 10.99: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
#4A2C9B
#4A2C9B
--c-onPrimary
#FFFFFF
#FFFFFF
--c-secondary
#E0452F
#E0452F
--c-onSecondary
#1B1633
#1B1633
--c-bg
#FBF8EF
#FBF8EF
--c-surface
#FFFFFF
#FFFFFF
--c-fg
#1B1633
#1B1633
--c-muted
#4E4866
#4E4866
--c-border
#DDD6EA
#DDD6EA
--c-success
#2F6B1F
#2F6B1F
--c-warning
#8A5A00
#8A5A00
--c-danger
#B42318
#B42318
--c-info
#1F5FA8
#1F5FA8
--c-focus
#1F5FA8
#1F5FA8
Tối
--c-primary
#B9A6F7
#B9A6F7
--c-onPrimary
#15112A
#15112A
--c-secondary
#FF8A73
#FF8A73
--c-onSecondary
#15112A
#15112A
--c-bg
#15112A
#15112A
--c-surface
#211B3D
#211B3D
--c-fg
#F6F3FB
#F6F3FB
--c-muted
#B7B0CC
#B7B0CC
--c-border
#352D57
#352D57
--c-success
#A6D930
#A6D930
--c-warning
#F2C14E
#F2C14E
--c-danger
#F87171
#F87171
--c-info
#8CC4F5
#8CC4F5
--c-focus
#8CC4F5
#8CC4F5
Bảng màu cho theme
Mỗi bảng: hàng trên sáng, hàng dưới tối.