DS-001 · Visual direction v0.4 và Ocean World v1.0

Một phần của DS-001. Hướng nhìn v0.4 gần như không màu, Ocean World v1.0: bảng màu 11 giá trị, cách bật .n12-v1, thang chữ, nhịp section, thẻ, nút, chuyển động.

2·0. Visual direction v0.4 · "gần như không màu" (SRC-160) — ĐÈ LÊN §2 bên dưới

Về MÀU, mục này đã bị §2·1 v1.0 "Ocean World" đè lên cho app nào bật .n12-v1 (đợt SRC-741: chỉ apps/web). Các app còn lại vẫn theo đúng mục này. Ràng buộc Arial và các luật hình khối/viền/nhịp dọc ở đây thì không bị đảo — đọc §2·1·1 trước khi sửa bất cứ thứ gì dưới đây.

Chỉ đạo 2026-08-16: "Nhiều màu sắc quá, tôi thấy kinh tởm lắm, ít màu thôi, thậm chí hầu hết không có màu gì cũng ok, chỉ có rất ít màu để làm button (để làm CTA) thôi." v0.4 chia màu làm hai hạng và hạng thứ hai chỉ có đúng một màu:

Hạng	Dùng ở đâu	Màu
Trung tính (95% màn)	chữ, nền, viền, thẻ, header, hero	thang xám hue 205, bão hoà rất thấp
Điểm màu (≤1 lần/màn)	nút hành động chính, chỉ báo "đang ở đây", chấm "đang học"	coral #C13A17

Sáu thay đổi cụ thể so với v0.3:

1. Thang ocean/aqua kéo về trung tính — giữ nguyên tên biến để không phải sửa hàng trăm chỗ dùng text-ocean-900, nhưng giá trị nay là xám. Đọc code thấy "ocean" thì hiểu là thang chữ/nền chính, không phải màu xanh biển.
2. School không còn đè --accent — trước đây mỗi school nhuộm nền thẻ một màu, đi một vòng trang chủ gặp 6 mảng màu. Nay bản sắc school còn ở hình mascot (đó là tranh, không phải khung giao diện) và một vạch --school-mark 2px ở mép trên thẻ. Nút chính ở mọi school đều một màu coral, để "chỗ nào bấm được" luôn là cùng một tín hiệu.
3. Hero bỏ gradient, tia sáng, bong bóng — n12-hero và n12-hero-ocean nay là cùng một mặt phẳng gần đen. Vẫn mang chữ trắng (giữ nguyên hợp đồng cũ vì hơn 10 trang đang tin vào điều đó); tương phản do sáng/tối tạo ra chứ không do màu.
4. Icon frame bỏ gloss 3D — khung tròn xám phẳng, nét vẽ bên trong là thứ duy nhất được nhìn.
5. Nút accent bỏ gradient và quầng sáng — nó đứng một mình trên trang toàn xám nên một mặt phẳng đặc đã là thứ nổi nhất.
6. --accent-soft / --accent-ink hoá trung tính — hai biến này từng là bản nhạt của coral dùng làm nền khung icon và badge khắp nơi, cộng lại thành một lớp hồng phủ cả site.

Hình khối cũng theo: radius card 1.25rem → 0.875rem (bo 20px đọc ra là "app tiêu dùng", 14px đọc ra là "công cụ"), bóng kéo về gần mặt phẳng (--shadow-1 chỉ còn 1 lớp 2px). Cảnh báo --n12-sun-400 phải sáng lên #E0B45C để còn đạt AA trên nền ocean-700 mới (5,19:1) — đổi lại nó chỉ được dùng trên nền tối hoặc làm chấm nhỏ, chữ "cần ôn" trên nền sáng phải dùng --state-review-ink.

Vòng 2 (cùng ngày, sau khi chủ dự án xem bản deploy): "vẫn hơi xấu, vẫn nhiều màu sắc, và vẫn hơi ít spaces" rồi "viền vẫn quá đậm, quá thô thiển". Ba sửa chữa tiếp:

1. Viền 1,5px → 1px ở toàn bộ component (n12-option, n12-input, n12-chip, n12-btn-outline). Trên màn Retina 1,5px hiện thành 3 điểm ảnh nên đọc ra là nét thô.
2. Trạng thái thôi dùng viền màu. Trước đây đúng/sai/đang chọn được vẽ bằng border-success / border-warning / border-accent — bốn ô đáp án cạnh nhau thành bốn khung màu. Nay nghĩa nằm ở nền chìm rất nhạt (bg-seafoam, bg-sun-soft), viền giữ hairline trung tính. 26 chỗ trên 7 file.
3. Nhịp dọc rộng ra (47 chỗ): thân trang py-8→py-10, giữa khối space-y-4/5→space-y-6/8, lưới thẻ gap-3/4→gap-5, ruột thẻ p-4/5→p-5/6.

