thichhoc.com

Bộ nhận diện thương hiệu

Đóa hoa cúc, giấy ấm và tinh thần ứng dụng học tập tương tác — những nguyên tắc giữ cho thichhoc.com nhất quán ở mọi nơi. Dùng đúng, và tải về ở định dạng bạn cần.

01 — Logo

Logo

Biểu tượng là đóa hoa cúc tám cánh trên nền sage-teal, dựng từ một định nghĩa hình duy nhất. Ưu tiên logo đặt cạnh chữ (lockup); khi không gian hẹp, dùng riêng biểu tượng.

Logo ngang — nền sángBản dùng chính. Đặt trên giấy hoặc nền sáng.

PNG

Logo ngang — nền tốiBản dùng chính trên nền tối hoặc sage-teal.

PNG

Logo tài trợ

Khi thichhoc.com xuất hiện với tư cách nhà tài trợ — trên áp phích, slide, chân trang hay ấn phẩm của đối tác — hãy dùng bản có sẵn dòng “nhà tài trợ”. Hai bản đầu có nền trong suốt, đặt thẳng lên vật liệu của bạn; chọn bản sáng hay tối theo độ tương phản, đừng tự thêm khung hay đổi màu chữ.

Tài trợ — nền sángĐặt trên giấy, nền sáng. Biểu tượng nằm trong đĩa tròn sage-teal.

PNG

Tài trợ — nền tốiĐặt trên nền tối hoặc sage-teal. Bỏ đĩa tròn, chữ trắng.

PNG

Khi không kiểm soát được nền — logo nằm trên ảnh, trên nền hoa văn hay giữa một dải nhiều nhà tài trợ — hãy dùng bản có khung. Khung tự mang nền theo nên dòng chữ luôn đọc được, không cần bạn kê thêm hộp trắng phía sau. Mỗi dáng có hai bản chữ: thichhoc.com khi muốn người xem gõ được địa chỉ, Thích Học khi đặt giữa văn cảnh tiếng Việt.

Tài trợ — khung giấy · thichhoc.comKhung bo góc nền giấy, đặt lên ảnh hoặc nền rối

PNG

Tài trợ — khung giấy · Thích HọcKhung bo góc nền giấy, đặt lên ảnh hoặc nền rối

PNG

Tài trợ — khung teal · thichhoc.comKhung bo góc nền teal, đặt trên nền sáng

PNG

Tài trợ — khung teal · Thích HọcKhung bo góc nền teal, đặt trên nền sáng

PNG

Tài trợ — viên thuốc · thichhoc.comBo tròn hết cỡ, hợp dải chân trang

PNG

Tài trợ — viên thuốc · Thích HọcBo tròn hết cỡ, hợp dải chân trang

PNG

Đặt trên bài đăng & video

Một quy tắc không có ngoại lệ: luôn đặt ở góc trên trái — chỗ mắt chạm đầu tiên và là chỗ duy nhất không ứng dụng nào phủ nút hay chữ lên. Bề rộng thì tuỳ khung: ảnh bài đăng để logo chiếm 1/4 đến 1/3 bề rộng (đủ đọc là đủ, không cần lấn ảnh), còn video dọc thì tối đa một nửa vì khung hẹp và người xem lướt nhanh. Trên ảnh chụp thì luôn dùng bản có khung — nền ảnh không bao giờ đứng yên đủ để bản trong suốt đọc được; chọn khung sáng hay tối theo độ sáng của ảnh.

Facebook · ảnh bài viết1200×630. Logo rộng ~30% ảnh, nằm trong ảnh chứ không đặt lên vùng chữ của Facebook.

Instagram · bài đăng1080×1350 (4:5). Cũng ~30% bề rộng. Ảnh sáng thì dùng khung teal cho nổi; tránh mép dưới, nơi hàng nút tim và bình luận nằm sát.

Đang followDành cho bạn

Video ngắn · TikTok, Reels, Shorts1080×1920 (9:16). Khung hẹp nên logo rộng tới ~46%. Hạ xuống dưới thanh tab trên cùng, tránh cột nút bên phải và dải chú thích dưới đáy. Giữ logo ít nhất 3 giây.

Giao diện ba ứng dụng ở đây là hình vẽ minh hoạ, không phải ảnh chụp màn hình — và ba khung này là ví dụ vị trí, không phải tệp để tải. Logo tài trợ tải ở các hình phía trên.

Các biến thể

Bo gócIcon ứng dụng, favicon, logo trên web.

