NGUỒN SỰ THẬT THIẾT KẾ · CHỐT 2026-07-09

Agent Boss

Design System 2.0 — hướng Precision.

Đây là sách mẫu tham chiếu cho mọi ấn phẩm gắn nhãn Agent Boss — token màu/chữ/spacing, đặc tả component, quy tắc cứng và hướng dẫn dùng cho AI. Mọi khuôn mới BẮT BUỘC đối chiếu trang này trước khi giao.

Navy + Boss Orange Inter Line · Node · Flow · Layer WCAG kiểm chứng thủ công

Precision aesthetic

Nguyên tắc thẩm mỹ

Hướng đã chốt: A — Precision — tối giản dev-tool sắc lạnh kiểu Linear/Vercel. 6 nguyên tắc dưới đây áp dụng cho MỌI ấn phẩm.

Navy phẳng, sâu

Nền luôn 1 trong 4 mốc navy tối (900→600) — không gradient trang trí, chỉ ambient glow rất mờ phía sau diagram.

Viền mảnh thay khung nặng

rgba(255,255,255,.08) 1px là công cụ phân vùng chính — không border dày, không nền tương phản mạnh để chia khối.

Bóng cực ít, phẳng

Dark mode gần như không shadow (border + tint nền thay elevation). Reading mode mới dùng shadow thật, rất nhẹ.

Khoảng trắng rộng, chữ sắc

Line-height chặt ở heading (1.05–1.3), rộng ở body (1.5–1.6). Section cách nhau tối thiểu 48–96px.

Cam cực tiết chế

Tín hiệu, không phải màu nền — chỉ ở CTA, node active, từ khóa Tầng-1, badge. KHÔNG BAO GIỜ làm nền lớn hay chữ thân dài.

Công cụ kỹ thuật, không quảng cáo

Số liệu tabular-nums. Icon line 1.5px, không 3D, không icon AI sáo rỗng (não bộ, robot).

Token 3 lớp — màu gốc

Màu sắc

9 shade mỗi họ màu. Anchor GỐC: Navy 800 #0B1A2B, Cam 600 #FF6A1A.

Navy — 9 shade

100

#DBE3EB

200

#B6C6D8

300

#7C9DC0

400

#3F71A6

500

#234C79

600

#16294A

700

#0F1F38

800

#0B1A2B

900

#050D16

Boss Orange — 9 shade

100

#FFEBE0

200

#FFD7C2

300

#FFBD99

400

#FF9C66

500

#FF7A2A

600

#FF6A1A

700

#E55D17

800

#CC5014

900

#9A3412

Xám trung tính — 9 shade

100

#F3F4F6

200

#E5E7EB

300

#D1D5DB

400

#9CA3AF

500

#6B7280

600

#4B5563

700

#374151

800

#1F2937

900

#111827

⚠️ Cam trên nền sáng — RULE CỨNG (WCAG 2.2, tính tay)

Cặp màu	Ratio	Kết luận
Cam #FF6A1A trên trắng #FFFFFF	2.81:1	FAIL — không dùng làm text/nút chính
Cam #FF6A1A trên kem #FAF6EE	~2.71:1	FAIL
Cam đậm #9A3412 trên kem #FAF6EE	6.86:1	AA body, gần AAA
Cam đậm #9A3412 trên trắng #FFFFFF	7.30:1	AAA
Cam #E55D17 (700) trên kem — chỉ icon/border/focus	3.34:1	Đạt ngưỡng UI-component (≥3:1), chưa đủ cho text
Navy #050D16 (900) chữ trên nền cam #FF6A1A (nút CTA)	6.99:1	AAA — cách chuẩn đang dùng

Quy tắc: nút CTA nền cam → chữ LUÔN navy-900 #050D16, KHÔNG BAO GIỜ trắng. Chữ/link cam trên nền sáng → LUÔN orange-900 #9A3412, KHÔNG BAO GIỜ orange-600.

Semantic — 2 chế độ (preview)

Dark mode (mặc định)

bg navy-900 · surface navy-800 · text #FFF · accent orange-600 (5.75:1 AA)

Reading mode (bài học dài)

