Màu sắc của Lụa Phố

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 lụa #F8F2E7

    Nền đọc — khoảng thở như tấm lụa mộc

    Dùng cho: nền trang, nền thẻ sản phẩm, mặt sau phiếu số đo

    Không dùng cho: chữ, nền nút

  • 18% tỉ lệ

    Sơn then #1E1815

    Chữ và nền sơn mài

    Dùng cho: chữ thân bài, tiêu đề, nền ảnh sơn mài

    Không dùng cho: nền lớn ở theme sáng ngoài ảnh

  • 16% tỉ lệ

    Đỏ son #8A2B22

    Nhận diện và nút chính

    Dùng cho: ô logo, nút chính, ánh màu dưới lớp sơn

    Không dùng cho: chữ dài trên nền tối, cảnh báo lỗi

  • 6% tỉ lệ

    Chàm #2C4A6E

    Liên kết, thông tin, focus

    Dùng cho: liên kết, vòng focus, hộp thông tin

    Không dùng cho: nút chính, trang trí lớn

  • 4% tỉ lệ

    Khói chỉ #DDD2C0

    Đường kẻ, viền

    Dùng cho: viền thẻ, đường chia, khung ảnh

    Không dùng cho: chữ

  • 6% tỉ lệ

    Vàng lá #C8962E

    Điểm sáng duy nhất mỗi màn — chỉ vàng sơn mài

    Dùng cho: dải lụa trong logo, viền chỉ vàng, huy hiệu lớp nhuộm

    Không dùng cho: chữ nhỏ trên nền sáng, nền lớn, nút chính

Vai trò giao diện

Sáng

  • Hành động chính#8A2B22
  • Phụ#C8962E
  • Nền#F8F2E7
  • Bề mặt#FFFDF8
  • Chữ#1E1815
  • Chữ phụ#5E524A
  • Viền#DDD2C0
  • Thành công#2F6B3A
  • Cảnh báo#8A5A00
  • Nguy hiểm#A3271B
  • Thông tin#2C4A6E
  • Focus#2C4A6E

Tối

  • Hành động chính#E89A8A
  • Phụ#DDB04F
  • Nền#15110F
  • Bề mặt#211B18
  • Chữ#F5EDDF
  • Chữ phụ#BDB1A3
  • Viền#3A302A
  • Thành công#8FCB8A
  • Cảnh báo#E8C16A
  • Nguy hiểm#F08A7E
  • Thông tin#9DB8DA
  • Focus#9DB8DA

Các palette

  • Lụa son

  • Chàm nhuộm

  • Củ nâu