HỆ THIẾT KẾ NỘI BỘ · DESIGN SYSTEM

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".

v2.3.1 đang chạy production v3.0 spec · Wave 1 LIVE · Wave 2-6 tạm dừng

Thẻ giá trị (tokens)

169

DTCG W3C, 3 file JSON

Thành phần (components)

BEM nhẹ, container query

Trang đã đồng bộ

31/181

v2.3.1 đã áp dụng

Sạch kiểm tra (audit)

98% CSS

CSS 1541→30, A11y 125→0

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ần

Kiể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 tra

Phươ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áp

Kiể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.

reset → tokens (đóng) → base → components → utilities → overrides

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

M1-M8 XONG

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.

v3 Wave 1 LIVE

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.

v3 Wave 2-6 TẠM DỪNG

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).

M9 KẾ TIẾP

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.