Đang tải
Phiên bản nhận diện ban đầu
Nhận diện thương hiệu iLearn
Trang xem trước dành cho việc rà soát thiết kế. Hệ thống logo gồm biểu tượng, chữ iLearn và mô tả AI Learning trên bảng màu Xanh dương, Cam và Xanh lá.
Bảng màu lấy cảm hứng từ ba màu thương hiệu FPT. Logo iLearn là nhận diện riêng của sản phẩm, không phải logo FPT, và không dùng lại hình dạng hay bố cục của logo FPT.
Giao diện Future Intelligence
Thử nghiệmNgôn ngữ thị giác cho ứng dụng: nền navy sâu, panel nhiều lớp, ánh sáng AI có kiểm soát và màu FPT làm điểm nhấn.
Nền ứng dụng
Navy sâu với ánh sáng xanh và tím rất nhẹ, kèm lưới chấm mờ quanh vùng AI.
Panel thông minh
Năm biến thể dùng chung một cấu trúc. Chỉ panel AI đang hoạt động mới được phát sáng.
Mặc định
Nội dung mẫu của panel.
AI
Nội dung mẫu của panel.
Học tập
Nội dung mẫu của panel.
Tiến bộ
Nội dung mẫu của panel.
Chú ý
Nội dung mẫu của panel.
Trạng thái AI Orb
Phase 0 chỉ dùng trạng thái Sẵn sàng và Chưa kích hoạt. Các trạng thái khác là bản xem trước.
- Sẵn sàng
- Chưa kích hoạt
- Đang lắng ngheThử nghiệm
- Đang suy nghĩThử nghiệm
- Đang phản hồiThử nghiệm
- Hoàn tấtThử nghiệm
Chỉ minh họa — không có micro hoặc AI nào đang hoạt động.
Điều hướng
Nút bấm
Nền tối
- deepSpace#07111F
- deepNavy#0A1929
- surfaceNavy#102235
- elevatedSurface#142A40
Màu ánh sáng công nghệ
Màu hỗ trợ cho ánh sáng và điểm nhấn nhỏ — không dùng cho mảng nền lớn.
- aiBlueLight#20A4F3
- aiCyan#22D3EE
- aiViolet#7C6CF2
Kiểu chữ
Tiêu đề trang
Tiêu đề panel
Nội dung đọc thoải mái, rõ ràng và dễ quét.
Nhãn kỹ thuật
Trạng thái trống và đang tải
Chưa có bài học
Bài học đầu tiên sẽ xuất hiện sau khi bạn hoàn thành hồ sơ.
Đang tải
Xem trước ứng dụng
Trang chủBài học hôm nayAI CoachTiến bộ
Giảm chuyển động
Khi hệ thống bật giảm chuyển động, Orb, ánh sáng và hiệu ứng tải đều đứng yên. Trạng thái luôn có chữ đi kèm.
Tinh chỉnh logo
Biểu tượng cũ chứa chữ i viết thường nên logo ngang bị đọc thành “i iLearn”. Biểu tượng mới không chứa chữ cái, để chữ i màu cam trong chữ iLearn là chữ i duy nhất.
Logo ngang chính
Biểu tượng, chữ iLearn và mô tả AI Learning. Dùng cho thanh bên mở rộng và tài liệu.
Logo ngang rút gọn
Biểu tượng và chữ iLearn. Dùng cho không gian hẹp.
Biểu tượng
Dùng cho biểu tượng ứng dụng, favicon, thanh ứng dụng di động và thanh bên thu gọn.
Ý tưởng
AI Spark + Learning Path: tia sáng bốn cánh màu Xanh lá vươn lên từ một trang sách mở cong hướng lên. Ô nền Xanh dương thể hiện sự tin cậy, đường Trắng là tri thức, còn tia sáng Xanh lá là AI giúp bạn tiến bộ. Biểu tượng không chứa chữ cái nào.
Nền sáng và nền tối
Đơn sắc
Màn hình khởi động và tải
Xếp chồng biểu tượng, chữ iLearn và mô tả AI Learning, căn giữa.
Cách dùng đúng và sai
Biểu tượng ứng dụng và favicon
Biểu tượng cần nhận diện được ở 16px. Biểu tượng PWA dạng maskable giữ toàn bộ ký hiệu trong vùng an toàn.
- 16px
- 24px
- 32px
- 48px
- 64px
Favicon
Biểu tượng ứng dụng
Maskable
Màu cốt lõi
Ba màu cố định cùng màu Trắng. Không chỉnh sắc độ các màu này khi thiết kế.
- FPT Blue#0066B3RGB 0, 102, 179
- FPT Orange#F37021RGB 243, 112, 33
- FPT Green#0DB14BRGB 13, 177, 75
- White#FFFFFFRGB 255, 255, 255
Màu trung tính hỗ trợ
Dùng cho chữ, nền và đường viền để giao diện dịu mắt và dễ đọc.
- Xanh navy tiêu đề#173B57
- Chữ chính#17212B
- Chữ phụ#5D6975
- Nền ứng dụng#F6F8FA
- Đường viền#DCE3E8
Vai trò của màu
Mỗi màu có một nhiệm vụ rõ ràng để người học hiểu giao diện ngay lập tức.
- Xanh dương — hành động chínhNút chính, liên kết, mục điều hướng đang chọn và vòng focus.
- Xanh lá — tiến bộ và AIHoàn thành bài học, trạng thái thành công, tiến độ và các tính năng AI Coach.
- Cam — động lựcChuỗi ngày học, nhắc nhở, điểm nhấn và huy hiệu. Không dùng cho chữ nhỏ trên nền trắng.
- Đỏ — lỗiChỉ dùng cho lỗi và thao tác nguy hiểm, không dùng làm màu trang trí.
Nút
Chữ trên nút Cam dùng màu tối để đạt độ tương phản. Nút Xanh lá dùng sắc đậm để chữ trắng dễ đọc.
Ví dụ trong giao diện
Logo rút gọn trên thanh ứng dụng di động và logo đầy đủ trên thanh bên máy tính.
- Trang chủ
- Bài học hôm nay
- AI Coach
- Tiến bộ
Khoảng trống và kích thước tối thiểu
- Giữ khoảng trống quanh logo tối thiểu bằng một nửa chiều cao biểu tượng.
- Biểu tượng tối thiểu 16px. Logo ngang tối thiểu 96px chiều rộng.
- Chữ thường dùng màu tối trên nền sáng. Chữ trắng chỉ đặt trên Xanh dương, Xanh navy hoặc Xanh lá đậm.
- Không đổi cách viết iLearn, không kéo giãn, không xoay và không đặt logo trên nền có độ tương phản thấp.