bg kem #FAF6EE · surface #FFF · text navy-900 (18.44:1) · accent orange-900 (6.86:1 AA+)

Semantic-alert (dùng cả 2 mode)

Vai trò	Dark mode	Reading mode
Success	#34D399 (10.22:1)	#047857 (5.15:1)
Error	#F87171 (7.10:1)	#B91C1C (6.07:1)
Info	Dùng chữ mặc định + icon "ℹ" — KHÔNG thêm hue mới (WCAG 1.4.1)
Warning	KHÔNG dùng amber — dùng orange-700 (dark) / orange-900 (reading) làm text, kèm icon "⚠"

Type scale · Inter

Chữ nghĩa

Font Inter — 500/600/700 cho UI, 400 cho body. Precision ưu tiên heading gọn hơn Material Display gốc.

Aa Display/Hero

clamp(40,5.5vw,56) · 700 · lh 1.05

Aa H1

clamp(28,3.6vw,40) · 700 · lh 1.15

Aa H2/Section

32 · 600 · lh 1.2

Aa H3/Card

22 · 600 · lh 1.3

Aa Title/UI

16 · 500 · lh 1.4

Aa Body Large

16 · 400 · lh 1.6

Aa Body

14 · 400 · lh 1.55

Aa Label

13 · 500 · ls .01em

Aa Caption

12 · 400 · ls .02em

Aa Eyebrow

12 · 600 · ls .12em UPPER

Headline 3 tầng (bắt buộc cho hero/banner)

Tầng 1 — số/từ khóa chính

Tầng 2 — Main claim, weight 700, màu chữ chính

Tầng 3 — mô tả phụ, Body Large, weight 400, màu chữ phụ, max-width 46ch, margin-top 20px.

4/8 grid

Spacing · Radius · Shadow

Spacing scale

xs — 4px — icon-to-label

sm — 8px — component padding

md — 12px — gap trung

lg — 16px — padding mặc định

xl — 24px — cách section con

2xl — 32px — section lớn

3xl — 48px — page section

4xl — 64px — hero spacing

5xl — 96px — landing rất dài

Radius

4px

radius-xs · badge/chip

6px

radius-btn · nút

8px

radius-card · card/input

12px

radius-lg · modal

●

radius-full · avatar

Shadow — dark mode gần như KHÔNG dùng shadow

shadow-sm (nút, dropdown nhỏ)

shadow-md (tooltip, popover)

elevate-1 (+4% overlay)

Reading mode (nền kem/trắng — shadow thật, rất nhẹ)

shadow-sm

shadow-md

shadow-lg

3 cỡ · 4 trạng thái

Trạng thái nút

3 cỡ (Primary, trạng thái default)

Primary — 4 trạng thái

Default

Hover

Pressed

Disabled

Secondary (outline) — 4 trạng thái

Default

Hover

Pressed

Disabled

Ghost (text-only) — 4 trạng thái

Default

Hover

Pressed

Disabled

Focus ring

10 thành phần chuẩn

Đặc tả component

6.1 Card

surface-2 · border 1px · radius 8 · padding 24

Card dark mode

bg surface-2, border 1px, radius 8px, padding 24px.

Card reading mode

bg trắng + shadow-sm nhẹ, KHÔNG border (thay bằng shadow).

6.2 Badge huy hiệu ABS

4 huy hiệu — phân cấp bằng cường độ fill, không đổi hue

Agent Starter (bài 5)

Commander (bài 10)

Builder (bài 15)

Boss (bài 20)

Chip UI tương ứng (dùng inline cạnh danh sách bài học):

Agent StarterCommanderBuilderBoss

6.3 Form field

input height 40 · radius 8 · font ≥16px (chống auto-zoom iOS)

Email công ty

Default + focus state (thử click vào ô)

Số điện thoại

✗ Số điện thoại chưa đủ 10 số

6.4 Header/Nav

height 64 · logo trái · nav item Label 13/500 · active underline 2px cam

Nội dung trang bên dưới header.

6.5 Alert

border-left 3px + bg tint 8% + icon bắt buộc (WCAG 1.4.1)

ℹInfo — không truyền đạt chỉ bằng màu, luôn kèm icon.

✓Success — đã lưu thay đổi thành công.

