AI Enterprise Education

Bản sắc thương hiệu

Một hệ thống sẵn sàng triển khai về cách AIEE trông, nói và xuất hiện trên sản phẩm, marketing, mạng xã hội, in ấn và đối tác—ưu tiên nền trắng, lấy giáo dục làm trung tâm, đáng tin cậy như doanh nghiệp.

Tài liệu này dành cho nhà thiết kế, marketing, nhà giáo dục và nhà cung cấp. Nối quy tắc thương hiệu với sản phẩm thực (token, bố cục, component) để đồng nhất từ Figma đến production.

Ví dụ mạng xã hội bên dưới là bố cục minh họa độ phân giải cao cho thấy logo, màu và chữ đã duyệt trong các mẫu hồ sơ phổ biến—không phải ảnh chụp sản phẩm bên thứ ba và không ngụ ý xác nhận.

  • Khóa logo, vùng an toàn và kích thước tối thiểu
  • Token màu, typography và kỳ vọng về accessibility
  • Giọng điệu và tone trong bối cảnh giáo dục doanh nghiệp
  • Hướng dẫn nhiếp ảnh & hình ảnh (chủ thể, ánh sáng, bố cục)
  • Vùng an toàn mạng xã hội với tham chiếu trực quan theo nền tảng
  • Mẫu UI web, khung dây, kiến trúc, văn phòng phẩm và in ấn

Giao diện UI chỉ minh họa; bản giao cuối phải khớp quy cách tài sản mới nhất và chính sách thương hiệu của từng nền tảng.

Tinh thần thương hiệu

AIEE chính xác, điềm tĩnh và ưu tiên giáo dục: nhiều khoảng trắng, chữ rõ và giao diện nhẹ nhàng thay vì ồn ào.

Nền mặc định trắng hoặc gần trắng; màu nhấn dùng tiết kiệm cho hành động và điểm nhấn. Cân bằng giữa sự tin cậy doanh nghiệp và phong cách tối giản Gen Z—lưới gọn, viền mỏng, tránh nhiễu thị giác.

Trong truyền thông bên ngoài, ưu tiên kết quả cho người học và tổ chức—rõ ràng hơn khẩu hiệu, bằng chứng hơn slogan, và ngôn ngữ hòa nhập tôn trọng lớp học và nơi làm việc trên toàn cầu.

Giọng điệu & tone

Viết cho chuyên gia bận rộn và người học tò mò: câu ngắn, động từ cụ thể và bước tiếp theo rõ ràng. Ưu tiên chủ động; tránh biệt ngữ trừ khi định nghĩa một lần.

Độ tin cậy doanh nghiệp đến từ chi tiết—nêu kỹ năng, nhóm và kết quả đo lường được. Gần Gen Z nghĩa là ngôn ngữ đơn giản, hài hước tôn trọng khi phù hợp, không hạ thấp người đọc.

Mỗi bề mặt nên có một lời kêu gọi hành động chính; thông báo lỗi và hệ thống giữ bình tĩnh, không đổ lỗi, hướng tới giải pháp.

Nhiếp ảnh & hình ảnh

Thể hiện bối cảnh học thật: lớp học đa dạng, nhóm hybrid và thực hành tay, ánh sáng rõ và độ sâu trường nông khi phù hợp. Tránh kho ảnh sáo (nụ cười quá hoàn hảo, bảng trắng giả).

Màu grading trung tính để xanh và trắng của UI chính xác; không nhuộm ảnh theo màu nhấn trừ khi art-direct chiến dịch.

Khi đặt logo lên ảnh, dùng panel trắng/trung tính hoặc gradient nhẹ để giữ tương phản.

Màu sắc & typography

Bảng màu đối ngoại chỉ gồm**hai token**: nền trắng xám (`--brand-bg`) và màu chữ xanh đen (`--brand-text`). Không thêm màu nhấn khác cho brochure, slide hay marketing trừ khi có chiến dịch riêng được phê duyệt.

Giữ stack sans-serif như trang marketing; tiêu đề dạng câu hoặc title case cho hiện đại, thân thiện.

Phông chữ trên sản phẩm

Văn bản mặc định và UI dùng biến CSS --font-sans-stack: Helvetica Neue, Helvetica, Arial, rồi `ui-sans-serif` và `system-ui`. Đây là trải nghiệm đọc trên trang marketing và phần lớn ứng dụng.

File wordmark AIEE tải xuống dùng Arial Bold trong SVG/PNG để khớp với kết xuất hệ thống và thanh điều hướng.

Một số tiêu đề dashboard và công cụ dùng Kanit (Google Fonts), áp qua lớp Tailwind `font-kanit` trên các component cụ thể.

