---
url: https://docs.nemo12.com/design-system/ocean-reef.md
description: >-
  Coral Reef thay Treasure Map (đã thay v0.4): bảng màu DTCG oklch, chữ Inter và
  Nunito, dấu tiếng Việt đã đo, chuẩn audit và lộ trình.
---

# 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 |