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