Vaga Guideline

1. Tổng quan

1.1. Mục tiêu và Tầm nhìn

Tài liệu này là nguồn tham chiếu duy nhất và chính thức cho nhận diện hình ảnh thương hiệu Vaga. Mục tiêu là đảm bảo mọi sản phẩm thiết kế, từ website đến video, đều thể hiện một hình ảnh nhất quán, chuyên nghiệp và dễ nhận biết. Sự nhất quán là nền tảng để xây dựng niềm tin và củng cố giá trị thương hiệu, phản ánh đúng tinh thần "kết nối", "hội tụ" và "phát triển" mà logo Vaga đại diện.

1.2. Phạm vi áp dụng

Thiết kế Website & Giao diện người dùng (UI/UX): Website công ty, các trang landing page, ứng dụng web và giao diện sản phẩm số.
Thiết kế Hình ảnh Tĩnh: Các ấn phẩm trên mạng xã hội, banner quảng cáo kỹ thuật số, tài liệu marketing, và các ấn phẩm in ấn.
Sản xuất Video & Đồ họa chuyển động: Video quảng cáo, video giới thiệu sản phẩm, nội dung cho các nền tảng như YouTube, TikTok.

1.3. Cách sử dụng tài liệu

🔒 Bắt buộc (Mandatory)

Các quy tắc liên quan đến những yếu tố cốt lõi của thương hiệu như logo, bảng màu chính, và font chữ. Mọi trường hợp ngoại lệ đều cần phê duyệt từ bộ phận quản lý thương hiệu.

💡 Khuyến nghị (Recommended)

Các hướng dẫn về bố cục, phong cách hình ảnh. Cho phép sự linh hoạt sáng tạo trong phạm vi khuôn khổ để phù hợp với từng ngữ cảnh cụ thể.

1.4. Quy ước Tên thương hiệu

Bắt buộc: Trong mọi văn bản, tài liệu và giao tiếp, tên thương hiệu sẽ được sử dụng là "Vaga". Tên gọi "VAGA Group" chỉ được phép xuất hiện trong các lockup logo nguyên bản và các văn bản có tính pháp lý.

2. Logo & Bảo vệ logo

2.1. Các biến thể Logo hợp lệ

Hệ thống logo Vaga được thiết kế để linh hoạt trong nhiều ứng dụng khác nhau, bao gồm ba biến thể chính thức:

Logo Dọc (Vertical)

Ưu tiên sử dụng · ≥100px

Logo Ngang (Horizontal)

Khi chiều cao hạn chế · ≥75px

Biểu tượng (Mark)

Favicon, avatar · ≥75px

2.2. Khu vực an toàn (Clear Space)

Khu vực an toàn là khoảng không gian tối thiểu xung quanh logo, phải được giữ trống. Chiều rộng khu vực an toàn: W_safe ≥ 0.5 × W_mark. Quy tắc này áp dụng cho tất cả các cạnh và mọi biến thể.

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

Biến thể	In ấn	Kỹ thuật số
Logo Dọc	20 mm	100 px
Logo Ngang	15 mm	75 px
Biểu tượng (Mark)	15 mm	75 px

2.4. Vị trí đề xuất

Logo nên được đặt tại một trong năm vị trí ưu tiên:

Góc trên bên trái
Góc trên bên phải
Góc dưới bên trái
Góc dưới bên phải
Căn giữa (theo chiều ngang hoặc dọc)

2.5. Nền tảng cho phép

Nền màu trơn: Sử dụng các màu từ bảng màu thương hiệu (Vaga Green, Vaga Beige).
Nền trắng hoặc đen: Sử dụng các phiên bản logo âm bản hoặc dương bản tương ứng.
Nền ảnh: Chỉ đặt logo trên các vùng ảnh có chi tiết đơn giản, độ tương phản thấp.

Biến thể màu Logo (6 nền)

Original

Dark Green

Mono Light

Mono Dark

Dark Orange

Dark Brown