Cũng trong vòng này: 5 bong bóng "mạng" ở màn luyện tập (BUBBLE_ART) kéo từ xanh aqua no đặc về xám mực — chúng là mảng màu lớn nhất còn lại trên màn và đang tranh chỗ với nút hành động; vạch --school-mark hạ từ 3px đặc xuống 2px ở 60% để đọc ra là dấu nhận biết chứ không phải thanh màu.

Vòng 3 — mức mạnh: toàn bộ mascot và icon đơn sắc (chỉ đạo 2026-08-16). Sau vòng 2, thứ còn màu nhiều nhất là chính bộ hình vẽ. Chủ dự án chọn phương án mạnh.

• 106 giá trị trong ART chuyển sang thang mực. Không dùng filter: grayscale — filter cho ra xám bùn và làm bẹt nét. Thay vào đó mỗi hex được tính độ sáng cảm nhận (relative luminance) rồi thay bằng một xám đúng độ sáng đó, lệch nhẹ về xanh lạnh (R thấp hơn B vài đơn vị, biên độ giảm dần khi màu càng sáng). Nhờ vậy bụng sáng vẫn sáng, viền tối vẫn tối, gradient vẫn còn khối — chỉ mất sắc độ.
• Tách LOGO ra khỏi ART. Logo cá hề cam là quyết định riêng đã chốt trước (SRC-049/069) và nó không phải mascot minh hoạ trong nội dung mà là dấu nhận diện, xuất hiện một lần mỗi màn. NemoLogo.tsx nay đọc từ LOGO, nên xám hoá ART không kéo theo logo. Muốn logo đơn sắc nốt thì sửa đúng một khối.
• --school-mark giữ màu. Khi mascot đã đơn sắc, vạch 2px là thứ duy nhất còn phân biệt sáu school; bỏ nốt thì mất thông tin thật chứ không chỉ mất trang trí.
• explore/palette.ts (hình vẽ trong bài học) không bị xám hoá — ở đó màu mang nghĩa dạy học và đã được rút riêng về 2 màu ở SRC-164.
• BUBBLE_ART (bong bóng "mạng") cũng không — sắc xanh nghĩa là còn mạng, xám nghĩa là đã mất. Xám hoá cả hai thì hai trạng thái trùng nhau và đồng hồ đếm mạng thành vô nghĩa (SRC-165). Đã có apps/learn/src/palette.test.ts khoá luật này lại.

Luật rút ra: màu mang nghĩa thì không bị xám hoá; màu trang trí thì bị. Trước khi bỏ màu một chỗ nào, hỏi "màu này đang nói điều gì mà hình dạng và vị trí không nói được?" — không trả lời được thì bỏ, trả lời được thì giữ.

Kết quả: mỗi màn còn đúng ba nguồn màu trang trí — logo (1 lần), nút hành động chính (≤1 lần), vạch school 2px — cộng các chỗ màu mang nghĩa kể trên.

Hai component sinh ra từ đợt này:

• .n12-seg — segmented control, thay cụm "viên thuốc" cho mọi bộ lọc chọn-một. Viên thuốc rời nhau với một viên tô nền đậm là nhiều khối rời rạc cộng một mảng màu; segmented gom chúng vào một rãnh chìm, ô đang chọn nổi lên bằng nền trắng + bóng mảnh — nhận ra ngay mà không tốn giọt màu nào. Trạng thái đọc từ aria-pressed nên đúng cả với trình đọc màn hình. Chip tròn n12-chip chỉ còn dùng cho tag nhiều lựa chọn.
• <Chev/> + .n12-chev — mũi tên mở/đóng vẽ bằng SVG. Ký tự ▸ ▾ ▲ ▼ mỗi hệ điều hành dựng một kiểu, và Arial không có U+2192 nên → rơi sang font khác; đây chính là hiện tượng "vỡ font". Trong khung giao diện, cấm dùng ký tự mũi tên/tam giác.

§2 bên dưới giữ lại làm hồ sơ v0.3. Chỗ nào hai bên nói khác nhau thì §2·0 thắng.

2·1. Visual direction v1.0 · "Ocean World" (SRC-741) — ĐÈ LÊN §2·0 VỀ MÀU

