Design system
Token thiết kế YeChai, quy tắc dùng màu và khung ảnh tài liệu.
Trang này tóm tắt design system YeChai cho người viết tài liệu và lập trình viên. Nguồn sự thật là thư mục thiết kế trong repo ứng dụng.
Nguồn sự thật
| Nội dung | Tệp nguồn |
|---|---|
| Token màu, chữ, khoảng cách, bo góc, bóng | design/tokens/tokens.css trong repo ứng dụng |
| Đặc tả thiết kế đầy đủ | DESIGN_SPEC.md trong thư mục thiết kế |
| Ảnh nền baseline | Thư mục ảnh chụp thiết kế |
Tệp token trong repo này là bản sao
design/design-tokens.css của site tài liệu là bản sao có ghi nguồn và ngày
sao chép. Khi repo ứng dụng đổi token, phải sao chép lại. Không sửa giá trị trực
tiếp trong bản sao.
Phong cách
YeChai theo phong cách iOS gốc (Apple HIG):
- Font hệ thống, dự phòng Be Vietnam Pro.
- Đường kẻ mảnh 0.5px.
- Segmented control, công tắc kiểu iOS, bottom sheet.
- Hiệu ứng kính mờ với
blur(24px) saturate(180%). - Đổ bóng tông xanh-lục rất nhẹ, không dùng đen thuần.
Không dùng Material Design, không dùng nút nổi kiểu Android hay hiệu ứng gợn sóng.
Màu chủ đạo
| Vai trò | Token | Giá trị |
|---|---|---|
| Nền chuẩn | --color-bg | #EDF1EE |
| Bề mặt | --color-surface | #FFFFFF |
| Bề mặt phụ | --color-surface-subtle | #F5F7F6 |
| Nhấn thương hiệu | --color-accent | #0E9F6E |
| Nhấn khi nhấn | --color-accent-pressed | #0B7F58 |
| Chữ trên nền nhạt | --color-accent-text | #0B5E42 |
| Chữ chính | --color-text | #1C1C1E |
| Chữ phụ | --color-text-tertiary | #6E6E73 |
| Chú thích | --color-text-quaternary | #8E8E93 |
| Nguy hiểm | --color-danger | #D70015 |
| Cảnh báo | --color-warning | #B25E00 |
| Thành công | --color-success | #1A8F4C |
| Thông tin | --color-info | #0060C7 |
Gradient thương hiệu: linear-gradient(140deg, #2E9B7C 0%, #1A7D70 55%, #06676A 100%).
Chỉ một màu nhấn
YeChai chỉ có một màu thương hiệu là xanh lục #0E9F6E. Các màu còn lại là
màu ngữ nghĩa của iOS. Đừng thêm màu nhấn thứ hai.
Quy tắc tương phản đã đo
Các cặp dưới đây đã được đo theo chuẩn WCAG:
| Cặp màu | Tỉ lệ | Kết luận |
|---|---|---|
| Chữ chính trên nền chuẩn | 14.92 | Tốt |
| Chữ phụ trên nền trắng | 5.07 | Dùng được cho nội dung |
| Chữ phụ trên nền chuẩn | 4.45 | Chỉ đạt AA cho chữ lớn |
| Chú thích trên nền phụ | 3.03 | Không dùng cho chữ nhỏ |
| Chú thích trên nền chuẩn | 2.86 | Không dùng cho chữ đọc được |
| Màu nhấn trên nền trắng | 3.39 | Chỉ dùng cho biểu tượng hoặc chữ lớn |
Ba lỗi tương phản thường gặp
- Dùng
#8E8E93cho chú thích trên nền#EDF1EE— tỉ lệ chỉ 2.86. - Dùng
#8E8E93cho tiêu đề bảng cỡ 11–12px. - Dùng
#0E9F6Echo đoạn văn dài — hãy dùng#0B5E42.
Chữ
| Token | Giá trị | Dùng cho |
|---|---|---|
--font-body | SF Pro Text, Be Vietnam Pro | Nội dung |
--font-heading | SF Pro Display, Be Vietnam Pro | Tiêu đề |
--font-mono | SF Mono, Menlo | Mã đơn, mã OTP |
--text-base | 14px | Nội dung chuẩn |
--text-sm | 12px | Chú thích, tiêu đề bảng |
--text-4xl | 24px | Tiêu đề trang |
Trọng số phổ biến nhất là 600. Tiêu đề bảng dùng chữ in hoa với giãn chữ nhẹ.
Bo góc và khoảng cách
| Token | Giá trị | Dùng cho |
|---|---|---|
--radius-md | 12px | Ô nhập, nút |
--radius-xl | 16px | Thẻ |
--radius-2xl | 20px | Thẻ lớn |
--radius-3xl | 22px | Chip |
--radius-4xl | 24px | Hộp thoại, bottom sheet |
Khoảng cách theo nhịp 2px. Giá trị dùng nhiều nhất là 8, 10 và 12px.
Bóng
| Token | Giá trị |
|---|---|
--shadow-card | 0 10px 30px rgba(20, 40, 30, 0.06) |
--shadow-menu | 0 6px 20px rgba(20, 40, 30, 0.1) |
--shadow-modal | 0 30px 80px rgba(0, 0, 0, 0.25) |
--shadow-accent | 0 6px 18px rgba(14, 159, 110, 0.25) |
Khung ảnh trong tài liệu
Tài liệu dùng đúng hai loại khung, chọn theo ứng dụng được chụp:
| Khung | Dùng cho | Kích thước |
|---|---|---|
| Khung trình duyệt | Trang quản trị | 1440 × 900 |
| Khung điện thoại | App người dân | 402 × 874 |
Khung được vẽ bằng CSS, không nằm trong ảnh
Phần khung do component trong tài liệu vẽ, nên ảnh gốc không bị đóng khung hai lần và có thể đổi khung mà không phải chụp lại. Ngược lại, vùng tập trung được đốt thẳng vào pixel ảnh lúc chụp.
Vùng tập trung
Khi ảnh cần chỉ rõ một phần tử, vùng cần chú ý được giữ sáng còn phần xung quanh
tối đi 55%, kèm viền xanh #0E9F6E dày 2px và bo góc 14px.
Quy ước khi viết tài liệu:
- Chỉ dùng vùng tập trung khi ảnh thực sự cần chỉ một điểm.
- Không dùng cho ảnh toàn màn hình chỉ để trang trí.
- Nếu vùng sáng bị lệch hoặc che mất chữ quan trọng, bỏ vùng tập trung thay vì để ảnh sai.
Quy tắc viết tài liệu
- Nội dung và nhãn phải khớp nguyên văn với ứng dụng. Không diễn giải lại tên nút.
- Mỗi ảnh phải có chú thích mô tả đúng việc đang diễn ra.
- Không mô tả một màn hình là đang hoạt động nếu ảnh cho thấy thông báo lỗi hoặc dữ liệu rỗng. Ghi đúng thực tế.