---
url: https://docs.nemo12.com/design-system.md
description: >-
  Nemo12 Design System DS-001: mục lục các trang con về bộ ba Motion, shadcn,
  Tailwind, màu Ocean World, kiểu chữ, khung trang, component và luật dùng.
---

# 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](../product/prd-002-learner-ux.md).

## 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](./stack-and-packages.md) | §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](./visual-ocean-world.md) | §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](./ocean-world-dark-surfaces.md) | §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](./ocean-world-rollout.md) | §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](./visual-v03-and-typography.md) | §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](./shape-and-mobile.md) | §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](./components-and-minimal.md) | §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](./react-shadcn-motion.md) | §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)

1. App không define màu/spacing/radius/shadow mới — chỉ token + `n12-*`; style inline chỉ được phép cho `width` của progress fill và `var(--accent*)`.
2. Không fork/copy component; thiếu pattern → thêm vào package qua PR (một chỗ, mọi app hưởng).
3. Đỏ (`--destructive`) chỉ cho lỗi hệ thống — không bao giờ cho trạng thái học tập (REQ-UX-03).
4. 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](./hierarchy.md).
5. 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.