Sổ tay Thương hiệu
Bộ quy chuẩn nhận diện của HV GROUP. Mọi ấn phẩm — từ trang bán hàng, gian hàng trên sàn, bao bì đóng gói cho tới danh thiếp — đều lấy tài liệu này làm chuẩn.
Bộ quy chuẩn nhận diện của HV GROUP. Mọi ấn phẩm — từ trang bán hàng, gian hàng trên sàn, bao bì đóng gói cho tới danh thiếp — đều lấy tài liệu này làm chuẩn.
Logo gồm hai phần: biểu tượng (hai cột xanh–cam ôm lấy nhịp chữ V) và chữ ký thương hiệu HV GROUP. Toàn bộ chữ trong logo đã được chuyển thành hình vector — mở ở bất kỳ máy nào, gửi cho bất kỳ nhà in nào cũng không bị đổi phông.
Dùng khi chỉ in được một màu (dấu mộc, khắc laser, in nhiệt trên thùng carton) hoặc khi logo nằm trên ảnh nhiều màu.
Logo cần khoảng trống quanh nó để không bị "bóp nghẹt". Đơn vị đo là X — bề rộng một cột của biểu tượng.
Vùng nét đứt là ranh giới cấm: không đặt chữ, ảnh, đường kẻ hay logo khác vào trong đó. Khi in trên bao bì, khoảng thở tính cả tới mép cắt.
| Trường hợp | Cỡ nhỏ nhất |
|---|---|
| Khoá ngang — màn hình | cao 24px |
| Khoá ngang — in | rộng 12mm |
| Khoá dọc — in | rộng 15mm |
| Biểu tượng riêng | 16px / 5mm |
24px — vẫn đọc được
Nhỏ hơn ngưỡng này, nếp gấp bạc bị mất và chữ nhoè. Chỗ quá nhỏ thì dùng biểu tượng riêng thay vì thu nhỏ cả khoá.
Mỗi lần logo bị dùng sai, thương hiệu mất một chút uy tín. Mười điều dưới đây không có ngoại lệ.
Phóng to thu nhỏ phải giữ đúng tỉ lệ.
Logo luôn nằm ngang.
Chỉ dùng đúng bộ màu đã ban hành.
Không viền, không loang màu, không 3D.
Nền ảnh phức tạp thì dùng bản một màu.
Nền xanh hoặc cam thì logo phải trắng.
Luôn dùng file logo, không tự đánh chữ.
HV GROUPChỉ dùng bốn dạng khoá đã có sẵn.
Logo không dùng làm hoa văn chìm dưới chữ.
Luôn giữ khoảng thở 1X.
Xanh lá là màu chủ đạo, cam là màu nhấn. Hai màu này lấy thẳng từ logo. Ngoài ra có thêm hai màu "hành động" đậm hơn — sinh ra để chữ trắng đặt lên vẫn đọc rõ, đạt chuẩn tiếp cận quốc tế WCAG 2.2 AA.
| Màu | Mã | Dùng khi | Tương phản |
|---|---|---|---|
| Còn hàng | #2E7D32 | Đặt hàng thành công · còn hàng · đã giao | 5.13:1 ✓ |
| Sắp hết | #B45309 | Sắp hết hàng · chờ xác nhận · cảnh báo | 5.02:1 ✓ |
| Hết hàng | #C02626 | Hết hàng · huỷ đơn · lỗi thanh toán | 5.92:1 ✓ |
| Đang giao | #1D6BB8 | Thông tin vận chuyển · ghi chú trung lập | 5.46:1 ✓ |
| -30% | #D24405 | Giá khuyến mãi · nhãn giảm giá · nút mua | 4.60:1 ✓ |
Cam là muối, không phải cơm. Cam tràn màn hình sẽ mất tác dụng dẫn mắt tới nút mua hàng.
Hai phông, cả hai đều miễn phí bản quyền thương mại (giấy phép SIL Open Font License) và có đủ dấu tiếng Việt.
Cùng gốc với chữ ký thương hiệu — dùng cho tiêu đề, tên sản phẩm nổi bật, giá tiền, banner. Độ đậm dùng: 600 · 700 · 800.
Tải: fonts.google.com/specimen/Montserrat
Dùng cho toàn bộ nội dung, giao diện web/app, mô tả sản phẩm, bảng số liệu. Độ đậm dùng: 400 · 500 · 600 · 700.
Tải: fonts.google.com/specimen/Inter
Mọi khoảng cách là bội số của 4. Nhờ vậy các trang do nhiều người làm vẫn khớp nhau.
| Thiết bị | Cột | Rãnh | Lề |
|---|---|---|---|
| Máy tính (≥1024px) | 12 | 24px | 80px · tối đa 1280px |
| Máy tính bảng | 8 | 24px | 40px |
| Điện thoại | 4 | 16px | 16px |
4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 px. Khoảng cách giữa các khối lớn dùng 48–96. Bên trong một thẻ dùng 12–24.
Những khối lặp đi lặp lại trên website và gian hàng. Làm đúng ngay từ đầu thì về sau chỉ việc nhân bản.
| Loại | Nền | Chữ | Dùng khi |
|---|---|---|---|
| Chính | #D24405 | Trắng 600 | Hành động quan trọng nhất — mỗi màn hình chỉ MỘT nút loại này |
| Phụ | Trắng, viền #2E7D32 | #2E7D32 | Hành động thứ hai: thêm giỏ, so sánh |
| Nhạt | #F2F4F5 | #1F2426 | Hành động ít quan trọng: xem thêm, huỷ |
Cao tối thiểu 44px để bấm được bằng ngón tay. Bo góc 8px. Rê chuột thì nền sẫm thêm 8%, không đổi sang màu khác.
Tên sản phẩm viết tối đa hai dòng rồi cắt bằng dấu ba chấm…
● Còn hàng · Giao trong 2h
#FFFFFFVới thương mại điện tử, ảnh chính là gian hàng. Ảnh lệch chuẩn khiến cả trang trông như chợ tạm — và một số sàn còn từ chối duyệt.
#FFFFFF, không đổ bóng giảHV Group nói như một người bán hàng tử tế: rõ ràng, không nói quá, không thúc ép.
Các mẫu dưới đây đã có file gốc kèm theo, kích thước thật, chừa sẵn 3mm tràn lề để gửi thẳng nhà in.
File dùng ngay: an-pham/chu-ky-email.html — mở file, sửa tên, chọn hết rồi dán thẳng vào Gmail/Outlook.
Hàng có vấn đề, nhắn cho chúng tôi trong 7 ngày — đổi trả không hỏi lý do dài dòng.
Mẫu khổ 1920×1080 cho lễ ký kết / hội nghị, hai nền sáng và sẫm: xem mẫu backdrop. Vùng giữa dưới cố tình để trống — đó là chỗ người đứng, chữ đặt vào sẽ bị che.
| File | Dùng cho |
|---|---|
| logo/hv-logo-horizontal.svg | Mặc định — web, tài liệu, hoá đơn, chữ ký email |
| logo/hv-logo-vertical.svg | Chỗ hẹp ngang — standee, thẻ treo, tem hộp |
| logo/hv-mark.svg | Favicon, ảnh đại diện, tem niêm phong |
logo/*-on-dark.svg | Đặt trên nền sẫm |
logo/*-mono-dark.svg · -mono-white.svg | In một màu: dấu mộc, khắc, in thùng carton |
| logo/hv-app-icon.svg | Ảnh đại diện vuông 512×512, có bo góc sẵn |
| an-pham/danh-thiep-mat-truoc.svg | Gửi nhà in — đã chừa 3mm tràn lề, có dấu cắt |
| an-pham/tieu-de-thu-a4.svg | Giấy tiêu đề A4 — hợp đồng, công văn |
| an-pham/the-cam-on.svg | Thẻ cảm ơn bỏ trong đơn hàng |
| an-pham/chu-ky-email.html | Chữ ký email — mở, sửa tên, sao chép, dán |
| tokens.json | Đưa cho người làm web/app — toàn bộ màu, chữ, khoảng cách ở dạng máy đọc được |
Trước khi duyệt bất kỳ thiết kế nào mang tên HV Group, trả lời năm câu này. Sai một câu là trả lại.
| # | Câu hỏi |
|---|---|
| 1 | Logo có đúng một trong bốn dạng khoá chuẩn, không bị bóp méo, xoay, đổi màu, và có đủ khoảng thở 1X không? |
| 2 | Toàn bộ màu có nằm trong bảng màu đã ban hành không? Cam có chiếm quá 20% diện tích không? |
| 3 | Chữ có dùng Montserrat cho tiêu đề và Inter cho nội dung không? Chữ nhỏ nhất có ≥12px không? |
| 4 | Chữ trên nền màu có đọc rõ không — nút bấm dùng Action Orange chứ không phải HV Orange chứ? |
| 5 | Có câu nào hứa điều không chứng minh được, hoặc tạo khan hiếm giả không? |
