DS-001 — Nemo12 Design System
Một Design System duy nhất cho toàn ecosystem. Bài học legacy: chuyenchon + sutucon có 6+ hệ token song song và mỗi app một bản fork component — Nemo12 cấm lặp lại (RISK-012). v0.2 (SRC-042) là bản tái tạo: visual direction "Ocean Depth", token đầy đủ, và lớp component n12-* mà cả 5 surface (learn, marlins, dolphin, coral, web) dùng chung. Yêu cầu + trọng số: PRD-002.
Các trang
Trước SRC-1322 (10.10.2026) toàn bộ DS-001 nằm trong một file. Nay mỗi trang dưới đây đọc độc lập được; số mục (§0, §2·1·12, §5b...) giữ nguyên trong tiêu đề nên mọi trích dẫn "DS-001 §N" vẫn tra được: tìm số mục ở cột Mục rồi mở đúng trang. Nội dung giữ nguyên chữ, chỉ đổi chỗ.
| Trang | Mục | Nội dung |
|---|---|---|
| DS-001 · Bộ ba bắt buộc và kiến trúc package | §0, §0·1–§0·3, §1, §1·1 | Luật bộ ba Motion, shadcn/ui, Tailwind; cụm trang /style; câu hỏi mở đầu trang www; kiến trúc package và bản sao có máy kiểm. |
| DS-001 · Visual direction v0.4 và Ocean World v1.0 | §2·0, §2·1, §2·1·1–§2·1·10 | 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. |
| DS-001 · Ocean World: dải tối, mặt tối chuẩn và màn learn | §2·1·11–§2·1·18 | Dải tối dùng chung, công thức mặt tối, ba giá trị sửa, learn bỏ nền sáng, thẻ màu đặc, coral/admin/mentors bật hệ màu chung. |
| DS-001 · Ocean World: header, cổng IELTS, contrast và các app còn lại | §2·1·19–§2·1·27 | Header www, cổng IELTS của learn, cổng contrast theo ngữ cảnh, menu avatar, b21 và od-root rời v0.4, marlins kính và màu tín hiệu. |
| DS-001 · Visual v0.3, N12Art, nguồn school và typography | §2, §2c, §2d, §3, §3b, §3c | 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. |
| DS-001 · Hình khối, thanh trên và khổ điện thoại | §4, §4b–§4e | Radius, elevation, motion, touch; thanh trên không tràn khung; mọi trang chạy trên điện thoại; khuôn thanh trên mobile; Soft UI cho www. |
| DS-001 · Lớp component n12-* và luật tối giản | §5 (kèm 4b–4j con), §5b, class phải có CSS | Lớp component n12-*: bong bóng, mascot, Term, accordion, popover, card ba tầng; luật tối giản SRC-048; class gắn lên phần tử phải có CSS. |
| DS-001 · Component React, shadcn, Motion và pattern theo cổng | §5c–§5g, §6, §6b, §6c | Component React dùng chung, shadcn/ui không thành hệ token thứ hai, màn chờ cá bơi, chuyển n12-* sang shadcn, Motion, pattern từng cổng. |
7. Quy tắc sử dụng (QG-007 enforce)
- App không define màu/spacing/radius/shadow mới — chỉ token +
n12-*; style inline chỉ được phép chowidthcủa progress fill vàvar(--accent*). - Không fork/copy component; thiếu pattern → thêm vào package qua PR (một chỗ, mọi app hưởng).
- Đỏ (
--destructive) chỉ cho lỗi hệ thống — không bao giờ cho trạng thái học tập (REQ-UX-03). - Mỗi màn tối đa một nút
n12-btn-accent(REQ-UX-01). Trang cuộn nhiều bước: tính trong tầm nhìn, xem hierarchy.md H-V2. - Dark mode chưa bật (Q-109); tokens semantic sẵn sàng.
Trace
REQ-PLT-06 → §1; REQ-UX-01..10 → §2–§6 (chi tiết + trọng số: PRD-002 §3); REQ-ONB-09 (Tour) và REQ-BRD-06 (FindingNemo) → §5c. QG-007 định nghĩa compliance checks. Câu hỏi mở: Q-107..Q-110.