Màu sắc của Bếp Mây

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

  • 52% tỉ lệ

    Kem bột #FBF5EA

    Nền đọc — như mặt bàn bột

    Dùng cho: nền trang, nền thẻ công thức

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

  • 14% tỉ lệ

    Nâu mực #2A1E17

    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ệ

    Gạch nồi đất #A8401C

    Hành động chính và thân bánh bao trong logo

    Dùng cho: nút chính, logo mark, liên kết đang chọn

    Không dùng cho: chữ dài, nền toàn trang

  • 10% tỉ lệ

    Lá húng #2F6B4F

    Thành công và nguyên liệu tươi

    Dùng cho: trạng thái hoàn thành, nhãn rau củ, nút phụ

    Không dùng cho: nút chính, cảnh báo

  • 6% tỉ lệ

    Khói mây #E6DCCB

    Đường kẻ, viền, mảng nền phụ

    Dùng cho: viền thẻ, đường chia, nền ô nhập

    Không dùng cho: chữ

  • 6% tỉ lệ

    Nghệ #E8A33D

    Điểm ấm duy nhất — mây hơi nước, ngôi sao khen

    Dùng cho: mây trong logo, huy hiệu khen, focus ở nền tối

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

Vai trò giao diện

Sáng

  • Hành động chính#A8401C
  • Phụ#2F6B4F
  • Nền#FBF5EA
  • Bề mặt#FFFFFF
  • Chữ#2A1E17
  • Chữ phụ#6B5A4E
  • Viền#E6DCCB
  • Thành công#2F6B4F
  • Cảnh báo#8A5A00
  • Nguy hiểm#B42318
  • Thông tin#2F5D7C
  • Focus#2F5D7C

Tối

  • Hành động chính#F08A5D
  • Phụ#7FC4A0
  • Nền#1E1712
  • Bề mặt#2A211A
  • Chữ#FBF5EA
  • Chữ phụ#C9B8A6
  • Viền#4A3B30
  • Thành công#7FC4A0
  • Cảnh báo#E8A33D
  • Nguy hiểm#F87171
  • Thông tin#8DB8D6
  • Focus#E8A33D

Các palette

  • Bếp chiều (chính)

  • Rau sáng

  • Đêm hấp bánh