#F6F1E4
Giấy riso
Nền giấy in — mọi trang, bản đồ, poster · 50%
Dùng chonền trang, nền bản đồ in, nền poster
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ò
#1F2A2A
Mực than
Chữ và wordmark · 14%
Dùng chochữ thân, tiêu đề, wordmark
Không dùngnền lớn ở theme sáng
#0E6B5C
Mực lá
Trống mực A: hành động chính và bánh xe trong logo · 12%
Dùng chonút chính, bánh xe logo, đường tuyến trên bản đồ
Không dùngchữ dài, cảnh báo
#DCD3BE
Rơm
Đường kẻ, viền, mép giấy · 8%
Dùng choviền thẻ, đường chia, nền ô nhập
Không dùngchữ
#FF6B4A
Cam riso
Trống mực B: điểm nhấn duy nhất — chiếc lá, điểm dừng, huy hiệu · 8%
Dùng cholá trong logo, ghim điểm dừng, nút phụ chữ Mực than
Không dùngchữ trên nền giấy, nền toàn trang
#15201E
Đêm đê
Nền tối — tour đêm, chân trang · 6%
Dùng chonền theme tối, chân trang
Không dùngchữ trên nền tối
#5CC3AE
Lá non
Mực lá trên nền tối · 2%
Dùng chonút chính ở nền tối, bánh xe logo trên nền tối
Không dùngchữ trên nền giấy
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.09:1 | ≥ 7:1 | Đạt |
| Sáng | Chữ trên thẻ | Aa | fg / surface | 14.76:1 | ≥ 7:1 | Đạt |
| Sáng | Chữ phụ | Aa | muted / bg | 5.43:1 | ≥ 4.5:1 | Đạt |
| Sáng | Nút chính | Aa | onPrimary / primary | 6.41:1 | ≥ 4.5:1 | Đạt |
| Sáng | Nút phụ | Aa | onSecondary / secondary | 5.24:1 | ≥ 4.5:1 | Đạt |
| Sáng | Viền focus | Aa | focus / bg | 6.10:1 | ≥ 3:1 | Đạt |
| Sáng | Chữ lỗi | Aa | danger / bg | 5.83:1 | ≥ 4.5:1 | Đạt |
| Sáng | Chữ thành công | Aa | success / bg | 5.68:1 | ≥ 4.5:1 | Đạt |
| Tối | Chữ thân bài | Aa | fg / bg | 14.81:1 | ≥ 7:1 | Đạt |
| Tối | Chữ trên thẻ | Aa | fg / surface | 13.01:1 | ≥ 7:1 | Đạt |
| Tối | Chữ phụ | Aa | muted / bg | 10.15:1 | ≥ 4.5:1 | Đạt |
| Tối | Nút chính | Aa | onPrimary / primary | 7.85:1 | ≥ 4.5:1 | Đạt |
| Tối | Nút phụ | Aa | onSecondary / secondary | 7.25:1 | ≥ 4.5:1 | Đạt |
| Tối | Viền focus | Aa | focus / bg | 8.54:1 | ≥ 3:1 | Đạt |
| Tối | Chữ lỗi | Aa | danger / bg | 6.04:1 | ≥ 4.5:1 | Đạt |
| Tối | Chữ thành công | Aa | success / bg | 7.85: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
#0E6B5C
#0E6B5C
--c-onPrimary
#FFFFFF
#FFFFFF
--c-secondary
#FF6B4A
#FF6B4A
--c-onSecondary
#1F2A2A
#1F2A2A
--c-bg
#F6F1E4
#F6F1E4
--c-surface
#FFFFFF
#FFFFFF
--c-fg
#1F2A2A
#1F2A2A
--c-muted
#5A6461
#5A6461
--c-border
#DCD3BE
#DCD3BE
--c-success
#0E6B5C
#0E6B5C
--c-warning
#8A5A00
#8A5A00
--c-danger
#B42318
#B42318
--c-info
#2F5D8A
#2F5D8A
--c-focus
#2F5D8A
#2F5D8A
Tối
--c-primary
#5CC3AE
#5CC3AE
--c-onPrimary
#15201E
#15201E
--c-secondary
#FF8A6E
#FF8A6E
--c-onSecondary
#15201E
#15201E
--c-bg
#15201E
#15201E
--c-surface
#1E2B28
#1E2B28
--c-fg
#F6F1E4
#F6F1E4
--c-muted
#C2CCC8
#C2CCC8
--c-border
#3A4A46
#3A4A46
--c-success
#5CC3AE
#5CC3AE
--c-warning
#E8B04A
#E8B04A
--c-danger
#F87171
#F87171
--c-info
#8DB8D6
#8DB8D6
--c-focus
#E8B04A
#E8B04A
Bảng màu cho theme
Mỗi bảng: hàng trên sáng, hàng dưới tối.