Công thức toán trong bài kiểm tra và nội dung học dùng font riêng của KaTeX.

Tham chiếu trong mã (globals.css)

--font-sans-stack: "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;

Inter cho file thiết kế (tải tùy chọn)

Sản phẩm không nhúng Inter cho body; stack ở trên là chuẩn. Cho Figma, slide hoặc PDF cần một font cài đặt được và gần giống, có thể dùng Inter (SIL Open Font License)—tùy chọn, không thay thế stack thật trong tài liệu kỹ thuật.

Inter (biến thể, Latin)

Tùy chọn cho mockup và bản tĩnh; dùng cùng `--brand-bg` và `--brand-text`. Không cùng file với văn bản production.

Helvetica Neue là phông thương mại: cần giấy phép desktop phù hợp từ nhà cung cấp nếu dùng cho in ấn hoặc Office.

Chủ đề màu doanh nghiệp

Chỉ dùng `--brand-bg` (nền) và `--brand-text` (toàn bộ chữ và tiêu đề—xanh navy/gần đen). Không dùng accent “trời xanh” riêng cho biểu đồ hay điểm nhấn trong tài liệu đối ngoại.

--brand-bg

Nền ứng dụng và marketing dài (trắng xám).

--brand-text

Nội dung chính và tiêu đề.

Mã nguồn có thể còn biến khác cho giao diện; với brochure, slide và tờ rơi hãy bám **`--brand-bg`** và **`--brand-text`**. Chủ đề có thể ghi đè hex—sau khi đổi hãy kiểm tra tương phản (WCAG).

Xem trước (bảng màu thương hiệu)

Khung dây trang (vỏ marketing)

Hầu hết trang công khai theo nhịp dọc: thanh điều hướng → hero → phần hỗ trợ → chân trang wordmark. Màn nhỏ một cột; từ `lg` mở lưới.

+--------------------------------------------------+
| [ Nav | AIEE | Menu ................... Auth ]   |
+--------------------------------------------------+
|  Hero: headline + subcopy + primary CTA          |
+--------------------------------------------------+
|  Section cards / feature grid                    |
+--------------------------------------------------+
|  Social proof, FAQ, or resources (optional)      |
+--------------------------------------------------+
|  Footer: sitemap columns + large AIEE wordmark   |
+--------------------------------------------------+

Khung ASCII — thứ tự khối, không phải bản pixel.

Kiến trúc hệ thống (cấp cao)

Sản phẩm trực tiếp là ứng dụng Next.js với khu vực đăng nhập cho giáo viên, học sinh và quản trị. Route marketing dùng cùng ngôn ngữ thiết kế nhưng không tải dữ liệu xác thực.

Luồng yêu cầu

Client (trình duyệt)

Trang React/Next.js, component client cho UI tương tác, Clerk quản trạng thái đăng nhập.

Edge & API

Route handler dưới `/api/*` cho bài kiểm tra, cài đặt, tải lên, thanh toán và webhook.

Dữ liệu & dịch vụ

MongoDB cho dữ liệu ứng dụng; lưu trữ tệp; API nhà cung cấp AI cho tính năng tạo nội dung.

Văn phòng phẩm & ứng dụng

Văn phòng phẩm doanh nghiệp

  • Tiêu đề thư: nền trắng, wordmark AIEE góc trên trái, khối liên hệ dưới trái, lề rộng
  • Danh thiếp: mặt trước wordmark + tên/chức; mặt sau có thể QR tới website
  • Phong bì: địa chỉ gửi lại căn lưới lề; đen đặc hoặc nhấn màu chính tiết chế
  • Sổ ghi chú / khối giấy ghi: gáy trên hoặc dán gáy trên; bìa chỉ wordmark, hoặc mark nhỏ ở đầu trang—không màu lạ
  • Nhãn & niêm phong: nhãn địa chỉ gửi lại hoặc niêm tròn nhỏ—đen hoặc màu chính trên nền trắng; kiểm tra độ bám trên giấy phong bì

Bản xem trước in minh họa—không đúng tỷ lệ; gửi nhà in PDF/X có bleed và giá trị Pantone hoặc CMYK đã duyệt.

Tiêu đề thư

A4 hoặc US Letter; ký hiệu và wordmark góc trên trái, lề rộng, khối liên hệ góc dưới trái.

AIEE

Danh thiếp

Thường ~85×55 mm; mặt trước mark + tên/chức; mặt sau có thể QR tới website.

AIEE

Phong bì

Địa chỉ gửi lại căn lưới lề; căn mark theo vùng tem hoặc nắp theo khuôn phong bì.

AIEE

