Live site: https://mkt-tecotec.github.io/CCW-Vietnam-Brand-Playbook/
Hướng dẫn thương hiệu chính thức của Cleveland Cycle Werks Vietnam — static site, tối ưu cho tra cứu nhanh trên desktop và mobile.
| # | Phần |
|---|---|
| 01 | Giới thiệu & Mục đích |
| 02 | Nền tảng thương hiệu |
| 03 | Nhận diện thị giác |
| 04 | Cá tính thương hiệu |
| 05 | Giọng điệu & Ngôn ngữ |
| 06 | Nguyên tắc nội dung |
| 07 | Kênh truyền thông |
| 08 | Dòng xe & Cá tính |
| 09 | Nên & Không nên |
| 10 | Tham khảo nhanh |
CCW-Vietnam-Brand-Playbook/
├── index.html # Giao diện playbook
├── styles.css # Design system & responsive styles
├── main.js # Sidebar TOC, reading progress, scroll spy
├── Logo/ # Bộ logo dùng cho digital và in ấn
│ ├── logo ClevelandCyclewerks.svg
│ ├── logo ClevelandCyclewerks@2x.png
│ ├── logo ClevelandCyclewerks@2x.webp
│ ├── logo ClevelandCyclewerks.ai
│ └── logo ClevelandCyclewerks.eps
└── Typefaces/ # Bộ typeface thương hiệu
├── Amboy.zip # Display font — dùng cho poster, campaign headline
└── Barlow.zip # Body + Condensed — dùng cho mọi ấn phẩm số
Không cần build. Mở thẳng index.html bằng trình duyệt.
Repo dùng GitHub Actions để tự động deploy lên GitHub Pages.
Mỗi lần merge vào main, site được publish tại:
https://mkt-tecotec.github.io/CCW-Vietnam-Brand-Playbook/
- Sidebar TOC — nhảy nhanh giữa các phần, highlight section đang xem
- Reading progress bar — thanh tiến độ cố định trên cùng
- Quick ref button — nhảy thẳng đến phần Tham khảo nhanh
- Responsive — hoạt động trên mobile, tablet và desktop
- Viết caption, bài web, email, sales script
- Duyệt design và KV trước khi publish
- Onboarding nhân sự mới và brief agency
- Đồng bộ tone của voice khi làm việc với đối tác ngoài
Khi có thay đổi về brand assets hoặc giọng điệu, cập nhật trực tiếp trong repo để toàn team dùng cùng một nguồn thật.