Nguyên tắc

P1 thắng P2, P2 thắng P3, và tiếp tục như vậy. Thứ tự này là phần quan trọng nhất của trang, không phải nội dung từng nguyên tắc.

Tương phản, kích thước chạm và thứ tự tiêu điểm là ràng buộc, không phải mục tiêu đánh đổi. Mức ràng buộc là WCAG 2.2 AA. Không có chữ xám nhạt trên nền xám để "trông tinh tế", không có nút 28px để "gọn", không có ring tiêu điểm bị tắt để "sạch".

Kiểm. Đo cặp màu bằng công thức luminance của WCAG. Đo hộp điều khiển bằng devtools. Cả hai đều là số, không phải ý kiến.

Mọi giá trị thị giác đọc từ var(--nf-*). Một giá trị chưa có token nghĩa là token còn thiếu; cách sửa là thêm nó trong 02_tokens/, không phải gõ con số vào component. Mười theme sản phẩm dùng chung một bộ primitive — một hex gõ tay chỉ đúng trong một theme.

Kiểm. grep tìm hex sáu ký tự và px trần trong packages/ui/src/. Kết quả đúng là rỗng.

Dùng phần tử HTML đã mang sẵn ngữ nghĩa và bàn phím. Chỉ thêm ARIA khi không có phần tử gốc nào làm được việc đó. Điều hướng là <a> hoặc Link, không bao giờ là <button> gắn router.push.

Kiểm. Đọc thẻ trong DOM, không đọc class. Nếu phải thêm tabindex để điều khiển hoạt động được thì phần tử đã chọn sai.

Mọi trạng thái người dùng có thể ở trong đều có hình vẽ: mặc định, hover, tiêu điểm, đang bấm, vô hiệu, đang chạy, rỗng, lỗi. Trạng thái không vẽ được là trạng thái sẽ bị bỏ quên — màn hình chỉ có trạng thái đẹp là màn hình chưa hoàn thành.

Kiểm. Đi từng dòng bảng States trên trang live. Nếu một tổ hợp không dựng được trên trang, nó chưa được đặc tả.

Ô chưa được quyết định ghi Unknown và nêu ai quyết cùng điều kiện đóng. Không lấp bằng một giá trị nghe hợp lý — một giá trị đoán trông giống hệt một giá trị đã quyết, và sáu tháng sau không ai phân biệt được.

Kiểm. Mỗi Unknown còn lại trong corpus phải có một dòng trong bảng Open questions nêu ai đóng nó.

Không nói về brand, giọng văn, hay bảng màu. Brand ở assets/brand/ và ở 02_tokens/color.md. Giọng văn ở content-and-language.md. Bảng màu ở 02_tokens/color.md và giá trị sống trong @nexobox/ui.