Tối giản Gen Z (nền trắng)

  • Thiệp cảm ơn/ghi chú: nhiều khoảng trắng, chỉ một đường kẻ mảnh hoặc logo nhỏ
  • Sticker & decal laptop: một hoặc hai màu trên nền trắng hoặc trong suốt
  • Slide & tờ một trang: nền trắng, một điểm nhấn, chữ lớn, gạch đầu dòng ít

Thiệp cảm ơn / ghi chú

Tối đa khoảng trắng; một đường kẻ mảnh hoặc logo góc nhỏ—không chữ dày.

AIEE

Sticker & decal

Một hoặc hai màu; decal trắng hoặc trong suốt cho laptop.

AIEE

Slide / một trang

Slide 16:9 hoặc tờ một trang in: nền trắng, một điểm nhấn, tiêu đề lớn, ít gạch đầu dòng.

Sự kiện, nhân viên & đồ đeo

  • Dây đeo thẻ: dệt hoặc in chuyển nhiệt đen/trung tính; kẹp vào túi thẻ trong; giữ mark AIEE dễ đọc—tránh chen logo nhà tài trợ không liên quan
  • Thẻ nhân viên / khách (CR80 ngang): ảnh, tên, vai trò, QR tùy chọn; wordmark trên thanh đầu trang đặc (mark trắng trên nền tối hoặc ngược lại)
  • Thẻ sự kiện (dọc): tên lớn, vai trò nhỏ; đặt mark ở vùng an toàn trên/dưới, tránh lỗ kẹp
  • Cuộn dây thẻ co rút: tùy chọn; vỏ một màu, dập chìm hoặc in một màu—không gradient cầu vồng
  • Bìa kẹp tài liệu A4: giấy dày; bìa wordmark + tiêu đề gáy; túi trong cho tờ một trang, SOW hoặc hợp đồng

Dây đeo & túi thẻ

Dây + kẹp + thẻ chèn dọc: thứ bậc mark và tên rõ ở khoảng cách cánh tay; dây dùng màu trung tính thương hiệu trừ khi nghệ thuật sự kiện quy định khác.

AIEE

Thẻ nhân viên / khách

CR80 ngang: dải đầu cho thương hiệu; ảnh và chữ căn lưới đơn giản; QR chỉ khi chính sách bảo mật yêu cầu.

AIEE

Bìa kẹp tài liệu

Bìa tạo ấn tượng đầu; gáy đọc được trên kệ; túi trong giữ tài liệu phẳng—xuất PDF in kèm đường cắt từ nhà in.

AIEE

Định dạng mạng xã hội

Ưu tiên wordmark hoặc logo đã duyệt trên nền trắng hoặc trung tính sáng cho ảnh đại diện. Giữ nội dung quan trọng trong vùng an toàn—UI nền tảng che mép và góc.

Biểu trưng nền tảng chính thức bên dưới để nhận diện (thương hiệu thuộc chủ sở hữu tương ứng).

  • Instagram
  • Facebook
  • LinkedIn
  • X (Twitter)
  • TikTok
  • YouTube
Nền tảngKích thước thường dùngGhi chú
Instagram
Ảnh đại diện 320×320; bảng tin 1080×1350 dọc; Stories/Reels 1080×1920Dành ~250px dưới và ~150px trên cho UI; tránh chữ quá nhỏ trong Stories.
Facebook
Ảnh đại diện 170×170; ảnh bìa 820×312; ảnh chia sẻ 1200×630Vùng an toàn ảnh bìa tập trung giữa; trên mobile tránh logo góc dưới phải.
LinkedIn
Ảnh đại diện 400×400; ảnh bìa 1584×396; preview liên kết 1200×627Tông chuyên nghiệp; ảnh bìa wordmark + tagline ngắn.
X (Twitter)
Ảnh đại diện 400×400; banner 1500×500; thẻ 1200×628Người xem chế độ tối: kiểm tra tương phản với nền xám.
TikTok
Ảnh đại diện 200×200; video 1080×1920Giả định vùng tiêu đề dưới dọc; tránh chữ quan trọng trong 20% dưới.
YouTube
Ảnh đại diện 800×800; banner kênh 2560×1440 (vùng an toàn 1546×423 desktop)Nhiều kiểu cắt thiết bị—giữ logo và chữ trong template an toàn.

Ví dụ bố cục kiểu thật

Mỗi thẻ ghép bảng thông số với bố cục thực tế: avatar, ảnh bìa và dòng tiêu đề đọc cùng nhau. Xuất tài sản từ mẫu chính team duy trì trong công cụ thiết kế—kích thước trong bảng là giá trị thông dụng tại thời điểm xuất bản.

Bố cục minh họa lấy cảm hứng từ UI mạng xã hội phổ biến. Thương hiệu thuộc chủ sở hữu; mockup AIEE chỉ phục vụ hướng dẫn thương hiệu.

