DS-001 · Visual v0.3, N12Art, nguồn school và typography

Một phần của DS-001. Hướng nhìn v0.3 Finding Nemo, xưởng hình N12Art cấm emoji, nguồn dữ liệu school, typography, chữ to có dấu, công thức qua MathText.

2. Visual direction v0.3 · "Finding Nemo" (SRC-067; REQ-UX-03, REQ-UX-08)

Hai nguồn tham chiếu do chủ dự án chốt 2026-08-14: khung trình bày kiểu framer.com / screen.studio (sạch, cực ít element, chữ display lớn, section thoáng py-24, card nổi bằng bóng mềm thay viền) + màu sắc/hình ảnh kiểu phim Finding Nemo, dưới biển, hoạt hình 3D Pixar:

• Nước biển điện ảnh: hero n12-hero-ocean = gradient sâu→aqua nhiều lớp + tia sáng xuyên nước (::before) + bong bóng trôi (::after, tôn trọng reduced-motion). Hero school cùng cấu trúc theo accent.
• Chất 3D Pixar: gloss highlight trên nút accent (gradient dọc + inset trắng), icon tròn = bóng nước (radial highlight góc trên trái + inset đáy), fill progress có highlight mặt nước.
• Khung framer: nền "nước trong" #F7FAFB (bỏ tông cát ấm), viền card gần như tan (rgb(6 48 79 / .06)), radius card 1.25rem / hero 2rem, bóng blur rộng 24-80px, hero full-viewport (min-h ~86vh) với đúng 1 CTA coral.
• Aqua scale mới (--n12-aqua-500/300/100) cho EAC/dòng biển; ocean scale đậm-bão-hòa hơn.

Mỗi màn vẫn đúng một nút coral (One coral action, REQ-UX-01).

/* brand scales */
--n12-ocean-950:#041A2E; --n12-ocean-900:#06304F; --n12-ocean-700:#0E5A94;
--n12-ocean-500:#1E9AD6; --n12-ocean-300:#6FCBEE; --n12-ocean-100:#DFF3FB;
--n12-aqua-500:#19B8DD;  --n12-aqua-300:#63D8F0;  --n12-aqua-100:#D9F5FB;
--n12-coral-600:#E85535; --n12-coral-500:#FF6B4A; --n12-coral-100:#FFE6DE;
--n12-sun-400:#FFB347;   --n12-sun-100:#FFF3DC;   --n12-amber-700:#935F00;
--n12-seafoam-500:#2E9E6B; --n12-seafoam-200:#DFF3EC;
--n12-sand-50:#F7FAFB;   --n12-sand-100:#ECF2F5;  --n12-ink-900:#0F1E2A;

Màu trạng thái học tập (REQ-UX-03 — đỏ KHÔNG dùng cho học tập):

Trạng thái	Token	Màu
Vững / mastered	--state-solid	seafoam-500
Đang học	--state-learning	ocean-500
Cần ôn lại	--state-review	sun-400 (text: amber-700)
Chưa đo / chưa đủ evidence	--state-unknown	neutral #B9C4CC
Lỗi hệ thống (duy nhất được đỏ)	--destructive	#C0392B

