Một bộ thẻ giá trị, thành phần, quy tắc chung cho toàn hệ Sinh Vũ
169 thẻ giá trị (token) chuẩn W3C DTCG v2025.10, 10 thành phần giao diện (component), tài liệu cho người và trợ lý lập trình (AI agent), cổng kiểm tra tự động ngăn giá trị thô lọt vào sản phẩm. Minh chứng sống cho định vị "Studio thiết kế thương hiệu vận hành, 16 năm tại Việt Nam".
Khám phá / Explore
Thẻ giá trị (Tokens)
Bảng màu, thang chữ (type scale), khoảng cách (spacing), bo góc (radius), bóng đổ (shadow), chuyển động (motion). DTCG JSON là nguồn dữ liệu duy nhất (Single Source of Truth).
Xem 169 thẻ giá trịThành phần (Components)
10 thành phần giao diện xem trực tiếp: nút bấm, thẻ, chip, bóng thoại, ô nhập, nút nổi (FAB), hộp thoại, thanh tiến trình, khối CTA, bộ chọn vai.
Mở thư viện thành phầnKiểm tra tự động (Audit)
Theo dõi vi phạm CSS + WCAG 2.2 theo từng file. Cổng kiểm tra trước triển khai (pre-deploy linter) ngăn giá trị thô lọt vào sản phẩm.
Mở bảng kiểm traPhương pháp (Methodology)
Cách hoạt động, cách vận hành, khách hàng nhận được gì. Tài liệu hệ thống hoá dành riêng cho khách quan tâm gói O2 Brand Operating System.
Đọc phương phápKiểm thử bộ chữ (Font test)
So sánh 4 font Noto family (Sans, Sans Display, Serif Display, Sans Mono) trên dấu tiếng Việt, kích thước, hierarchy heading. Xác thực font chính thức Sinh Vũ.
Mở trang kiểm thửKiến trúc thư mục / Architecture
assets/ ├── tokens/ , DTCG W3C v2025.10 (nguồn dữ liệu duy nhất) │ ├── core.tokens.json , giá trị gốc (primitive) │ ├── semantic.tokens.json , bí danh theo công dụng (alias) │ └── brand-sinhvu.tokens.json , lớp thương hiệu (brand skin) ├── build/ │ ├── build-tokens.js , biên dịch JSON → CSS │ └── migrate-*.js , kịch bản chuyển đổi (M3/M4/M5) ├── css/ │ ├── index.css , điểm vào + thứ tự @layer │ ├── 0-tokens.css , sinh ra từ JSON │ ├── 1-reset.css , đặt lại CSS hiện đại │ ├── 2-base.css , typography + container │ ├── 3-components/ , 10 file thành phần │ └── 4-utilities.css , lớp tiện ích ├── docs/ │ ├── SPEC.md , nguyên lý cho người + AI │ ├── AGENTS.md , 7 quy tắc cứng cho LLM │ └── audit.md , danh sách giá trị thô bị cấm └── audit/ └── scan.js , cổng kiểm tra trước triển khai
Thứ tự lớp CSS / Cascade layers
Lớp đứng sau có quyền ghi đè lớp đứng trước. Thẻ giá trị (tokens) đóng kín, thành phần không thể ghi đè token gốc.
Cách dùng trong dự án / Integration
Tự động tải tokens + reset + base + 10 thành phần + utilities với @layer đúng thứ tự.
Lộ trình / Roadmap
Nền móng + chuyển đổi
Tokens DTCG, 10 thành phần, 31 trang đã chuyển đổi, audit giảm 92%, CI gate 4 kiểm tra. Hoàn tất 2026-06-01.
Tokens v3 + shadow nhiều lớp
Token palette mới, bóng đổ navy-tinted nhiều lớp, dòng tiếng Việt +0.1em, Cảnh báo AA fix. Ship 2026-06-10.
Buttons / Cards / Nav / Modal / Pattern
Tạm dừng do va chạm tên lớp với v2.3.1 production. Sẽ tiếp tục khi anh Sinh duyệt approach B (namespace .sv-v3-*) hoặc C (full migrate).
Mở rộng audit + đồng bộ thêm trang
Tăng số trang đồng bộ từ 31 lên toàn bộ 181. Mở rộng CI gate với contract validator, mobile-fit, background consistency.