#F5FAF9
Trắng men
Nền đọc — sạch như men răng · 50%
Dùng chonền trang, nền thẻ hồ sơ
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ò
#12324A
Xanh biển sâu
Chữ và wordmark · 16%
Dùng chochữ thân, tiêu đề, wordmark
Không dùngnền lớn ở theme sáng
#0B6B73
Bạc hà đậm
Hành động chính và chiếc răng trong logo · 12%
Dùng chonút chính, logo mark, liên kết đang chọn
Không dùngchữ dài, nền toàn trang
#9FE3D8
Kính bạc hà
Lòng kính mờ của icon, mascot và mảng nền phụ · 10%
Dùng chovùng tô icon is-active, thân kính mascot, nền huy hiệu
Không dùngchữ, viền ô nhập
#D3E6E4
Sương phòng khám
Đường kẻ, viền, nền ô nhập · 6%
Dùng choviền thẻ, đường chia, nền ô nhập
Không dùngchữ
#FF8F7E
Hồng san hô
Điểm vui duy nhất — tia lấp lánh, sao biển, khen ngợi · 6%
Dùng chotia lấp lánh trong logo, huy hiệu khen, má hồng nhân vật
Không dùngchữ trên nền sáng, nền nút, cảnh báo
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 | 12.60:1 | ≥ 7:1 | Đạt |
| Sáng | Chữ trên thẻ | Aa | fg / surface | 13.28:1 | ≥ 7:1 | Đạt |
| Sáng | Chữ phụ | Aa | muted / bg | 6.30:1 | ≥ 4.5:1 | Đạt |
| Sáng | Nút chính | Aa | onPrimary / primary | 6.24:1 | ≥ 4.5:1 | Đạt |
| Sáng | Nút phụ | Aa | onSecondary / secondary | 5.91:1 | ≥ 4.5:1 | Đạt |
| Sáng | Viền focus | Aa | focus / bg | 6.64:1 | ≥ 3:1 | Đạt |
| Sáng | Chữ lỗi | Aa | danger / bg | 6.20:1 | ≥ 4.5:1 | Đạt |
| Sáng | Chữ thành công | Aa | success / bg | 5.05:1 | ≥ 4.5:1 | Đạt |
| Tối | Chữ thân bài | Aa | fg / bg | 15.32:1 | ≥ 7:1 | Đạt |
| Tối | Chữ trên thẻ | Aa | fg / surface | 12.62:1 | ≥ 7:1 | Đạt |
| Tối | Chữ phụ | Aa | muted / bg | 8.84:1 | ≥ 4.5:1 | Đạt |
| Tối | Nút chính | Aa | onPrimary / primary | 10.09:1 | ≥ 4.5:1 | Đạt |
| Tối | Nút phụ | Aa | onSecondary / secondary | 8.20:1 | ≥ 4.5:1 | Đạt |
| Tối | Viền focus | Aa | focus / bg | 8.76:1 | ≥ 3:1 | Đạt |
| Tối | Chữ lỗi | Aa | danger / bg | 7.11:1 | ≥ 4.5:1 | Đạt |
| Tối | Chữ thành công | Aa | success / bg | 9.33: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
#0B6B73
#0B6B73
--c-onPrimary
#FFFFFF
#FFFFFF
--c-secondary
#A8443A
#A8443A
--c-onSecondary
#FFFFFF
#FFFFFF
--c-bg
#F5FAF9
#F5FAF9
--c-surface
#FFFFFF
#FFFFFF
--c-fg
#12324A
#12324A
--c-muted
#46606F
#46606F
--c-border
#D3E6E4
#D3E6E4
--c-success
#1E7A4C
#1E7A4C
--c-warning
#8A5A00
#8A5A00
--c-danger
#B3261E
#B3261E
--c-info
#2B5C8A
#2B5C8A
--c-focus
#2B5C8A
#2B5C8A
Tối
--c-primary
#7DDCD3
#7DDCD3
--c-onPrimary
#0D2233
#0D2233
--c-secondary
#FF9F90
#FF9F90
--c-onSecondary
#0D2233
#0D2233
--c-bg
#0D2233
#0D2233
--c-surface
#15314A
#15314A
--c-fg
#F2FAF9
#F2FAF9
--c-muted
#A8C4CC
#A8C4CC
--c-border
#2C4C63
#2C4C63
--c-success
#7FD6A5
#7FD6A5
--c-warning
#F0B44C
#F0B44C
--c-danger
#FF8A80
#FF8A80
--c-info
#93C0EA
#93C0EA
--c-focus
#F0B44C
#F0B44C
Bảng màu cho theme
Mỗi bảng: hàng trên sáng, hàng dưới tối.