Màu sắc của Nụ Cười Xinh

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ệ

    Trắng men #F5FAF9

    Nền đọc — sạch như men răng

    Dùng cho: nền trang, nền thẻ hồ sơ

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

  • 16% tỉ lệ

    Xanh biển sâu #12324A

    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ệ

    Bạc hà đậm #0B6B73

    Hành động chính và chiếc răng 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ệ

    Kính bạc hà #9FE3D8

    Lòng kính mờ của icon, mascot và mảng nền phụ

    Dùng cho: vùng tô icon is-active, thân kính mascot, nền huy hiệu

    Không dùng cho: chữ, viền ô nhập

  • 6% tỉ lệ

    Sương phòng khám #D3E6E4

    Đường kẻ, viền, nền ô nhập

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

    Không dùng cho: chữ

  • 6% tỉ lệ

    Hồng san hô #FF8F7E

    Điểm vui duy nhất — tia lấp lánh, sao biển, khen ngợi

    Dùng cho: tia lấp lánh trong logo, huy hiệu khen, má hồng nhân vật

    Không dùng cho: chữ trên nền sáng, nền nút, cảnh báo

Vai trò giao diện

Sáng

  • Hành động chính#0B6B73
  • Phụ#A8443A
  • Nền#F5FAF9
  • Bề mặt#FFFFFF
  • Chữ#12324A
  • Chữ phụ#46606F
  • Viền#D3E6E4
  • Thành công#1E7A4C
  • Cảnh báo#8A5A00
  • Nguy hiểm#B3261E
  • Thông tin#2B5C8A
  • Focus#2B5C8A

Tối

  • Hành động chính#7DDCD3
  • Phụ#FF9F90
  • Nền#0D2233
  • Bề mặt#15314A
  • Chữ#F2FAF9
  • Chữ phụ#A8C4CC
  • Viền#2C4C63
  • Thành công#7FD6A5
  • Cảnh báo#F0B44C
  • Nguy hiểm#FF8A80
  • Thông tin#93C0EA
  • Focus#F0B44C

Các palette

  • Biển sáng (chính)

  • San hô ấm

  • Đêm yên giấc