#FAF6EC
Giấy dó
Nền đọc — khoảng giấy thở · 52%
Dùng chonền trang, nền ảnh màu nước, mặt sau thẻ cách pha
Không dùngchữ, nền nút
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ò
#1F2A22
Mực trà
Chữ · 14%
Dùng chochữ thân bài, tiêu đề, wordmark
Không dùngnền lớn ở theme sáng
#3D5A36
Lá trà
Nhận diện và nút chính · 16%
Dùng choô logo, nút chính, vệt màu nước chủ đạo
Không dùngchữ nhỏ dưới 14px trên nền tối
#2B5F55
Rêu sương
Liên kết, thông tin, focus · 6%
Dùng choliên kết, vòng focus, hộp thông tin
Không dùngnút chính, trang trí
#D9D3C2
Khói sương
Đường kẻ, viền · 8%
Dùng choviền thẻ, đường chia, khung ảnh
Không dùngchữ
#A4482A
Đất nung
Điểm ấm duy nhất mỗi màn · 4%
Dùng chohuy hiệu workshop, vệt màu nước ấm, một chỗ nhấn mỗi màn
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.
| Chế độ | Cặp | Mẫu | Token | Tỉ lệ | Cần | Kết quả |
|---|---|---|---|---|---|---|
| Sáng | Chữ thân bài | Aa | fg / bg | 13.78:1 | ≥ 7:1 | Đạt |
| Sáng | Chữ trên thẻ | Aa | fg / surface | 14.87:1 | ≥ 7:1 | Đạt |
| Sáng | Chữ phụ | Aa | muted / bg | 6.08:1 | ≥ 4.5:1 | Đạt |
| Sáng | Nút chính | Aa | onPrimary / primary | 7.74:1 | ≥ 4.5:1 | Đạt |
| Sáng | Nút phụ | Aa | onSecondary / secondary | 5.93:1 | ≥ 4.5:1 | Đạt |
| Sáng | Viền focus | Aa | focus / bg | 6.78:1 | ≥ 3:1 | Đạt |
| Sáng | Chữ lỗi | Aa | danger / bg | 6.80:1 | ≥ 4.5:1 | Đạt |
| Sáng | Chữ thành công | Aa | success / bg | 5.92:1 | ≥ 4.5:1 | Đạt |
| Tối | Chữ thân bài | Aa | fg / bg | 15.38:1 | ≥ 7:1 | Đạt |
| Tối | Chữ trên thẻ | Aa | fg / surface | 13.68:1 | ≥ 7:1 | Đạt |
| Tối | Chữ phụ | Aa | muted / bg | 8.65:1 | ≥ 4.5:1 | Đạt |
| Tối | Nút chính | Aa | onPrimary / primary | 8.85:1 | ≥ 4.5:1 | Đạt |
| Tối | Nút phụ | Aa | onSecondary / secondary | 6.57:1 | ≥ 4.5:1 | Đạt |
| Tối | Viền focus | Aa | focus / bg | 9.28:1 | ≥ 3:1 | Đạt |
| Tối | Chữ lỗi | Aa | danger / bg | 7.27:1 | ≥ 4.5:1 | Đạt |
| Tối | Chữ thành công | Aa | success / bg | 9.32: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
#3D5A36
#3D5A36
--c-onPrimary
#FFFFFF
#FFFFFF
--c-secondary
#A4482A
#A4482A
--c-onSecondary
#FFFFFF
#FFFFFF
--c-bg
#FAF6EC
#FAF6EC
--c-surface
#FFFFFF
#FFFFFF
--c-fg
#1F2A22
#1F2A22
--c-muted
#5A5F55
#5A5F55
--c-border
#D9D3C2
#D9D3C2
--c-success
#2F6B3A
#2F6B3A
--c-warning
#8A5A00
#8A5A00
--c-danger
#A3271B
#A3271B
--c-info
#2B5F55
#2B5F55
--c-focus
#2B5F55
#2B5F55
Tối
--c-primary
#9CC28E
#9CC28E
--c-onPrimary
#141A15
#141A15
--c-secondary
#D98A6C
#D98A6C
--c-onSecondary
#141A15
#141A15
--c-bg
#141A15
#141A15
--c-surface
#1D251E
#1D251E
--c-fg
#F3EFE4
#F3EFE4
--c-muted
#B4B7A8
#B4B7A8
--c-border
#334036
#334036
--c-success
#8FCB8A
#8FCB8A
--c-warning
#E8C16A
#E8C16A
--c-danger
#F08A7E
#F08A7E
--c-info
#8FC7B8
#8FC7B8
--c-focus
#8FC7B8
#8FC7B8
Bảng màu cho theme
Mỗi bảng: hàng trên sáng, hàng dưới tối.