✗Error — vui lòng kiểm tra lại thông tin.

6.6 Progress bar

height 4 · track rgba(255,255,255,.08) · fill accent

13/20 bài · 65%

6.7 Node + Glow (tĩnh)

core → glow ring → label · node trung tâm lớn hơn 1.5–2×

6.8 Hub-and-spoke

trung tâm CEO/Control Center · 4–6 node vệ tinh vòng tròn đều · ambient glow phía sau

6.9 Hero Node-Network — mạng lưới nút-chấm ĐỘNG

canvas · vanilla JS · ~40-50 chấm · 35% cam / còn lại trắng mờ · nối khi <130px · tôn trọng prefers-reduced-motion

Demo canvas chạy thật — opacity thấp (bản dashboard, khác hero phía trên)

Tinh tế, phục vụ rõ ràng

Motion

Kiểu Linear — không kiểu Vercel gradient-shift. KHÔNG animation nào bắt buộc để hiểu nội dung, tôn trọng prefers-reduced-motion: reduce.

Loại	Duration	Easing
Màu/border/background (hover)	150ms	`ease`
Transform (press, arrow shift)	100ms	`ease`
Panel/modal enter	200ms	`cubic-bezier(0.16, 1, 0.3, 1)`
Page/section fade-in	250ms	`ease-out`

Không dùng lại

Bảng màu bị loại

Màu cũ	Lý do loại	Thay bằng
Amber #f59e0b	Không thuộc palette brand, dễ nhầm cam brand	orange-700 #E55D17 (dark) / orange-900 #9A3412 (reading)
Slate #64748b	Xám generic Tailwind, lệch họ navy brand	navy-500 #234C79
Slate #334155	như trên	navy-700 #0F1F38
Cam lạc #ea580c	Không nằm trong thang 9-shade cam brand	orange-700 #E55D17
Cam lạc #fb923c	như trên	orange-400 #FF9C66 hoặc orange-500 #FF7A2A
Vàng/mustard #c9a44c	Sai hue hoàn toàn — không phải cam Boss Orange (H21°)	KHÔNG dùng — cần cảnh báo/premium thì dùng orange-600/900

BẮT BUỘC trước khi giao mọi ấn phẩm

Brand Test

Có phải hệ thống không? — dùng token, không phải màu/spacing tự chế.
Có Human + Agent không? — layout thể hiện song hành người thật + hệ agent (hub-and-spoke, dashboard, node).
CEO có dùng được không? — CEO non-tech 35-50 tuổi đọc hiểu ngay, không rối, không sến.

→ Sai 1 câu = LOẠI, làm lại.

4 biến thể — ảnh thật, không tự vẽ

Logo

Logo Agent Boss không phải 1 file dùng mọi nơi — đây là hệ thống 4 biến thể, mỗi biến thể có 1 nền đúng của nó. Chọn sai biến thể = logo chìm, mờ, hoặc trông cẩu thả.

RULE CỨNG: mọi chỗ hiển thị logo/biểu tượng thương hiệu BẮT BUỘC dùng ảnh thật — TUYỆT ĐỐI không tự vẽ bằng <div>/<span> chữ viết tắt hay khối màu giả lập thay logo.

10.1 Logo đầy đủ — icon + wordmark

/brand/logo-full-color.png — dùng header, trang chủ, hero marketing, mọi nơi đủ chỗ ngang.

10.2 Trên nền tối vs. trên nền sáng

✅ logo-mark-on-dark.png — nền navy-800/900. Dùng đa số khuôn hiện tại (avatar, form nhỏ, sidebar).

✅ logo-mark-on-light.png — nền trắng/kem, tài liệu in, name card.

10.3 Mark trong suốt — overlay lên ảnh/pattern

logo-mark-transparent.png — dùng làm watermark hoặc overlay lên ảnh mascot/photo, không mang theo khối nền riêng.

10.4 Đúng / Sai

✓ ĐÚNG

Full-color trên nền navy-800/900 — tương phản cao nhất.

✓ ĐÚNG

Mark-on-light trên nền trắng/kem #FAF6EE.

✕ SAI

Mark-on-dark đặt trên nền sáng — mark bị chìm, thiếu tương phản.