Chỉ đạo chủ dự án 2026-09-16, một tài liệu hoàn chỉnh, mở đầu bằng câu đặt vấn đề:

Nemo12 = Premium Learning OS living inside an Ocean World. Serious underneath. Playful on the surface.

Nemo12 should never look like an education center website. It should look like a world built for learning.

2·1·1. Quan hệ với v0.4 — cái gì bị đảo, cái gì không

v1.0 đảo ngược luật "một điểm màu" của v0.4. Điều này đã được hỏi lại và chủ dự án chốt "áp đủ Ocean Palette" trước khi viết một dòng code — không phải suy diễn từ văn bản.

Nhưng lý do v0.4 ra đời vẫn đúng và được giữ: thứ làm chủ dự án "kinh tởm" là màu rải đều, không phải màu. Nên v1.0 không mở cửa tự do mà buộc một tỉ lệ, và coral vẫn hiếm đúng như cũ.

Hai chỉ đạo v0.4 không bị đảo — cũng đã hỏi lại cùng lúc:

Đề xuất trong v1.0	Chốt 2026-09-16	Vì sao
Inter/Geist + serif display (Fraunces)	Giữ Arial	SRC-160 đã so mẫu Arial/Inter rồi chốt Arial; không mở lại
Display 72–80px	Trần 48px	Arial một bản vẽ cho mọi cỡ: phóng to là dấu hai tầng (ế ộ ữ) dựng thẳng, chạm mũ. 48px to hơn 32px rõ rệt mà dấu còn sạch

Ba thứ v1.0 nêu mà v0.4 đã cố ý bỏ và vẫn bỏ: bong bóng chạy trên màn học, quầng sáng quanh nút, gloss 3D trên khung icon. .n12-atmosphere chỉ có hai lớp gradient rất mờ — đủ để có không khí, không đủ để tranh chỗ với nút hành động.

2·1·2. Ocean là NGÔN NGỮ, không phải trang trí

Đây là phần có giá trị nhất của v1.0 và nó không tốn một dòng CSS nào: brand và product model nói cùng một thứ tiếng.

Khái niệm học tập	Ẩn dụ biển	Đã có trong hệ
Learner	Nemo	✅
Parent	Marlin	✅ marlins.nemo12.com
Mentor	Dolphin	✅ mentors
Evidence	Pearl	✅ pearl.nemo12.com
Goal / Destination	Compass	✅ compass.nemo12.com
Knowledge	Coral	✅ coral.nemo12.com
Mastery	Depth	thang 5 bậc §2·0
Learning journey	Current
Milestone	Island
Learning package	Expedition
Gap	Reef gap

Sáu sub-domain đang chạy đã nằm đúng bảng này từ trước. v1.0 không đặt tên mới, nó đặt tên cho thứ đã có — nên đây là mục để đọc trước khi đặt tên bất kỳ khái niệm mới nào.

2·1·3. Ocean Palette — 11 giá trị, hết

Token	Hex	Vai
--n12-deep-ocean	#083B66	navigation, footer, dark section, heading lớn
--n12-ocean	#12639A	bề mặt brand chính
--n12-sea	#2C82B8	bề mặt nhạt hơn, đường nét, biểu đồ
--n12-sky	#DDF1FA	nền section sáng-xanh
--n12-foam	#F7FBFC	nền mặc định
--n12-sand-warm	#FFF7E8	nền section ấm — storytelling
--n12-coral-v1	#F45B32	highlight, viền, mũi tên
--n12-coral-wash	#FFE5DC	nền chìm của coral
--n12-ink	#12202B	chữ chính
--n12-slate	#526473	chữ phụ
--n12-mist	#E6EDF1	viền hairline

Tỉ lệ bắt buộc: 70% trung tính · 20% ocean · 7% sky/sand · 3% coral. Coral phải hiếm tới mức khi nó xuất hiện, mắt tự hiểu "đây là hành động quan trọng".

Hai bẫy tương phản đã đo, đừng đạp lại:

1. #F45B32 với chữ trắng chỉ 3,29:1 — không đủ AA cho chữ. Nên hệ có hai biến chứ không phải một: --accent (#F45B32) cho viền/mũi tên/chấm, và --accent-deep (#CE4019, 4,80:1) cho nền nút có chữ. Đừng gộp lại.
2. --n12-sea với chữ trắng là 4,21:1 — chỉ đạt AA cho chữ ≥24px. Mảng xanh mang chữ body phải dùng --n12-ocean (6,41:1).

2·1·4. Cách bật: class .n12-v1, không đè token cũ