Instagram

Hồ sơ, lưới và video dọc

Avatar rõ ở 320×320; ô lưới không nên có chữ nhỏ. Với Stories/Reels, coi ~250px dưới và ~150px trên là dành cho UI—đặt tiêu đề và sticker phía trên.

AIEE

@aienterpriseeducation

128·12k

Facebook

Ảnh bìa trang và avatar chồng

Ảnh bìa 820×312 thường bị cắt trên mobile; căn giữa thông điệp và logo. Avatar tròn 170×170 chồng lên ảnh bìa—thiết kế cả hai trong một canvas để chuyển tiếp có chủ đích.

AI Enterprise Education

AI Enterprise Education

12k · 2 · ···

LinkedIn

Banner chuyên nghiệp và khối tiêu đề

Banner 1584×396: giữ wordmark và tagline trong vùng an toàn giữa. Avatar 400×400 tối giản (mark trên trắng), để ảnh bìa kể chuyện cho nhà tuyển dụng và đối tác.

1584×396

AI Enterprise Education

X (Twitter)

UI tối và header tương phản cao

Header 1500×500: tránh chữ xám giữa trên nền than; kiểm tra chế độ tối. Avatar 400×400 trên timeline tối dùng logo nền trắng để viền sắc.

1500×500

AI Enterprise Education

@aienterpriseedu

TikTok

Dọc toàn màn hình (9:16)

Giả định một phần năm dưới cho phụ đề, chia sẻ và chrome hồ sơ; tránh mặt, logo và chữ quan trọng trong dải đó; card kết thúc có thể có wordmark AIEE trên nền trắng.

+

@aienterpriseeducation

YouTube

Banner kênh và kệ video

Banner 2560×1440 với vùng an toàn desktop 1546×423—đặt logo và giá trị rồi kiểm tra cắt TV và tablet. Avatar 800×800 cạnh tiêu đề video; giữ đậm và tối giản.

AIEE

AI Enterprise Education

@AIEnterpriseEducation · 4.2k

Nút website & UI kỹ thuật số

Hành động chính dùng nút đổ màu chính; phụ dùng viền hoặc nút ghost. Liên kết màu chữ, gạch chân khi hover nếu phù hợp.

  • Mục tiêu chạm trên di động ≥ 44px chiều cao cho CTA chính.
  • Khi có thể, một nút chính mỗi màn hình để giảm ma sát quyết định.
  • Favicon và biểu tượng ứng dụng dùng biểu tượng rút gọn trên nền trắng hoặc trong suốt.

In ấn, brochure & khổ lớn

Brochure, tờ rơi, poster và đồ họa gian hàng nên cùng tinh thần với sản phẩm số: nhiều khoảng trắng, wordmark AIEE, màu theo token, và thường chỉ một lời kêu gọi hành động rõ ràng mỗi ấn phẩm.

Brochure, tờ rơi & ấn phẩm quảng bá

Brochure & sách nhỏ — Gấp đôi, gấp ba hoặc đóng gáy: dẫn bằng tiêu đề hướng kết quả, dùng chữ đã duyệt, đặt wordmark AIEE ở bìa hoặc trang trong; tránh lấp đầy đồ họa không liên quan.

Tờ rơi & tờ gấp — Một mặt hoặc rack card cho sự kiện và campus: một thông điệp chính, gạch đầu dòng dễ quét, có thể QR tới landing; pháp lý dài để phụ lục nếu cần.

Poster & banner cuốn — Đọc được từ xa: tiêu đề lớn hoặc wordmark, ít chữ nhỏ, ảnh theo phần nhiếp ảnh của hướng dẫn này.

Trang một & tờ bán hàng — Để lại cho đối tác hoặc học khu: nền trắng hoặc gần trắng, sơ đồ sản phẩm hoặc số liệu nổi bật, nhịp dọc giống wireframe marketing (hero → bằng chứng → CTA).

Sticker, tent card & quà — Wordmark một màu trên trắng hoặc màu trung tính đã duyệt; kiểm tra đọc được ở khoảng cánh tay trước khi in.

File, màu & gia công

Giao nhà in PDF/X (hoặc file gốc với font/outline đúng), bleed 3 mm cho tràn viền, giữ chữ trong vùng an toàn theo template.

Cung cấp CMYK hoặc Pantone từ màu đã duyệt; in thử trên giấy tráng và không tráng.

Logo và ảnh 300 dpi đúng kích thước in thường; in format lớn có thể thấp hơn—xác nhận với xưởng.

Khổ lớn phông nền và tường booth: kéo nền có bleed, kiểm tra khoảng nhìn để chữ sắc, căn nội dung chính vào vùng an toàn trên file die-cut.