# 04. Nhận diện thị giác

> Logo, màu thương hiệu, quy tắc tương phản, hình ảnh và hệ icon.

### Logo

Logo TECOTEC Group gồm biểu tượng tròn xoáy ốc tạo bởi các chấm màu cam, wordmark "TECOTEC" và dòng "since 1996". Logo hiện có một bố cục dựng đứng với ba phiên bản màu.

| Tệp | Định dạng | Dùng cho | Kích thước |
|---|---|---|---|
| [Logo màu](/logo/tecotec-group-logo-vertical.svg) | SVG | Web, giao diện (vector) | 39 KB |
| [Logo màu](/logo/tecotec-group-logo-vertical.png) | PNG | Tài liệu, slide | 57 KB |
| [Logo màu](/logo/tecotec-group-logo-vertical.webp) | WebP | Social, digital | 119 KB |
| [Logo màu](/logo/tecotec-group-logo-vertical.ai) | AI | Nguồn Adobe Illustrator | 104 KB |
| [Logo màu](/logo/tecotec-group-logo-vertical.eps) | EPS | Thiết kế, in offset | 522 KB |
| [Logo âm bản (trắng)](/logo/tecotec-group-logo-white.png) | PNG | Nền tối, ảnh tối | 57 KB |
| [Logo dương bản (đen)](/logo/tecotec-group-logo-black.png) | PNG | In một màu, nền sáng | 57 KB |

**Quy tắc dùng logo:**

- Chỉ dùng file chính thức ở trên. Không vẽ lại, không tự ghép chữ, không lấy logo từ website hay ảnh chụp.
- Logo màu giữ nguyên màu gốc, không tô lại bằng màu giao diện:

| Token | HEX | Vai trò |
|---|---|---|
| logo-orange | #F89521 | Biểu tượng chấm cam trong file logo. |
| logo-ink | #010101 | Chữ "TECOTEC" và "since 1996" trong file logo. |

- Trên nền trắng hoặc nền `#F4F6F8`: dùng logo màu. In một màu: dùng logo đen (dương bản).
- Trên nền tối (nền xanh, ảnh tối): dùng logo trắng (âm bản).
- Không kéo giãn, xoay, đổ bóng, thêm hiệu ứng hay đặt logo lên nền rối.

### Màu thương hiệu

Bấm vào ô màu để sao chép mã HEX.

| Token | HEX | RGB | CMYK | Vai trò |
|---|---|---|---|---|
| orange-primary | #FF9900 | 255, 153, 0 | 0, 40, 100, 0 | Điểm nhấn. CTA, tiêu đề section đánh số, viền nhấn của card, slogan trên hero, link hover. |
| blue-secondary | #146EB4 | 20, 110, 180 | 89, 39, 0, 29 | Heading, link, header bảng, tag, footer, biểu tượng trust. |
| off-white-bg | #F4F6F8 | 244, 246, 248 | 0, 0, 0, 3 | Nền, tạo khoảng thở. |

**Tỷ lệ đề xuất:** xanh 60%, cam 30%, màu nhấn khác 10%.

**Cách dùng:**

- **Cam `#FF9900`:** điểm nhấn. Nút kêu gọi hành động, tiêu đề mục, đường gạch chân, viền nhấn.
- **Xanh `#146EB4`:** tiêu đề, liên kết, đầu bảng, biểu tượng tin cậy.
- **Nền `#F4F6F8`:** nền trang, tạo khoảng thở. Khối nội dung đặt trên nền trắng.

### Quy tắc tương phản

Màu cam là màu nhấn, không phải màu chữ.

- Không đặt chữ cỡ thường màu cam trên nền trắng (tương phản 2.14:1) hoặc nền `#F4F6F8` (1.98:1). Mức tối thiểu cho chữ thường là 4.5:1.
- Chữ trắng trên nền cam cũng không đạt (2.14:1). Chữ trên nền cam dùng màu chữ tối `#1A1A1A` (8.13:1).
- Chữ xanh `#146EB4` trên nền trắng đạt 5.36:1, dùng được cho tiêu đề và liên kết.
- Trạng thái đúng, sai luôn có nhãn chữ hoặc dấu ✓ ✗ đi kèm, không phân biệt chỉ bằng màu.

### Hình ảnh

- **Ưu tiên ảnh thật:** kỹ sư làm việc, thiết bị, phòng thí nghiệm, dự án đã bàn giao, hoạt động của đội ngũ.
- **Ảnh stock** chỉ dùng để minh hoạ khái niệm, không dùng để mô tả người, thiết bị hay dự án của TECOTEC Group.
- **Ảnh tạo bằng AI** không được giả làm ảnh thật về người, thiết bị, dự án của TECOTEC Group. Nếu dùng ảnh AI để minh hoạ ý tưởng, phải nhìn ra ngay đó là minh hoạ.
- **Không đăng ảnh khu vực quốc phòng**, trang bị quốc phòng hay người mặc quân phục trong tài liệu thương mại.
- Ảnh rõ nét, đủ sáng, có người thật khi có thể. Chụp màn hình phần mềm thì cắt bỏ hoặc giữ trọn phần ghi nguồn dữ liệu, không cắt nửa vời.

### Hệ icon

TECOTEC Group **ưu tiên [Lucide](https://lucide.dev)** (giấy phép ISC) cho mọi ấn phẩm số và tài liệu.

- Chỉ khi Lucide không có icon cần dùng mới lấy từ hệ dự phòng, theo thứ tự: [Phosphor Icons](https://phosphoricons.com) (kiểu Regular), [Tabler Icons](https://tabler.io/icons) (outline), [Font Awesome](https://fontawesome.com) (Regular). Icon dự phòng phải cùng kiểu nét, cùng cỡ và màu với icon Lucide bên cạnh.
- Trong một màn hình hay một trang, không dùng icon của hai hệ cho cùng một loại nội dung.
- Kiểu nét outline, độ dày nét 2px ở cỡ 24px; không tô đặc.
- Cỡ chuẩn: 16, 20, 24px cho giao diện; 32 và 48px cho minh hoạ, slide.
- Màu mặc định xanh `#146EB4` hoặc màu chữ tối; cam chỉ làm điểm nhấn.
- Icon mang nghĩa luôn có nhãn chữ đi kèm. Không dùng icon thay cho chữ ở nội dung quan trọng.
- Lucide không có icon logo mạng xã hội; khi cần, dùng logo chính thức của nền tảng theo hướng dẫn của nền tảng đó.
- Không dùng icon để mô tả trang bị quốc phòng cụ thể.

### Kiểu chữ

Thương hiệu chưa có quy định font riêng. Site playbook dùng Inter (Google Fonts) với các font hệ thống làm dự phòng. Khi có quy định font chính thức, mục này sẽ được cập nhật.