Token v1.0 là tên mới, thêm vào cuối tokens/base.css; nạp file không làm đổi màu app nào. Việc đổi màu nằm ở khối .n12-v1: app nào gắn class đó lên gốc thì lớp semantic (--background, --primary, --accent, --radius…) mới trỏ sang Ocean Palette.

Đợt SRC-741 chỉ apps/web bật. learn · marlins · coral · admin · mentors · b21 giữ v0.4 tới khi có vòng review riêng cho từng app — reskin sáu app sau lưng người dùng trong một commit là cách chắc chắn nhất để hỏng một thứ không ai kịp nhìn.

Tailwind cũng theo: bg-ocean-700 vẫn là thang trung tính v0.4, bg-deep-ocean mới là xanh biển. Hai hệ sống cạnh nhau tới khi chuyển xong.

2·1·5. Thang chữ v1.0

Bảy bậc, không có bậc thứ tám: 48 · 38 · 32 · 26 · 22 · 20 · 16 · 14 · 13px (--fs-display-l … --fs-caption). Ràng buộc Arial ở §3 vẫn áp nguyên: line-height ≥1,2 · không letter-spacing âm · tối đa 700 và chỉ ở h1 · không in hoa chữ có dấu.

Riêng .n12-eyebrow (kiểu 01 — SET YOUR DESTINATION) có text-transform: uppercase, nên nó chỉ dùng cho chữ không dấu. Eyebrow tiếng Việt có dấu thì bỏ in hoa — đây đúng là lỗi SRC-160 đã cấm.

2·1·6. Nhịp section — luật, không phải gu

Cấm xếp hai section liền nhau cùng một vai nền. Sáu vai qua .n12-band-*: deep → foam → sand → white → sky → deep.

Đây là luật bố cục, không phải thẩm mỹ: mắt đọc ranh giới giữa hai ý bằng đổi nền; không có ranh giới thì một trang dài đọc ra là một khối liền, và người dùng cuộn qua mất phần giữa.

2·1·7. Thẻ — chỉ thứ cần "đựng" mới thành thẻ

v1.0 nói đúng một điều mà §5b đã nói bằng lời khác: hiện trạng là everything = card. Thứ thay thế thẻ là typography tự tạo bậc — eyebrow nhỏ, số to, nhãn nhỏ, một dòng link mũi tên. Khi thẻ thật sự cần: radius 16px, viền 1px --n12-mist, bóng cực nhẹ, padding 24–32px.

2·1·8. Ba cấp nút, không có cấp thứ tư

primary coral đặc (--accent-deep) · secondary viền deep-ocean · tertiary nút chữ .n12-link-arrow. Trên bề mặt tối, secondary đổi sang nền trắng mờ 10% — outline trắng 1px trên xanh đậm gần như biến mất trên màn ngoài trời.

2·1·9. Chuyển động dưới nước

Loại	Thời lượng	Token
Micro (hover, press)	180ms	--dur-micro
Transition giao diện	300ms	--dur-ui
Card entrance	500ms	--dur-card
Hero	1000ms	--dur-hero
Ambient (float, drift)	9s	--dur-ambient

Easing chung --ease-water (cubic-bezier(0.37, 0, 0.16, 1)): vào chậm, ra trôi, không nảy — nảy là ngôn ngữ SaaS, không phải ngôn ngữ nước. Ambient phải chậm tới mức người dùng không nhận ra nó đang chạy; nhận ra được là hỏng. Tất cả tự tắt theo prefers-reduced-motion nhờ luật chung ở @layer base.

2·1·10. Phần v1.0 nêu mà CHƯA làm — đừng tưởng đã có

Ghi ra để lần sau không ai phải đoán:

• Ocean Object Library + character system soft-3D (Fish, Coral, Bubble, Pearl, Island, Wave; Nemo/Marlin/Dolphin/Octopus/Orca/Turtle/Ray/Squid). Hiện art/N12Art.tsx đã bị xám hoá toàn bộ 106 giá trị ở vòng 3 của v0.4. Trả màu lại cho mascot là một quyết định riêng, phải hỏi lại, và phải làm bằng cách sửa nguồn — không phải bỏ filter: grayscale.
• Data-viz theo ẩn dụ (coral growth cho coverage, depth scale cho mastery). Thang màu 5 bậc hiện có ở §2·0 vẫn đang chạy trong learn; đổi là đụng màn học, ngoài phạm vi SRC-741.
• Navigation kiểu "world" và kiến trúc homepage 5 bước (Discover · Diagnose · Plan · Learn · Prove).
• Photography kiểu documentary thay stock photo.