Brand Guideline · 1.0

Executive Warm
Hệ thống nhận diện John Academy

Nền đen ấm sang trọng · cam John là năng lượng · Gold là đẳng cấp. Một hệ thống — không phải sở thích — để mọi ấn phẩm nhất quán và dùng được thật.

Cam #F27421 Gold #D4AF37 Nền #0A0A0B Font Inter
01 — Nguyên tắc thẩm mỹ

Executive Warm

Ấm, sâu, đáng tin. Khác chất "dev-tool sắc lạnh" của Agent Boss (thương hiệu con) — John Academy lấy con người và sự nghiêm cẩn làm trung tâm.

Cam là năng lượng

Cam #F27421 chỉ dùng cho CTA, từ khóa nhấn, icon-check, số liệu. Không làm nền lớn, không làm chữ thân bài.

Gold là đẳng cấp premium

Gold #D4AF37 chỉ cho tuyến cao cấp: Mentor, Coaching 1-1, chứng nhận, huy hiệu danh dự. ≤3% diện tích — lạm dụng là mất giá.

Con người là trái tim

Luôn có chỗ cho ảnh người thật (John/CEO, áo trắng nền tối). Không thay bằng minh hoạ AI vô hồn.

Nền đen ấm, không xanh

Nền #0A0A0B ấm nhẹ, viền mảnh + quầng sáng cam thay khung nặng. Không navy xanh, không đen lạnh tuyệt đối.

02 — Bảng màu (token 3 lớp)

Cam John Orange

Anchor 600 = #F27421 trích thẳng từ logo. 9 sắc độ nội suy quanh cùng họ.

Ink — đen/nâu ấm

Thay vai "navy" của Agent Boss. Anchor 600 = #403D3B (màu suit trong logo).

Gold — tuyến cao cấp premium

Chỉ dùng cho sản phẩm/chứng nhận cao cấp. Highlight 300 = #EED78C khớp ánh kim logo gold.

02b — Kiểm chứng tương phản (WCAG 2.2)

Số thật, không cảm tính

Mọi cặp màu chữ-trên-nền tính bằng công thức W3C. Màu trượt → thay bằng shade đậm hơn cùng họ.

03 — Typography

Inter · Headline 3 tầng

Display / Hero800 · 40–58px · -0.02em
Section H2700 · 32px
Card title H3600 · 22px
Body Large — đoạn văn chính, mô tả phụ.400 · 16px · 1.6
LABEL / BUTTON600 · 13px
Eyebrow overline700 · 12px · UPPERCASE
Ví dụ headline 3 tầng
BẢN ĐỒ QUẢN TRỊ ĐÚNG
DÀNH CHO CEO

Từ khóa nhấn màu cam · main claim trắng · mô tả phụ xám.

04 — Nút bấm

Trạng thái & tuyến Gold

Nút cam chữ LUÔN đen (trắng/cam = 2.88:1 FAIL). Nút Gold chỉ cho CTA cao cấp.

Di chuột / bấm để xem hover & pressed thật.

05 — Linh kiện

Card · Badge · Alert

Card thường

surface-2 · viền mảnh · radius 12.

Card premium gold

viền gold + glow nhẹ. Chỉ tuyến cao cấp.

Huy hiệu

Thường Trung tính Nổi bật Danh dự
✓ Thành công

Kèm icon, không chỉ dựa màu.

✗ Lỗi

Icon + text, WCAG 1.4.1.

⚠ Cảnh báo

Cam, KHÔNG dùng amber/vàng (nhầm gold).

06 — Họa tiết nhận diện (Motif)

4 họa tiết · trích từ ảnh brand thật

Là hơi thở của nền tối, không phải nhân vật chính. 1 ấn phẩm chọn 1–2 motif — không chồng cả 4. Luôn nằm sau nội dung, cam mờ.

Đường đồng mức

Như bản đồ — gợi "lộ trình quản trị". Motif nền mặc định. rgba(242,116,33,.08)

Vệt sáng tốc độ

Gradient cam→trong suốt, dẫn mắt về CTA/nhân vật. Gợi tăng tốc.

Chevron tiến >>>

Nhịp điệu hướng tới. Dùng làm bullet, divider, mũi tên "tiến bước".

Quầng sáng + bokeh

Chiều sâu sau nhân vật/CTA. ≤4 chấm, cực tiết chế.

Bản Gold premium: giữ nguyên hình dạng, đổi màu cam → gold. Trên nền đọc bài dài: chỉ dùng đường đồng mức rất mờ, bỏ vệt sáng.

07 — Logo

3 biến thể · dùng đúng nền

color

Color — nền sáng / trung tính.

white

White — nền tối / ảnh.

gold

Gold — ấn phẩm premium.

Dùng ẢNH logo thật, không tự vẽ lại chữ "JOHN" hay hình người mặc suit. Vùng an toàn ≥ chiều cao chữ "O". Nền tối → white/gold, nền sáng → color.

08 — Brand Test

3 câu · sai 1 = làm lại

1
Ấm & sang, không lạnh?

Nền đen-nâu ấm, cam tiết chế, gold đúng chỗ. Không navy xanh, không đen lạnh, không loè loẹt.

2
Có con người không?

Có chỗ cho ảnh/hình người thật (John/CEO). John Academy bán bởi con người, không phải minh hoạ vô hồn.

3
CEO non-tech đọc hiểu ngay?

35–55 tuổi nhìn 3 giây hiểu thông điệp, thấy đáng tin, không rối.