✕ SAI

Bóp méo tỷ lệ, đổi màu, thêm shadow/outline không có trong bản gốc.

Ngoại lệ DUY NHẤT dùng chữ thay ảnh: khuôn chứng nhận verify in ấn — vì đây đúng pattern chữ trong code production thật (chung-nhan/[cert_id].astro), không phải placeholder tự chế.

Line · Node · Flow · Layer — 4 phương án chính thức

Họa tiết thương hiệu

Không có 1 kiểu chấm-nối duy nhất. Họa tiết Agent Boss là 1 ngôn ngữ hình — Line · Node · Flow · Layer — thể hiện qua 4 phương án khác nhau, chọn theo ngữ cảnh chứ không lặp mãi 1 công thức.

AHub-and-spoke tĩnh

1 node trung tâm to + 4-6 node vệ tinh nối thẳng về tâm, ambient glow phía sau.

Dùng khi: diagram minh họa cấu trúc/quy trình.

BMạng lưới động ngẫu nhiên

Chấm trôi tự do, tự nối khi đủ gần, không có tâm cố định — cùng cơ chế canvas ở mục 6.9.

Dùng khi: nền hero/dashboard cần cảm giác "sống".

CMạng lưới bán-cấu-trúc

Node xếp theo lưới đều + variance ngẫu nhiên nhỏ, chỉ nối node liền kề — cảm giác "mạch điện tử".

Dùng khi: section dài cần họa tiết nền tinh tế, tránh cảm giác "1 tâm" lặp lại.

DĐường viền/khung tách khối

Đường kẻ mảnh rgba(255,255,255,.08) đơn thuần phân vùng, không node/chấm.

Dùng khi: tối giản tối đa, tránh cạnh tranh với nội dung dày (bảng, form).

Nguyên tắc chọn phương án

1 trang dài (nhiều section) KHÔNG lặp lại CÙNG 1 phương án ở mọi section — phối hợp ít nhất 2 phương án khác nhau để tránh đơn điệu, nhưng KHÔNG quá 3 phương án/trang (tránh loạn). Màu họa tiết luôn theo token đã định: line trắng mờ rgba(255,255,255,.08-.30) hoặc cam mờ cho node active rgba(255,106,26,.25) — không phối màu ngoài navy/cam.

3 nhân vật · 3 vai trò riêng — nguồn: LoRA fal.ai

Nhân vật thương hiệu

Agent Boss có 3 nhân vật chính thức — Kid, Boss, Cô gái. Đây không phải 3 lựa chọn ngẫu nhiên để chọn 1: mỗi người có vai trò riêng, dùng đúng ngữ cảnh, không thay thế lẫn nhau.

Trải nghiệm học

Kid

Robot trẻ (con của Boss)

AI đồng hành dễ thương — học viên, trợ lý học tập, support, fun. Mascot chính cho MỌI ấn phẩm hướng tới người đang HỌC.

Đặc điểm KHÔNG được đổi: Đầu tròn trắng, antenna ball, nơ cam, mắt to sparkle cam, logo AB ở trán (không ở ngực).

Bộ ảnh có sẵn

Mặc định

Chào mừng

Giảng giải

Ăn mừng

Đang xử lý

Quản trị / Admin

Boss

Robot trưởng thành (bố của Kid)

AI trưởng thành — mentor, chiến lược, vai trò QUẢN TRỊ. Dùng cho /team, CRM, mọi màn dành riêng cho nhân viên nội bộ.

Đặc điểm KHÔNG được đổi: Đầu tròn trắng, headphone 2 bên (signature — đừng bỏ), cà vạt cam tam giác ngược, mắt half-lidded, body slim chibi (KHÔNG vest formal, KHÔNG cơ bắp).

Bộ ảnh có sẵn

Mặc định

Chào mừng

Hướng dẫn

Đang xử lý

Human + Agent

Cô gái

Human CEO mặc giáp cyberpunk

Đại diện NGƯỜI dùng AI Agent — hero marketing cần thể hiện "Human + Agent" (Brand Test câu 2), banner B2B, ảnh minh họa CEO/leader thật.