Logo (SRC-049): cá hề cam NemoLogo — SVG procedural (thân #FF7A2F, viền #E85535, 3 sọc trắng), zero-asset; favicon.svg cùng hình. Dùng ở header mọi portal + trang public thay emoji 🐟/🐠.

School themes (accent + deep + soft + ink; gradient hero = linear-gradient(135deg, deep, accent)):

Theme	accent	deep	soft	ink (text trên soft)
turtle	#2E9E6B	#1D7A4F	#E2F5EB	#14603C
shark	#E4572E	#B33C1B	#FCE7DE	#96371A
octopus	#7C5CBF	#5B3F99	#EFE9FA	#55398F
squid	#1F7AB8	#14578A	#E1F0FA	#175E8E
ray	#C99700	#9A7400	#FBF2D3	#7C5E00
whale	#145DA0	#0E4578	#E0EBF7	#114C82
marlins	#0E7C86	#095E66	#DFF2F4	#0A5B63
coral (staff)	#E85535	#B33C1B	#FFE6DE	#96371A

(Palette v0.3 theo chỉ đạo SRC-067, supersede Q-107/Q-056. Dark mode chưa bật — Q-109.)

2c. Xưởng hình ảnh N12Art (SRC-068) — CẤM emoji cho icon chính

Một ngôn ngữ hình duy nhất, SVG procedural zero-asset trong N12Art.tsx (copy per-app như NemoLogo):

• Mascot <Mascot school="turtle|shark|octopus|squid|ray|whale|dolphin|marlin" />: DNA Pixar-cute chung — mắt to trắng + đồng tử lệch + glint, thân gradient dọc 2 stop theo hue của school, highlight bóng nước góc trên trái, miệng cười nhỏ. Dùng ở school card, School Home hero, header badge (em mode = 1em).
• Icon <N12Icon name="…" /> (28 icon): ẩn dụ đại dương thay đồ vật văn phòng — lab=sứa phát sáng, exam=cuộn hải đồ, goal=hải đăng, map=bản đồ san hô, compass=la bàn, portrait=khung tranh có cá hề, family=cá bố+cá con, treasure=rương ngọc, review=dòng hải lưu, progress=cá vượt sóng, practice=cá qua vòng san hô, shell=vỏ ốc xoắn (tư duy sâu), crab=cua (dự án/robotics), puzzle, anchor=mỏ neo (công cụ), speak=bong bóng thoại, quill=bút mực, grad=mũ tốt nghiệp, world=địa cầu sóng, foundation=rạn san hô tầng, submarine=tàu ngầm vàng (tự học), bottle=thư trong chai (lời mời), starfish=sao biển, trophy=cúp, flag=cờ đích, heart=tim san hô, books=sách sóng, learner=cá hề con. Đặt trong khung n12-icon/n12-icon-lg.
• <ArtIcon e="🧪" />: map emoji cũ → icon N12Art (EMOJI_MAP), fallback hiện emoji nếu chưa map — dùng khi icon đến từ DATA (schoolsInfo.method, DOMAIN_ICON…); code mới thì dùng thẳng N12Icon.
• Scene <Seafloor />: silhouette đáy biển (2 lớp cồn cát + san hô + rong + sao biển) đặt absolute đáy hero (n12-hero* đã là relative).
• Kích thước (SRC-069): mascot trên school card/hero = h-36 trần trụi (không bó vòng tròn nhỏ); khung n12-icon 3.5rem, n12-icon-lg 7rem, n12-icon-xl 10rem — icon phải TO, dễ nhìn. Logo = bản 3D (radial gradient + rim light); Turtle = dáng đang bơi; Shark = dáng lao tới.
• Màu school trên card + hover (SRC-071): .n12-card-school = wash accent 9%→4% → bỏ ở v0.4 (SRC-160): .n12-card-school không còn nhuộm nền, chỉ còn vạch --school-mark 2px ở mép trên. .n12-swim (mascot bơi lên 8px + scale 1.06 khi hover) giữ nguyên. Icon phải là vật thể biển — không dùng đồ vật văn phòng/đất liền.
• Quy tắc: icon chính/card/hero không dùng emoji (emoji chỉ còn cho phần chưa vẽ và chi tiết chữ nhỏ); icon mới → thêm vào N12Art theo đúng DNA, không chế tại chỗ.
• Mọi hình minh hoạ trong bài học vẽ bằng CODE, không bitmap (SRC-255): trục số, thanh phân số, hình học đều là SVG procedural. Bitmap không đổi theo số liệu của đề, không co giãn theo màn, và mỗi hình là một file phải nuôi; hình vẽ bằng code thì một bộ dựng hình phục vụ được hàng trăm câu — bộ hiện tại gắn 131 hình cho 9 node chỉ bằng luật đọc số từ chính đề bài, câu nào không đọc ra số thì không có hình còn hơn có hình sai.
• Hai luật đọc số đi kèm, vì cả hai đều đã sinh ra hình sai: bỏ dấu chấm phân nhóm hàng nghìn trước khi bắt số (50.618 là MỘT số, không phải hai); hai nhãn nằm gần nhau trên trục thì so le trên/dưới thay vì đè lên nhau.
• Icon Thoát là dấu nhân, không phải mũi tên hay chữ (SRC-255) — cùng lý do §2·0 cấm ký tự mũi tên/tam giác trong khung giao diện.

2d. Nguồn dữ liệu school duy nhất (SRC-090)

apps/learn/src/schoolsInfo.ts là nguồn chuẩn cho mọi surface (web, learn, marlins, coral): code/emoji/name/label/theme/tagline/goal/forWho/method/outcomes/areas + SCHOOL_SUBJECTS. Các app khác giữ bản copy y hệt (không import chéo app, giống N12Art/NemoLogo) — sửa ở learn rồi copy sang, KHÔNG tự viết danh sách school riêng. Tagline/theme/mascot vì thế luôn khớp giữa nemo12.com, learn và marlins.

3. Typography (REQ-UX-04) — kế thừa ràng buộc CÓ CHỦ ĐÍCH

Arial toàn hệ (chỉ đạo 2026-08-16), không webfont (Q-110), sàn 14px, body 16px, line-height 1.6.

Một token duy nhất chi phối cả hệ: --font-sans trong packages/design-system/tokens/base.css. Mọi app đều @import "@nemo12/design-system/index.css" nên đổi ở đây là đổi cả learn · web · marlins · coral · admin · mentors; pearl bắc cầu qua --vp-font-family-base. Hai site VitePress (pearl và docs) dùng chung một bridge packages/design-system/vitepress.css (REQ-DOC-10, SRC-495) — cùng token, không fork theme.

Chuỗi dự phòng là Arial, Helvetica, "Liberation Sans", "Nimbus Sans", sans-serif: Helvetica cho macOS đời cũ; Liberation Sans và Nimbus Sans là hai bản thay thế đúng số đo của Arial trên Linux — thiếu chúng thì máy Linux (gồm cả máy chạy CI và chụp ảnh kiểm giao diện) rơi về một font sans bất kỳ và chữ xô lệch so với bản đã duyệt.

Hai màn cấp cao nhất của marlins, và một cái bẫy của luật remap (SRC-858). <main> màn "Đang tải" (App.tsx) và ErrorBoundary nằm NGOÀI <Dashboard>, tức ngoài mọi od-root, nên chúng render ở thế giới SÁNG (bg-sand) giữa một cổng biển sâu — còn contrast-check.mjs lại khai cả marlins là .theme-marlins.od-root, nghĩa là cổng đo một thế giới, người dùng nhìn một thế giới khác. Chưa sai kết luận chỉ vì auto-scan chỉ ghép bg-* với text-* khi chúng đứng CÙNG một className, mà ở hai màn này nền nằm trên <main> còn chữ nằm ở thẻ con: không cặp nào được tạo nên không có phán quyết nào để sai. Nay hai màn mang theme-marlins od-root.

Cái bẫy đi kèm, đo được chứ không suy: luật remap là .theme-marlins.od-root .text-muted-foreground — selector hậu duệ. Viết text-muted-foreground ngay trên CHÍNH thẻ mang hai lớp ấy thì không khớp, và màu rơi về bản của thế giới sáng (rgb(82,100,115), xám đậm trên nền biển). Chữ phải nằm ở thẻ CON (rgb(169,198,230), đúng --n12-deep-ink-muted). Hai cách viết trông như nhau khi đọc mã; chỉ mở trình duyệt đo mới thấy.

Màn thông báo ra mắt của learn (SRC-857). LaunchNotice là chỗ cuối cùng trong learn còn mang n12-hero-ocean, nay về n12-deep như cả app. Nó đáng sửa dù chỉ sống tới 08:00 20.09: đây là màn ĐẦU TIÊN mọi tài khoản thường gặp sau khi đăng nhập, nên ấn tượng đầu tiên về sản phẩm lại là một sắc xanh không có ở bất kỳ màn nào sau đó.

Thứ tự hai dòng backdrop-filter (SRC-852). Viết bản chuẩn trước rồi -webkit- sau thì trình rút gọn (lightningcss) bỏ mất bản chuẩn: CSS lên production chỉ còn -webkit-backdrop-filter, nên Chrome và Safari vẫn mờ còn Firefox thì không. Phát hiện khi đo CSS thật trên marlins.nemo12.com, không phải khi đọc mã. Luật: -webkit- đứng trước, bản chuẩn đứng sau — áp cho cả .n12-panel lẫn quy tắc thẻ .theme-marlins.od-root [data-slot="card"] trong DS, vì cả hai đều đang viết ngược. Kiểm bằng cách grep bản build (apps/*/dist/assets/*.css), không bằng cách đọc file nguồn: lỗi này chỉ hiện ra sau khi rút gọn.

3b. Luật chữ to có dấu (SRC-160)

Chủ dự án nêu hai quan sát trong cùng một ngày: "Arial mà font chữ nhỏ dưới 15, thì tôi thấy vô cùng đẹp" và "các ký tự tiếng Việt, có dấu, và font to tầm 20 trở lên, thì thường bị lỗi hoặc nhìn xấu xấu". Hai câu đó không mâu thuẫn — chúng mô tả đúng lý do ngành chữ có khái niệm optical size: một mặt chữ đẹp ở 13px cần nét dày và dấu tách xa thân chữ; phóng lên 34px thì nét hoá thô và dấu thanh chồng sát mũ (ế ộ ữ ặ). Arial chỉ có một bản vẽ cho mọi cỡ nên được đầu này mất đầu kia.

Đã dựng bản đối chiếu Arial ↔ Inter (font có trục optical size) ở 13/15/20/28/40px; chủ dự án xem rồi chốt giữ Arial. Vậy không đổi được mặt chữ thì chặn khuyết điểm bằng bốn luật, khoá sẵn ở thẻ tiêu đề trong index.css để không phải nhớ lại ở từng trang:

1. line-height ≥ 1.22 cho h1/h2/h3 — dấu hai tầng cần chỗ, chật là chạm dòng trên.
2. Không letter-spacing âm ở cỡ lớn — Arial bóp lại là dấu chữ này đụng chữ bên cạnh (v0.3 từng đặt tracking-tight, đó là một phần nguyên nhân).
3. Đậm tối đa 700 và chỉ ở h1; Arial Bold cỡ lớn làm dấu bết thành một khối.
4. Trần cỡ hiển thị 32px. Trên ngưỡng đó khuyết điểm của Arial lộ rõ, và không có cách CSS nào cứu được.

Vì sao luật 3 là luật đắt nhất, và vì sao đã cần một cổng (SRC-795)

Bốn luật trên bị phá suốt nhiều tuần trên production mà không ai thấy, vì khối khoá ở packages/design-system/index.css nằm trong @layer base — mà trong Tailwind v4 utilitiesluôn thắng base. Một chữ tracking-tight viết thẳng lên thẻ <h1> là luật im lặng biến mất. Đã có 114 chỗ như vậy trên cả 7 app React khi đi đếm.

Chủ dự án phát hiện ngày 2026-09-17 khi mở nemo12.com trên Windows. Cơ chế, đã tái hiện được trên macOS bằng cách ép font:

• font-extrabold là weight 800. Arial không có bản vẽ 800. Trên macOS, Chrome giữ nguyên Arial Bold (đo được: ascent 0,896em, bề rộng y hệt weight 700).
• Trên Windows, Arial và Arial Black nằm cùng một họ theo mô hình font của hệ, nên weight 800 rơi sang Arial Black — một mặt chữ KHÁC, ascent 1,10em.
• Nét gạch .n12-swash bản cũ neo bằng background-position: 0 0.78em, tức đo từ mép TRÊN của hộp nội dung. Ascent đổi 0,90em → 1,10em thì nét trôi lên ~10px ở cỡ 48px: từ chỗ đè bụng chữ thành xuyên giữa chữ, trông đúng như chữ bị gạch bỏ.
• Cùng lúc đó Arial Black ở 48px làm dấu hai tầng bết lại — đúng triệu chứng thứ hai chủ dự án tả.

Một nguyên nhân, hai triệu chứng, và macOS che cả hai. Rút ra ba điều, đã áp:

1. .n12-swash neo bằng text-underline-offset (đo từ đường chân chữ), không bằng background-position (đo từ mép hộp). Chỗ nào cần nét trang trí bám chữ thì theo cách này.
2. Luật 3 không phải chuyện thẩm mỹ. Weight vượt 700 trên một font chỉ có hai bản vẽ là đổi mặt chữ, và mỗi hệ điều hành đổi sang một thứ khác nhau.
3. Luật nào chỉ sống trong @layer base thì không phải luật. scripts/check-vi-type.mjs (QG-014c, trong npm run check:code) kiểm mọi .tsx của apps/ và packages/: cỡ từ 20px trở lên (ngưỡng lấy từ chính lời chủ dự án ở SRC-160) mà có leading < 1.22, tracking âm, weight trên 700, hoặc vượt trần cỡ, là đỏ.

Lối ra hợp lệ của cổng là ba lớp đánh dấu n12-type-exempt-num · -emoji · -decor, chỉ dùng cho nội dung không có dấu tiếng Việt (số liệu, emoji, cờ, chữ cái trang trí). Tên lớp tự nó là lý do; cổng cố ý không nhận một cờ trống.

Cũng bỏ -webkit-font-smoothing: antialiased (đổi sang subpixel-antialiased): nó bào mỏng nét trên macOS, và thứ mỏng đi trước tiên chính là dấu tiếng Việt hai tầng.

Type scale 5 bậc qua utility Tailwind:

Bậc	Dùng cho	Spec
Display	Hero school, chào learner	≤32px, font-bold, không tracking âm (§3b)
Title	Tiêu đề màn	text-2xl font-bold
Section	n12-section-title	17px font-bold + màu ocean-900
Body	mặc định	16px/1.6
Caption	phụ chú, meta	14px (KHÔNG nhỏ hơn), text-muted-foreground

3c. Công thức toán luôn đi qua <MathText> (SRC-249)

Mọi chuỗi đến từ dữ liệu bài học đều phải render qua <MathText>, không riêng màn làm bài: đề bài, từng phương án, đáp án, và cả màn xem lại cuối phiên. Chuỗi $\frac{5}{10}$ lọt ra nguyên dạng thì learner đọc được cú pháp LaTeX chứ không đọc được phân số — và chỗ nó lọt ra thường là màn phụ mà không ai mở lại khi kiểm.

Vì luật này chỉ hỏng ở chỗ người ta quên, nó được khoá bằng test đếm: mọi lần chèn {it.prompt} hoặc {opt} vào JSX đều phải nằm trong <MathText>. Thêm một màn mới hiện nội dung bài học thì test bắt ngay, không chờ ảnh chụp màn hình của chủ dự án.

Kèm theo là luật nội dung: phương án nhiễu phải có người chọn được. Bài rút gọn phân số sinh nhiễu bằng cách trừ đi k nên khi tử bằng 1 ra $\frac{0}{5}$ — không ai chọn, và câu bốn phương án thực chất chỉ còn ba.