Brand Voice & Identity Playbook · Site tĩnh triển khai trên GitHub Pages
🔗 Live site: mkt-tecotec.github.io/T3-Brand-Playbook
Đây là tài liệu hướng dẫn nhận diện và giọng điệu thương hiệu chính thức của TECOTEC Technology (T3). Playbook bao gồm 15 phần, từ nền tảng thương hiệu, nhận diện thị giác, đến quy tắc viết và vận hành nội dung.
Site được xây dựng bằng HTML + CSS + JavaScript thuần, không phụ thuộc framework, tối ưu cho tốc độ tải và trải nghiệm đọc.
| # | Phần | Mô tả |
|---|---|---|
| 01 | Giới thiệu | Mục đích, đối tượng sử dụng |
| 02 | Nền tảng thương hiệu | Sứ mệnh, tầm nhìn, giá trị cốt lõi |
| 03 | Nhận diện thị giác | Logo, màu sắc, typography, hình ảnh, biểu tượng |
| 04 | Cá tính thương hiệu | 5 đặc điểm định vị tính cách |
| 05 | Giọng điệu & Ngôn ngữ | Tone matrix theo ngữ cảnh |
| 06 | Bộ lọc nội dung | Checklist kiểm tra trước khi xuất bản |
| 07 | Quy tắc viết | Ngữ pháp, thuật ngữ, cấu trúc câu |
| 08 | Viết kỹ thuật | Template AppNote, Report, Product Sheet |
| 09 | Khung Case Study | Cấu trúc 6 phần chuẩn |
| 10 | Giọng Proposal & RFP | Cách viết đề xuất và phản hồi |
| 11 | AI Content Guardrails | Quy định sử dụng AI trong sản xuất nội dung |
| 12 | Hướng dẫn theo kênh | Web, LinkedIn, Email, Career page |
| 13 | Ma trận ứng phó | L0–L3 response matrix |
| 14 | Nên & Không nên | Bộ quy tắc tổng hợp |
| 15 | Tham khảo nhanh | Cheat sheet in được |
- 🎨 Bảng màu tương tác — click để copy HEX code
- 📥 Tải logo — 6 định dạng: SVG, PNG, WebP, PDF, AI, White SVG
- 🔤 Nút tải font — link trực tiếp tới Google Fonts (IBM Plex Sans)
- ✅ Checklist bộ lọc nội dung — tích các tiêu chí trước khi đăng
- 📌 Navigation scroll-spy — sidebar highlight section đang xem
- 🖨️ In trang tham khảo — quick reference card tối ưu in ấn
- 📱 Responsive — sidebar collapse trên mobile
| File | Định dạng | Dùng cho |
|---|---|---|
Logo TECOTEC Technology.svg |
SVG | Web, in ấn chất lượng cao |
Logo-TECOTEC-Technology.png |
PNG transparent | Presentation, email |
Logo-TECOTEC-Technology.webp |
WebP | Web, tối ưu tốc độ |
Logo TECOTEC Technology.pdf |
In ấn chuyên nghiệp | |
Logo-TECOTEC-Technology.ai |
AI | Chỉnh sửa vector |
logo-T3-white.svg |
SVG trắng | Nền tối |
index.html — Cấu trúc HTML5 semantic, 15 sections
styles.css — Design system (CSS custom properties), responsive, print
main.js — Scroll spy, clipboard, checklist, mobile nav, scroll reveal
Font: IBM Plex Sans (Google Fonts)
Không dùng framework JS hoặc CSS library nào.
Site được deploy tự động qua GitHub Pages từ nhánh main.
Để cập nhật nội dung:
# 1. Chỉnh sửa index.html / styles.css / main.js
# 2. Commit và push
git add .
git commit -m "chore: cập nhật nội dung [mô tả thay đổi]"
git push origin main
# 3. GitHub Pages tự động deploy trong ~2–5 phútfeat: thêm tính năng mới
fix: sửa lỗi
chore: cập nhật nội dung, tài sản
style: thay đổi CSS/UI không ảnh hưởng logic
docs: cập nhật tài liệu
TECOTEC Technology
📧 info@tecotec.tech
🌐 tecotec.tech
Brand Playbook v1.0 · Tháng 4/2026 · Phòng Marketing TECOTEC Group