2.6. Các trường hợp sử dụng sai (Don'ts)

Nghiêm cấm:

✕ Bóp méo / kéo giãn

✕ Thay đổi font chữ

✕ Xoay nghiêng

✕ Đổi / hoán đổi màu

✕ Nền phức tạp

✕ Thêm hiệu ứng

3. Màu sắc

3.1. Bảng màu chính (Primary Palette)

#F8F2E9

Vaga Beige

RGB 248, 242, 233 · CMYK 2, 3, 7, 0
Màu nền chủ đạo (60%)

#006949

Vaga Green

RGB 0, 105, 73 · CMYK 90, 34, 81, 26
Màu thương hiệu cốt lõi (30%)

3.2. Bảng màu bổ trợ (Secondary Palette)

#F26121

Vaga Orange

RGB 242, 97, 33 · CMYK 0, 76, 99, 0
CTA / Nhấn mạnh

#BDD630

Vaga Light Green

RGB 189, 214, 48 · CMYK 31, 0, 100, 0
Nhấn phụ / Trang trí

3.3. Tỷ lệ phân bổ màu

Quy tắc phân bổ màu 60-30-10:

60% Beige

30% Green

10%

3.4. Quy tắc tương phản & Khả năng tiếp cận

Tuân thủ tiêu chuẩn WCAG 2.1 cấp độ AA:

Màu chữ \ Nền	Beige #F8F2E9	Green #006949	Trắng #FFFFFF
Vaga Green	9.68:1 ✅ AAA	—	3.84:1 ⚠️ AA Large
Vaga Orange	3.35:1 ⚠️ AA Large	2.03:1 ❌ Fail	4.53:1 ✅ AA
Light Green	1.57:1 ❌ Fail	5.36:1 ✅ AA	2.97:1 ❌ Fail
Đen #111	16.5:1 ✅ AAA	2.17:1 ❌ Fail	18.59:1 ✅ AAA

✅ AAA/AA = An toàn mọi kích thước · ⚠️ AA Large = Chỉ chữ ≥18pt · ❌ Fail = Không dùng cho văn bản

4. Kiểu chữ (Typography)

4.1. Font chữ thương hiệu

Font chính: Work Sans — Google Fonts ↗
Weights: Semibold (600) cho tiêu đề · Medium (500) cho heading phụ · Regular (400) cho nội dung
Fallback: Arial — dùng trong email, Office, Google Docs

Aa Bb Cc Dd Ee

Work Sans — Regular 400 · Medium 500 · Semibold 600

4.2. Hệ thống thang bậc kiểu chữ

Yếu tố	Desktop	Mobile	Weight
H1	48px / 60px	32px / 40px	600 (Semibold)
H2	36px / 44px	28px / 36px	600 (Semibold)
H3	28px / 36px	24px / 32px	500 (Medium)
H4	22px / 28px	20px / 26px	500 (Medium)
Body (P)	16px / 24px	16px / 24px	400 (Regular)
Small/Caption	14px / 20px	14px / 20px	400 (Regular)

Live preview

H1 — Kết nối toàn diện

H2 — Phát triển bền vững

H3 — Tầm nhìn dài hạn

H4 — Giải pháp công nghệ

Body — Nội dung văn bản chính. Line-height 1.5×.

Small — Caption, chú thích, metadata.

4.3. Quy tắc sắp đặt chữ (Typesetting)

📏

Căn lề
Luôn căn trái

📖

Chiều dài dòng
45–90 ký tự

↕️

Chiều cao dòng
1.5× cỡ chữ

🚫

Gạch nối
Tắt (hyphens: none)

5. Pattern/Họa tiết

5.1. Nguồn gốc và cấu trúc

Pattern của Vaga được xây dựng từ một phần của biểu tượng (mark), lặp lại và xoay ở các góc độ khác nhau. Điều này tạo ra một ngôn ngữ hình ảnh độc đáo, có tính liên kết chặt chẽ với logo.

🔗 Nguồn gốc chung: Cả Logo (cross_arm = shape_0 @ 45°) lẫn Pattern (tile_12 = shape_0 × rotations) đều xuất phát từ cùng 1 shape primitive.

5.2. Bốn biểu cảm Pattern

Phát Triển

72 shapes · 6× tile_12

Kết Nối

72 shapes · 6× tile_12

Tầm Nhìn

72 shapes · 6× tile_12

Tương Lai

48 shapes · 2×2 tile_12

Color Tiers per Pattern

Phát Triển

Kết Nối

Tầm Nhìn

Tương Lai

Dải Pattern (Band)

Phát Triển

Kết Nối

Tầm Nhìn

Tương Lai

5.3. Ứng dụng trong bố cục

📦

Khối Họa tiết
Giới hạn bởi lề grid

➖

Dải ngang
Phân tách khu vực nội dung

🖼️

Kết hợp ảnh
Cạnh ảnh thẳng hàng pattern

5.4. Điều cấm

TUYỆT ĐỐI KHÔNG sử dụng pattern tràn lề (full-bleed).
Pattern phải tôn trọng hệ thống lưới và khoảng trắng — coi nó như một thành phần nội dung có cấu trúc.

6. Ảnh & Đồ hoạ

6.1. Phong cách Nhiếp ảnh

Phong cách nhiếp ảnh của Vaga cần phản ánh tinh thần "công nghệ, kết nối, phát triển".

📷 Chủ đề

Con người tương tác, hợp tác trong môi trường làm việc sáng sủa, hiện đại. Công nghệ sạch, nông nghiệp công nghệ cao. Tránh hình ảnh stock chung chung.

💡 Ánh sáng & Màu

Ưu tiên ánh sáng tự nhiên, mềm mại. Tông màu trung thực. Hậu kỳ: ám tông Beige ở vùng sáng, Green ở vùng tối.

6.2. Xử lý ảnh (Overlays & Gradients)

Lớp phủ (Overlay): Khi ảnh nền không đủ tương phản, sử dụng Vaga Green với opacity 60-80%.
Gradient: Tránh gradient phức tạp. Nếu cần, chỉ dùng gradient đơn sắc từ một màu trong bảng màu thương hiệu.

6.3. Hệ thống Iconography

Phong cách
Line icons, tối giản

Stroke
2px @ 24×24px

Bo góc
2px radius

Chi tiết
Tối giản, cốt lõi

7. Website

7.1. Lưới & Khoảng cách (Grid & Spacing)

Breakpoint	Cột	Gutter	Margin
Desktop (>1240px)	12 cột	24px	200px
Tablet (768–1239px)	8 cột	24px	32px
Mobile (<768px)	4 cột	16px	16px

Hệ thống khoảng cách (Spacing System — base 8px)

sp-1
4px

sp-2
8px

sp-3
16px

sp-4
24px

sp-5
32px

sp-6
48px

sp-7
64px

7.2. Thành phần Giao diện (UI Components)

Buttons

Padding: 12px × 24px · Corner: 4px

Form Input

Label — Work Sans Medium 14px

Focus: viền → Vaga Green · Error: viền → #D92D20

7.3. Khả năng tiếp cận (Accessibility)

Tương phản: Bắt buộc tuân thủ WCAG 2.1 AA cho tất cả văn bản. Tham chiếu ma trận tương phản ở Mục 3.4.
Cấu trúc Heading: Tuân thủ thứ bậc <h1> đến <h6>. Mỗi trang chỉ có một <h1>.
Trạng thái Focus: Mọi yếu tố tương tác phải có trạng thái focus rõ ràng (viền bao quanh).

7.4. Thiết kế Đáp ứng (Responsive Design)

Breakpoint	Giá trị	Ghi chú
sm	640px	Mobile landscape
md	768px	Tablet portrait
lg	1024px	Tablet landscape
xl	1280px	Desktop

7.5. Favicon & Meta Brand

Favicon: Sử dụng biểu tượng (mark) trên nền Vaga Green hoặc trong suốt. Cung cấp 16×16, 32×32, apple-touch-icon.
Meta Image (OG): 1200×630px, chứa logo Vaga, tiêu đề trang và hình ảnh đại diện.

8. Social Media & Asset Sizes

8.1. Kích thước tối ưu

Nền tảng	Loại	Kích thước (px)	Tỷ lệ
Instagram	Post (Vuông)	1080 × 1080	1:1
	Post (Dọc)	1080 × 1350	4:5
	Story / Reel	1080 × 1920	9:16
Facebook	Post (Ngang)	1200 × 630	1.91:1
	Post (Vuông)	1080 × 1080	1:1
	Story / Reel	1080 × 1920	9:16
TikTok	Video	1080 × 1920	9:16
YouTube	Thumbnail	1280 × 720	16:9
YouTube	Video (HD)	1920 × 1080	16:9

8.2. Vùng an toàn (Safe Area)

Đối với Story/Reel (9:16 — 1080×1920px): Để trống 250px từ cạnh trên và 350px từ cạnh dưới. Đặt logo, văn bản, và các yếu tố quan trọng vào vùng trung tâm.

9. Video & Motion

9.1. Tỷ lệ khung hình

16:9
YouTube, website

9:16
Reels, Stories, TikTok

1:1
Feed posts

9.2. Intro & Outro

Intro (2-3s): Hoạt ảnh đơn giản — đường nét từ biểu tượng hội tụ thành logo Vaga trên nền Beige hoặc Green.
Outro (3-5s): Logo Vaga + thông tin CTA (website, mạng xã hội).

9.3. Lower-Thirds & Captions

Lower-Third (Bảng tên)

Nguyễn Văn A

Giám đốc Công nghệ

Nền Green 80-90% opacity · Tên: Semibold · Chức danh: Regular

Phụ đề (Subtitles)

Đây là phụ đề mẫu — Work Sans Medium

Cỡ chữ: 5-7% chiều cao khung hình · Nền đen 30-50%

9.4. Color Grading & Âm thanh

Chỉnh màu: Tăng nhẹ độ bão hòa xanh lá. Làm ấm vùng sáng theo tông beige. Giữ màu da tự nhiên.
Âm thanh: Nhạc nền hiện đại, truyền cảm hứng. Âm lượng: -18dB đến -24dB.

10. Hệ thống kiểm thử (QA)

10.1. Checklist trước khi duyệt

Sử dụng checklist này để đảm bảo mọi sản phẩm thiết kế đều tuân thủ các tiêu chuẩn thương hiệu trước khi xuất bản.

🏷️ Logo

☐ Sử dụng đúng biến thể (dọc/ngang/mark)?
☐ Đặt ở vị trí cho phép?
☐ Lớn hơn hoặc bằng kích thước tối thiểu?
☐ Khu vực an toàn không bị xâm phạm?
☐ Độ tương phản với nền đủ cao?

🎨 Màu sắc

☐ Sử dụng đúng mã màu HEX/RGB/CMYK?
☐ Tỷ lệ phân bổ màu tuân thủ 60-30-10?

🔤 Kiểu chữ

☐ Đúng font family, weight, và size?
☐ Quy tắc typesetting (căn lề, chiều cao dòng)?

🔷 Pattern

☐ Sử dụng đúng cấu trúc và màu sắc?
☐ KHÔNG sử dụng tràn lề (full-bleed)?

♿ Khả năng tiếp cận

☐ Tương phản văn bản/nền đạt WCAG AA?
☐ Cỡ chữ nội dung tối thiểu 16px cho web?

📝 Tên & Tài sản

☐ Sử dụng "Vaga" (không "VAGA Group")?
☐ Đúng kích thước và định dạng cho kênh?
☐ Vùng an toàn cho Story/Reel được tôn trọng?

11. Phụ lục kỹ thuật

11.1. Bảng mã màu Vaga

Tên màu	HEX	RGB	CMYK
Vaga Green	#006949	0, 105, 73	90, 34, 81, 26
Vaga Beige	#F8F2E9	248, 242, 233	2, 3, 7, 0
Vaga Orange	#F26121	242, 97, 33	0, 76, 99, 0
Vaga Light Green	#BDD630	189, 214, 48	31, 0, 100, 0

11.2. Bảng thông số Logo

Thông số	Giá trị
Khu vực an toàn	≥0.5× chiều rộng biểu tượng
Kích thước tối thiểu (Logo Dọc)	20mm / 100px
Kích thước tối thiểu (Logo Ngang)	15mm / 75px
Kích thước tối thiểu (Biểu tượng)	15mm / 75px

11.3. Bảng hệ thống khoảng cách (Web)

Token	Giá trị
space-1	4px
space-2	8px
space-3	16px
space-4	24px
space-5	32px
space-6	48px
space-7	64px

11.4. Nguồn tài nguyên

Font Work Sans: fonts.google.com/specimen/Work+Sans ↗
Logo SVG: Pattern/Logo/ (logo_mark.svg, logo_vertical.svg, logo_horizontal.svg × 6 variants)
Pattern Bands: Pattern/phat_trien/, ket_noi/, tam_nhin/, tuong_lai/
Shape Catalog: Pattern/shape_catalog.json

⚡ Checklist nhanh (Phiên bản rút gọn cho đội thi công)

🟩 Green #006949

🟫 Beige #F8F2E9

🟧 Orange #F26121

🟨 Light Green #BDD630

🔤 Work Sans 400/500/600

📐 Clear Space ≥ ½ mark width

🚫 Pattern KHÔNG full-bleed

📝 Tên: "Vaga" (không "VAGA Group")

12. Ứng dụng thực tế

12.1. Danh thiếp (Name Card)

Danh thiếp Vaga được thiết kế với bố cục tối giản, sử dụng bảng màu thương hiệu và pattern đặc trưng. Logo được đặt ở vị trí nổi bật, đảm bảo khu vực an toàn.

Mặt trước

Logo + Thông tin liên hệ

Mặt sau

Pattern trang trí

Mockup danh thiếp

12.2. Phiếu quà tặng (Voucher)

Voucher sử dụng pattern kết hợp với hình ảnh sản phẩm, thể hiện sự chuyên nghiệp và nhất quán với hệ thống nhận diện.

Mặt trước

Thông tin ưu đãi + Logo

Mặt sau

Điều khoản + Pattern

Mockup voucher

12.3. Thiệp mời (Invitation)

Thiệp mời sự kiện Vaga kết hợp giữa sự sang trọng và nhận diện thương hiệu, sử dụng màu Vaga Green làm chủ đạo cùng pattern tinh tế.

Thiết kế thiệp mời

Bố cục + Nội dung mẫu

Mockup trên điện thoại

Phiên bản kỹ thuật số

12.4. Bao bì sản phẩm (Packaging)

Bao bì sản phẩm Vaga phải tuân thủ nghiêm ngặt hệ thống nhận diện — logo đúng kích thước tối thiểu, bảng màu chính, và pattern không tràn lề.

Mockup bao bì hộp sản phẩm

Pattern + Logo + Bảng màu thương hiệu

12.5. Billboard Quảng Cáo

Billboard Quảng Cáo sử dụng pattern, có thể kết hợp với hình ảnh thật với nội dung trực quan về sản phẩm hoặc trong quy trình sản xuất,... đồng thời sử dụng đúng tỷ lệ màu nhận diện thương hiệu.

📐 Quy tắc Billboard

• Logo đạt kích thước tối thiểu
• Khu vực an toàn được tôn trọng
• Tỷ lệ màu 60-30-10 được áp dụng
• Pattern kết hợp hình ảnh thực tế
• Nội dung trực quan về sản phẩm