DS-001 · Coral Reef (SRC-1426)

Lịch sử ngắn: 17.10.2026 chủ dự án cho dựng lại Design System theo theme Treasure Map, thay hẳn v0.4 "gần như không màu" (SRC-1425). 18.10.2026 đổi sang theme Coral Reef (web.conan1.com/b/reef-ielts/theme/ocean-reef), bỏ Treasure Map (SRC-1426). Đường ống token dựng ở SRC-1425 giữ nguyên, chỉ đổi giá trị.

Bảng màu

Nguồn duy nhất: packages/design-system/tokens/ocean-reef.tokens.json (W3C DTCG 2025.10, oklch). npm run tokens --workspace @nemo12/design-system sinh khối hex ở cuối tokens/base.css; script từ chối ghi khi một cặp chữ thường dưới 4,5:1, và tokens:check báo khi base.css lệch file JSON.

Vai	Giá trị theme	Dùng
Primary, san hô	oklch(0.66 0.19 45)	Nét, icon, --accent-bright. Nút đặc chữ trắng dùng bản đậm coral-deep
Secondary, xanh lam	oklch(0.68 0.15 235)	Bề mặt phụ qua sky-wash / sky-ink
Accent, vàng nắng	oklch(0.8 0.17 92)	--highlight: chấm, điểm nhấn, chỉ chữ tối
Nền	oklch(0.985 0.0048 220)	Nền trang
Chữ	oklch(0.2 0.018 220)	Chữ chính

• --primary và --accent là coral-deep (chữ trắng đạt AA) vì app có 46 chỗ bg-accent text-white.
• Tên cũ (--n12-ocean-*, foam, sky, mist, coral-*...) nằm trong nhóm legacy của file DTCG nên mọi class cũ tự theo theme. Code mới không dùng tên cũ.
• Mặt tối (--n12-abyss, --n12-deep-*, --card-deep, --nav-surface) là xanh biển sâu cùng sắc với secondary, điểm nhấn trên nền tối là vàng nắng. --card-deep và --nav-surface do script tính.
• Bo góc một giá trị 0.75rem; chuyển động --ease-ink, --dur-path, --dur-wave.

Chữ: vì sao không dùng Fredoka của theme

Theme Coral Reef dùng Fredoka cho tiêu đề. Đo 18.10.2026 ngay trên trang theme: Fredoka không có mặt chữ tiếng Việt, 18 chữ (ề ư ở ẫ đ ế ộ ữ ặ ẩ ỗ ợ Ề Ỗ Đ ă ơ...) bị vẽ bằng một font khác, đúng lỗi "chữ có dấu hiện sai, xấu" mà chủ dự án lo. Thay bằng Nunito: cùng dáng tròn, đủ tiếng Việt.

Kiểm (Chrome, bản build learn)	Arial	Inter (thân)	Nunito 800 (tiêu đề)	Fredoka
Có đủ mặt chữ có dấu	có	có	có	không
line-height tối thiểu, dấu chồng chữ thường	1.09	1.12	1.00	–
line-height tối thiểu, dấu chồng chữ HOA	1.09	1.48	1.42	–

h1 và .n12-display dùng Nunito 800 với line-height 1.45. Giữ luật "không in hoa chữ có dấu" cho chữ thân (Inter cần 1.48). Cả hai font tự host từ @fontsource (ghim 5.3.0) kèm font dự phòng đúng số đo (Arial co giãn theo Inter/Nunito) để lúc đổi font trang không xô lệch.

Gặp lại lỗi dấu: (a) so độ rộng canvas của ký tự với hai font dự phòng khác nhau để biết có rơi sang font khác không, (b) so actualBoundingBoxAscent của dấu với khoảng trống của dòng, (c) sửa line-height của đúng vai chữ đó, không đổi font cả hệ. Chọn theme mới: chạy (a) trên font của theme trước khi dùng.

Sân luyện /ielts theo Reef IELTS app (SRC-1428)

18.10.2026 chủ dự án cho sửa toàn bộ giao diện learn.nemo12.com/ielts theo mẫu web.conan1.com/t/reef-ielts-app (theme ocean-reef, nền sáng). Bố cục không đổi (bốn chỗ Today, Practice, Tests, Progress và Status Card đã khớp mẫu); chỉ đổi hình thức:

• Thanh trên sáng (JourneyShell nhận light, AI Teen giữ thanh sẫm), chữ NEMO màu mực và IELTS màu coral, chỗ đang đứng là pill coral đặc, các tab kỹ năng là pill viền có icon.
• ReefHero (apps/learn/src/ielts/ReefHero.tsx): thẻ đầm phá có rong, quạt san hô, vỏ sò vẽ SVG kích thước cố định, dùng ở bốn trang kỹ năng (giữ đúng một h1) và ở thẻ kỹ năng của Today (h2).
• Mỗi sub-skill là một thẻ riêng: chín chấm ngọc thay chín vạch, phần trăm đúng bên phải ("-" khi chưa đủ câu), mũi tên.

Chuẩn audit

Ba chuẩn công khai gộp thành 10 chiều chấm 0 đến 3: Design System Checklist (designsystemchecklist.com), W3C Design Tokens Community Group format 2025.10, WCAG 2.2 AA. Trước SRC-1425: 17/30. Sau SRC-1425 và SRC-1426: 23/30. Còn thiếu: bộ mascot và icon của theme.

Còn lại

Việc	Cổng ra
Mascot Coral và các nhân vật, bộ icon của theme Coral Reef vào art/ (chờ chủ dự án chỉ nguồn)	cổng cấm emoji xanh
Hiệu ứng bong bóng, sóng	audit:ui 0 giá trị tuỳ ý
Đo PageSpeed mobile sau deploy	≥ 95