AI Enterprise Education
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.
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.
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.
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.
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.
Dấu chính là wordmark AIEE (đậm, giãn chữ chặt). Khi cấu hình logo trang trong admin, có thể hiển thị cạnh hoặc thay thế trong chrome sản phẩm—không trộn nhiều bộ nhận diện xung đột trong một khối.
Mẫu
Không được
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.
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;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ỉ 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-bgNền ứng dụng và marketing dài (trắng xám).
--brand-textNộ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)
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.
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 doanh nghiệp
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.
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.
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ì.
Tối giản Gen Z (nền trắng)
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.
Sticker & decal
Một hoặc hai màu; decal trắng hoặc trong suốt cho laptop.
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 & 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.
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.
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.
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.
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 & 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.
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.
Bố cục khởi đầu dùng wordmark AIEE, nền gần trắng và chữ tối—thống nhất với --brand-bg và --brand-text. Thay nội dung giữ chỗ bằng chiến dịch thật; mỗi ấn phẩm một thông điệp chính. Tải SVG và chỉnh trong Illustrator, Figma hoặc Affinity.
Poster sự kiện & campus — Kích thước thường A2, A1 hoặc tương đương: tiêu đề, dòng phụ ngắn, wordmark, QR tùy chọn tới landing. Dùng bleed 3 mm khi nền tràn.
Banner cuốn (pull-up) — Khổ cao hẹp (~850×2000 mm): logo, tiêu đề, một dòng chứng minh, thanh CTA đáy; in thử ở khoảng nhìn 3–5 m.
Poster sự kiện (tỷ lệ A2)
Khớp file SVG tải về: wordmark, vùng tiêu đề, gạch đầu dòng, vùng QR—giao PDF/X có bleed cho xưởng in.
Banner cuốn
Khổ dọc hẹp: thương hiệu, tiêu đề, thanh CTA tối; vùng an toàn phụ thuộc chân đế—xác nhận với nhà cung cấp.
Dưới đây là poster, tờ rơi và ấn phẩm kiểu gian hàng thật mà team đã dùng. Chúng minh họa giọng điệu, mật độ bố cục và phong cách ảnh—dùng cùng mẫu phía trên khi brief nhà in.





















Đị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).
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.
@aienterpriseeducation
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.
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.
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