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