Màu sắc của Xe Lá
Mỗi màu có một vai trò và tỉ lệ dùng; giao diện chỉ dùng màu có trong design system.
Màu thương hiệu
- 50% tỉ lệ
Giấy riso #F6F1E4
Nền giấy in — mọi trang, bản đồ, poster
Dùng cho: nền trang, nền bản đồ in, nền poster
Không dùng cho: chữ, nền nút
- 14% tỉ lệ
Mực than #1F2A2A
Chữ và wordmark
Dùng cho: chữ thân, tiêu đề, wordmark
Không dùng cho: nền lớn ở theme sáng
- 12% tỉ lệ
Mực lá #0E6B5C
Trống mực A: hành động chính và bánh xe trong logo
Dùng cho: nút chính, bánh xe logo, đường tuyến trên bản đồ
Không dùng cho: chữ dài, cảnh báo
- 8% tỉ lệ
Rơm #DCD3BE
Đường kẻ, viền, mép giấy
Dùng cho: viền thẻ, đường chia, nền ô nhập
Không dùng cho: chữ
- 8% tỉ lệ
Cam riso #FF6B4A
Trống mực B: điểm nhấn duy nhất — chiếc lá, điểm dừng, huy hiệu
Dùng cho: lá trong logo, ghim điểm dừng, nút phụ chữ Mực than
Không dùng cho: chữ trên nền giấy, nền toàn trang
- 6% tỉ lệ
Đêm đê #15201E
Nền tối — tour đêm, chân trang
Dùng cho: nền theme tối, chân trang
Không dùng cho: chữ trên nền tối
- 2% tỉ lệ
Lá non #5CC3AE
Mực lá trên nền tối
Dùng cho: nút chính ở nền tối, bánh xe logo trên nền tối
Không dùng cho: chữ trên nền giấy
Vai trò giao diện
Sáng
- Hành động chính#0E6B5C
- Phụ#FF6B4A
- Nền#F6F1E4
- Bề mặt#FFFFFF
- Chữ#1F2A2A
- Chữ phụ#5A6461
- Viền#DCD3BE
- Thành công#0E6B5C
- Cảnh báo#8A5A00
- Nguy hiểm#B42318
- Thông tin#2F5D8A
- Focus#2F5D8A
Tối
- Hành động chính#5CC3AE
- Phụ#FF8A6E
- Nền#15201E
- Bề mặt#1E2B28
- Chữ#F6F1E4
- Chữ phụ#C2CCC8
- Viền#3A4A46
- Thành công#5CC3AE
- Cảnh báo#E8B04A
- Nguy hiểm#F87171
- Thông tin#8DB8D6
- Focus#E8B04A
Các palette
Giấy riso (chính)
Chiều trên đê
Phố đêm