Đặc điểm KHÔNG được đổi: Tóc bob đen, giáp đen có circuit cam Tron-style, mặt Á Đông, mắt almond nâu đậm.

Bộ ảnh có sẵn

Hero

CTA

B2B

Testimonial

12.4 Sinh thêm mascot mới bằng LoRA — không chỉ giới hạn ở ảnh tĩnh có sẵn

3 LoRA đã train (AGBOSS/AGKID/AGGIRL) cho phép sinh ảnh mascot MỚI theo bất kỳ pose/bối cảnh nào khi cần.

Luôn dùng LoRA đúng nhân vật — TUYỆT ĐỐI không gen mascot tự do không qua LoRA.
2-3 nhân vật cùng scene → KHÔNG multi-LoRA (sẽ blend lẫn) → gen riêng từng nhân vật rồi ghép composite.
KHÔNG tự đổi đặc điểm cốt lõi (mắt/tóc/phụ kiện signature) khi gen pose mới.

Lưu ý phân biệt: huy hiệu cấp bậc (mục 6.2) là shield/medal biểu tượng, KHÁC mascot nhân vật — dù trùng tên "boss".

Ứng dụng thực tế trên các nhóm màn hình

Ấn phẩm — ví dụ áp dụng

Design System 2.0 không chỉ là token trên giấy — dùng làm nguyên tắc tham chiếu khi cần "trang kiểu X phải trông thế nào".

Nhóm	Áp dụng cho
Marketing nền tối	Landing bán khóa · trang chủ · catalog khóa học (node-network canonical) · blog
Đọc/form — khung tối + tờ giấy sáng	Màn bài học · nộp bài thực hành · kho lý thuyết · hóa đơn
Dashboard học viên	Dashboard ABS (nền tối, bài-học-trọng-tâm) · dashboard khóa nghề (bản đồ serpentine)
Nội bộ/quản trị	Admin/team · CRM
Chứng nhận/pháp lý	Chứng nhận verify (ngoại lệ logo chữ, xem mục 10) · trang tĩnh pháp lý

Áp dụng mọi ấn phẩm mới

Quy tắc cứng — tóm tắt

1Nền theo công năng — marketing/dashboard/entry = nền TỐI; đọc-bài/form-dài = khung tối + tờ giấy sáng nổi giữa, KHÔNG phải nền sáng-lạnh trải cả trang.
2Nền tối đúng độ — dùng navy-800, KHÔNG navy-900 (đen kịt → mảng chết); thẻ/card sáng hơn nền 1 nấc + viền rõ.
3Input/textarea font-size ≥ 16px — chống auto-zoom iOS Safari.
4Đo tràn ngang mobile bằng script (Playwright), không tin ảnh chụp mắt — ảnh chụp có thể stale/layout chưa ổn định.
5Logo phải ảnh thật — xem mục 10.
6Đọc ĐÚNG bản mới nhất khi có nhiều worktree song song — git worktree list + so git log -1 -- <file> trước khi coi 1 file là "nguồn sự thật".
7KHÔNG BỊA NGHIỆP VỤ — đọc file code thật + spec trước khi dựng, không suy diễn cấu trúc từ 1 khuôn tương tự sang khuôn khác.

Khi Claude/hoa-si dựng ấn phẩm mới

Hướng dẫn dùng cho AI/Agent

Đọc nguồn dữ liệu gốc mxd-ai-agents/design-mockups/agent-boss-design-system-2.0.md (token, type scale, component, motion) — nguồn màu/chữ/spacing.
Đọc 00d-quyet-dinh-thiet-ke.md — mọi rule cứng + bối cảnh (cập nhật liên tục).
Đọc code/file thật của trang đang dựng — liệt kê ĐỦ tính năng trước khi vẽ, không suy diễn từ khuôn khác.
Chọn 1 khuôn đã duyệt cùng nhóm (mục 13) làm mẫu nhất quán bố cục/component.
Dựng xong → tự grep màu cấm (mục 8) = 0 → tự chụp/render kiểm tra → tự kiểm logo (mục 10) → mới báo cáo.

Không tự suy diễn khi thiếu thông tin — hỏi lại thay vì đoán, đặc biệt về nghiệp vụ (giá, quyền, luồng dữ liệu).