---
name: chon-font-design-system
description: "Apply Chọn Font's paper-and-ink style to new web interfaces or when requested, while preserving established product brands."
---

# Hệ thiết kế Paper & Ink

## Mục đích

Dùng đây làm điểm xuất phát mặc định cho trang web mới khi dự án chưa có hệ thiết kế hoặc hướng thương hiệu đã duyệt. Nếu Tuấn chọn phong cách khác hoặc sản phẩm có brand guideline riêng, ưu tiên hướng đó và chỉ mượn những nguyên tắc tương thích.

Lấy cảm hứng từ phòng in thử: giấy trắng, mực đen, chữ rõ, đường phân cách mảnh và nội dung có trật tự. Đây là hệ phong cách, không phải template: không sao chép tên, nội dung, điểm số, câu hỏi hay cấu trúc tính năng của Chọn Font sang sản phẩm khác.

## Màu sắc

| Vai trò | Màu tham chiếu | Dùng cho |
|---|---|---|
| Giấy | `#FFFFFF` | Nền chính |
| Bề mặt phụ | `#F5F5F5` | Sidebar, nhóm lựa chọn, vùng phụ |
| Bề mặt nhấn nhẹ | `#E8E8E8` | Hover hoặc phân biệt cấp nền |
| Chữ chính / mực | `#181818` | Tiêu đề, nội dung và accent |
| Chữ phụ | `#454545` | Mô tả và nội dung thứ cấp |
| Chữ nhẹ | `#626262` | Metadata; giữ đủ tương phản |
| Đường mảnh | `#D6D6D6` | Phân nhóm nội dung |
| Trạng thái chưa trả lời | `#FCEAEA` / `#8A3030` | Chỉ dùng cho trạng thái cần chú ý |

Giữ bảng màu trung tính và một accent mực. Nếu sản phẩm có màu thương hiệu, đặt màu đó vào vai trò accent, giữ cấu trúc phân cấp sáng/tối và kiểm tra tương phản WCAG AA; không ép bảng màu đơn sắc lên brand đã có.

## Chữ

- Hanken Grotesk là font giao diện tham chiếu; Chivo Mono dành cho số liệu. Kiểm tra font tải thật và glyph tiếng Việt trước khi chốt; dùng fallback gần về độ rộng.
- Giữ H1 gọn, có trọng lượng nhưng không phóng quá mức. Thang tham chiếu của Chọn Font là `clamp(1.4rem, .9rem + 1.25vw, 2rem)`; điều chỉnh theo nội dung và thứ bậc trang mới.
- Nội dung chính theo cỡ đọc thoải mái; dòng mô tả và text phụ không nhỏ hơn 12px. Số liệu dùng `tabular-nums` khi cần so sánh theo cột.
- Mô tả, chú thích và metadata dùng hết chiều ngang khả dụng của vùng được giao. Không bó đoạn vào nửa trang hay để lại khoảng trống vô nghĩa; chỉ thu hẹp khi cấu trúc hoặc khả năng đọc ở viewport đó cần.

## Lưới và khoảng cách

- Căn trái nội dung đọc. Dùng Grid/Flex và chiều cao tự nhiên; chia cột theo độ dài nội dung thật.
- Thang spacing tham chiếu: 4, 8, 12, 16, 20, 24, 32, 40, 48 và 64px. Radius nhỏ 3–6px.
- Gutter tham chiếu: khoảng 10vw trên desktop, 5vw dưới 1180px, 16px trên mobile. Co giãn theo chiều rộng nội dung thực; không giữ tỷ lệ gây bó chữ hoặc tràn.
- Header có thể đặt tên/trách nhiệm ở một phía, số liệu thật ở giữa và liên kết phụ ở phía còn lại. Chỉ dùng từng phần khi nội dung đó tồn tại; không tạo KPI hoặc CTA để lấp chỗ.
- Với công cụ nhiều thao tác, có thể dùng sidebar nền xám nhạt sát mép và vùng kết quả nền trắng. Chỉ dùng sidebar khi nó giúp điều hướng hoặc nhập liệu; trên màn hẹp xếp thành cột.
- Phân tách nội dung chủ yếu bằng khoảng trắng, bề mặt sáng khác nhau và đường kẻ mảnh. Tránh card lồng card, viền trang trí dày và shadow trang trí.

## Điều khiển và chi tiết

- Nút chính dùng nền mực và chữ trắng; nút phụ có thể dùng viền mảnh; hành động ít quan trọng dùng liên kết gạch chân.
- Nhóm lựa chọn chưa chọn dùng nền xám nhạt; trạng thái đã chọn dùng nền mực và chữ trắng. Luôn có focus-visible rõ và trạng thái không chỉ dựa vào màu.
- Ưu tiên một bộ icon nhất quán. Solar Icons Bold là lựa chọn tham chiếu của Chọn Font; chỉ thêm icon khi giúp nhận biết hoặc thao tác.
- Chuyển động tiết chế: phản hồi khoảng 120–200ms; reveal có thể dùng chuyển động nhẹ khoảng 300ms. Tôn trọng `prefers-reduced-motion` và không để animation che nội dung hoặc làm layout nhảy.

## Áp dụng cho trang mới

1. Kiểm tra brand, component, font và dữ liệu thật của sản phẩm trước khi dùng các token tham chiếu.
2. Giữ tinh thần giấy–mực, phân cấp chữ, cách dùng khoảng trắng và tương phản; thiết kế lại bố cục theo nhiệm vụ của trang.
3. Ưu tiên component và dependency sẵn có. Không đổi framework, nghiệp vụ hoặc thêm thư viện chỉ để khớp phong cách.
4. Kiểm tra ít nhất desktop, tablet và mobile: glyph tiếng Việt, line-height, căn lề, nội dung dài/ngắn, focus, overflow và trạng thái điều khiển.