PNG

Vuông (full-bleed)Nơi hệ điều hành tự bo góc — màn hình chính iOS, PWA maskable.

PNG

Lớp nền — trong suốtForeground của Android adaptive; nằm trong vùng an toàn.

PNG

Thẻ mạng xã hộiẢnh 1200×630 khi chia sẻ liên kết.

PNG

Khoảng trống an toàn

Chừa quanh logo một khoảng trống tối thiểu bằng X — bằng nửa bề rộng biểu tượng. Không đặt chữ hay hình khác vào vùng này.

Kích thước tối thiểu

24px

32px

48px

Không dùng nhỏ hơn 24px trên màn hình. Nhỏ hơn nữa, các cánh hoa dính vào nhau và mất nét.

Nên & không nên

✓ Nên

Đặt logo gốc trên nền tương phản.

✗ Không

Không kéo giãn, bóp méo tỉ lệ.

✗ Không

Không đổi màu biểu tượng.

✗ Không

Không xoay nghiêng logo.

✗ Không

Không thêm bóng đổ hay hiệu ứng lạ.

✗ Không

Không đặt bản trong suốt lên nền thiếu tương phản.

02 — Màu sắc

Màu sắc

Một bảng màu tự nhiên, trầm ấm: sage-teal và vàng của logo, mực nâu đọc trên nền giấy. Tránh màu neon rực và độ tương phản chói.

Màu logo

Teal#4A7D7BNền — sage-teal của logo

Petal#FBFBF8Cánh hoa

Gold#EAA41FVành nhụy hoa

Shadow#2F5B59Bóng đổ cánh hoa

Màu giao diện

Paper#F5F1E8Nền ấm của toàn app

Ink#1A1814Mực chữ chính

Accent#4F7468Sage-teal cho chữ & liên kết

Gold#C79518Vàng nhấn, đã hạ tông

03 — Font chữ

Font chữ

Ba typeface, mỗi cái một vai trò rõ ràng. Tất cả đều có subset tiếng Việt để dấu hiển thị đúng trong-face, không rơi về Georgia giữa chừng.

FrauncesTiêu đề & nội dung

Học tập để vươn mìnhAaBbCc · Ăâ Êê Ôơ Ưư · 0123456789

SpectralItalic dẫn dắt & trích dẫn

Ứng dụng học tập tương tác cho mọi người.

JetBrains MonoNhãn, mã nguồn, chữ hoa giãn

Khám phá · Tài liệu · Đăng nhậpconst daisy = flower(724);

04 — Hình minh hoạ

Phong cách hình minh hoạ

Hình ảnh nên toát lên tinh thần ấm áp, thân thiện: giấy, mực, chút thực vật. Ưu tiên khoảng thở và tông trầm hơn là chi tiết dày đặc.

Giấy ấm, vân nhẹNền là giấy #f5f1e8 với lớp vân rất mờ. Tránh trắng tinh #fff.

Bảng màu tự nhiênSage-teal, vàng gold, mực nâu. Không neon, không gradient chói.

Mô-típ hoa cúcDùng đường nét bông cúc / thực vật làm hoạ tiết điểm xuyết, tiết chế.

Bố cục biên tậpNhiều khoảng thở, chữ serif dẫn dắt, lưới gọn gàng kiểu tạp chí.

✓ Nên

Ảnh/minh hoạ tông ấm, trầm, nhiều khoảng trống.

✗ Không

Tránh ảnh bão hoà cao, nhiều hiệu ứng loè loẹt.

05 — Tải xuống

Tải xuống

Mỗi hình ở trên đều có nút tải ngay bên dưới: SVG, PNG theo cỡ, hoặc cả dải cỡ trong một tệp .zip. Phần này dành cho những gói mà một hình lẻ không thay được. Mọi tệp được dựng ngay trên trình duyệt từ cùng một hình hoa gốc, nên không bao giờ lệch với bản đang chạy trong ứng dụng.

Bộ icon nền tảng (.zip)

Đầy đủ mọi kích thước, gắn thẳng vào dự án — không cần chỉnh tay.

iOS — 15 PNG full-bleed + Contents.json cho AppIcon.appiconset.
Android — mipmap 5 mật độ (legacy + adaptive foreground) và lớp XML nền/adaptive.
Favicon — 32 / 48 / 192 / 512 px và Apple touch icon 180 px.

Trọn bộ logo (.zip)

Cả 14 biến thể ở trên dưới dạng SVG, trong một tệp.

← Về trang chủ